|
|
|
|
@ -1,97 +1,97 @@ |
|
|
|
|
:root { |
|
|
|
|
--gruv-font-family: "Fira Code"; |
|
|
|
|
--gruv-font-size: 14px; |
|
|
|
|
|
|
|
|
|
--gruv-bg-dark: #1d2021; |
|
|
|
|
--gruv-bg-darkisher: #202020; |
|
|
|
|
--gruv-bg-darkish: #222222; |
|
|
|
|
--gruv-bg-normal: #282828; |
|
|
|
|
--gruv-bg-brighter: #504945; |
|
|
|
|
|
|
|
|
|
--gruv-border: #353331; |
|
|
|
|
|
|
|
|
|
--gruv-fg-brighter: #fbf1c7; |
|
|
|
|
--gruv-fg-normal: #ebdbb2; |
|
|
|
|
--gruv-fg-darker: #d5c4a1; |
|
|
|
|
--gruv-fg-dark: #a89984; |
|
|
|
|
--gruv-fg-inactive: #696969; |
|
|
|
|
|
|
|
|
|
--gruv-red: #fb4934; |
|
|
|
|
--gruv-purple: #b16286; |
|
|
|
|
--gruv-blue: #458588; |
|
|
|
|
--gruv-green: #b8bb26; |
|
|
|
|
--gruv-aqua: #83c07c; |
|
|
|
|
--gruv-yellow: #fabd2f; |
|
|
|
|
--gruv-orange: #fe8019; |
|
|
|
|
|
|
|
|
|
--gruv-accent: var(--gruv-aqua); |
|
|
|
|
|
|
|
|
|
--button: #daddee1a; |
|
|
|
|
--gruv-font-family: "Fira Code"; |
|
|
|
|
--gruv-font-size: 16px; |
|
|
|
|
|
|
|
|
|
--gruv-bg-dark: #1d2021; |
|
|
|
|
--gruv-bg-dark1: #222222; |
|
|
|
|
--gruv-bg-dark2: #202020; |
|
|
|
|
--gruv-bg-normal: #282828; |
|
|
|
|
--gruv-bg-light: #504945; |
|
|
|
|
|
|
|
|
|
--gruv-border: #353331; |
|
|
|
|
|
|
|
|
|
--gruv-fg-light: #fbf1c7; |
|
|
|
|
--gruv-fg-normal: #ebdbb2; |
|
|
|
|
--gruv-fg-light-dark: #d5c4a1; |
|
|
|
|
--gruv-fg-dark: #a89984; |
|
|
|
|
--gruv-fg-inactive: #696969; |
|
|
|
|
|
|
|
|
|
--gruv-red: #fb4934; |
|
|
|
|
--gruv-purple: #b16286; |
|
|
|
|
--gruv-blue: #458588; |
|
|
|
|
--gruv-green: #b8bb26; |
|
|
|
|
--gruv-aqua: #83c07c; |
|
|
|
|
--gruv-yellow: #fabd2f; |
|
|
|
|
--gruv-orange: #fe8019; |
|
|
|
|
|
|
|
|
|
--gruv-accent: var(--gruv-aqua); |
|
|
|
|
|
|
|
|
|
--button: #daddee1a; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.theme-dark { |
|
|
|
|
--header-primary: var(--gruv-fg-brighter); |
|
|
|
|
--header-secondary: var(--gruv-fg-darker); |
|
|
|
|
--text-normal: var(--gruv-fg-brighter); |
|
|
|
|
--text-muted: var(--gruv-fg-darker); |
|
|
|
|
--text-link: var(--gruv-accent); |
|
|
|
|
--channels-default: var(--gruv-fg-darker); |
|
|
|
|
--interactive-normal: var(--gruv-fg-darker); |
|
|
|
|
--interactive-hover: var(--gruv-fg-brighter); |
|
|
|
|
--interactive-active: var(--gruv-fg-brighter); |
|
|
|
|
--interactive-muted: var(--gruv-fg-darker); |
|
|
|
|
--background-primary: var(--gruv-bg-normal); |
|
|
|
|
--background-secondary: var(--gruv-bg-darkish); |
|
|
|
|
--background-secondary-alt: var(--gruv-bg-normal); |
|
|
|
|
--background-tertiary: var(--gruv-bg-normal); |
|
|
|
|
--background-accent: var(--gruv-accent); |
|
|
|
|
--background-floating: var(--gruv-bg-normal); |
|
|
|
|
--background-modifier-hover: rgba(79, 84, 92, 0.16); |
|
|
|
|
--background-modifier-active: rgba(79, 84, 92, 0.24); |
|
|
|
|
/*--background-modifier-accent: hsla(0, 0%, 100%, 0.06);*/ |
|
|
|
|
--background-modifier-accent: rgba(0, 0, 0, 0); |
|
|
|
|
--elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24); |
|
|
|
|
--guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); |
|
|
|
|
--channeltextarea-background: var(--gruv-bg-normal); |
|
|
|
|
--activity-card-background: var(--gruv-bg-darkish); |
|
|
|
|
--deprecated-panel-background: var(--gruv-bg-dark); |
|
|
|
|
--background-modifier-selected: var(--gruv-bg-normal); |
|
|
|
|
--elevation-low: none !important; |
|
|
|
|
--background-message-hover: var(--gruv-bg-darkish) !important; |
|
|
|
|
--header-primary: var(--gruv-fg-light); |
|
|
|
|
--header-secondary: var(--gruv-fg-light-dark); |
|
|
|
|
--text-normal: var(--gruv-fg-light); |
|
|
|
|
--text-muted: var(--gruv-fg-light-dark); |
|
|
|
|
--text-link: var(--gruv-accent); |
|
|
|
|
--channels-default: var(--gruv-fg-light-dark); |
|
|
|
|
--interactive-normal: var(--gruv-fg-light-dark); |
|
|
|
|
--interactive-hover: var(--gruv-fg-light); |
|
|
|
|
--interactive-active: var(--gruv-fg-light); |
|
|
|
|
--interactive-muted: var(--gruv-fg-light-dark); |
|
|
|
|
--background-primary: var(--gruv-bg-normal); |
|
|
|
|
--background-secondary: var(--gruv-bg-dark1); |
|
|
|
|
--background-secondary-alt: var(--gruv-bg-normal); |
|
|
|
|
--background-tertiary: var(--gruv-bg-normal); |
|
|
|
|
--background-accent: var(--gruv-accent); |
|
|
|
|
--background-floating: var(--gruv-bg-normal); |
|
|
|
|
--background-modifier-hover: rgba(79, 84, 92, 0.16); |
|
|
|
|
--background-modifier-active: rgba(79, 84, 92, 0.24); |
|
|
|
|
/*--background-modifier-accent: hsla(0, 0%, 100%, 0.06);*/ |
|
|
|
|
--background-modifier-accent: rgba(0, 0, 0, 0); |
|
|
|
|
--elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24); |
|
|
|
|
--guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); |
|
|
|
|
--channeltextarea-background: var(--gruv-bg-normal); |
|
|
|
|
--activity-card-background: var(--gruv-bg-dark1); |
|
|
|
|
--deprecated-panel-background: var(--gruv-bg-dark); |
|
|
|
|
--background-modifier-selected: var(--gruv-bg-normal); |
|
|
|
|
--elevation-low: none !important; |
|
|
|
|
--background-message-hover: var(--gruv-bg-dark1) !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
* { |
|
|
|
|
font-family: var(--gruv-font-family) !important; |
|
|
|
|
font-weight: normal; |
|
|
|
|
font-size: var(--gruv-font-size) !important; |
|
|
|
|
font-family: var(--gruv-font-family) !important; |
|
|
|
|
font-weight: normal; |
|
|
|
|
font-size: var(--gruv-font-size) !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Make channel list more compact */ |
|
|
|
|
[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] { |
|
|
|
|
height: 25px !important; |
|
|
|
|
} |
|
|
|
|
/* [class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] { */ |
|
|
|
|
/* height: 20px !important; */ |
|
|
|
|
/* } */ |
|
|
|
|
|
|
|
|
|
/* Chat content */ |
|
|
|
|
[class*="chatContent"] [class*="form"] { |
|
|
|
|
padding-top: 0.5rem; |
|
|
|
|
background-color: var(--gruv-bg-normal); |
|
|
|
|
box-shadow: 0 -20px 40px -20px #0000006e; |
|
|
|
|
padding-top: 0.5rem; |
|
|
|
|
background-color: var(--gruv-bg-normal); |
|
|
|
|
box-shadow: 0 -20px 40px -20px #0000006e; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Chat profiles */ |
|
|
|
|
img[class*="avatar"] { |
|
|
|
|
border-radius: 20%; |
|
|
|
|
overflow: hidden; |
|
|
|
|
transition: filter 0.1s, transform 0.1s ease-in-out; |
|
|
|
|
border-radius: 20%; |
|
|
|
|
overflow: hidden; |
|
|
|
|
transition: filter 0.1s, transform 0.1s ease-in-out; |
|
|
|
|
} |
|
|
|
|
img[class*="avatar"]:hover { |
|
|
|
|
transform: scale(1.1); |
|
|
|
|
transform: scale(1.1); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Live tag when streaming */ |
|
|
|
|
[class*="live"][class*="textBadge"] { |
|
|
|
|
background-color: var(--gruv-red) !important; |
|
|
|
|
color: var(--gruv-fg-normal); |
|
|
|
|
background-color: var(--gruv-red) !important; |
|
|
|
|
color: var(--gruv-fg-normal); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
code.hljs:not(.inline)::before { |
|
|
|
|
@ -106,26 +106,14 @@ code.hljs:not(.inline)::before { |
|
|
|
|
line-height: 20px; |
|
|
|
|
overflow-x: hidden; |
|
|
|
|
scrollbar-width: none; |
|
|
|
|
color: var(--gruv-fg-darker); |
|
|
|
|
color: var(--gruv-fg-light-dark); |
|
|
|
|
opacity: 0.6; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Icons etc, sidebar stuff */ |
|
|
|
|
[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] { |
|
|
|
|
height: 25px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] > * { |
|
|
|
|
font-size: 15px !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Icons color */ |
|
|
|
|
[class*="sidebar"] [class*="containerDefault"] [class*="mainContent"] div[class*="iconContainer-"] svg { |
|
|
|
|
color: var(--gruv-fg-darker) !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
[class*="sidebar"] [class*="containerDefault"] [class*="iconVisibility-"] [class*="children-"]{ |
|
|
|
|
height: 25px; |
|
|
|
|
color: var(--gruv-fg-light-dark) !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Scrollbar */ |
|
|
|
|
@ -133,6 +121,23 @@ code.hljs:not(.inline)::before { |
|
|
|
|
::-webkit-scrollbar-track, |
|
|
|
|
::-webkit-scrollbar-track-handle, |
|
|
|
|
::-webkit-scrollbar-track-piece { |
|
|
|
|
border-color: rgba(0, 0, 0, 0) !important; |
|
|
|
|
background-color: rgba(0, 0, 0, 0) !important; |
|
|
|
|
border-color: rgba(0, 0, 0, 0) !important; |
|
|
|
|
background-color: rgba(0, 0, 0, 0) !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/*Chat stuff*/ |
|
|
|
|
div[class*="chat"] div[class*="root"] { |
|
|
|
|
background-color: var(--gruv-bg-normal); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
div[class*="autocomplete-"] div[class*="rail"] > div { |
|
|
|
|
background-color: var(--gruv-bg-normal) !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
div[class*="autocomplete-"], div[class*="autocomplete-"] div[class*="categoryHeader"] { |
|
|
|
|
background-color: var(--gruv-bg-dark) !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
div[class*="noAutocompleteResults-"] * { |
|
|
|
|
color: var(--gruv-fg-darker); |
|
|
|
|
} |
|
|
|
|
|
