283 lines
8.7 KiB
CSS
283 lines
8.7 KiB
CSS
|
:root {{
|
||
|
|
/* Special */
|
||
|
|
--background: {background};
|
||
|
|
--foreground: {foreground};
|
||
|
|
--cursor: {cursor};
|
||
|
|
|
||
|
|
/* Colors */
|
||
|
|
--color0: {color0};
|
||
|
|
--color1: {color1};
|
||
|
|
--color2: {color2};
|
||
|
|
--color3: {color3};
|
||
|
|
--color4: {color4};
|
||
|
|
--color5: {color5};
|
||
|
|
--color6: {color6};
|
||
|
|
--color7: {color7};
|
||
|
|
--color8: {color8};
|
||
|
|
--color9: {color9};
|
||
|
|
--color10: {color10};
|
||
|
|
--color11: {color11};
|
||
|
|
--color12: {color12};
|
||
|
|
--color13: {color13};
|
||
|
|
--color14: {color14};
|
||
|
|
--color15: {color15};
|
||
|
|
|
||
|
|
/* Transparency values (TODO: make it work with color0)
|
||
|
|
100% — FF 95% — F2 90% — E6 85% — D9 80% — CC 75% — BF 70% — B3 65% — A6 60% — 99 55% — 8C 50% — 80 45% — 73 40% — 66 35% — 59 30% — 4D 25% — 40 20% — 33 15% — 26 10% — 1A 5% — 0D 0% — 00
|
||
|
|
--background-lighter: {color0}d9;
|
||
|
|
*/
|
||
|
|
}}
|
||
|
|
|
||
|
|
element {{
|
||
|
|
font-size: 100%;
|
||
|
|
}} /* end element */
|
||
|
|
|
||
|
|
.theme-dark {{
|
||
|
|
--header-primary: var(--color15);
|
||
|
|
--header-secondary: var(--color7);
|
||
|
|
--text-normal: var(--color7);
|
||
|
|
--text-muted: var(--color7);
|
||
|
|
--text-link: var(--color12);
|
||
|
|
--channels-default: var(--color15);
|
||
|
|
--interactive-normal: var(--color15);
|
||
|
|
--interactive-hover: var(--color15);
|
||
|
|
--interactive-active: var(--color15);
|
||
|
|
--interactive-muted: var(--color7);
|
||
|
|
--background-primary: var(--color0);
|
||
|
|
--background-secondary: linear-gradient(
|
||
|
|
rgba(255, 255, 255, 0.02),
|
||
|
|
rgba(255, 255, 255, 0.02)
|
||
|
|
), var(--color0);
|
||
|
|
--background-secondary-alt: var(--color0);
|
||
|
|
--background-tertiary: var(--color0);
|
||
|
|
--background-accent: var(--color0);
|
||
|
|
--background-floating: var(--color0);
|
||
|
|
--background-mobile-primary: var(--color0);
|
||
|
|
--background-mobile-secondary: var(--color0);
|
||
|
|
--background-modifier-hover: rgba(79,84,92,0.16);
|
||
|
|
--background-modifier-active: rgba(79,84,92,0.24);
|
||
|
|
--background-modifier-selected: rgba(79,84,92,0.32);
|
||
|
|
--background-modifier-accent: hsla(0,0%,100%,0.06);
|
||
|
|
--background-mentioned: rgba(250,166,26,0.05);
|
||
|
|
--background-mentioned-hover: rgba(250,166,26,0.08);
|
||
|
|
--background-message-hover: rgba(4,4,5,0.07);
|
||
|
|
--elevation-stroke: 0 0 0 1px rgba(4,4,5,0.15);
|
||
|
|
--elevation-low: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
|
||
|
|
--elevation-medium: 0 4px 4px rgba(0,0,0,0.16);
|
||
|
|
--elevation-high: 0 8px 16px rgba(0,0,0,0.24);
|
||
|
|
--logo-primary: #fff;
|
||
|
|
--guild-header-text-shadow: 0 1px 1px rgba(0,0,0,0.4);
|
||
|
|
--channeltextarea-background: var(--color1);
|
||
|
|
--activity-card-background: #ff0000;
|
||
|
|
--textbox-markdown-syntax: var(--color15);
|
||
|
|
--deprecated-card-bg: rgba(32,34,37,0.6);
|
||
|
|
--deprecated-card-editable-bg: rgba(32,34,37,0.3);
|
||
|
|
--deprecated-store-bg: #36393f;
|
||
|
|
--deprecated-quickswitcher-input-background: var(--color8);
|
||
|
|
--deprecated-quickswitcher-input-placeholder: var(--color7);
|
||
|
|
--deprecated-text-input-bg: rgba(0,0,0,0.1);
|
||
|
|
--deprecated-text-input-border: rgba(0,0,0,0.3);
|
||
|
|
--deprecated-text-input-border-hover: #040405;
|
||
|
|
--deprecated-text-input-border-disabled: #202225;
|
||
|
|
--deprecated-text-input-prefix: #dcddde;
|
||
|
|
|
||
|
|
--background-primary-lighter: var(--background-lighter);
|
||
|
|
}} /* end .theme-dark */
|
||
|
|
|
||
|
|
.theme-light {{
|
||
|
|
--header-primary: var(--color8);
|
||
|
|
--header-secondary: var(--color0);
|
||
|
|
--text-normal: var(--color0);
|
||
|
|
--text-muted: var(--color8);
|
||
|
|
--text-link: var(--color12);
|
||
|
|
--channels-default: var(--color0);
|
||
|
|
--interactive-hover: var(--color8);
|
||
|
|
--interactive-active: var(--color8);
|
||
|
|
--interactive-muted: var(--color8);
|
||
|
|
--background-primary: var(--color7);
|
||
|
|
--background-secondary: var(--color15);
|
||
|
|
--background-secondary-alt: var(--color15);
|
||
|
|
--background-tertiary: var(--color7);
|
||
|
|
--background-accent: var(--color7);
|
||
|
|
--background-floating: var(--color7);
|
||
|
|
--background-mobile-primary: var(--color7);
|
||
|
|
--background-mobile-secondary: var(--color15);
|
||
|
|
--background-modifier-hover: rgba(79,84,92,0.16);
|
||
|
|
--background-modifier-active: rgba(79,84,92,0.24);
|
||
|
|
--background-modifier-selected: rgba(79,84,92,0.32);
|
||
|
|
--background-modifier-accent: hsla(0,0%,100%,0.06);
|
||
|
|
--background-mentioned: rgba(250,166,26,0.05);
|
||
|
|
--background-mentioned-hover: rgba(250,166,26,0.08);
|
||
|
|
--background-message-hover: rgba(4,4,5,0.07);
|
||
|
|
--elevation-stroke: 0 0 0 1px rgba(4,4,5,0.15);
|
||
|
|
--elevation-low: 0 1px 0 rgba(4,4,5,0.2),0 1.5px 0 rgba(6,6,7,0.05),0 2px 0 rgba(4,4,5,0.05);
|
||
|
|
--elevation-medium: 0 4px 4px rgba(0,0,0,0.16);
|
||
|
|
--elevation-high: 0 8px 16px rgba(0,0,0,0.24);
|
||
|
|
--logo-primary: #fff;
|
||
|
|
--guild-header-text-shadow: 0 1px 1px rgba(0,0,0,0.4);
|
||
|
|
--channeltextarea-background: var(--color15);
|
||
|
|
--activity-card-background: #ff0000;
|
||
|
|
--textbox-markdown-syntax: var(--color8);
|
||
|
|
--deprecated-card-bg: rgba(32,34,37,0.6);
|
||
|
|
--deprecated-card-editable-bg: rgba(32,34,37,0.3);
|
||
|
|
--deprecated-store-bg: #36393f;
|
||
|
|
--deprecated-quickswitcher-input-background: var(--color15);
|
||
|
|
--deprecated-quickswitcher-input-placeholder: var(--color8);
|
||
|
|
--deprecated-text-input-bg: rgba(0,0,0,0.1);
|
||
|
|
--deprecated-text-input-border: rgba(0,0,0,0.3);
|
||
|
|
--deprecated-text-input-border-hover: #040405;
|
||
|
|
--deprecated-text-input-border-disabled: #202225;
|
||
|
|
--deprecated-text-input-prefix: #dcddde;
|
||
|
|
}} /* end .theme-light */
|
||
|
|
|
||
|
|
.theme-dark .scrollerThemed-2oenus.themedWithTrack-q8E3vB> .scroller-2FKFPG {{
|
||
|
|
background-color: var(--background-color);
|
||
|
|
}}
|
||
|
|
|
||
|
|
.theme-dark .scrollerThemed-2oenus.themedWithTrack-q8E3vB>.scroller-2FKFPG::-webkit-scrollbar-track-piece {{
|
||
|
|
border-radius: 0px;
|
||
|
|
}}
|
||
|
|
|
||
|
|
/* Get rid of gift button */
|
||
|
|
button[aria-label="Send a gift"] {{
|
||
|
|
display: none;
|
||
|
|
}}
|
||
|
|
|
||
|
|
/* Change scrollbar to cleaner look */
|
||
|
|
::-webkit-scrollbar,
|
||
|
|
::-webkit-scrollbar-track,
|
||
|
|
::-webkit-scrollbar-track-piece {{
|
||
|
|
background: transparent !important;
|
||
|
|
-webkit-box-shadow: none !important;
|
||
|
|
-moz-box-shadow: none !important;
|
||
|
|
box-shadow: none !important;
|
||
|
|
border: none !important;
|
||
|
|
width:5px !important;
|
||
|
|
}}
|
||
|
|
::-webkit-scrollbar-thumb{{
|
||
|
|
background: white !important;
|
||
|
|
width:5px !important;
|
||
|
|
border:none !important;
|
||
|
|
border-radius: 5px !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
/* Change friend list */
|
||
|
|
.peopleColumn-29fq28 {{
|
||
|
|
background-color: var(--background-primary) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
/* User popout */
|
||
|
|
.headerNormal-T_seeN,
|
||
|
|
.header-2BwW8b,
|
||
|
|
.size16-14cGz5 {{
|
||
|
|
background-color: var(--background-primary) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
.bodyInner-245q0L {{
|
||
|
|
background-color: var(--background-primary) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
.footer-1fjuF6 {{
|
||
|
|
background-color: var(--background-primary) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
.quickMessage-2XpSaN, .quickMessage-1yeL4E {{
|
||
|
|
background-color: var(--color1) !important;
|
||
|
|
}}
|
||
|
|
::placeholder {{
|
||
|
|
color: var(--color15) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
/* voice chat box next to friend list */
|
||
|
|
.body-1ld4H7 {{
|
||
|
|
background-color: var(--color3) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
/* invite friends */
|
||
|
|
.modal-yWgWj-,
|
||
|
|
.modal-1k91nT,
|
||
|
|
.sizeSmall-1jtLQy,
|
||
|
|
.fullscreenOnMobile-1aglG_ {{
|
||
|
|
background-color: var(--background-primary) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
/* pop up windows */
|
||
|
|
.flex-1xMQg5,
|
||
|
|
.flex-1O1GKY,
|
||
|
|
.horizontalReverse-2eTKWD,
|
||
|
|
.horizontalReverse-3tRjY7,
|
||
|
|
.flex-1O1GKY,
|
||
|
|
.directionRowReverse-m8IjIq,
|
||
|
|
.justifyStart-2NDFzi,
|
||
|
|
.alignStretch-DpGPf3,
|
||
|
|
.noWrap-3jynv6,
|
||
|
|
.footer-3rDWdC,
|
||
|
|
.footer-1FPmkC,
|
||
|
|
.message-2qRu38 {{
|
||
|
|
background-color: var(--background-primary) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
/* user settings */
|
||
|
|
.userInfoViewing-16kqK3,
|
||
|
|
.cardPrimary-1Hv-to,
|
||
|
|
.card-3Qj_Yx {{
|
||
|
|
background-color: var(--background-primary) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
.inner-ZyuQk0,
|
||
|
|
.container-2zArDx,
|
||
|
|
.content-8biNdB {{
|
||
|
|
background-color: var(--background-primary) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
/* searchbar */
|
||
|
|
.searchBar-3dMhjb {{
|
||
|
|
background-color: var(--color1) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
/* green shadow while talking */
|
||
|
|
.avatarSpeaking-3MqCHL {{
|
||
|
|
-webkit-box-shadow: inset 0 0 0 2px #43b581,inset 0 0 0 3px var(--background-secondary) !important;
|
||
|
|
box-shadow: inset 0 0 0 0px #43b581,inset 0 0 0 2px #43b581 !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
.body-3iLsc4, .thin-1ybCId, .autocompleteInner-zh20B_ {{
|
||
|
|
background-color: var(--background-primary) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
.selectorSelected-1_M1WV {{
|
||
|
|
background-color: var(--color4) !important;
|
||
|
|
}}
|
||
|
|
|
||
|
|
/* Member column
|
||
|
|
.members-1998pB {{
|
||
|
|
background-color: var(--background-primary-lighter) !important;
|
||
|
|
}}
|
||
|
|
*/
|
||
|
|
|
||
|
|
/*
|
||
|
|
@function lightness($color, $lightnessMultiplier){{
|
||
|
|
$color: str-replace($color, 'var(');
|
||
|
|
$color: str-replace($color, ')');
|
||
|
|
$color-h: var(#{{$color+'-h'}});
|
||
|
|
$color-s: var(#{{$color+'-s'}});
|
||
|
|
$color-l: var(#{{$color+'-l'}});
|
||
|
|
@return hsl($color-h, $color-s, calc(#{{$color-l}} * #{{$lightnessMultiplier}}));
|
||
|
|
}}
|
||
|
|
|
||
|
|
.childWrapper-anI2G9, .acronym-2mOFsV {{
|
||
|
|
background-color: linear-gradient(var(--color0), var(--color1));
|
||
|
|
}} */
|
||
|
|
|
||
|
|
/* Stream button
|
||
|
|
.button-1YfofB,
|
||
|
|
.buttonColor-7qQbGO,
|
||
|
|
.buttonActive-3FrkXp,
|
||
|
|
.button-38aScr,
|
||
|
|
.lookFilled-1Gx00P,
|
||
|
|
.colorBrand-3pXr91,
|
||
|
|
.sizeSmall-2cSMqn {{
|
||
|
|
background-color: var(--color0) !important;
|
||
|
|
}}
|
||
|
|
|