From 8fc80be4cbea1af8f1cd826b9aa7a3ce1b59181d Mon Sep 17 00:00:00 2001 From: Tobias Merkle Date: Sun, 11 Feb 2024 12:29:08 -0500 Subject: [PATCH] move varibales --- theme/css/general.css | 387 +++++++++++++++++++++++++++++++++++++++- theme/css/variables.css | 385 +-------------------------------------- 2 files changed, 387 insertions(+), 385 deletions(-) diff --git a/theme/css/general.css b/theme/css/general.css index b8571d79..ff5126ac 100644 --- a/theme/css/general.css +++ b/theme/css/general.css @@ -1,6 +1,391 @@ /* Base styles and content styles */ -@import 'variables.css'; +/* variables: teemporarily moved from variables.css */ + +/* Globals */ + +:root { + --sidebar-width: 20vw; + --sidebar-resize-indicator-width: 8px; + --sidebar-resize-indicator-space: 2px; + --page-padding: 16px; + --content-max-width: 750px; + /* --menu-bar-height: 130px; */ + --mono-font: "Iosevka", "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, + "DejaVu Sans Mono", monospace, monospace; + --code-font-size: 14px; /* please adjust the ace font size accordingly in editor.js */ + + --k-black: #161512; + --k-darkgray: #22211f; + --k-orange: #f25221; + --k-honey: #ffd4ae; + --k-white: #fff5d9; + --k-beige: #e2dac4; +} + + /* Themes */ + +.light { + --bg: var(--k-white); + --page-bg: var(--k-beige); + --bg-bg: var(--k-beige); + --fg: var(--k-black); + + --sidebar-bg: var(--k-honey); + --sidebar-fg: var(--k-darkgray); + --sidebar-non-existant: var(--k-white); + --sidebar-active: var(--k-orange); + --sidebar-spacer: var(--k-beige); + + --scrollbar: var(--sidebar-fg); + + --icons: var(--k-darkgray); + --icons-hover: var(--k-black); + + --links: var(--k-orange); + + --inline-code-color: var(--k-darkgray); + + --theme-popup-bg: var(--k-beige); + --theme-popup-border: var(--k-darkgray); + --theme-hover: var(--k-white); + + --quote-bg: var(--k-white); + --quote-border: var(--k-beige); + + --warning-border: var(--k-orange); + + --table-border-color: var(--k-darkgray); + --table-header-bg: var(--k-white); + --table-alternate-bg: var(--k-white); + + --searchbar-border-color: var(--k-black); + --searchbar-bg: var(--k-white); + --searchbar-fg: var(--k-darkgray); + --searchbar-shadow-color: transparent; + --searchresults-header-fg: var(--k-darkgray); + --searchresults-border-color: var(--k-black); + --searchresults-li-bg: var(--k-beige); + --search-mark-bg: var(--k-orange); + + --color-scheme: light; +} + +.dark { + --bg: var(--k-darkgray); + --page-bg: var(--k-black); + --bg-bg: var(--k-beige); + --fg: var(--k-beige); + + --sidebar-bg: var(--k-black); + --sidebar-fg: var(--k-beige); + --sidebar-non-existant: var(--k-orange); + --sidebar-active: var(--k-orange); + --sidebar-spacer: var(--k-beige); + + --scrollbar: var(--sidebar-fg); + + --icons: var(--k-beige); + --icons-hover: var(--k-white); + + --links: var(--k-orange); + + --inline-code-color: var(--k-white); + + --theme-popup-bg: var(--k-darkgray); + --theme-popup-border: var(--k-beige); + --theme-hover: var(--k-darkgray); + + --quote-bg: var(--k-darkgray); + --quote-border: var(--k-beige); + + --warning-border: var(--k-orange); + + --table-border-color: var(--k-beige); + --table-header-bg: var(--k-darkgray); + --table-alternate-bg: var(--k-darkgray); + + --searchbar-border-color: var(--k-beige); + --searchbar-bg: var(--k-darkgray); + --searchbar-fg: var(--k-beige); + --searchbar-shadow-color: transparent; + --searchresults-header-fg: var(--k-white); + --searchresults-border-color: var(--k-beige); + --searchresults-li-bg: var(--k-darkgray); + --search-mark-bg: var(--k-orange); + + --color-scheme: dark; +} + +.wynn { + --bg: #441fa5; /* Deep violet */ + --fg: #f6f6f2; /* Off-white */ + + --sidebar-bg: #9473ba; /* Muted purple */ + --sidebar-fg: #f6f6f2; /* Off-white for clear contrast */ + --sidebar-non-existant: #bd766e; /* Warm taupe */ + --sidebar-active: #890002; /* Dark red */ + --sidebar-spacer: #7e99ff; /* Soft blue */ + + --scrollbar: var(--sidebar-fg); + + --icons: #ffc089; /* Light peach */ + --icons-hover: #db84ad; /* Soft pink */ + + --links: #ffcb69; /* Bright nectar gold */ + + --inline-code-color: #f6f6f2; /* Off-white */ + + --theme-popup-bg: #2b3a42; /* Dark slate */ + --theme-popup-border: #354f58; /* Deep forest green */ + --theme-hover: #5a4d8e; /* Lighter violet for a subtle yet harmonious contrast */ + + --quote-bg: #441fa5; /* Deep violet */ + --quote-border: #9473ba; /* Muted purple */ + + --warning-border: #f07327; /* Bright orange */ + + --table-border-color: #bd766e; /* Warm taupe */ + --table-header-bg: #7e99ff; /* Soft blue */ + --table-alternate-bg: #9473ba; /* Muted purple */ + + --searchbar-border-color: #f07327; /* Bright orange */ + --searchbar-bg: #ffc089; /* Light peach */ + --searchbar-fg: #f6f6f2; /* Off-white */ + --searchbar-shadow-color: #db84ad; /* Soft pink */ + --searchresults-header-fg: #bd766e; /* Warm taupe */ + --searchresults-border-color: #09090a; /* Muted purple */ + --searchresults-li-bg: #441fa5; /* Deep violet */ + --search-mark-bg: #890002; /* Dark red */ + + --color-scheme: dark; +} + +.gnucci { + --bg: #2a1b17; /* Deep espresso */ + --fg: #b7c6cc; /* Soft slate gray */ + + --sidebar-bg: #462a15; /* Dark walnut */ + --sidebar-fg: #c78919; /* Burnt orange */ + --sidebar-non-existant: #ae9a89; /* Muted taupe */ + --sidebar-active: #b7c6cc; /* Soft slate gray for better contrast */ + --sidebar-spacer: #31667a; /* Ocean teal */ + + --scrollbar: var(--sidebar-fg); + + --icons: #c06346; /* Rusty red */ + --icons-hover: #b7c6cc; /* Soft slate gray */ + + --links: #ffcb69; + + --inline-code-color: #c78919; /* Burnt orange */ + + --theme-popup-bg: #19281f; /* Dark pine green */ + --theme-popup-border: #31667a; /* Ocean teal */ + --theme-hover: #2a1b17; /* Deep espresso */ + + --quote-bg: #462a15; /* Dark walnut */ + --quote-border: #672c2c; /* Deep burgundy */ + + --warning-border: #c06346; /* Rusty red */ + + --table-border-color: #ae9a89; /* Muted taupe */ + --table-header-bg: #31667a; /* Ocean teal */ + --table-alternate-bg: #19281f; /* Dark pine green */ + + --searchbar-border-color: #c78919; /* Burnt orange */ + --searchbar-bg: #ae9a89; /* Muted taupe */ + --searchbar-fg: #b7c6cc; /* Soft slate gray */ + --searchbar-shadow-color: #672c2c; /* Deep burgundy */ + --searchresults-header-fg: #c06346; /* Rusty red */ + --searchresults-border-color: #044241; /* Dark forest green */ + --searchresults-li-bg: #462a15; /* Dark walnut */ + --search-mark-bg: #c78919; /* Burnt orange */ + + --color-scheme: dark; +} + +.harmony { + --bg: #f4f9f4; /* Light mint green */ + --fg: #5d4037; /* Rich brown */ + + --sidebar-bg: #fff3e0; /* Soft peach */ + --sidebar-fg: #6d4c41; /* Darker brown */ + --sidebar-non-existant: #cfd8dc; /* Light grey */ + --sidebar-active: #ffb74d; /* Warm orange */ + --sidebar-spacer: #e0f2f1; /* Pale turquoise */ + + --scrollbar: var(--sidebar-fg); + + --icons: #8d6e63; /* Earthy rose */ + --icons-hover: #ffccbc; /* Light coral */ + + --links: #007bff; /* Bright blue */ + + --inline-code-color: #d35400; /* Pumpkin orange */ + + --theme-popup-bg: #eceff1; /* Very light grey */ + --theme-popup-border: #b0bec5; /* Cool grey */ + --theme-hover: #f8fdfa; /* Very light mint */ + + --quote-bg: #e8f5e9; /* Pale green */ + --quote-border: #a5d6a7; /* Medium green */ + + --warning-border: #ff7043; /* Bright coral */ + + --table-border-color: #b0bec5; /* Cool grey */ + --table-header-bg: #eceff1; /* Very light grey */ + --table-alternate-bg: #e8f5e9; /* Pale green */ + + --searchbar-border-color: #8d6e63; /* Earthy rose */ + --searchbar-bg: #ffccbc; /* Light coral */ + --searchbar-fg: #5d4037; /* Rich brown */ + --searchbar-shadow-color: #b0bec5; /* Cool grey */ + --searchresults-header-fg: #6d4c41; /* Darker brown */ + --searchresults-border-color: #cfd8dc; /* Light grey */ + --searchresults-li-bg: #fff3e0; /* Soft peach */ + --search-mark-bg: #ffb74d; /* Warm orange */ + + --color-scheme: light; +} + +.classic-dark { + --bg: #0a2239; /* Dark navy blue, instead of Soft sky blue */ + --fg: #cad2d3; /* Soft mist grey, contrasting Deep ocean blue */ + + --sidebar-bg: #345b29; /* Deep forest green, darker than Light leaf green */ + --sidebar-fg: #d4e2d4; /* Pale mint green, contrast for Dark green */ + --sidebar-non-existant: #5c6975; /* Darker shade of Muted stone grey */ + --sidebar-active: #bf2f2f; /* Darker shade of Vibrant flower red */ + --sidebar-spacer: #434343; /* Dark grey, instead of Very light grey */ + + --scrollbar: var(--sidebar-fg); + + --icons: #563f31; /* Darker Earthy brown */ + --icons-hover: #b38600; /* Darker, more subdued Nectar gold */ + + --links: #b34700; /* Darker, more subdued Bright coral */ + + --inline-code-color: #a04000; /* Darker, Burnt orange, instead of Pumpkin orange */ + + --theme-popup-bg: #404040; /* Dark grey, instead of Light grey */ + --theme-popup-border: #5a5a5a; /* Darker Medium grey */ + --theme-hover: #4f4f4f; /* Darker Soft grey */ + + --quote-bg: #3a3a3a; /* Dark grey, instead of Very light grey */ + --quote-border: #525252; /* Darker Light grey */ + + --warning-border: #994515; /* Darker, earthier shade of Pumpkin orange */ + + --table-border-color: #525252; /* Darker Light grey */ + --table-header-bg: #404040; /* Dark grey, instead of Light grey */ + --table-alternate-bg: #3a3a3a; /* Dark grey, instead of Very light grey */ + + --searchbar-border-color: #4f4f4f; /* Dark grey, instead of Medium grey */ + --searchbar-bg: #363636; /* Dark grey, instead of Soft grey */ + --searchbar-fg: #d4e2d4; /* Pale mint green, contrasting Deep ocean blue */ + --searchbar-shadow-color: #5a5a5a; /* Darker Medium grey */ + --searchresults-header-fg: #d4e2d4; /* Pale mint green, contrast for Dark green */ + --searchresults-border-color: #525252; /* Darker Light grey */ + --searchresults-li-bg: #404040; /* Dark grey, instead of Light grey */ + --search-mark-bg: #b38600; /* Darker, more subdued Nectar gold */ + + --color-scheme: dark; +} + +.meadow { + --bg: #8db495; /* Sage green */ + --fg: #bf4315; /* Terracotta */ + + --sidebar-bg: #9b72aa; /* Soft purple */ + --sidebar-fg: #4a235a; /* Darker purple */ + --sidebar-non-existant: #a8b88d; /* Olive */ + --sidebar-active: #ecb910; /* Sunflower yellow */ + --sidebar-spacer: #e8d58e; /* Beige */ + + --scrollbar: var(--sidebar-fg); + + --icons: #31667a; /* Deep sea teal */ + --icons-hover: #d78d27; /* Amber */ + + --links: #31667a; /* Deep sea teal */ + + --inline-code-color: #d78d27; /* Amber */ + + --theme-popup-bg: #98a944; /* Olive green */ + --theme-popup-border: #70887c; /* Sea green */ + --theme-hover: #a8b88d; /* Olive */ + + --quote-bg: #8db495; /* Sage green */ + --quote-border: #70887c; /* Sea green */ + + --warning-border: #c83237; /* Crimson */ + + --table-border-color: #a8b88d; /* Olive */ + --table-header-bg: #98a944; /* Olive green */ + --table-alternate-bg: #e8d58e; /* Beige */ + + --searchbar-border-color: #bf4315; /* Terracotta */ + --searchbar-bg: #e8d58e; /* Beige */ + --searchbar-fg: #bf4315; /* Terracotta */ + --searchbar-shadow-color: #31667a; /* Deep sea teal */ + --searchresults-header-fg: #70887c; /* Sea green */ + --searchresults-border-color: #a8b88d; /* Olive */ + --searchresults-li-bg: #8db495; /* Sage green */ + --search-mark-bg: #d78d27; /* Amber */ + + --color-scheme: dark; +} + +@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%); + + --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; + } +} + +@media only screen and (max-width: 600px) { + html { + --sidebar-width: 50vw !important; + } +} :root { /* Browser default font-size is 16px, this way 1 rem = 10px */ diff --git a/theme/css/variables.css b/theme/css/variables.css index c002b173..158d90f6 100644 --- a/theme/css/variables.css +++ b/theme/css/variables.css @@ -1,384 +1 @@ -/* Globals */ - -:root { - --sidebar-width: 20vw; - --sidebar-resize-indicator-width: 8px; - --sidebar-resize-indicator-space: 2px; - --page-padding: 16px; - --content-max-width: 750px; - /* --menu-bar-height: 130px; */ - --mono-font: "Iosevka", "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, - "DejaVu Sans Mono", monospace, monospace; - --code-font-size: 14px; /* please adjust the ace font size accordingly in editor.js */ - - --k-black: #161512; - --k-darkgray: #22211f; - --k-orange: #f25221; - --k-honey: #ffd4ae; - --k-white: #fff5d9; - --k-beige: #e2dac4; -} - - /* Themes */ - -.light { - --bg: var(--k-white); - --page-bg: var(--k-beige); - --bg-bg: var(--k-beige); - --fg: var(--k-black); - - --sidebar-bg: var(--k-honey); - --sidebar-fg: var(--k-darkgray); - --sidebar-non-existant: var(--k-white); - --sidebar-active: var(--k-orange); - --sidebar-spacer: var(--k-beige); - - --scrollbar: var(--sidebar-fg); - - --icons: var(--k-darkgray); - --icons-hover: var(--k-black); - - --links: var(--k-orange); - - --inline-code-color: var(--k-darkgray); - - --theme-popup-bg: var(--k-beige); - --theme-popup-border: var(--k-darkgray); - --theme-hover: var(--k-white); - - --quote-bg: var(--k-white); - --quote-border: var(--k-beige); - - --warning-border: var(--k-orange); - - --table-border-color: var(--k-darkgray); - --table-header-bg: var(--k-white); - --table-alternate-bg: var(--k-white); - - --searchbar-border-color: var(--k-black); - --searchbar-bg: var(--k-white); - --searchbar-fg: var(--k-darkgray); - --searchbar-shadow-color: transparent; - --searchresults-header-fg: var(--k-darkgray); - --searchresults-border-color: var(--k-black); - --searchresults-li-bg: var(--k-beige); - --search-mark-bg: var(--k-orange); - - --color-scheme: light; -} - -.dark { - --bg: var(--k-darkgray); - --page-bg: var(--k-black); - --bg-bg: var(--k-beige); - --fg: var(--k-beige); - - --sidebar-bg: var(--k-black); - --sidebar-fg: var(--k-beige); - --sidebar-non-existant: var(--k-orange); - --sidebar-active: var(--k-orange); - --sidebar-spacer: var(--k-beige); - - --scrollbar: var(--sidebar-fg); - - --icons: var(--k-beige); - --icons-hover: var(--k-white); - - --links: var(--k-orange); - - --inline-code-color: var(--k-white); - - --theme-popup-bg: var(--k-darkgray); - --theme-popup-border: var(--k-beige); - --theme-hover: var(--k-darkgray); - - --quote-bg: var(--k-darkgray); - --quote-border: var(--k-beige); - - --warning-border: var(--k-orange); - - --table-border-color: var(--k-beige); - --table-header-bg: var(--k-darkgray); - --table-alternate-bg: var(--k-darkgray); - - --searchbar-border-color: var(--k-beige); - --searchbar-bg: var(--k-darkgray); - --searchbar-fg: var(--k-beige); - --searchbar-shadow-color: transparent; - --searchresults-header-fg: var(--k-white); - --searchresults-border-color: var(--k-beige); - --searchresults-li-bg: var(--k-darkgray); - --search-mark-bg: var(--k-orange); - - --color-scheme: dark; -} - -.wynn { - --bg: #441fa5; /* Deep violet */ - --fg: #f6f6f2; /* Off-white */ - - --sidebar-bg: #9473ba; /* Muted purple */ - --sidebar-fg: #f6f6f2; /* Off-white for clear contrast */ - --sidebar-non-existant: #bd766e; /* Warm taupe */ - --sidebar-active: #890002; /* Dark red */ - --sidebar-spacer: #7e99ff; /* Soft blue */ - - --scrollbar: var(--sidebar-fg); - - --icons: #ffc089; /* Light peach */ - --icons-hover: #db84ad; /* Soft pink */ - - --links: #ffcb69; /* Bright nectar gold */ - - --inline-code-color: #f6f6f2; /* Off-white */ - - --theme-popup-bg: #2b3a42; /* Dark slate */ - --theme-popup-border: #354f58; /* Deep forest green */ - --theme-hover: #5a4d8e; /* Lighter violet for a subtle yet harmonious contrast */ - - --quote-bg: #441fa5; /* Deep violet */ - --quote-border: #9473ba; /* Muted purple */ - - --warning-border: #f07327; /* Bright orange */ - - --table-border-color: #bd766e; /* Warm taupe */ - --table-header-bg: #7e99ff; /* Soft blue */ - --table-alternate-bg: #9473ba; /* Muted purple */ - - --searchbar-border-color: #f07327; /* Bright orange */ - --searchbar-bg: #ffc089; /* Light peach */ - --searchbar-fg: #f6f6f2; /* Off-white */ - --searchbar-shadow-color: #db84ad; /* Soft pink */ - --searchresults-header-fg: #bd766e; /* Warm taupe */ - --searchresults-border-color: #09090a; /* Muted purple */ - --searchresults-li-bg: #441fa5; /* Deep violet */ - --search-mark-bg: #890002; /* Dark red */ - - --color-scheme: dark; -} - -.gnucci { - --bg: #2a1b17; /* Deep espresso */ - --fg: #b7c6cc; /* Soft slate gray */ - - --sidebar-bg: #462a15; /* Dark walnut */ - --sidebar-fg: #c78919; /* Burnt orange */ - --sidebar-non-existant: #ae9a89; /* Muted taupe */ - --sidebar-active: #b7c6cc; /* Soft slate gray for better contrast */ - --sidebar-spacer: #31667a; /* Ocean teal */ - - --scrollbar: var(--sidebar-fg); - - --icons: #c06346; /* Rusty red */ - --icons-hover: #b7c6cc; /* Soft slate gray */ - - --links: #ffcb69; - - --inline-code-color: #c78919; /* Burnt orange */ - - --theme-popup-bg: #19281f; /* Dark pine green */ - --theme-popup-border: #31667a; /* Ocean teal */ - --theme-hover: #2a1b17; /* Deep espresso */ - - --quote-bg: #462a15; /* Dark walnut */ - --quote-border: #672c2c; /* Deep burgundy */ - - --warning-border: #c06346; /* Rusty red */ - - --table-border-color: #ae9a89; /* Muted taupe */ - --table-header-bg: #31667a; /* Ocean teal */ - --table-alternate-bg: #19281f; /* Dark pine green */ - - --searchbar-border-color: #c78919; /* Burnt orange */ - --searchbar-bg: #ae9a89; /* Muted taupe */ - --searchbar-fg: #b7c6cc; /* Soft slate gray */ - --searchbar-shadow-color: #672c2c; /* Deep burgundy */ - --searchresults-header-fg: #c06346; /* Rusty red */ - --searchresults-border-color: #044241; /* Dark forest green */ - --searchresults-li-bg: #462a15; /* Dark walnut */ - --search-mark-bg: #c78919; /* Burnt orange */ - - --color-scheme: dark; -} - -.harmony { - --bg: #f4f9f4; /* Light mint green */ - --fg: #5d4037; /* Rich brown */ - - --sidebar-bg: #fff3e0; /* Soft peach */ - --sidebar-fg: #6d4c41; /* Darker brown */ - --sidebar-non-existant: #cfd8dc; /* Light grey */ - --sidebar-active: #ffb74d; /* Warm orange */ - --sidebar-spacer: #e0f2f1; /* Pale turquoise */ - - --scrollbar: var(--sidebar-fg); - - --icons: #8d6e63; /* Earthy rose */ - --icons-hover: #ffccbc; /* Light coral */ - - --links: #007bff; /* Bright blue */ - - --inline-code-color: #d35400; /* Pumpkin orange */ - - --theme-popup-bg: #eceff1; /* Very light grey */ - --theme-popup-border: #b0bec5; /* Cool grey */ - --theme-hover: #f8fdfa; /* Very light mint */ - - --quote-bg: #e8f5e9; /* Pale green */ - --quote-border: #a5d6a7; /* Medium green */ - - --warning-border: #ff7043; /* Bright coral */ - - --table-border-color: #b0bec5; /* Cool grey */ - --table-header-bg: #eceff1; /* Very light grey */ - --table-alternate-bg: #e8f5e9; /* Pale green */ - - --searchbar-border-color: #8d6e63; /* Earthy rose */ - --searchbar-bg: #ffccbc; /* Light coral */ - --searchbar-fg: #5d4037; /* Rich brown */ - --searchbar-shadow-color: #b0bec5; /* Cool grey */ - --searchresults-header-fg: #6d4c41; /* Darker brown */ - --searchresults-border-color: #cfd8dc; /* Light grey */ - --searchresults-li-bg: #fff3e0; /* Soft peach */ - --search-mark-bg: #ffb74d; /* Warm orange */ - - --color-scheme: light; -} - -.classic-dark { - --bg: #0a2239; /* Dark navy blue, instead of Soft sky blue */ - --fg: #cad2d3; /* Soft mist grey, contrasting Deep ocean blue */ - - --sidebar-bg: #345b29; /* Deep forest green, darker than Light leaf green */ - --sidebar-fg: #d4e2d4; /* Pale mint green, contrast for Dark green */ - --sidebar-non-existant: #5c6975; /* Darker shade of Muted stone grey */ - --sidebar-active: #bf2f2f; /* Darker shade of Vibrant flower red */ - --sidebar-spacer: #434343; /* Dark grey, instead of Very light grey */ - - --scrollbar: var(--sidebar-fg); - - --icons: #563f31; /* Darker Earthy brown */ - --icons-hover: #b38600; /* Darker, more subdued Nectar gold */ - - --links: #b34700; /* Darker, more subdued Bright coral */ - - --inline-code-color: #a04000; /* Darker, Burnt orange, instead of Pumpkin orange */ - - --theme-popup-bg: #404040; /* Dark grey, instead of Light grey */ - --theme-popup-border: #5a5a5a; /* Darker Medium grey */ - --theme-hover: #4f4f4f; /* Darker Soft grey */ - - --quote-bg: #3a3a3a; /* Dark grey, instead of Very light grey */ - --quote-border: #525252; /* Darker Light grey */ - - --warning-border: #994515; /* Darker, earthier shade of Pumpkin orange */ - - --table-border-color: #525252; /* Darker Light grey */ - --table-header-bg: #404040; /* Dark grey, instead of Light grey */ - --table-alternate-bg: #3a3a3a; /* Dark grey, instead of Very light grey */ - - --searchbar-border-color: #4f4f4f; /* Dark grey, instead of Medium grey */ - --searchbar-bg: #363636; /* Dark grey, instead of Soft grey */ - --searchbar-fg: #d4e2d4; /* Pale mint green, contrasting Deep ocean blue */ - --searchbar-shadow-color: #5a5a5a; /* Darker Medium grey */ - --searchresults-header-fg: #d4e2d4; /* Pale mint green, contrast for Dark green */ - --searchresults-border-color: #525252; /* Darker Light grey */ - --searchresults-li-bg: #404040; /* Dark grey, instead of Light grey */ - --search-mark-bg: #b38600; /* Darker, more subdued Nectar gold */ - - --color-scheme: dark; -} - -.meadow { - --bg: #8db495; /* Sage green */ - --fg: #bf4315; /* Terracotta */ - - --sidebar-bg: #9b72aa; /* Soft purple */ - --sidebar-fg: #4a235a; /* Darker purple */ - --sidebar-non-existant: #a8b88d; /* Olive */ - --sidebar-active: #ecb910; /* Sunflower yellow */ - --sidebar-spacer: #e8d58e; /* Beige */ - - --scrollbar: var(--sidebar-fg); - - --icons: #31667a; /* Deep sea teal */ - --icons-hover: #d78d27; /* Amber */ - - --links: #31667a; /* Deep sea teal */ - - --inline-code-color: #d78d27; /* Amber */ - - --theme-popup-bg: #98a944; /* Olive green */ - --theme-popup-border: #70887c; /* Sea green */ - --theme-hover: #a8b88d; /* Olive */ - - --quote-bg: #8db495; /* Sage green */ - --quote-border: #70887c; /* Sea green */ - - --warning-border: #c83237; /* Crimson */ - - --table-border-color: #a8b88d; /* Olive */ - --table-header-bg: #98a944; /* Olive green */ - --table-alternate-bg: #e8d58e; /* Beige */ - - --searchbar-border-color: #bf4315; /* Terracotta */ - --searchbar-bg: #e8d58e; /* Beige */ - --searchbar-fg: #bf4315; /* Terracotta */ - --searchbar-shadow-color: #31667a; /* Deep sea teal */ - --searchresults-header-fg: #70887c; /* Sea green */ - --searchresults-border-color: #a8b88d; /* Olive */ - --searchresults-li-bg: #8db495; /* Sage green */ - --search-mark-bg: #d78d27; /* Amber */ - - --color-scheme: dark; -} - -@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%); - - --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; - } -} - -@media only screen and (max-width: 600px) { - html { - --sidebar-width: 50vw !important; - } -} \ No newline at end of file +/* temporarily moved to general */ \ No newline at end of file