This commit is contained in:
Mirco Wittrien 2021-05-11 11:28:22 +02:00
parent 8e3923a7a1
commit f1a2cbc0e3
3 changed files with 89 additions and 63 deletions

View File

@ -9,12 +9,16 @@
--guildchanneltransparency: 0.15; --guildchanneltransparency: 0.15;
--memberlisttransparency: 0.0; --memberlisttransparency: 0.0;
--font: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
--textshadow: transparent;
--accentcolor: 190,78,180; --accentcolor: 190,78,180;
--accentcolor2: var(--accentcolor); --accentcolor2: var(--accentcolor);
--linkcolor: var(--accentcolor); --linkcolor: var(--accentcolor);
--font: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; --successcolor: 59,165,92;
--textshadow: transparent; --warningcolor: 250,166,26;
--dangercolor: 240,71,71;
--textbrightest: 255,255,255; --textbrightest: 255,255,255;
--textbrighter: 222,222,222; --textbrighter: 222,222,222;
@ -40,25 +44,42 @@
} }
.theme-light, .theme-dark { .theme-light, .theme-dark {
--text-positive: rgb(var(--successcolor));
--text-warning: rgb(var(--warningcolor));
--text-danger: rgb(var(--dangercolor));
--info-positive-background: rgba(var(--successcolor),.1);
--info-positive-foreground: rgb(var(--successcolor));
--info-positive-text: #fff;
--info-warning-background: rgba(var(--warningcolor),.1);
--info-warning-foreground: rgb(var(--warningcolor));
--info-warning-text: #fff;
--info-danger-background: rgba(var(--dangercolor),.1);
--info-danger-foreground: rgb(var(--dangercolor));
--info-danger-text: #fff;
--status-positive-background: rgb(var(--successcolor));
--status-positive-text: #fff;
--status-warning-background: rgb(var(--warningcolor));
--status-warning-text: #fff;
--status-danger-background: rgb(var(--dangercolor));
--status-danger-text: #fff;
--header-primary: rgb(var(--textbrightest));
--header-secondary: rgb(var(--textbright));
--text-normal: rgb(var(--textbrighter));
--text-muted: rgb(var(--textdarker));
--channels-default: rgb(var(--textdark));
--interactive-normal: rgb(var(--textbright));
--interactive-hover: rgb(var(--textbrighter));
--interactive-active: rgb(var(--textbrightest));
--interactive-muted: rgb(var(--textdarkest));
--logo-primary: rgb(var(--textbrightest));
--background-primary: rgba(var(--transparencycolor), .1); --background-primary: rgba(var(--transparencycolor), .1);
--background-secondary: rgba(var(--transparencycolor), .2); --background-secondary: rgba(var(--transparencycolor), .2);
--background-secondary-alt: rgba(var(--transparencycolor), .3); --background-secondary-alt: rgba(var(--transparencycolor), .3);
--background-tertiary: rgba(var(--transparencycolor), .4); --background-tertiary: rgba(var(--transparencycolor), .4);
--background-floating: rgba(var(--transparencycolor), .5); --background-floating: rgba(var(--transparencycolor), .5);
--background-modifier-accent: rgba(var(--textbrightest),.1); --background-modifier-accent: rgba(var(--textbrightest),.1);
--header-primary: rgb(var(--textbrightest));
--header-secondary: rgb(var(--textbright));
--text-normal: rgb(var(--textbrighter));
--text-muted: rgb(var(--textdarker));
--text-link: rgb(var(--linkcolor));
--channels-default: rgb(var(--textdark));
--interactive-normal: rgb(var(--textbright));
--interactive-hover: rgb(var(--textbrighter));
--interactive-active: rgb(var(--textbrightest));
--interactive-muted: rgb(var(--textdarkest));
--elevation-low: 0 1px 5px 0 rgba(var(--transparencycolor), .3); --elevation-low: 0 1px 5px 0 rgba(var(--transparencycolor), .3);
--elevation-high: 0 2px 10px 0 rgba(var(--transparencycolor), .3); --elevation-high: 0 2px 10px 0 rgba(var(--transparencycolor), .3);
--logo-primary: rgb(var(--textbrightest));
} }
@ -346,7 +367,7 @@ body::before {
.guildIconUnavailable-3IYARS, /* guilderror miniicon */ .guildIconUnavailable-3IYARS, /* guilderror miniicon */
.guildsError-g6NwOI { /* guilderror innerwrap */ .guildsError-g6NwOI { /* guilderror innerwrap */
background-color: rgba(240, 71, 71, .3); background-color: rgba(var(--dangercolor)),.3);
} }
.dragInner-Oq_toX { /* dragplaceholder */ .dragInner-Oq_toX { /* dragplaceholder */
@ -1460,10 +1481,10 @@ body::before {
background-color: rgba(var(--transparencycolor), .6); background-color: rgba(var(--transparencycolor), .6);
} }
.controlButton-2MhVEL.leaveButton-2YnTyt { .controlButton-2MhVEL.leaveButton-2YnTyt {
background-color: rgba(240, 71, 71, .5); background-color: rgba(var(--dangercolor)),.5);
} }
.controlButton-2MhVEL.leaveButton-2YnTyt:hover { .controlButton-2MhVEL.leaveButton-2YnTyt:hover {
background-color: rgb(240, 71, 71); background-color: rgb(var(--dangercolor));
} }
.regionSelectPopout-p9-0_W { .regionSelectPopout-p9-0_W {
width: 170px; width: 170px;
@ -4103,7 +4124,7 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr
} }
.item-1tOPte.colorDanger-2qLCe1.focused-3afm-j, .item-1tOPte.colorDanger-2qLCe1.focused-3afm-j,
.item-1tOPte.colorDanger-2qLCe1:hover:not(.hideInteraction-1iHO1O) { .item-1tOPte.colorDanger-2qLCe1:hover:not(.hideInteraction-1iHO1O) {
background-color: rgba(240, 71, 71, .2); background-color: rgba(var(--dangercolor)),.2);
} }
.item-1tOPte.colorBrand-ROmMP1.focused-3afm-j, .item-1tOPte.colorBrand-ROmMP1.focused-3afm-j,
.item-1tOPte.colorBrand-ROmMP1:hover:not(.hideInteraction-1iHO1O), .item-1tOPte.colorBrand-ROmMP1:hover:not(.hideInteraction-1iHO1O),
@ -4121,7 +4142,7 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr
color: rgb(var(--accentcolor)); color: rgb(var(--accentcolor));
} }
#app-mount .item-1tOPte.colorDanger-2qLCe1 .checkbox-3s5GYZ { #app-mount .item-1tOPte.colorDanger-2qLCe1 .checkbox-3s5GYZ {
color: #F04747; color: rgb(var(--dangercolor));
} }
#app-mount .item-1tOPte .check-1JyqgN { /* contextmenu checkmark */ #app-mount .item-1tOPte .check-1JyqgN { /* contextmenu checkmark */
color: #fff; color: #fff;
@ -5857,8 +5878,8 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr
background: var(--header-primary); background: var(--header-primary);
} }
#app-mount .container-CpszHS.recording-1H2dS7 .button-34kXw5 { #app-mount .container-CpszHS.recording-1H2dS7 .button-34kXw5 {
color: #f04747; color: rgb(var(--dangercolor));
background-color: rgba(240,71,71,.1); background-color: rgba(var(--dangercolor)),.1);
} }
.select-2TCrqx [class*="css-"][class*="-container"] { /* select container */ .select-2TCrqx [class*="css-"][class*="-container"] { /* select container */

View File

@ -5,10 +5,10 @@
--accentcolor2: 255,115,250; --accentcolor2: 255,115,250;
--linkcolor: 0,176,244; --linkcolor: 0,176,244;
--accentcolor-hover: rgb(var(--accentcolor)) linear-gradient(0deg,rgba(255,255,255,.15),rgba(255,255,255,.15)); --accentcolor-hover: rgb(var(--accentcolor)) linear-gradient(0deg, rgba(255,255,255,.15), rgba(255,255,255,.15));
--accentcolor-active: rgb(var(--accentcolor)) linear-gradient(0deg,rgba(255,255,255,.3),rgba(255,255,255,.3)); --accentcolor-active: rgb(var(--accentcolor)) linear-gradient(0deg, rgba(255,255,255,.3), rgba(255,255,255,.3));
--accentcolor2-hover: rgb(var(--accentcolor2)) linear-gradient(0deg,rgba(255,255,255,.15),rgba(255,255,255,.15)); --accentcolor2-hover: rgb(var(--accentcolor2)) linear-gradient(0deg, rgba(255,255,255,.15), rgba(255,255,255,.15));
--accentcolor2-active: rgb(var(--accentcolor2)) linear-gradient(0deg,rgba(255,255,255,.3),rgba(255,255,255,.3)); --accentcolor2-active: rgb(var(--accentcolor2)) linear-gradient(0deg, rgba(255,255,255,.3), rgba(255,255,255,.3));
--bdfdb-blurple: rgb(var(--accentcolor)) !important; --bdfdb-blurple: rgb(var(--accentcolor)) !important;
--bd-blue: rgb(var(--accentcolor)) !important; --bd-blue: rgb(var(--accentcolor)) !important;
@ -20,9 +20,9 @@
--text-link: rgb(var(--linkcolor)); --text-link: rgb(var(--linkcolor));
--info-help-background: rgba(var(--linkcolor),.1); --info-help-background: rgba(var(--linkcolor),.1);
--info-help-foreground: rgb(var(--linkcolor)); --info-help-foreground: rgb(var(--linkcolor));
--info-help-text: #fff;
--focus-primary: rgb(var(--linkcolor)); --focus-primary: rgb(var(--linkcolor));
--control-brand-foreground: rgb(var(--accentcolor)); --control-brand-foreground: rgb(var(--accentcolor));
--radio-group-dot-foreground: rgb(var(--accentcolor)); /* REMOVE AFTER REBRAND */
} }
.theme-light { .theme-light {
--logo-primary: rgb(var(--accentcolor)); --logo-primary: rgb(var(--accentcolor));
@ -1232,7 +1232,7 @@ html.oldBrand, html.newBrand {
} }
.uploadModalIn-1z07Bv .error-kKl9o2 .icon-kyxXVr:not(.image-2yrs5j)::before, .uploadModalIn-1z07Bv .error-kKl9o2 .icon-kyxXVr:not(.image-2yrs5j)::before,
.uploadModalIn-1z07Bv .error-kKl9o2 .icon-kyxXVr:not(.image-2yrs5j)::after { .uploadModalIn-1z07Bv .error-kKl9o2 .icon-kyxXVr:not(.image-2yrs5j)::after {
background: rgb(240, 71, 71); background: #d83c3f;
} }
.attachment-33OFj0 .icon-1kp3fr + *::before, .attachment-33OFj0 .icon-1kp3fr + *::before,
.audioMetadata-3zOuGv > *:first-child::before, .audioMetadata-3zOuGv > *:first-child::before,

View File

@ -4,7 +4,9 @@
:root { :root {
--font: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; --font: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
--mentioncolor: 250,166,26; --successcolor: 59,165,92;
--warningcolor: 250,166,26;
--dangercolor: 240,71,71;
--textbrightest: 255,255,255; --textbrightest: 255,255,255;
--textbrighter: 220,221,222; --textbrighter: 220,221,222;
@ -22,11 +24,28 @@
} }
.theme-dark, .theme-light { .theme-dark, .theme-light {
--text-positive: rgb(var(--successcolor));
--text-warning: rgb(var(--warningcolor));
--text-danger: rgb(var(--dangercolor));
--info-positive-background: rgba(var(--successcolor),.1);
--info-positive-foreground: rgb(var(--successcolor));
--info-positive-text: #fff;
--info-warning-background: rgba(var(--warningcolor),.1);
--info-warning-foreground: rgb(var(--warningcolor));
--info-warning-text: #fff;
--info-danger-background: rgba(var(--dangercolor),.1);
--info-danger-foreground: rgb(var(--dangercolor));
--info-danger-text: #fff;
--status-positive-background: rgb(var(--successcolor));
--status-positive-text: #fff;
--status-warning-background: rgb(var(--warningcolor));
--status-warning-text: #fff;
--status-danger-background: rgb(var(--dangercolor));
--status-danger-text: #fff;
--header-primary: rgb(var(--textbrightest)); --header-primary: rgb(var(--textbrightest));
--header-secondary: rgb(var(--textbright)); --header-secondary: rgb(var(--textbright));
--text-normal: rgb(var(--textbrighter)); --text-normal: rgb(var(--textbrighter));
--text-muted: rgb(var(--textdarker)); --text-muted: rgb(var(--textdarker));
--text-link: rgb(var(--linkcolor));
--channels-default: rgb(var(--textdark)); --channels-default: rgb(var(--textdark));
--interactive-normal: rgb(var(--textbright)); --interactive-normal: rgb(var(--textbright));
--interactive-hover: rgb(var(--textbrighter)); --interactive-hover: rgb(var(--textbrighter));
@ -44,11 +63,9 @@
--background-modifier-active: rgba(var(--backgroundaccent),.4); --background-modifier-active: rgba(var(--backgroundaccent),.4);
--background-modifier-selected: rgba(var(--backgroundaccent),.6); --background-modifier-selected: rgba(var(--backgroundaccent),.6);
--background-modifier-accent: rgba(var(--textdark),.1); --background-modifier-accent: rgba(var(--textdark),.1);
--background-mentioned: rgba(var(--mentioncolor),.05); --background-mentioned: rgba(var(--warningcolor),.05);
--background-mentioned-hover: rgba(var(--mentioncolor),.08); --background-mentioned-hover: rgba(var(--warningcolor),.08);
--background-message-hover: rgba(var(--backgroundfloating),.15); --background-message-hover: rgba(var(--backgroundfloating),.15);
--background-help-warning: rgba(var(--mentioncolor),.1);
--background-help-info: rgba(var(--linkcolor),.1);
--scrollbar-thin-thumb: rgb(var(--backgroundtertiary)); --scrollbar-thin-thumb: rgb(var(--backgroundtertiary));
--scrollbar-thin-track: transparent; --scrollbar-thin-track: transparent;
--scrollbar-auto-thumb: rgb(var(--backgroundtertiary)); --scrollbar-auto-thumb: rgb(var(--backgroundtertiary));
@ -197,10 +214,10 @@ svg [fill="#4F545C"] {
} }
::selection { ::selection {
background: rgb(var(--mentioncolor)); background: rgb(var(--warningcolor));
} }
.highlight { .highlight {
background: rgba(var(--mentioncolor),.3); background: rgba(var(--warningcolor),.3);
} }
#app-mount .elevationLow-2lY09M, #app-mount .elevationLow-126AxN, .lightElevationLow-3_Ybxi, .darkElevationLow-DABD7i { #app-mount .elevationLow-2lY09M, #app-mount .elevationLow-126AxN, .lightElevationLow-3_Ybxi, .darkElevationLow-DABD7i {
@ -999,18 +1016,6 @@ img[src='/assets/58957d928db6fb9d4658eb882f33d7bc.svg'] {
box-shadow: 0 0 0 1px rgba(var(--backgroundtertiary),.6),0 2px 10px 0 rgba(0,0,0,.2); box-shadow: 0 0 0 1px rgba(var(--backgroundtertiary),.6),0 2px 10px 0 rgba(0,0,0,.2);
} }
.mentioned-xhSam7 { /* mentioned container */
background-color: rgba(var(--mentioncolor), .05);
}
.mentioned-xhSam7::before { /* mentioned before */
background-color: rgb(var(--mentioncolor));
}
.message-2qnXI6.mentioned-xhSam7.selected-2P5D_Z,
.mouse-mode.full-motion .mentioned-xhSam7:hover,
.mouse-mode .mentioned-xhSam7:hover {
background-color: rgba(var(--mentioncolor), .1);
}
#app-mount .ephemeralMessage-1fEWtQ, #app-mount .ephemeralMessage-1fEWtQ,
#app-mount .operations-36ENbA { #app-mount .operations-36ENbA {
color: var(--channels-default); color: var(--channels-default);
@ -3962,7 +3967,7 @@ html .floating-window-buttons .button:hover {
color: var(--interactive-hover); color: var(--interactive-hover);
} }
html .floating-window-buttons .close-button:hover { html .floating-window-buttons .close-button:hover {
background-color: #f04747; background-color: rgb(var(--dangercolor));
color: var(--interactive-hover); color: var(--interactive-hover);
} }
html .floating-window-buttons .button svg { html .floating-window-buttons .button svg {
@ -4059,7 +4064,7 @@ html .monaco-editor .selected-text {
background-color: var(--background-tertiary); background-color: var(--background-tertiary);
} }
html .monaco-editor .focused .selected-text { html .monaco-editor .focused .selected-text {
background-color: rgb(var(--mentioncolor)); background-color: rgb(var(--warningcolor));
} }
html .monaco-editor.rename-box { html .monaco-editor.rename-box {
@ -4179,7 +4184,7 @@ html .monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-
color: var(--header-primary) !important; color: var(--header-primary) !important;
} }
html .monaco-editor .reference-zone-widget .ref-tree .referenceMatch .highlight { html .monaco-editor .reference-zone-widget .ref-tree .referenceMatch .highlight {
background: rgb(var(--mentioncolor)); background: rgb(var(--warningcolor));
} }
html .codicon-close, html .codicon-close,
html .codicon-remove-close, html .codicon-remove-close,
@ -4425,7 +4430,7 @@ html .channelTabs-tab.channelTabs-selected .channelTabs-closeTab {
} }
html .channelTabs-closeTab:hover, html .channelTabs-closeTab:hover,
html .channelTabs-tab.channelTabs-selected .channelTabs-closeTab:hover { html .channelTabs-tab.channelTabs-selected .channelTabs-closeTab:hover {
background: #f04747; background: rgb(var(--dangercolor));
color: var(--interactive-active); color: var(--interactive-active);
} }
html .channelTabs-newTab { html .channelTabs-newTab {