github.com/kyleu/dbaudit@v0.0.2-0.20240321155047-ff2f2c940496/client/src/style/vars.css (about) 1 /* Content managed by Project Forge, see [projectforge.md] for details. */ 2 /* Additional theme styles are provided inline in the HTML, based on user settings */ 3 :root { 4 --padding: 12px; 5 --padding-small: 6px; 6 --menu-padding: 8px; 7 --text-height: 24px; 8 --nav-height: 48px; 9 --menu-width: 256px; 10 } 11 12 .only-light { display: inline-block; } 13 .only-dark { display: none; } 14 .mode-light .only-light { display: inline-block; } 15 .mode-light .only-dark { display: none; } 16 .mode-dark .only-light { display: none; } 17 .mode-dark .only-dark { display: inline-block; } 18 19 @media (prefers-color-scheme: dark) { 20 .only-light { display: none; } 21 .only-dark { display: inline-block; } 22 .mode-light .only-light { display: none; } 23 .mode-light .only-dark { display: inline-block; } 24 .mode-dark .only-light { display: inline-block; } 25 .mode-dark .only-dark { display: none; } 26 } 27 28 /* light chroma */ 29 .chroma { --chroma-fg: #272822; --chroma-bg: #fafafa; --chroma-highlight-bg: #e1e1e1; --chroma-keyword: #00a8c8; --chroma-namespace: #f92672; --chroma-line-numbers: #7f7f7f; --chroma-comment: #75715e; --chroma-literal: #ae81ff; --chroma-literal-string: #d88200; --chroma-literal-escape: #8045ff; --chroma-name: #111111; --chroma-attribute: #75af00; --chroma-class: #75af00; --chroma-decorator: #75af00; --chroma-exception: #75af00; --chroma-function: #75af00; --chroma-other: #75af00; --chroma-punctuation: #111111; } 30 .mode-light .chroma { --chroma-fg: #272822; --chroma-bg: #fafafa; --chroma-highlight-bg: #e1e1e1; --chroma-keyword: #00a8c8; --chroma-namespace: #f92672; --chroma-line-numbers: #7f7f7f; --chroma-comment: #75715e; --chroma-literal: #ae81ff; --chroma-literal-string: #d88200; --chroma-literal-escape: #8045ff; --chroma-name: #111111; --chroma-attribute: #75af00; --chroma-class: #75af00; --chroma-decorator: #75af00; --chroma-exception: #75af00; --chroma-function: #75af00; --chroma-other: #75af00; --chroma-punctuation: #111111; } 31 .mode-dark .chroma { --chroma-fg: #f8f8f2; --chroma-bg: #282a36; --chroma-highlight-bg: #282a36; --chroma-keyword: #ff79c6; --chroma-namespace: #ff79c6; --chroma-line-numbers: #cdcdcd; --chroma-comment: #6272a4; --chroma-literal: #f1fa8c; --chroma-literal-string: #f1fa8c; --chroma-literal-escape: #f1fa8c; --chroma-name: #f8f8f2; --chroma-attribute: #50fa7b; --chroma-class: #50fa7b; --chroma-decorator: #f8f8f2; --chroma-exception: #f8f8f2; --chroma-function: #50fa7b; --chroma-other: #f8f8f2; --chroma-punctuation: #f8f8f2; } 32 33 34 /* dark chroma */ 35 @media (prefers-color-scheme: dark) { 36 .chroma { --chroma-fg: #f8f8f2; --chroma-bg: #282a36; --chroma-highlight-bg: #282a36; --chroma-keyword: #ff79c6; --chroma-namespace: #ff79c6; --chroma-line-numbers: #cdcdcd; --chroma-comment: #6272a4; --chroma-literal: #f1fa8c; --chroma-literal-string: #f1fa8c; --chroma-literal-escape: #f1fa8c; --chroma-name: #f8f8f2; --chroma-attribute: #50fa7b; --chroma-class: #50fa7b; --chroma-decorator: #f8f8f2; --chroma-exception: #f8f8f2; --chroma-function: #50fa7b; --chroma-other: #f8f8f2; --chroma-punctuation: #f8f8f2; } 37 .mode-light .chroma { --chroma-fg: #272822; --chroma-bg: #fafafa; --chroma-highlight-bg: #e1e1e1; --chroma-keyword: #00a8c8; --chroma-namespace: #f92672; --chroma-line-numbers: #7f7f7f; --chroma-comment: #75715e; --chroma-literal: #ae81ff; --chroma-literal-string: #d88200; --chroma-literal-escape: #8045ff; --chroma-name: #111111; --chroma-attribute: #75af00; --chroma-class: #75af00; --chroma-decorator: #75af00; --chroma-exception: #75af00; --chroma-function: #75af00; --chroma-other: #75af00; --chroma-punctuation: #111111; } 38 .mode-dark .chroma { --chroma-fg: #f8f8f2; --chroma-bg: #282a36; --chroma-highlight-bg: #282a36; --chroma-keyword: #ff79c6; --chroma-namespace: #ff79c6; --chroma-line-numbers: #cdcdcd; --chroma-comment: #6272a4; --chroma-literal: #f1fa8c; --chroma-literal-string: #f1fa8c; --chroma-literal-escape: #f1fa8c; --chroma-name: #f8f8f2; --chroma-attribute: #50fa7b; --chroma-class: #50fa7b; --chroma-decorator: #f8f8f2; --chroma-exception: #f8f8f2; --chroma-function: #50fa7b; --chroma-other: #f8f8f2; --chroma-punctuation: #f8f8f2; } 39 }