| /* Part of the Crubit project, under the Apache License v2.0 with LLVM | |
| * Exceptions. See /LICENSE for license information. | |
| * SPDX-License-Identifier: Apache-2.0 WITH LLVM-exception | |
| */ | |
| /* Globals */ | |
| :root { | |
| --sidebar-target-width: 300px; | |
| --sidebar-width: min(var(--sidebar-target-width), 80vw); | |
| --sidebar-resize-indicator-width: 8px; | |
| --sidebar-resize-indicator-space: 2px; | |
| --page-padding: 15px; | |
| --content-max-width: 750px; | |
| --menu-bar-height: 50px; | |
| --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; | |
| --code-font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */ | |
| --searchbar-margin-block-start: 5px; | |
| } | |
| /* 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%); | |
| --warning-border: #ff8e00; | |
| --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; | |
| --color-scheme: dark; | |
| /* Same as `--icons` */ | |
| --copy-button-filter: invert(45%) sepia(6%) saturate(621%) hue-rotate(198deg) brightness(99%) contrast(85%); | |
| /* Same as `--sidebar-active` */ | |
| --copy-button-filter-hover: invert(68%) sepia(55%) saturate(531%) hue-rotate(341deg) brightness(104%) contrast(101%); | |
| --footnote-highlight: #2668a6; | |
| --overlay-bg: rgba(33, 40, 48, 0.4); | |
| --blockquote-note-color: #74b9ff; | |
| --blockquote-tip-color: #09ca09; | |
| --blockquote-important-color: #d3abff; | |
| --blockquote-warning-color: #f0b72f; | |
| --blockquote-caution-color: #f21424; | |
| --sidebar-header-border-color: #c18639; | |
| } | |
| .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%); | |
| --warning-border: #ff8e00; | |
| --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; | |
| --color-scheme: dark; | |
| /* Same as `--icons` */ | |
| --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%); | |
| /* Same as `--sidebar-active` */ | |
| --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%); | |
| --footnote-highlight: #4079ae; | |
| --overlay-bg: rgba(33, 40, 48, 0.4); | |
| --blockquote-note-color: #4493f8; | |
| --blockquote-tip-color: #08ae08; | |
| --blockquote-important-color: #ab7df8; | |
| --blockquote-warning-color: #d29922; | |
| --blockquote-caution-color: #d91b29; | |
| --sidebar-header-border-color: #3473ad; | |
| } | |
| .light, html:not(.js) { | |
| --bg: hsl(0, 0%, 100%); | |
| --fg: hsl(0, 0%, 0%); | |
| --sidebar-bg: #fafafa; | |
| --sidebar-fg: hsl(0, 0%, 0%); | |
| --sidebar-non-existant: #aaaaaa; | |
| --sidebar-active: #1f1fff; | |
| --sidebar-spacer: #f4f4f4; | |
| --scrollbar: #8F8F8F; | |
| --icons: #747474; | |
| --icons-hover: #000000; | |
| --links: #20609f; | |
| --inline-code-color: #301900; | |
| --theme-popup-bg: #fafafa; | |
| --theme-popup-border: #cccccc; | |
| --theme-hover: #e6e6e6; | |
| --quote-bg: hsl(197, 37%, 96%); | |
| --quote-border: hsl(197, 37%, 91%); | |
| --warning-border: #ff8e00; | |
| --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; | |
| --color-scheme: light; | |
| /* Same as `--icons` */ | |
| --copy-button-filter: invert(45.49%); | |
| /* Same as `--sidebar-active` */ | |
| --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%) hue-rotate(243deg) brightness(99%) contrast(130%); | |
| --footnote-highlight: #7e7eff; | |
| --overlay-bg: rgba(200, 200, 205, 0.4); | |
| --blockquote-note-color: #0969da; | |
| --blockquote-tip-color: #008000; | |
| --blockquote-important-color: #8250df; | |
| --blockquote-warning-color: #9a6700; | |
| --blockquote-caution-color: #b52731; | |
| --sidebar-header-border-color: #6e6edb; | |
| } | |
| .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%); | |
| --warning-border: #ff8e00; | |
| --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; | |
| --color-scheme: dark; | |
| /* Same as `--icons` */ | |
| --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%) contrast(87%); | |
| /* Same as `--sidebar-active` */ | |
| --copy-button-filter-hover: invert(46%) sepia(20%) saturate(1537%) hue-rotate(156deg) brightness(85%) contrast(90%); | |
| --footnote-highlight: #4079ae; | |
| --overlay-bg: rgba(33, 40, 48, 0.4); | |
| --blockquote-note-color: #4493f8; | |
| --blockquote-tip-color: #09ca09; | |
| --blockquote-important-color: #ab7df8; | |
| --blockquote-warning-color: #d29922; | |
| --blockquote-caution-color: #f21424; | |
| --sidebar-header-border-color: #2f6ab5; | |
| } | |
| .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%); | |
| --warning-border: #ff8e00; | |
| --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; | |
| /* Same as `--icons` */ | |
| --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%) contrast(87%); | |
| /* Same as `--sidebar-active` */ | |
| --copy-button-filter-hover: invert(77%) sepia(16%) saturate(1798%) hue-rotate(328deg) brightness(98%) contrast(83%); | |
| --footnote-highlight: #d3a17a; | |
| --overlay-bg: rgba(150, 150, 150, 0.25); | |
| --blockquote-note-color: #023b95; | |
| --blockquote-tip-color: #007700; | |
| --blockquote-important-color: #8250df; | |
| --blockquote-warning-color: #603700; | |
| --blockquote-caution-color: #aa1721; | |
| --sidebar-header-border-color: #8c391f; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| html:not(.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%); | |
| --warning-border: #ff8e00; | |
| --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; | |
| --color-scheme: dark; | |
| /* Same as `--icons` */ | |
| --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%); | |
| /* Same as `--sidebar-active` */ | |
| --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%); | |
| --footnote-highlight: #4079ae; | |
| --overlay-bg: rgba(33, 40, 48, 0.4); | |
| --blockquote-note-color: #4493f8; | |
| --blockquote-tip-color: #08ae08; | |
| --blockquote-important-color: #ab7df8; | |
| --blockquote-warning-color: #d29922; | |
| --blockquote-caution-color: #d91b29; | |
| --sidebar-header-border-color: #3473ad; | |
| } | |
| } |