211 lines · 6.4 KB · CSS
RawDownload
/* Globals */ :root {  --color-scheme: light;   --logo-brightness: brightness(1);   --sidebar-width: 280px;  --sidebar-resize-indicator-width: 0px;  --sidebar-resize-indicator-space: 2px;  --page-padding: 15px;  --content-max-width: 690px;  --menu-bar-height: 64px;  --font: "iA Writer Quattro S", sans-serif;  --title-font:    "IBM Plex Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;  --mono-font:    "Lilex", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,    Liberation Mono, Courier New, monospace;  --code-font-size: 0.875em    /* please adjust the ace font size accordingly in editor.js */;   --noise-opacity: 0.024;  --bg: hsla(50, 25%, 96%);  --fg: hsl(220, 13%, 34%);  --title-color: hsl(220, 92%, 42%);   --border: hsl(220, 13%, 80%);  --border-light: hsl(220, 13%, 90%);  --border-hover: hsl(220, 13%, 70%);  --border-footer: hsl(220, 13%, 91%);   --media-bg: hsl(50, 25%, 92%);   --sidebar-bg: hsla(50, 25%, 94%);  --sidebar-fg: hsl(0, 0%, 0%);  --sidebar-non-existant: #aaaaaa;  --sidebar-active: hsl(220, 93%, 42%);  --sidebar-active-bg: hsl(220, 93%, 42%, 0.1);  --sidebar-mobile-shadow: 0px 16px 16px hsl(0, 0%, 0%, 0.1);   --divider: hsl(220, 50%, 45%, 0.1);  --scrollbar: #8f8f8f;   --icons: #747474;  --icons-hover: #000000;  --icon-btn-bg-hover: hsl(220, 93%, 42%, 0.15);   --links: hsl(220, 92%, 42%);  --link-line-decoration: hsl(220, 93%, 42%, 0.2);  --link-line-decoration-hover: hsl(220, 93%, 42%, 0.5);   --full-contrast: #000;   --inline-code-color: #301900;  --code-text: hsl(220, 13%, 10%);  --code-bg: hsl(220, 93%, 42%, 0.1);  --keybinding-bg: hsl(0, 0%, 94%);   --pre-bg: #fff;  --pre-border: hsla(220, 93%, 42%, 0.3);  --pre-shadow: hsla(220, 93%, 42%, 0.07);   --popover-bg: #fafafa;  --popover-border: #cccccc;  --popover-shadow:    0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1);   --theme-hover: #e6e6e6;  --hover-section-title: hsl(50, 25%, 88%);   --quote-bg: hsl(197, 37%, 96%);  --quote-border: hsl(197, 37%, 84%);   --warning-border: hsl(25, 100%, 85%);  --warning-bg: hsl(42, 100%, 60%, 0.1);  --warning-icon: hsl(42, 100%, 30%);   --table-header-bg: hsl(220, 50%, 90%, 0.4);  --table-border-color: hsl(220, 93%, 42%, 0.15);  --table-alternate-bg: hsl(220, 10%, 90%, 0.4);   --toc-link-underline: hsl(0, 0%, 0%, 0.1);  --toc-link-underline-hover: hsl(0, 0%, 0%, 0.5);   --searchbar-border-color: #aaa;  --searchbar-bg: #fafafa;  --searchbar-fg: #000;  --searchbar-shadow-color: #aaa;  --searchresults-header-fg: #666;  --searchresults-li-bg: #e4f2fe;  --search-mark-bg: #a2cff5;   --download-btn-bg: hsl(220, 60%, 95%);  --download-btn-bg-hover: hsl(220, 60%, 93%);  --download-btn-color: hsl(220, 60%, 30%);  --download-btn-border: hsla(220, 60%, 40%, 0.2);  --download-btn-border-hover: hsla(220, 60%, 50%, 0.2);  --download-btn-shadow: hsla(220, 40%, 60%, 0.1);   --search-btn-bg: hsl(220, 100%, 100%);  --search-btn-bg-hover: hsla(50, 25%, 97%);  --search-btn-border: hsl(220, 50%, 45%, 0.2);   --toast-bg: hsla(220, 93%, 98%);  --toast-border: hsla(220, 93%, 42%, 0.3);  --toast-border-success: hsla(120, 73%, 42%, 0.3);  --toast-border-error: hsla(0, 90%, 50%, 0.3);   --footer-btn-bg: hsl(220, 60%, 98%, 0.4);  --footer-btn-bg-hover: hsl(220, 60%, 93%, 0.5);  --footer-btn-border: hsla(220, 60%, 40%, 0.15);  --footer-btn-border-hover: hsla(220, 60%, 50%, 0.2);} .dark {  --color-scheme: dark;   --logo-brightness: brightness(2);   --noise-opacity: 0.012;  --bg: hsl(220, 13%, 7.5%);  --fg: hsl(220, 14%, 70%);  --title-color: hsl(220, 92%, 80%);   --border: hsl(220, 13%, 20%);  --border-light: hsl(220, 13%, 15%);  --border-hover: hsl(220, 13%, 40%);  --border-footer: hsl(220, 13%, 12%);   --media-bg: hsl(220, 13%, 8%);   --sidebar-bg: hsl(220, 13%, 6.5%);  --sidebar-fg: hsl(220, 14%, 71%);  --sidebar-non-existant: #505254;  --sidebar-active: hsl(220, 92%, 75%);  --sidebar-active-bg: hsl(220, 93%, 42%, 0.25);  --sidebar-mobile-shadow: 0px 16px 16px hsl(0, 0%, 0%, 0.6);   --divider: hsl(220, 13%, 12%);  --scrollbar: hsl(220, 13%, 30%);   --icons: hsl(220, 14%, 71%);  --icons-hover: hsl(220, 14%, 90%);  --icon-btn-bg-hover: hsl(220, 93%, 42%, 0.4);   --links: hsl(220, 93%, 75%);  --link-line-decoration: hsl(220, 92%, 80%, 0.4);  --link-line-decoration-hover: hsl(220, 92%, 80%, 0.8);  --full-contrast: #fff;   --inline-code-color: hsl(40, 100%, 80%);  --code-text: hsl(220, 13%, 95%);  --code-bg: hsl(220, 93%, 50%, 0.2);  --keybinding-bg: hsl(220, 20%, 10%);   --pre-bg: hsl(220, 13%, 5%);  --pre-border: hsla(220, 93%, 70%, 0.3);  --pre-shadow: hsla(220, 93%, 70%, 0.1);   --popover-bg: hsl(220, 13%, 8%);  --popover-border: hsl(220, 13%, 20%);  --popover-shadow:    0 10px 15px -3px hsl(0, 0%, 0%, 0.1), 0 4px 6px -4px hsl(0, 0%, 0%, 0.1);   --theme-hover: hsl(220, 13%, 20%);  --hover-section-title: hsl(220, 13%, 11%);   --quote-bg: hsl(220, 13%, 25%, 0.4);  --quote-border: hsl(220, 13%, 32%, 0.5);   --table-border-color: hsl(220, 13%, 30%, 0.5);  --table-header-bg: hsl(220, 13%, 25%, 0.5);  --table-alternate-bg: hsl(220, 13%, 20%, 0.4);   --toc-link-underline: hsl(255, 100%, 100%, 0.1);  --toc-link-underline-hover: hsl(255, 100%, 100%, 0.4);   --warning-border: hsl(25, 100%, 85%, 0.2);  --warning-bg: hsl(42, 100%, 40%, 0.1);  --warning-icon: hsl(42, 100%, 80%);   --searchbar-border-color: hsl(220, 13%, 30%);  --searchbar-bg: hsl(220, 13%, 22%, 0.5);  --searchbar-fg: hsl(220, 14%, 71%);  --searchbar-shadow-color: hsl(220, 13%, 15%);  --searchresults-header-fg: hsl(220, 14%, 60%);  --searchresults-li-bg: hsl(220, 13%, 25%);  --search-mark-bg: hsl(220, 93%, 60%);   --download-btn-bg: hsl(220, 90%, 30%, 0.5);  --download-btn-bg-hover: hsl(220, 90%, 50%, 0.4);  --download-btn-color: hsl(220, 90%, 95%);  --download-btn-border: hsla(220, 90%, 80%, 0.2);  --download-btn-border-hover: hsla(220, 90%, 80%, 0.4);  --download-btn-shadow: hsla(220, 50%, 60%, 0.15);   --search-btn-bg: hsl(220, 90%, 90%, 0.05);  --search-btn-bg-hover: hsl(220, 90%, 90%, 0.1);  --search-btn-border: hsla(220, 90%, 80%, 0.1);   --toast-bg: hsla(220, 20%, 98%, 0.05);  --toast-border: hsla(220, 93%, 70%, 0.2);  --toast-border-success: hsla(120, 90%, 60%, 0.3);  --toast-border-error: hsla(0, 90%, 80%, 0.3);   --footer-btn-bg: hsl(220, 90%, 95%, 0.01);  --footer-btn-bg-hover: hsl(220, 90%, 50%, 0.05);  --footer-btn-border: hsla(220, 90%, 90%, 0.05);  --footer-btn-border-hover: hsla(220, 90%, 80%, 0.2);}