| |
| /* Globals */ |
| |
| :root { |
| --sidebar-width: 300px; |
| --page-padding: 15px; |
| --content-max-width: 750px; |
| --menu-bar-height: 50px; |
| } |
| |
| /* Themes */ |
| |
| .ayu { |
| --bg: hsl(210, 25%, 8%); |
| --fg: #c5c5c5; |
| |
| --sidebar-bg: #14191f; |
| --sidebar-fg: #c8c9db; |
| --sidebar-non-existant: #5c6773; |
| --sidebar-active: #ffb454; |
| --sidebar-spacer: #2d334f; |
| |
| --scrollbar: var(--sidebar-fg); |
| |
| --icons: #737480; |
| --icons-hover: #b7b9cc; |
| |
| --links: #0096cf; |
| |
| --inline-code-color: #ffb454; |
| |
| --theme-popup-bg: #14191f; |
| --theme-popup-border: #5c6773; |
| --theme-hover: #191f26; |
| |
| --quote-bg: hsl(226, 15%, 17%); |
| --quote-border: hsl(226, 15%, 22%); |
| |
| --table-border-color: hsl(210, 25%, 13%); |
| --table-header-bg: hsl(210, 25%, 28%); |
| --table-alternate-bg: hsl(210, 25%, 11%); |
| |
| --searchbar-border-color: #848484; |
| --searchbar-bg: #424242; |
| --searchbar-fg: #fff; |
| --searchbar-shadow-color: #d4c89f; |
| --searchresults-header-fg: #666; |
| --searchresults-border-color: #888; |
| --searchresults-li-bg: #252932; |
| --search-mark-bg: #e3b171; |
| } |
| |
| .coal { |
| --bg: hsl(200, 7%, 8%); |
| --fg: #98a3ad; |
| |
| --sidebar-bg: #292c2f; |
| --sidebar-fg: #a1adb8; |
| --sidebar-non-existant: #505254; |
| --sidebar-active: #3473ad; |
| --sidebar-spacer: #393939; |
| |
| --scrollbar: var(--sidebar-fg); |
| |
| --icons: #43484d; |
| --icons-hover: #b3c0cc; |
| |
| --links: #2b79a2; |
| |
| --inline-code-color: #c5c8c6;; |
| |
| --theme-popup-bg: #141617; |
| --theme-popup-border: #43484d; |
| --theme-hover: #1f2124; |
| |
| --quote-bg: hsl(234, 21%, 18%); |
| --quote-border: hsl(234, 21%, 23%); |
| |
| --table-border-color: hsl(200, 7%, 13%); |
| --table-header-bg: hsl(200, 7%, 28%); |
| --table-alternate-bg: hsl(200, 7%, 11%); |
| |
| --searchbar-border-color: #aaa; |
| --searchbar-bg: #b7b7b7; |
| --searchbar-fg: #000; |
| --searchbar-shadow-color: #aaa; |
| --searchresults-header-fg: #666; |
| --searchresults-border-color: #98a3ad; |
| --searchresults-li-bg: #2b2b2f; |
| --search-mark-bg: #355c7d; |
| } |
| |
| .light { |
| --bg: hsl(0, 0%, 100%); |
| --fg: #333333; |
| |
| --sidebar-bg: #fafafa; |
| --sidebar-fg: #364149; |
| --sidebar-non-existant: #aaaaaa; |
| --sidebar-active: #008cff; |
| --sidebar-spacer: #f4f4f4; |
| |
| --scrollbar: #cccccc; |
| |
| --icons: #cccccc; |
| --icons-hover: #333333; |
| |
| --links: #4183c4; |
| |
| --inline-code-color: #6e6b5e; |
| |
| --theme-popup-bg: #fafafa; |
| --theme-popup-border: #cccccc; |
| --theme-hover: #e6e6e6; |
| |
| --quote-bg: hsl(197, 37%, 96%); |
| --quote-border: hsl(197, 37%, 91%); |
| |
| --table-border-color: hsl(0, 0%, 95%); |
| --table-header-bg: hsl(0, 0%, 80%); |
| --table-alternate-bg: hsl(0, 0%, 97%); |
| |
| --searchbar-border-color: #aaa; |
| --searchbar-bg: #fafafa; |
| --searchbar-fg: #000; |
| --searchbar-shadow-color: #aaa; |
| --searchresults-header-fg: #666; |
| --searchresults-border-color: #888; |
| --searchresults-li-bg: #e4f2fe; |
| --search-mark-bg: #a2cff5; |
| } |
| |
| .navy { |
| --bg: hsl(226, 23%, 11%); |
| --fg: #bcbdd0; |
| |
| --sidebar-bg: #282d3f; |
| --sidebar-fg: #c8c9db; |
| --sidebar-non-existant: #505274; |
| --sidebar-active: #2b79a2; |
| --sidebar-spacer: #2d334f; |
| |
| --scrollbar: var(--sidebar-fg); |
| |
| --icons: #737480; |
| --icons-hover: #b7b9cc; |
| |
| --links: #2b79a2; |
| |
| --inline-code-color: #c5c8c6;; |
| |
| --theme-popup-bg: #161923; |
| --theme-popup-border: #737480; |
| --theme-hover: #282e40; |
| |
| --quote-bg: hsl(226, 15%, 17%); |
| --quote-border: hsl(226, 15%, 22%); |
| |
| --table-border-color: hsl(226, 23%, 16%); |
| --table-header-bg: hsl(226, 23%, 31%); |
| --table-alternate-bg: hsl(226, 23%, 14%); |
| |
| --searchbar-border-color: #aaa; |
| --searchbar-bg: #aeaec6; |
| --searchbar-fg: #000; |
| --searchbar-shadow-color: #aaa; |
| --searchresults-header-fg: #5f5f71; |
| --searchresults-border-color: #5c5c68; |
| --searchresults-li-bg: #242430; |
| --search-mark-bg: #a2cff5; |
| } |
| |
| .rust { |
| --bg: hsl(60, 9%, 87%); |
| --fg: #262625; |
| |
| --sidebar-bg: #3b2e2a; |
| --sidebar-fg: #c8c9db; |
| --sidebar-non-existant: #505254; |
| --sidebar-active: #e69f67; |
| --sidebar-spacer: #45373a; |
| |
| --scrollbar: var(--sidebar-fg); |
| |
| --icons: #737480; |
| --icons-hover: #262625; |
| |
| --links: #2b79a2; |
| |
| --inline-code-color: #6e6b5e; |
| |
| --theme-popup-bg: #e1e1db; |
| --theme-popup-border: #b38f6b; |
| --theme-hover: #99908a; |
| |
| --quote-bg: hsl(60, 5%, 75%); |
| --quote-border: hsl(60, 5%, 70%); |
| |
| --table-border-color: hsl(60, 9%, 82%); |
| --table-header-bg: #b3a497; |
| --table-alternate-bg: hsl(60, 9%, 84%); |
| |
| --searchbar-border-color: #aaa; |
| --searchbar-bg: #fafafa; |
| --searchbar-fg: #000; |
| --searchbar-shadow-color: #aaa; |
| --searchresults-header-fg: #666; |
| --searchresults-border-color: #888; |
| --searchresults-li-bg: #dec2a2; |
| --search-mark-bg: #e69f67; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .light.no-js { |
| --bg: hsl(200, 7%, 8%); |
| --fg: #98a3ad; |
| |
| --sidebar-bg: #292c2f; |
| --sidebar-fg: #a1adb8; |
| --sidebar-non-existant: #505254; |
| --sidebar-active: #3473ad; |
| --sidebar-spacer: #393939; |
| |
| --scrollbar: var(--sidebar-fg); |
| |
| --icons: #43484d; |
| --icons-hover: #b3c0cc; |
| |
| --links: #2b79a2; |
| |
| --inline-code-color: #c5c8c6;; |
| |
| --theme-popup-bg: #141617; |
| --theme-popup-border: #43484d; |
| --theme-hover: #1f2124; |
| |
| --quote-bg: hsl(234, 21%, 18%); |
| --quote-border: hsl(234, 21%, 23%); |
| |
| --table-border-color: hsl(200, 7%, 13%); |
| --table-header-bg: hsl(200, 7%, 28%); |
| --table-alternate-bg: hsl(200, 7%, 11%); |
| |
| --searchbar-border-color: #aaa; |
| --searchbar-bg: #b7b7b7; |
| --searchbar-fg: #000; |
| --searchbar-shadow-color: #aaa; |
| --searchresults-header-fg: #666; |
| --searchresults-border-color: #98a3ad; |
| --searchresults-li-bg: #2b2b2f; |
| --search-mark-bg: #355c7d; |
| } |
| } |