extra.css
1 :root { 2 /* Modern Grayscale Color Variables */ 3 --md-primary-fg-color: #000000; 4 --md-primary-fg-color--light: #333333; 5 --md-primary-fg-color--dark: #000000; 6 --md-accent-fg-color: #000000; 7 8 /* Typography improvements */ 9 --md-text-font-family: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; 10 --md-code-font-family: "JetBrains Mono", "Fira Code", monospace; 11 } 12 13 /* Light Mode Specifics */ 14 [data-md-color-scheme="default"] { 15 --md-primary-fg-color: #2e3440; /* Dark Gray */ 16 --md-accent-fg-color: #4c566a; /* Medium Gray */ 17 } 18 19 /* Dark Mode Specifics */ 20 [data-md-color-scheme="slate"] { 21 --md-primary-fg-color: #eceff4; /* Off-white */ 22 --md-accent-fg-color: #d8dee9; /* Light Gray */ 23 --md-default-bg-color: #1a1a1a; /* Darker background for better contrast */ 24 } 25 26 /* Modern UI Tweaks */ 27 .md-header { 28 background-color: var(--md-default-bg-color); 29 border-bottom: 1px solid var(--md-default-fg-color--lightest); 30 box-shadow: none; 31 } 32 33 .md-tabs { 34 background-color: var(--md-default-bg-color); 35 border-bottom: 1px solid var(--md-default-fg-color--lightest); 36 } 37 38 /* Clean up links */ 39 a { 40 text-decoration: none; 41 transition: opacity 0.2s ease; 42 } 43 44 a:hover { 45 opacity: 0.7; 46 } 47 48 /* Improve table styling */ 49 .md-typeset table:not([class]) { 50 border-radius: 4px; 51 overflow: hidden; 52 box-shadow: 0 0 0 1px var(--md-default-fg-color--lightest); 53 } 54 55 /* Minimalist button styles */ 56 .md-button { 57 border-radius: 4px; 58 font-weight: 500; 59 letter-spacing: 0.5px; 60 } 61