669 lines
No EOL
16 KiB
CSS
669 lines
No EOL
16 KiB
CSS
/**
|
|
* @name Ashen
|
|
* @author Daniel Fichtinger
|
|
* @version 0.0.1
|
|
* @description A warm theme with red and orange tones.
|
|
*/
|
|
/* CSS variables
|
|
*/
|
|
:root {
|
|
/* Special */
|
|
--background: #121212;
|
|
--background-alt: #191919;
|
|
--foreground: #c3c3c3;
|
|
/* --foreground: #b22c2c; */
|
|
--cursor: #c3c3c3;
|
|
|
|
/* Colors */
|
|
--color0: #1e1e1e;
|
|
--color1: #C4693D;
|
|
--color2: #B14242;
|
|
--color3: #B14242;
|
|
--color4: #C4693D;
|
|
--color5: #D87C4A;
|
|
--color6: #DF6464;
|
|
--color7: #988d8d;
|
|
--color8: #6c5959;
|
|
--color9: #DF6464;
|
|
--color10: #B14242;
|
|
--color11: #B14242;
|
|
--color12: #B14242;
|
|
--color13: #C4693D;
|
|
--color14: #B14242;
|
|
--color15: #c3c3c3;
|
|
}
|
|
|
|
/* friends page */
|
|
.peopleList-2VBrVI,
|
|
.inner-2pOSmK {
|
|
background: var(--darkbg) !important;
|
|
}
|
|
|
|
.peopleColumn-1wMU14 {
|
|
background: var(--color0) !important;
|
|
}
|
|
|
|
element {
|
|
font-size: 100%;
|
|
}
|
|
|
|
/* end element */
|
|
:root {
|
|
/* Yeah, I know lightbg is actually darker than darkbg but whatever
|
|
* change & pull it if you wish */
|
|
/* --lightbg: linear-gradient(rgba(255, 255, 255, 0.06), */
|
|
/* rgba(255, 255, 255, 0.06)), */
|
|
/* var(--background); */
|
|
/* --lightbg: #191919; */
|
|
/* --darkbg: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), */
|
|
/* var(--background); */
|
|
--darkbg: var(var(--background)) !important;
|
|
--bdfdb-blurple: var(--color1) !important;
|
|
}
|
|
|
|
html.newBrand {
|
|
--brand-experiment-100: var(--text);
|
|
--brand-experiment-130: var(--text);
|
|
--brand-experiment-160: var(--text);
|
|
--brand-experiment-200: var(--text);
|
|
--brand-experiment-230: var(--text);
|
|
--brand-experiment-260: var(--text);
|
|
--brand-experiment: var(--color1);
|
|
--brand-experiment-300: var(--color1);
|
|
--brand-experiment-330: var(--color1);
|
|
--brand-experiment-360: var(--color1);
|
|
--brand-experiment-400: var(--color1);
|
|
--brand-experiment-430: var(--color1);
|
|
--brand-experiment-460: var(--color1);
|
|
--brand-experiment: var(--color1);
|
|
--brand-experiment-500: var(--color1);
|
|
--brand-experiment-530: var(--color1);
|
|
--brand-experiment-560: var(--color1);
|
|
--brand-experiment-600: var(--color1);
|
|
--brand-experiment-630: var(--color1);
|
|
--brand-experiment-660: #2b2b2b;
|
|
--brand-experiment-700: #2b2b2b;
|
|
--brand-experiment-730: #2b2b2b;
|
|
--brand-experiment-760: #2b2b2b;
|
|
--brand-experiment-800: var(--background);
|
|
--brand-experiment-830: var(--background);
|
|
--brand-experiment-860: var(--background);
|
|
--brand-experiment-900: var(--background);
|
|
}
|
|
|
|
.theme-dark {
|
|
--brand-experiment: var(--color1) !important;
|
|
--text-positive var(--color2) !important;
|
|
--header-primary: var(--foreground) !important;
|
|
/* --header-primary: var(--color10) !important; */
|
|
--header-secondary: #c3c3c3 !important;
|
|
--text-normal: #c3c3c3 !important;
|
|
--text-muted: #c3c3c3 !important;
|
|
--text-link: var(--color12) !important;
|
|
--channels-default: var(--foreground) !important;
|
|
--interactive-normal: var(--color10) !important;
|
|
--interactive-hover: var(--foreground) !important;
|
|
--interactive-active: var(--foreground) !important;
|
|
--interactive-muted: #c3c3c3 !important;
|
|
--background-primary: var(--background) !important;
|
|
/* --background-secondary: var(--lightbg) !important; */
|
|
--background-secondary: var(--background-alt) !important;
|
|
--background-secondary-alt: var(--background) !important;
|
|
--background-tertiary: var(--background) !important;
|
|
--background-accent: var(--background) !important;
|
|
--background-floating: var(--background) !important;
|
|
--background-mobile-primary: var(--background) !important;
|
|
--background-mobile-secondary: #2b2b2b !important;
|
|
--background-modifier-hover: rgba(79, 84, 92, 0.16) !important;
|
|
--background-modifier-active: rgba(79, 84, 92, 0.24) !important;
|
|
--background-modifier-selected: rgba(79, 84, 92, 0.32) !important;
|
|
--background-modifier-accent: hsla(0, 0%, 100%, 0.06) !important;
|
|
--background-mentioned: rgba(250, 166, 26, 0.05) !important;
|
|
--background-mentioned-hover: rgba(250, 166, 26, 0.08) !important;
|
|
--background-message-hover: rgba(4, 4, 5, 0.07) !important;
|
|
--elevation-stroke: 0 0 0 1px rgba(4, 4, 5, 0.15) !important;
|
|
--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) !important;
|
|
--elevation-medium: 0 4px 4px rgba(0, 0, 0, 0.16) !important;
|
|
--elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24) !important;
|
|
--logo-primary: #fff !important;
|
|
--guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) !important;
|
|
--channeltextarea-background: #2b2b2b !important;
|
|
--activity-card-background: var(--background) !important;
|
|
--textbox-markdown-syntax: var(--foreground) !important;
|
|
--deprecated-card-bg: rgba(32, 34, 37, 0.6) !important;
|
|
--deprecated-card-editable-bg: rgba(32, 34, 37, 0.3) !important;
|
|
--deprecated-store-bg: #36393f !important;
|
|
--deprecated-quickswitcher-input-background: #2b2b2b !important;
|
|
--deprecated-quickswitcher-input-placeholder: #c3c3c3 !important;
|
|
--deprecated-text-input-bg: rgba(0, 0, 0, 0.1) !important;
|
|
--deprecated-text-input-border: rgba(0, 0, 0, 0.3) !important;
|
|
--deprecated-text-input-border-hover: #040405 !important;
|
|
--deprecated-text-input-border-disabled: #202225 !important;
|
|
--deprecated-text-input-prefix: #dcddde !important;
|
|
--scrollbar-thin-thumb: var(--color1) !important;
|
|
--scrollbar-auto-thumb: var(--color1) !important;
|
|
--scrollbar-auto-track: rgba(255, 255, 255, 0.06) !important;
|
|
--scrollbar-thin-track: rgba(255, 255, 255, 0.06) !important;
|
|
--text-positive: var(--color2) !important;
|
|
--text-warning: var(--color4) !important;
|
|
--text-danger: var(--color1) !important;
|
|
--info-positive-background: rgba(59, 165, 92, 0.1) !important;
|
|
--info-positive-foreground: var(--color2) !important;
|
|
--info-warning-background: rgba(250, 166, 26, 0.1) !important;
|
|
--info-warning-foreground: var(--color4) !important;
|
|
--info-danger-background: rgba(237, 66, 69, 0.1) !important;
|
|
--info-danger-foreground: var(--color1) !important;
|
|
--status-positive-background: var(--color2) !important;
|
|
--status-positive-text: var(--text) !important;
|
|
--status-warning-background: var(--color4) !important;
|
|
--status-danger-background: var(--color1) !important;
|
|
}
|
|
|
|
/* end .theme-dark */
|
|
|
|
.theme-light {
|
|
--brand-experiment: var(--color1);
|
|
--text-positive var(--color2);
|
|
--header-primary: #2b2b2b;
|
|
--header-secondary: var(--background);
|
|
--text-normal: var(--background);
|
|
--text-muted: #2b2b2b;
|
|
--text-link: var(--color12);
|
|
--channels-default: var(--background);
|
|
--interactive-hover: #2b2b2b;
|
|
--interactive-active: #2b2b2b;
|
|
--interactive-muted: #2b2b2b;
|
|
--background-primary: #c3c3c3;
|
|
--background-secondary: var(--foreground);
|
|
--background-secondary-alt: var(--foreground);
|
|
--background-tertiary: #c3c3c3;
|
|
--background-accent: #c3c3c3;
|
|
--background-floating: #c3c3c3;
|
|
--background-mobile-primary: #c3c3c3;
|
|
--background-mobile-secondary: var(--foreground);
|
|
--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(--foreground);
|
|
--activity-card-background: var(--background);
|
|
--textbox-markdown-syntax: #2b2b2b;
|
|
--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(--foreground);
|
|
--deprecated-quickswitcher-input-placeholder: #2b2b2b;
|
|
--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;
|
|
--scrollbar-thin-thumb: var(--color1);
|
|
--scrollbar-auto-thumb: var(--color1);
|
|
--scrollbar-auto-track: rgba(0, 0, 0, 0.1);
|
|
--scrollbar-thin-track: rgba(0, 0, 0, 0.1);
|
|
--text-positive: var(--color2);
|
|
--text-warning: var(--color4);
|
|
--text-danger: var(--color1);
|
|
--info-positive-background: rgba(59, 165, 92, 0.1);
|
|
--info-positive-foreground: var(--color2);
|
|
--info-warning-background: rgba(250, 166, 26, 0.1);
|
|
--info-warning-foreground: var(--color4);
|
|
--info-danger-background: rgba(237, 66, 69, 0.1);
|
|
--info-danger-foreground: var(--color1);
|
|
--status-positive-background: var(--color2);
|
|
--status-positive-text: var(--text);
|
|
--status-warning-background: var(--color4);
|
|
--status-danger-background: var(--color1);
|
|
}
|
|
|
|
/* end .theme-light */
|
|
|
|
/* Emoji picker body background */
|
|
.emojiPickerInExpressionPicker-3IzIcv .emojiPicker-3PwZFl {
|
|
background-color: var(--background);
|
|
}
|
|
|
|
/* Emoji picker header background */
|
|
.contentWrapper-SvZHNd {
|
|
background-color: var(--background);
|
|
}
|
|
|
|
/* Friends tab background */
|
|
.theme-dark .container-1D34oG {
|
|
background-color: var(--background);
|
|
}
|
|
|
|
/* User popout body */
|
|
.theme-dark .body-3iLsc4,
|
|
.theme-dark .footer-1fjuF6 {
|
|
background-color: var(--background);
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* User popout header */
|
|
.theme-dark .headerNormal-T_seeN {
|
|
background-color: var(--background);
|
|
}
|
|
|
|
/* Bottom part of user popout */
|
|
.body-3ND3kc {
|
|
opacity: 1.0 !important;
|
|
background-color: var(--color0) !important;
|
|
}
|
|
|
|
/* User popout header when playing a game */
|
|
.headerPlaying-j0WQBV,
|
|
.headerFill-adLl4x,
|
|
.activityProfile-2bJRaP,
|
|
.activity-1ythUs,
|
|
.header-QKLPzZ {
|
|
background: var(--color1);
|
|
}
|
|
|
|
/* Start rebranding gross yuck */
|
|
.lookFilled-1Gx00P.colorBrand-3pXr91 {
|
|
color: var(--text);
|
|
background-color: var(--color1);
|
|
}
|
|
|
|
.lookFilled-1Gx00P.colorGreen-29iAKY {
|
|
color: var(--text);
|
|
background-color: var(--color2);
|
|
}
|
|
|
|
.lookFilled-1Gx00P.colorRed-1TFJan {
|
|
color: var(--text);
|
|
background-color: var(--color3);
|
|
}
|
|
|
|
.lookFilled-1Gx00P.colorBrand-3pXr91:disabled {
|
|
background-color: var(--color1);
|
|
}
|
|
|
|
.botTagRegular-2HEhHi {
|
|
background: var(--color1);
|
|
color: var(--text);
|
|
}
|
|
|
|
.theme-dark .wrapper-3WhCwL {
|
|
background: var(--background);
|
|
color: var(--text);
|
|
}
|
|
|
|
.reaction-1hd86g.reactionMe-wv5HKu {
|
|
background-color: var(--background);
|
|
border-color: var(--color4);
|
|
}
|
|
|
|
.newMessagesBar-265mhP {
|
|
top: 0;
|
|
border-radius: 0 0 8px 8px;
|
|
background-color: var(--color2);
|
|
-webkit-box-shadow: var(--elevation-low);
|
|
box-shadow: var(--elevation-low);
|
|
}
|
|
|
|
.rtcConnectionStatusConnected-VRZDjy,
|
|
.rtcConnectionQualityFine-2J6i8z,
|
|
.pingForeground-2uAOZ3 {
|
|
color: var(--color2);
|
|
}
|
|
|
|
.lookFilled-1Gx00P.colorYellow-2JqYwt {
|
|
color: var(--text);
|
|
background-color: var(--color4);
|
|
}
|
|
|
|
/* End rebranding gross yuck */
|
|
|
|
|
|
/* Tab underneath users in the Active Now tab on the friends page */
|
|
.theme-dark .inset-3sAvek {
|
|
background-color: rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
/* Edit buttons in the settings page */
|
|
.lookFilled-1Gx00P.colorGrey-2DXtkV {
|
|
color: #fff;
|
|
background-color: var(--color1);
|
|
}
|
|
|
|
|
|
.scroller-2FKFPG.sidebarRegionScroller-3MXcoP {
|
|
/* Settings */
|
|
background: var(--background);
|
|
}
|
|
|
|
/* end of settings */
|
|
|
|
html body {
|
|
|
|
.appMount-3lHmkl,
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* end .appMount-3lHmkl, body, html */
|
|
|
|
a,
|
|
abbr,
|
|
acronym,
|
|
address,
|
|
applet,
|
|
big,
|
|
blockquote,
|
|
body,
|
|
caption,
|
|
cite,
|
|
code,
|
|
dd,
|
|
del,
|
|
dfn,
|
|
div,
|
|
dl,
|
|
dt,
|
|
em,
|
|
fieldset,
|
|
form,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
html,
|
|
iframe,
|
|
img,
|
|
ins,
|
|
kbd,
|
|
label,
|
|
legend,
|
|
li,
|
|
object,
|
|
ol,
|
|
p,
|
|
pre,
|
|
q,
|
|
s,
|
|
samp,
|
|
small,
|
|
span,
|
|
strike,
|
|
strong,
|
|
table,
|
|
tbody,
|
|
td,
|
|
tfoot,
|
|
th,
|
|
thead,
|
|
tr,
|
|
tt,
|
|
ul,
|
|
var {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font-weight: inherit;
|
|
font-style: inherit;
|
|
font-family: inherit;
|
|
font-size: 100%;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* end a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, table, tbody, td, tfoot, th, thead, tr, tt, ul, var */
|
|
|
|
element {}
|
|
|
|
/* end element */
|
|
|
|
::placeholder,
|
|
body,
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font-family: Fira Sans, Whitney, Helvetica Neue, Helvetica, Arial,
|
|
sans-serif;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* end ::placeholder, body, button, input, select, textarea */
|
|
|
|
::placeholder,
|
|
body,
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font-family: Fira Sans, Whitney, Helvetica Neue, Helvetica, Arial,
|
|
sans-serif;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* end ::placeholder, body, button, input, select, textarea */
|
|
|
|
::-webkit-input-placeholder,
|
|
body,
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font-family: Fira Sans, Whitney, Helvetica Neue, Helvetica, Arial,
|
|
sans-serif;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* end ::-webkit-input-placeholder, body, button, input, select, textarea */
|
|
}
|
|
|
|
/* end body */
|
|
|
|
html body div#app-mount.appMount-3lHmkl {
|
|
element {}
|
|
|
|
/* end element */
|
|
|
|
.appMount-3lHmkl,
|
|
body {
|
|
background-color: var(--background-tertiary);
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* end .appMount-3lHmkl, body */
|
|
|
|
.appMount-3lHmkl,
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* end .appMount-3lHmkl, body, html */
|
|
|
|
body {
|
|
line-height: 1;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Fira Sans, Whitney, Helvetica Neue, Helvetica, Arial,
|
|
sans-serif;
|
|
overflow: hidden;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
background: transparent;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* end body */
|
|
|
|
a,
|
|
abbr,
|
|
acronym,
|
|
address,
|
|
applet,
|
|
big,
|
|
blockquote,
|
|
body,
|
|
caption,
|
|
cite,
|
|
code,
|
|
dd,
|
|
del,
|
|
dfn,
|
|
div,
|
|
dl,
|
|
dt,
|
|
em,
|
|
fieldset,
|
|
form,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
html,
|
|
iframe,
|
|
img,
|
|
ins,
|
|
kbd,
|
|
label,
|
|
legend,
|
|
li,
|
|
object,
|
|
ol,
|
|
p,
|
|
pre,
|
|
q,
|
|
s,
|
|
samp,
|
|
small,
|
|
span,
|
|
strike,
|
|
strong,
|
|
table,
|
|
tbody,
|
|
td,
|
|
tfoot,
|
|
th,
|
|
thead,
|
|
tr,
|
|
tt,
|
|
ul,
|
|
var {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font-weight: inherit;
|
|
font-style: inherit;
|
|
font-family: inherit;
|
|
font-size: 100%;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* end a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, table, tbody, td, tfoot, th, thead, tr, tt, ul, var */
|
|
|
|
a,
|
|
button,
|
|
div,
|
|
input,
|
|
select,
|
|
span,
|
|
strong,
|
|
textarea {
|
|
outline: 0;
|
|
}
|
|
|
|
/* end a, button, div, input, select, span, strong, textarea */
|
|
|
|
a,
|
|
abbr,
|
|
acronym,
|
|
address,
|
|
applet,
|
|
big,
|
|
blockquote,
|
|
body,
|
|
caption,
|
|
cite,
|
|
code,
|
|
dd,
|
|
del,
|
|
dfn,
|
|
div,
|
|
dl,
|
|
dt,
|
|
em,
|
|
fieldset,
|
|
form,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
html,
|
|
iframe,
|
|
img,
|
|
ins,
|
|
kbd,
|
|
label,
|
|
legend,
|
|
li,
|
|
object,
|
|
ol,
|
|
p,
|
|
pre,
|
|
q,
|
|
s,
|
|
samp,
|
|
small,
|
|
span,
|
|
strike,
|
|
strong,
|
|
table,
|
|
tbody,
|
|
td,
|
|
tfoot,
|
|
th,
|
|
thead,
|
|
tr,
|
|
tt,
|
|
ul,
|
|
var {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
font-weight: inherit;
|
|
font-style: inherit;
|
|
font-family: inherit;
|
|
font-size: 100%;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/* end a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, table, tbody, td, tfoot, th, thead, tr, tt, ul, var */
|
|
}
|
|
|
|
/* end body div#app-mount.appMount-3lHmkl */
|
|
|
|
.avatarSpeaking-2pCGrZ {
|
|
/* fix speaking indicator */
|
|
-webkit-box-shadow: inset 0 0 0 2px var(--foreground),
|
|
inset 0 0 0 3px var(--background-secondary);
|
|
box-shadow: inset 0 0 0 2px var(--foreground), inset 0 0 0 3px;
|
|
} |