diff --git a/Themes/BasicBackground/BasicBackground.css b/Themes/BasicBackground/BasicBackground.css index 183c2dcfc3..7d18d55409 100644 --- a/Themes/BasicBackground/BasicBackground.css +++ b/Themes/BasicBackground/BasicBackground.css @@ -9,12 +9,16 @@ --guildchanneltransparency: 0.15; --memberlisttransparency: 0.0; + --font: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; + --textshadow: transparent; + --accentcolor: 190,78,180; --accentcolor2: var(--accentcolor); --linkcolor: var(--accentcolor); - --font: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif; - --textshadow: transparent; + --successcolor: 59,165,92; + --warningcolor: 250,166,26; + --dangercolor: 240,71,71; --textbrightest: 255,255,255; --textbrighter: 222,222,222; @@ -40,25 +44,42 @@ } .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-secondary: rgba(var(--transparencycolor), .2); --background-secondary-alt: rgba(var(--transparencycolor), .3); --background-tertiary: rgba(var(--transparencycolor), .4); --background-floating: rgba(var(--transparencycolor), .5); --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-high: 0 2px 10px 0 rgba(var(--transparencycolor), .3); - --logo-primary: rgb(var(--textbrightest)); } @@ -346,7 +367,7 @@ body::before { .guildIconUnavailable-3IYARS, /* guilderror miniicon */ .guildsError-g6NwOI { /* guilderror innerwrap */ - background-color: rgba(240, 71, 71, .3); + background-color: rgba(var(--dangercolor)),.3); } .dragInner-Oq_toX { /* dragplaceholder */ @@ -1460,10 +1481,10 @@ body::before { background-color: rgba(var(--transparencycolor), .6); } .controlButton-2MhVEL.leaveButton-2YnTyt { - background-color: rgba(240, 71, 71, .5); + background-color: rgba(var(--dangercolor)),.5); } .controlButton-2MhVEL.leaveButton-2YnTyt:hover { - background-color: rgb(240, 71, 71); + background-color: rgb(var(--dangercolor)); } .regionSelectPopout-p9-0_W { width: 170px; @@ -4103,7 +4124,7 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr } .item-1tOPte.colorDanger-2qLCe1.focused-3afm-j, .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:hover:not(.hideInteraction-1iHO1O), @@ -4121,7 +4142,7 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr color: rgb(var(--accentcolor)); } #app-mount .item-1tOPte.colorDanger-2qLCe1 .checkbox-3s5GYZ { - color: #F04747; + color: rgb(var(--dangercolor)); } #app-mount .item-1tOPte .check-1JyqgN { /* contextmenu checkmark */ color: #fff; @@ -5857,8 +5878,8 @@ img[src="/assets/cef02719c12d8aaf38894c16dca7fbe6.svg"] { /* rolesettings addr background: var(--header-primary); } #app-mount .container-CpszHS.recording-1H2dS7 .button-34kXw5 { - color: #f04747; - background-color: rgba(240,71,71,.1); + color: rgb(var(--dangercolor)); + background-color: rgba(var(--dangercolor)),.1); } .select-2TCrqx [class*="css-"][class*="-container"] { /* select container */ diff --git a/Themes/BlurpleRecolor/BlurpleRecolor.css b/Themes/BlurpleRecolor/BlurpleRecolor.css index 1bbb637c9e..b8a7a068b0 100644 --- a/Themes/BlurpleRecolor/BlurpleRecolor.css +++ b/Themes/BlurpleRecolor/BlurpleRecolor.css @@ -5,10 +5,10 @@ --accentcolor2: 255,115,250; --linkcolor: 0,176,244; - --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)); - --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)); + --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)); + --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)); --bdfdb-blurple: rgb(var(--accentcolor)) !important; --bd-blue: rgb(var(--accentcolor)) !important; @@ -20,9 +20,9 @@ --text-link: rgb(var(--linkcolor)); --info-help-background: rgba(var(--linkcolor),.1); --info-help-foreground: rgb(var(--linkcolor)); + --info-help-text: #fff; --focus-primary: rgb(var(--linkcolor)); --control-brand-foreground: rgb(var(--accentcolor)); - --radio-group-dot-foreground: rgb(var(--accentcolor)); /* REMOVE AFTER REBRAND */ } .theme-light { --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)::after { - background: rgb(240, 71, 71); + background: #d83c3f; } .attachment-33OFj0 .icon-1kp3fr + *::before, .audioMetadata-3zOuGv > *:first-child::before, diff --git a/Themes/DiscordRecolor/DiscordRecolor.css b/Themes/DiscordRecolor/DiscordRecolor.css index 20e0a46a24..adfbe7921b 100644 --- a/Themes/DiscordRecolor/DiscordRecolor.css +++ b/Themes/DiscordRecolor/DiscordRecolor.css @@ -2,31 +2,50 @@ @import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/BlurpleRecolor/BlurpleRecolor.css); :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; - --textbrighter: 220,221,222; - --textbright: 185,187,190; - --textdark: 142,146,151; - --textdarker: 114,118,125; - --textdarkest: 79,84,92; + --textbrightest: 255,255,255; + --textbrighter: 220,221,222; + --textbright: 185,187,190; + --textdark: 142,146,151; + --textdarker: 114,118,125; + --textdarkest: 79,84,92; - --backgroundaccent: 64,68,75; - --backgroundprimary: 54,57,63; - --backgroundsecondary: 47,49,54; - --backgroundsecondaryalt: 41,43,47; - --backgroundtertiary: 32,34,37; - --backgroundfloating: 24,25,28; + --backgroundaccent: 64,68,75; + --backgroundprimary: 54,57,63; + --backgroundsecondary: 47,49,54; + --backgroundsecondaryalt: 41,43,47; + --backgroundtertiary: 32,34,37; + --backgroundfloating: 24,25,28; } .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-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)); @@ -44,11 +63,9 @@ --background-modifier-active: rgba(var(--backgroundaccent),.4); --background-modifier-selected: rgba(var(--backgroundaccent),.6); --background-modifier-accent: rgba(var(--textdark),.1); - --background-mentioned: rgba(var(--mentioncolor),.05); - --background-mentioned-hover: rgba(var(--mentioncolor),.08); + --background-mentioned: rgba(var(--warningcolor),.05); + --background-mentioned-hover: rgba(var(--warningcolor),.08); --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-track: transparent; --scrollbar-auto-thumb: rgb(var(--backgroundtertiary)); @@ -197,10 +214,10 @@ svg [fill="#4F545C"] { } ::selection { - background: rgb(var(--mentioncolor)); + background: rgb(var(--warningcolor)); } .highlight { - background: rgba(var(--mentioncolor),.3); + background: rgba(var(--warningcolor),.3); } #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); } -.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 .operations-36ENbA { color: var(--channels-default); @@ -3962,7 +3967,7 @@ html .floating-window-buttons .button:hover { color: var(--interactive-hover); } html .floating-window-buttons .close-button:hover { - background-color: #f04747; + background-color: rgb(var(--dangercolor)); color: var(--interactive-hover); } html .floating-window-buttons .button svg { @@ -4059,7 +4064,7 @@ html .monaco-editor .selected-text { background-color: var(--background-tertiary); } html .monaco-editor .focused .selected-text { - background-color: rgb(var(--mentioncolor)); + background-color: rgb(var(--warningcolor)); } 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; } html .monaco-editor .reference-zone-widget .ref-tree .referenceMatch .highlight { - background: rgb(var(--mentioncolor)); + background: rgb(var(--warningcolor)); } html .codicon-close, html .codicon-remove-close, @@ -4425,7 +4430,7 @@ html .channelTabs-tab.channelTabs-selected .channelTabs-closeTab { } html .channelTabs-closeTab:hover, html .channelTabs-tab.channelTabs-selected .channelTabs-closeTab:hover { - background: #f04747; + background: rgb(var(--dangercolor)); color: var(--interactive-active); } html .channelTabs-newTab {