From 124ecc8e8c89fa82cb76202c0b64202dbc9a8ece Mon Sep 17 00:00:00 2001 From: CI Date: Wed, 15 Mar 2023 03:28:45 +0000 Subject: [PATCH] Make Modular --- modular/base.css | 33 ++++++++++++ modular/font/terminus.css | 8 +-- modular/font/unifont.css | 10 ++-- modular/overwrite_colors.css | 14 ++++- modular/scheme/amoled.css | 3 +- modular/scheme/amora.css | 3 +- modular/scheme/amora_focus.css | 3 +- modular/scheme/annie_dark.css | 3 +- modular/scheme/catppuccin_frappe.css | 3 +- modular/scheme/catppuccin_macchiato.css | 3 +- modular/scheme/catppuccin_mocha.css | 3 +- modular/scheme/everforest.css | 3 +- modular/scheme/gruvbox.css | 3 +- modular/scheme/lovelace.css | 3 +- modular/scheme/nord.css | 3 +- modular/scheme/stock.css | 53 +++++++++---------- modular/scheme/tokyo_night.css | 3 +- modular/scheme/xmc.css | 35 ++++++------- modular/scheme_light/catppuccin_latte.css | 47 +++++++++++++++++ modular/scheme_light/gruvbox.css | 42 +++++++++++++++ modular/scheme_light/nord.css | 44 ++++++++++++++++ modular/scheme_light/stock.css | 46 ++++++++++++++++ modular/scheme_light/xmc.css | 46 ++++++++++++++++ modular/stylings.css | 64 +++++++++++++++++------ 24 files changed, 383 insertions(+), 95 deletions(-) create mode 100644 modular/scheme_light/catppuccin_latte.css create mode 100644 modular/scheme_light/gruvbox.css create mode 100644 modular/scheme_light/nord.css create mode 100644 modular/scheme_light/stock.css create mode 100644 modular/scheme_light/xmc.css diff --git a/modular/base.css b/modular/base.css index 6e896ce..606403a 100644 --- a/modular/base.css +++ b/modular/base.css @@ -67,6 +67,11 @@ padding: 0.5em; } +[id^="message-username-"] + [class^="badge-"]:has(> [class^="badgeVerifiedIcon-"]) { + display: none; +} + /* remove "dead space"/padding from vc users */ [class*="containerDefault-"] [class*="listDefault-"] { padding-left: 8px !important; @@ -280,6 +285,15 @@ background-color: var(--background-modifier-hover); } +[class^="contentWarningPopout-"] { + background: var(--background-primary) !important; + box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3) !important; +} + +[class^="customColorPicker-"] { + background: var(--background-primary) !important; +} + /* jane's steam border ext */ /*.steam-border-message > #border { width: 20px !important; @@ -320,3 +334,22 @@ code, .hljs { font-family: var(--font-code) !important; } + +/* unbreak resizing webms :^) */ +/*[class^="mediaAttachmentsContainer-"] [class^="imageWrapper-"] { + min-width: 10px; + min-height: 10px; + max-width: unset; + max-height: unset !important; + width: unset !important; + height: unset !important; + object-fit: none !important; + aspect-ratio: unset !important; + } + [class^="mediaAttachmentsContainer-"] [class^="messageAttachment-"] { + height: unset; + } + [class^="mediaAttachmentsContainer-"] [class^="oneByOneGrid-"], + [class^="mediaAttachmentsContainer-"] [class^="oneByTwoGrid-"] { + max-height: unset !important; + }*/ diff --git a/modular/font/terminus.css b/modular/font/terminus.css index 3f9fa25..c614802 100644 --- a/modular/font/terminus.css +++ b/modular/font/terminus.css @@ -43,11 +43,11 @@ .theme-dark, :root { --font-primary: "Terminus (TTF) for Windows", "Terminus (TTF)", - "Unifont Windows", "Unifont", monospace !important; + "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important; --font-display: "Terminus (TTF) for Windows", "Terminus (TTF)", - "Unifont Windows", "Unifont", monospace !important; - --font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows", - "Unifont", monospace !important; + "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important; + --font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic", + "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important; --_font-titlebars: var(--font-primary) !important; } diff --git a/modular/font/unifont.css b/modular/font/unifont.css index b681a8c..e3e3440 100644 --- a/modular/font/unifont.css +++ b/modular/font/unifont.css @@ -51,10 +51,12 @@ .theme-dark, :root { - --font-primary: "Unifont Windows", "Unifont", monospace !important; - --font-display: "Unifont Windows", "Unifont", monospace !important; - --font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows", - "Unifont", monospace !important; + --font-primary: "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", + "Unifont", monospace, "Twemoji" !important; + --font-display: "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", + "Unifont", monospace, "Twemoji" !important; + --font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic", + "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important; } [class^="menu-"] [class^="item-"], diff --git a/modular/overwrite_colors.css b/modular/overwrite_colors.css index 3883704..f601504 100644 --- a/modular/overwrite_colors.css +++ b/modular/overwrite_colors.css @@ -1,5 +1,6 @@ +:root, .theme-dark, -:root { +.theme-light { --titlebar-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 0 0 2px rgba(0, 0, 0, 0.27), 0 0 0 1px var(--background-tertiary), 0 0 0 2px var(--background-secondary), 0 0 0 3px var(--background-primary); @@ -124,6 +125,7 @@ --red-400: var(--status-dnd) !important; --primary-400: var(--status-offline) !important; --twitch: var(--status-streaming) !important; + --primary-600: var(--primary); } [data-popout-root], @@ -296,7 +298,9 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { fill: var(--status-streaming); } -[class^="containerDefault-"] [class*="modeUnread-"] svg[class^="icon-"], +[class^="containerDefault-"]:not(:hover) + [class*="modeUnread-"] + svg[class^="icon-"], [class^="containerDefault-"]:not(:hover) [class*="modeUnread-"] [class^="name-"] { @@ -306,6 +310,12 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] { background-color: var(--accent, var(--brand-new-500)); } +[class^="containerDefault-"]:not(:hover) + [class*="modeSelected-"] + svg[class^="icon-"] { + color: var(--interactive-active); +} + [class^="containerDefault-"] [class*="iconVisibility-"]:hover svg[class^="icon-"], diff --git a/modular/scheme/amoled.css b/modular/scheme/amoled.css index a774799..f2a2b24 100644 --- a/modular/scheme/amoled.css +++ b/modular/scheme/amoled.css @@ -1,5 +1,4 @@ -.theme-dark, -:root { +.theme-dark { --_color0: #484f58; --_color1: #f85149; --_color2: #3fb950; diff --git a/modular/scheme/amora.css b/modular/scheme/amora.css index 32bc118..5742712 100644 --- a/modular/scheme/amora.css +++ b/modular/scheme/amora.css @@ -1,5 +1,4 @@ -.theme-dark, -:root { +.theme-dark { --_color0: #231d29; --_color1: #e83f80; --_color2: #a2baa8; diff --git a/modular/scheme/amora_focus.css b/modular/scheme/amora_focus.css index 99766df..8c58c01 100644 --- a/modular/scheme/amora_focus.css +++ b/modular/scheme/amora_focus.css @@ -1,5 +1,4 @@ -.theme-dark, -:root { +.theme-dark { --_color0: #28222d; --_color1: #e83f80; --_color2: #a2baa8; diff --git a/modular/scheme/annie_dark.css b/modular/scheme/annie_dark.css index 42a2200..dcfc074 100644 --- a/modular/scheme/annie_dark.css +++ b/modular/scheme/annie_dark.css @@ -1,5 +1,4 @@ -.theme-dark, -:root { +.theme-dark { --_color0: #484f58; --_color1: #f85149; --_color2: #3fb950; diff --git a/modular/scheme/catppuccin_frappe.css b/modular/scheme/catppuccin_frappe.css index d671501..5262392 100644 --- a/modular/scheme/catppuccin_frappe.css +++ b/modular/scheme/catppuccin_frappe.css @@ -1,5 +1,4 @@ -.theme-dark, -:root { +.theme-dark { --_color0: #51576d; --_color1: #e78284; --_color2: #a6d189; diff --git a/modular/scheme/catppuccin_macchiato.css b/modular/scheme/catppuccin_macchiato.css index 1d7e249..97acf1d 100644 --- a/modular/scheme/catppuccin_macchiato.css +++ b/modular/scheme/catppuccin_macchiato.css @@ -1,5 +1,4 @@ -.theme-dark, -:root { +.theme-dark { --_color0: #494d64; --_color1: #ed8796; --_color2: #a6da95; diff --git a/modular/scheme/catppuccin_mocha.css b/modular/scheme/catppuccin_mocha.css index 78e2972..ca5bc9b 100644 --- a/modular/scheme/catppuccin_mocha.css +++ b/modular/scheme/catppuccin_mocha.css @@ -1,5 +1,4 @@ -.theme-dark, -:root { +.theme-dark { --_color0: #45475a; --_color1: #f38ba8; --_color2: #a6e3a1; diff --git a/modular/scheme/everforest.css b/modular/scheme/everforest.css index ce810d5..38aab25 100644 --- a/modular/scheme/everforest.css +++ b/modular/scheme/everforest.css @@ -1,5 +1,4 @@ -.theme-dark, -:root { +.theme-dark { --_color0: #7a8478; --_color1: #e67e80; --_color2: #a7c080; diff --git a/modular/scheme/gruvbox.css b/modular/scheme/gruvbox.css index fb86093..5132808 100644 --- a/modular/scheme/gruvbox.css +++ b/modular/scheme/gruvbox.css @@ -1,5 +1,4 @@ -.theme-dark, -:root { +.theme-dark { --_color0: #32302f; --_color1: #cc241d; --_color2: #98971a; diff --git a/modular/scheme/lovelace.css b/modular/scheme/lovelace.css index 6b971fd..f780c91 100644 --- a/modular/scheme/lovelace.css +++ b/modular/scheme/lovelace.css @@ -1,5 +1,4 @@ -.theme-dark, -:root { +.theme-dark { --_color0: #282a36; --_color1: #f37f97; --_color2: #5adecd; diff --git a/modular/scheme/nord.css b/modular/scheme/nord.css index 714450f..073da2b 100644 --- a/modular/scheme/nord.css +++ b/modular/scheme/nord.css @@ -1,5 +1,4 @@ -.theme-dark, -:root { +.theme-dark { --_color0: #3b4252; --_color1: #bf616a; --_color2: #a3be8c; diff --git a/modular/scheme/stock.css b/modular/scheme/stock.css index 8543eea..2f039fa 100644 --- a/modular/scheme/stock.css +++ b/modular/scheme/stock.css @@ -1,45 +1,44 @@ -.theme-dark, -:root { - --_color0: #484f58; - --_color1: #f85149; +.theme-dark { + --_color0: #0d1117; + --_color1: #ff7b72; --_color2: #3fb950; --_color3: #d29922; --_color4: #58a6ff; --_color5: #bc8cff; - --_color6: #39c5cf; + --_color6: #76e3ea; --_color7: #b1bac4; - --_color8: #6e7681; - --_color9: #ff7b72; + --_color8: #161b22; + --_color9: #ffa198; --_color10: #56d364; --_color11: #e3b341; --_color12: #79c0ff; --_color13: #d2a8ff; - --_color14: #56d4dd; + --_color14: #b3f0ff; --_color15: #f0f6fc; --_colorFG: var(--_color7); - --__primary: #36393f; - --__secondary: #2f3136; - --__tertiary: #202225; - --__primary-rgb: 54, 57, 63; - --__secondary-rgb: 47, 49, 54; - --__tertiary-rgb: 32, 34, 37; + --primary: #36393f; + --secondary: #2f3136; + --tertiary: #202225; + --primary-rgb: 54, 57, 63; + --secondary-rgb: 47, 49, 54; + --tertiary-rgb: 32, 34, 37; - --__accent: #7289da; - --__accent-rgb: 114, 137, 218; - --__red: #f04747; - --__text: #dcddde; - --__link: #00aff4; - --__highlight: #72767d; - --__highlight-rgb: 114, 118, 125; + --accent: #7289da; + --accent-rgb: 114, 137, 218; + --red: #f04747; + --text: #dcddde; + --link: #00aff4; + --highlight: #72767d; + --highlight-rgb: 114, 118, 125; - --__status-online: #43b581; - --__status-idle: #faa61a; - --__status-dnd: #f04747; - --__status-offline: #747f8d; - --__status-streaming: #593695; + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; - --__titlebar-color: var(--highlight); + --titlebar-color: var(--highlight); } diff --git a/modular/scheme/tokyo_night.css b/modular/scheme/tokyo_night.css index 23e9860..90d38d3 100644 --- a/modular/scheme/tokyo_night.css +++ b/modular/scheme/tokyo_night.css @@ -1,5 +1,4 @@ -.theme-dark, -:root { +.theme-dark { --_color0: #32344a; --_color1: #f7768e; --_color2: #9ece6a; diff --git a/modular/scheme/xmc.css b/modular/scheme/xmc.css index 4017ad9..9bf2c1c 100644 --- a/modular/scheme/xmc.css +++ b/modular/scheme/xmc.css @@ -1,22 +1,21 @@ -.theme-dark, -:root { - --_color0: #373e4d; - --_color1: #fa5aa4; - --_color2: #2be491; - --_color3: #fa946e; - --_color4: #63c5ea; - --_color5: #cf8ef4; - --_color6: #89ccf7; - --_color7: #edfefe; +.theme-dark { + --_color0: #0d1117; + --_color1: #ff7b72; + --_color2: #3fb950; + --_color3: #d29922; + --_color4: #58a6ff; + --_color5: #bc8cff; + --_color6: #76e3ea; + --_color7: #b1bac4; - --_color8: #3b4252; - --_color9: #fa74b2; - --_color10: #44eb9f; - --_color11: #faa687; - --_color12: #7acbea; - --_color13: #d8a6f4; - --_color14: #a1d5f7; - --_color15: #e7f7f7; + --_color8: #161b22; + --_color9: #ffa198; + --_color10: #56d364; + --_color11: #e3b341; + --_color12: #79c0ff; + --_color13: #d2a8ff; + --_color14: #b3f0ff; + --_color15: #f0f6fc; --_colorFG: #bbc5ff; diff --git a/modular/scheme_light/catppuccin_latte.css b/modular/scheme_light/catppuccin_latte.css new file mode 100644 index 0000000..c92bb96 --- /dev/null +++ b/modular/scheme_light/catppuccin_latte.css @@ -0,0 +1,47 @@ +.theme-light { + --_color0: #bcc0cc; + --_color1: #d20f39; + --_color2: #40a02b; + --_color3: #df8e1d; + --_color4: #1e66f5; + --_color5: #ea76cb; + --_color6: #179299; + --_color7: #5c5f77; + + --_color8: #626880; + --_color9: #d20f39; + --_color10: #40a02b; + --_color11: #df8e1d; + --_color12: #1e66f5; + --_color13: #ea76cb; + --_color14: #179299; + --_color15: #6c6f85; + + --_colorFG: #4c4f69; + + --primary: #eff1f5; + --secondary: #e6e9ef; + --tertiary: #dce0e8; + --primary-rgb: 239, 241, 245; + --secondary-rgb: 230, 233, 239; + --tertiary-rgb: 220, 224, 232; + + --accent: #7287fd; + --accent-rgb: 114, 135, 253; + --red: var(--_color1); + --text: var(--_colorFG); + --link: var(--_color14); + --highlight: #6c6f85; + --highlight-rgb: 108, 111, 133; + + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); + + --titlebar-color: #414559; + + --interactive-hover: var(--_color6) !important; + --interactive-active: var(--_color7) !important; +} diff --git a/modular/scheme_light/gruvbox.css b/modular/scheme_light/gruvbox.css new file mode 100644 index 0000000..1a9709f --- /dev/null +++ b/modular/scheme_light/gruvbox.css @@ -0,0 +1,42 @@ +.theme-light { + --_color0: #f2e5bc; + --_color1: #cc241d; + --_color2: #98971a; + --_color3: #d79921; + --_color4: #458588; + --_color5: #b16286; + --_color6: #689d6a; + --_color7: #7c6f64; + + --_color8: #f9f5d7; + --_color9: #9d0006; + --_color10: #79740e; + --_color11: #b57614; + --_color12: #076678; + --_color13: #8f3f71; + --_color14: #427b58; + --_color15: #3c3836; + + --_colorFG: #504945; + + --primary: #f9f5d7; + --secondary: #fbf1c7; + --tertiary: #f2e5bc; + --primary-rgb: 242, 229, 187; + --secondary-rgb: 251, 241, 199; + --tertiary-rgb: 250, 246, 214; + + --accent: var(--_color5); + --accent-rgb: 177, 98, 134; + --red: var(--_color9); + --text: var(--_colorFG); + --link: var(--_color12); + --highlight: #bdae93; + --highlight-rgb: 189, 174, 147; + + --status-online: var(--_color10); + --status-idle: var(--_color11); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color13); +} diff --git a/modular/scheme_light/nord.css b/modular/scheme_light/nord.css new file mode 100644 index 0000000..416d582 --- /dev/null +++ b/modular/scheme_light/nord.css @@ -0,0 +1,44 @@ +.theme-light { + --_color0: #e5e9f0; + --_color1: #bf616a; + --_color2: #a3be8c; + --_color3: #ebcb8b; + --_color4: #81a1c1; + --_color5: #b48ead; + --_color6: #88c0d0; + --_color7: #3b4252; + + --_color8: #eceff4; + --_color9: #bf616a; + --_color10: #a3be8c; + --_color11: #ebcb8b; + --_color12: #81a1c1; + --_color13: #b48ead; + --_color14: #88c0d0; + --_color15: #4c566a; + + --_colorFG: #2e3440; + + --primary: #eceff4; + --secondary: #e5e9f0; + --tertiary: #d8dee9; + --primary-rgb: 236, 239, 244; + --secondary-rgb: 229, 233, 240; + --tertiary-rgb: 216, 222, 233; + + --accent: #88c0d0; + --accent-rgb: 136, 192, 208; + --red: var(--_color1); + --text: var(--_colorFG); + --link: var(--_color12); + --highlight: #8fbcbb; + --highlight-rgb: 143, 188, 187; + + --status-online: var(--_color2); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); + + --titlebar-color: #4c566a; +} diff --git a/modular/scheme_light/stock.css b/modular/scheme_light/stock.css new file mode 100644 index 0000000..fec30ac --- /dev/null +++ b/modular/scheme_light/stock.css @@ -0,0 +1,46 @@ +.theme-light { + --_color0: #24292f; + --_color1: #ff8182; + --_color2: #4ac26b; + --_color3: #d4a72c; + --_color4: #54aeff; + --_color5: #c297ff; + --_color6: #76e3ea; + --_color7: #8c959f; + + --_color8: #32383f; + --_color9: #ffaba8; + --_color10: #6fdd8b; + --_color11: #eac54f; + --_color12: #80ccff; + --_color13: #d8b9ff; + --_color14: #b3f0ff; + --_color15: #d0d7de; + + --_colorFG: var(--_color7); + + --primary: #ffffff; + --secondary: #f2f3f5; + --tertiary: #e3e5e8; + --primary-rgb: 255, 255, 255; + --secondary-rgb: 242, 243, 245; + --tertiary-rgb: 227, 229, 232; + + --accent: #7289da; + --accent-rgb: 114, 137, 218; + --red: #f04747; + --text: #303338; + --link: #00aff4; + --highlight: #72767d; + --highlight-rgb: 114, 118, 125; + + --status-online: #43b581; + --status-idle: #faa61a; + --status-dnd: #f04747; + --status-offline: #747f8d; + --status-streaming: #593695; + + --titlebar-color: var(--highlight); + + --interactive-active: #060607 !important; +} diff --git a/modular/scheme_light/xmc.css b/modular/scheme_light/xmc.css new file mode 100644 index 0000000..82ad627 --- /dev/null +++ b/modular/scheme_light/xmc.css @@ -0,0 +1,46 @@ +.theme-light { + --_color0: #24292f; + --_color1: #ff8182; + --_color2: #4ac26b; + --_color3: #d4a72c; + --_color4: #54aeff; + --_color5: #c297ff; + --_color6: #76e3ea; + --_color7: #8c959f; + + --_color8: #32383f; + --_color9: #ffaba8; + --_color10: #6fdd8b; + --_color11: #eac54f; + --_color12: #80ccff; + --_color13: #d8b9ff; + --_color14: #b3f0ff; + --_color15: #d0d7de; + + --_colorFG: #373737; + + --primary: #fcfcf9; + --secondary: #f4f4f1; + --tertiary: #dcdace; + --primary-rgb: 252, 252, 249; + --secondary-rgb: 244, 244, 241; + --tertiary-rgb: 220, 218, 206; + + --accent: #58516d; + --accent-rgb: 88, 81, 109; + --red: var(--_color1); + --text: #373737; + --link: var(--_color6); + --highlight: #b0aca5; + --highlight-rgb: 176, 172, 165; + + --status-online: var(--_color4); + --status-idle: var(--_color3); + --status-dnd: var(--_color1); + --status-offline: var(--_color8); + --status-streaming: var(--_color5); + + --titlebar-color: var(--accent); + --interactive-hover: #494949 !important; + --interactive-active: #7a7a7a !important; +} diff --git a/modular/stylings.css b/modular/stylings.css index b562f0b..218aca0 100644 --- a/modular/stylings.css +++ b/modular/stylings.css @@ -1,26 +1,57 @@ -.theme-dark, :root { --_font-titlebars: "Segoe UI", sans-serif; +} - --button-bg: linear-gradient( - to bottom, - var(--background-primary), - var(--background-secondary) - ); - --button-shadow: inset 0 0 0 1px var(--background-tertiary), - inset 0 0 0 2px var(--background-primary), - inset 0 0 0 3px var(--background-secondary); - +.theme-dark { --hover-bg: #3f3f3f; --hover-shadow: inset 0 0 0 1px #373737, inset 0 0 0 2px #444444, inset 0 0 0 3px #3c3c3c; - --scrollbar-shadow: inset 0 0 0 1px var(--background-tertiary), - inset 0 0 0 2px #404040, inset 0 0 0 3px var(--background-primary), - inset 0 0 0 4px var(--background-secondary); - --scrollbar-shadow-hover: inset 0 0 0 1px var(--background-tertiary), - inset 0 0 0 2px #646464, inset 0 0 0 3px var(--background-primary), - inset 0 0 0 4px var(--background-secondary); + --button-bg: linear-gradient( + to bottom, + var(--primary, var(--background-primary)), + var(--secondary, var(--background-secondary)) + ); + --button-shadow: inset 0 0 0 1px var(--tertiary, var(--background-tertiary)), + inset 0 0 0 2px var(--primary, var(--background-primary)), + inset 0 0 0 3px var(--secondary, var(--background-secondary)); + + --scrollbar-shadow: inset 0 0 0 1px + var(--tertiary, var(--background-tertiary)), + inset 0 0 0 2px #404040, + inset 0 0 0 3px var(--primary, var(--background-primary)), + inset 0 0 0 4px var(--secondary, var(--background-secondary)); + --scrollbar-shadow-hover: inset 0 0 0 1px + var(--tertiary, var(--background-tertiary)), + inset 0 0 0 2px #646464, + inset 0 0 0 3px var(--primary, var(--background-primary)), + inset 0 0 0 4px var(--secondary, var(--background-secondary)); +} + +.theme-light { + --hover-bg: #ebeadf; + --hover-shadow: inset 0 0 0 1px #dfdcd2, inset 0 0 0 2px #fafaf8, + inset 0 0 0 3px #d1cec6; + + --button-bg: linear-gradient( + to bottom, + var(--primary, var(--background-primary)), + var(--secondary, var(--background-secondary)) + ); + --button-shadow: inset 0 0 0 1px var(--tertiary, var(--background-tertiary)), + inset 0 0 0 2px var(--primary, var(--background-primary)), + inset 0 0 0 3px var(--secondary, var(--background-secondary)); + + --scrollbar-shadow: inset 0 0 0 1px + var(--tertiary, var(--background-tertiary)), + inset 0 0 0 2px #404040, + inset 0 0 0 3px var(--primary, var(--background-primary)), + inset 0 0 0 4px var(--secondary, var(--background-secondary)); + --scrollbar-shadow-hover: inset 0 0 0 1px + var(--tertiary, var(--background-tertiary)), + inset 0 0 0 2px #646464, + inset 0 0 0 3px var(--primary, var(--background-primary)), + inset 0 0 0 4px var(--secondary, var(--background-secondary)); } [class*="button-"][class*="lookFilled-"], @@ -30,6 +61,7 @@ section[class^="panels-"] button[class^="button-"], [class^="toolbar-"] [class^="iconWrapper-"] { border-radius: 0; + color: var(--text) !important; background: var(--button-bg) !important; box-shadow: var(--button-shadow) !important; }