Make Modular

This commit is contained in:
CI 2023-03-15 03:28:45 +00:00
parent 8c0a7860db
commit 124ecc8e8c
24 changed files with 383 additions and 95 deletions

View file

@ -67,6 +67,11 @@
padding: 0.5em; padding: 0.5em;
} }
[id^="message-username-"]
[class^="badge-"]:has(> [class^="badgeVerifiedIcon-"]) {
display: none;
}
/* remove "dead space"/padding from vc users */ /* remove "dead space"/padding from vc users */
[class*="containerDefault-"] [class*="listDefault-"] { [class*="containerDefault-"] [class*="listDefault-"] {
padding-left: 8px !important; padding-left: 8px !important;
@ -280,6 +285,15 @@
background-color: var(--background-modifier-hover); background-color: var(--background-modifier-hover);
} }
[class^="contentWarningPopout-"] {
background: var(--background-primary) !important;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3) !important;
}
[class^="customColorPicker-"] {
background: var(--background-primary) !important;
}
/* jane's steam border ext */ /* jane's steam border ext */
/*.steam-border-message > #border { /*.steam-border-message > #border {
width: 20px !important; width: 20px !important;
@ -320,3 +334,22 @@ code,
.hljs { .hljs {
font-family: var(--font-code) !important; font-family: var(--font-code) !important;
} }
/* unbreak resizing webms :^) */
/*[class^="mediaAttachmentsContainer-"] [class^="imageWrapper-"] {
min-width: 10px;
min-height: 10px;
max-width: unset;
max-height: unset !important;
width: unset !important;
height: unset !important;
object-fit: none !important;
aspect-ratio: unset !important;
}
[class^="mediaAttachmentsContainer-"] [class^="messageAttachment-"] {
height: unset;
}
[class^="mediaAttachmentsContainer-"] [class^="oneByOneGrid-"],
[class^="mediaAttachmentsContainer-"] [class^="oneByTwoGrid-"] {
max-height: unset !important;
}*/

View file

@ -43,11 +43,11 @@
.theme-dark, .theme-dark,
:root { :root {
--font-primary: "Terminus (TTF) for Windows", "Terminus (TTF)", --font-primary: "Terminus (TTF) for Windows", "Terminus (TTF)",
"Unifont Windows", "Unifont", monospace !important; "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important;
--font-display: "Terminus (TTF) for Windows", "Terminus (TTF)", --font-display: "Terminus (TTF) for Windows", "Terminus (TTF)",
"Unifont Windows", "Unifont", monospace !important; "Sazanami Gothic", "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important;
--font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows", --font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic",
"Unifont", monospace !important; "UnifontBitmap", "Unifont Windows", "Unifont", monospace !important;
--_font-titlebars: var(--font-primary) !important; --_font-titlebars: var(--font-primary) !important;
} }

View file

@ -51,10 +51,12 @@
.theme-dark, .theme-dark,
:root { :root {
--font-primary: "Unifont Windows", "Unifont", monospace !important; --font-primary: "Sazanami Gothic", "UnifontBitmap", "Unifont Windows",
--font-display: "Unifont Windows", "Unifont", monospace !important; "Unifont", monospace, "Twemoji" !important;
--font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Unifont Windows", --font-display: "Sazanami Gothic", "UnifontBitmap", "Unifont Windows",
"Unifont", monospace !important; "Unifont", monospace, "Twemoji" !important;
--font-code: "Terminus (TTF) for Windows", "Terminus (TTF)", "Sazanami Gothic",
"UnifontBitmap", "Unifont Windows", "Unifont", monospace !important;
} }
[class^="menu-"] [class^="item-"], [class^="menu-"] [class^="item-"],

View file

@ -1,5 +1,6 @@
:root,
.theme-dark, .theme-dark,
:root { .theme-light {
--titlebar-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), --titlebar-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22),
inset 0 0 0 2px rgba(0, 0, 0, 0.27), 0 0 0 1px var(--background-tertiary), inset 0 0 0 2px rgba(0, 0, 0, 0.27), 0 0 0 1px var(--background-tertiary),
0 0 0 2px var(--background-secondary), 0 0 0 3px var(--background-primary); 0 0 0 2px var(--background-secondary), 0 0 0 3px var(--background-primary);
@ -124,6 +125,7 @@
--red-400: var(--status-dnd) !important; --red-400: var(--status-dnd) !important;
--primary-400: var(--status-offline) !important; --primary-400: var(--status-offline) !important;
--twitch: var(--status-streaming) !important; --twitch: var(--status-streaming) !important;
--primary-600: var(--primary);
} }
[data-popout-root], [data-popout-root],
@ -296,7 +298,9 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] {
fill: var(--status-streaming); fill: var(--status-streaming);
} }
[class^="containerDefault-"] [class*="modeUnread-"] svg[class^="icon-"], [class^="containerDefault-"]:not(:hover)
[class*="modeUnread-"]
svg[class^="icon-"],
[class^="containerDefault-"]:not(:hover) [class^="containerDefault-"]:not(:hover)
[class*="modeUnread-"] [class*="modeUnread-"]
[class^="name-"] { [class^="name-"] {
@ -306,6 +310,12 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] {
background-color: var(--accent, var(--brand-new-500)); background-color: var(--accent, var(--brand-new-500));
} }
[class^="containerDefault-"]:not(:hover)
[class*="modeSelected-"]
svg[class^="icon-"] {
color: var(--interactive-active);
}
[class^="containerDefault-"] [class^="containerDefault-"]
[class*="iconVisibility-"]:hover [class*="iconVisibility-"]:hover
svg[class^="icon-"], svg[class^="icon-"],

View file

@ -1,5 +1,4 @@
.theme-dark, .theme-dark {
:root {
--_color0: #484f58; --_color0: #484f58;
--_color1: #f85149; --_color1: #f85149;
--_color2: #3fb950; --_color2: #3fb950;

View file

@ -1,5 +1,4 @@
.theme-dark, .theme-dark {
:root {
--_color0: #231d29; --_color0: #231d29;
--_color1: #e83f80; --_color1: #e83f80;
--_color2: #a2baa8; --_color2: #a2baa8;

View file

@ -1,5 +1,4 @@
.theme-dark, .theme-dark {
:root {
--_color0: #28222d; --_color0: #28222d;
--_color1: #e83f80; --_color1: #e83f80;
--_color2: #a2baa8; --_color2: #a2baa8;

View file

@ -1,5 +1,4 @@
.theme-dark, .theme-dark {
:root {
--_color0: #484f58; --_color0: #484f58;
--_color1: #f85149; --_color1: #f85149;
--_color2: #3fb950; --_color2: #3fb950;

View file

@ -1,5 +1,4 @@
.theme-dark, .theme-dark {
:root {
--_color0: #51576d; --_color0: #51576d;
--_color1: #e78284; --_color1: #e78284;
--_color2: #a6d189; --_color2: #a6d189;

View file

@ -1,5 +1,4 @@
.theme-dark, .theme-dark {
:root {
--_color0: #494d64; --_color0: #494d64;
--_color1: #ed8796; --_color1: #ed8796;
--_color2: #a6da95; --_color2: #a6da95;

View file

@ -1,5 +1,4 @@
.theme-dark, .theme-dark {
:root {
--_color0: #45475a; --_color0: #45475a;
--_color1: #f38ba8; --_color1: #f38ba8;
--_color2: #a6e3a1; --_color2: #a6e3a1;

View file

@ -1,5 +1,4 @@
.theme-dark, .theme-dark {
:root {
--_color0: #7a8478; --_color0: #7a8478;
--_color1: #e67e80; --_color1: #e67e80;
--_color2: #a7c080; --_color2: #a7c080;

View file

@ -1,5 +1,4 @@
.theme-dark, .theme-dark {
:root {
--_color0: #32302f; --_color0: #32302f;
--_color1: #cc241d; --_color1: #cc241d;
--_color2: #98971a; --_color2: #98971a;

View file

@ -1,5 +1,4 @@
.theme-dark, .theme-dark {
:root {
--_color0: #282a36; --_color0: #282a36;
--_color1: #f37f97; --_color1: #f37f97;
--_color2: #5adecd; --_color2: #5adecd;

View file

@ -1,5 +1,4 @@
.theme-dark, .theme-dark {
:root {
--_color0: #3b4252; --_color0: #3b4252;
--_color1: #bf616a; --_color1: #bf616a;
--_color2: #a3be8c; --_color2: #a3be8c;

View file

@ -1,45 +1,44 @@
.theme-dark, .theme-dark {
:root { --_color0: #0d1117;
--_color0: #484f58; --_color1: #ff7b72;
--_color1: #f85149;
--_color2: #3fb950; --_color2: #3fb950;
--_color3: #d29922; --_color3: #d29922;
--_color4: #58a6ff; --_color4: #58a6ff;
--_color5: #bc8cff; --_color5: #bc8cff;
--_color6: #39c5cf; --_color6: #76e3ea;
--_color7: #b1bac4; --_color7: #b1bac4;
--_color8: #6e7681; --_color8: #161b22;
--_color9: #ff7b72; --_color9: #ffa198;
--_color10: #56d364; --_color10: #56d364;
--_color11: #e3b341; --_color11: #e3b341;
--_color12: #79c0ff; --_color12: #79c0ff;
--_color13: #d2a8ff; --_color13: #d2a8ff;
--_color14: #56d4dd; --_color14: #b3f0ff;
--_color15: #f0f6fc; --_color15: #f0f6fc;
--_colorFG: var(--_color7); --_colorFG: var(--_color7);
--__primary: #36393f; --primary: #36393f;
--__secondary: #2f3136; --secondary: #2f3136;
--__tertiary: #202225; --tertiary: #202225;
--__primary-rgb: 54, 57, 63; --primary-rgb: 54, 57, 63;
--__secondary-rgb: 47, 49, 54; --secondary-rgb: 47, 49, 54;
--__tertiary-rgb: 32, 34, 37; --tertiary-rgb: 32, 34, 37;
--__accent: #7289da; --accent: #7289da;
--__accent-rgb: 114, 137, 218; --accent-rgb: 114, 137, 218;
--__red: #f04747; --red: #f04747;
--__text: #dcddde; --text: #dcddde;
--__link: #00aff4; --link: #00aff4;
--__highlight: #72767d; --highlight: #72767d;
--__highlight-rgb: 114, 118, 125; --highlight-rgb: 114, 118, 125;
--__status-online: #43b581; --status-online: #43b581;
--__status-idle: #faa61a; --status-idle: #faa61a;
--__status-dnd: #f04747; --status-dnd: #f04747;
--__status-offline: #747f8d; --status-offline: #747f8d;
--__status-streaming: #593695; --status-streaming: #593695;
--__titlebar-color: var(--highlight); --titlebar-color: var(--highlight);
} }

View file

@ -1,5 +1,4 @@
.theme-dark, .theme-dark {
:root {
--_color0: #32344a; --_color0: #32344a;
--_color1: #f7768e; --_color1: #f7768e;
--_color2: #9ece6a; --_color2: #9ece6a;

View file

@ -1,22 +1,21 @@
.theme-dark, .theme-dark {
:root { --_color0: #0d1117;
--_color0: #373e4d; --_color1: #ff7b72;
--_color1: #fa5aa4; --_color2: #3fb950;
--_color2: #2be491; --_color3: #d29922;
--_color3: #fa946e; --_color4: #58a6ff;
--_color4: #63c5ea; --_color5: #bc8cff;
--_color5: #cf8ef4; --_color6: #76e3ea;
--_color6: #89ccf7; --_color7: #b1bac4;
--_color7: #edfefe;
--_color8: #3b4252; --_color8: #161b22;
--_color9: #fa74b2; --_color9: #ffa198;
--_color10: #44eb9f; --_color10: #56d364;
--_color11: #faa687; --_color11: #e3b341;
--_color12: #7acbea; --_color12: #79c0ff;
--_color13: #d8a6f4; --_color13: #d2a8ff;
--_color14: #a1d5f7; --_color14: #b3f0ff;
--_color15: #e7f7f7; --_color15: #f0f6fc;
--_colorFG: #bbc5ff; --_colorFG: #bbc5ff;

View file

@ -0,0 +1,47 @@
.theme-light {
--_color0: #bcc0cc;
--_color1: #d20f39;
--_color2: #40a02b;
--_color3: #df8e1d;
--_color4: #1e66f5;
--_color5: #ea76cb;
--_color6: #179299;
--_color7: #5c5f77;
--_color8: #626880;
--_color9: #d20f39;
--_color10: #40a02b;
--_color11: #df8e1d;
--_color12: #1e66f5;
--_color13: #ea76cb;
--_color14: #179299;
--_color15: #6c6f85;
--_colorFG: #4c4f69;
--primary: #eff1f5;
--secondary: #e6e9ef;
--tertiary: #dce0e8;
--primary-rgb: 239, 241, 245;
--secondary-rgb: 230, 233, 239;
--tertiary-rgb: 220, 224, 232;
--accent: #7287fd;
--accent-rgb: 114, 135, 253;
--red: var(--_color1);
--text: var(--_colorFG);
--link: var(--_color14);
--highlight: #6c6f85;
--highlight-rgb: 108, 111, 133;
--status-online: var(--_color2);
--status-idle: var(--_color3);
--status-dnd: var(--_color1);
--status-offline: var(--_color8);
--status-streaming: var(--_color5);
--titlebar-color: #414559;
--interactive-hover: var(--_color6) !important;
--interactive-active: var(--_color7) !important;
}

View file

@ -0,0 +1,42 @@
.theme-light {
--_color0: #f2e5bc;
--_color1: #cc241d;
--_color2: #98971a;
--_color3: #d79921;
--_color4: #458588;
--_color5: #b16286;
--_color6: #689d6a;
--_color7: #7c6f64;
--_color8: #f9f5d7;
--_color9: #9d0006;
--_color10: #79740e;
--_color11: #b57614;
--_color12: #076678;
--_color13: #8f3f71;
--_color14: #427b58;
--_color15: #3c3836;
--_colorFG: #504945;
--primary: #f9f5d7;
--secondary: #fbf1c7;
--tertiary: #f2e5bc;
--primary-rgb: 242, 229, 187;
--secondary-rgb: 251, 241, 199;
--tertiary-rgb: 250, 246, 214;
--accent: var(--_color5);
--accent-rgb: 177, 98, 134;
--red: var(--_color9);
--text: var(--_colorFG);
--link: var(--_color12);
--highlight: #bdae93;
--highlight-rgb: 189, 174, 147;
--status-online: var(--_color10);
--status-idle: var(--_color11);
--status-dnd: var(--_color1);
--status-offline: var(--_color8);
--status-streaming: var(--_color13);
}

View file

@ -0,0 +1,44 @@
.theme-light {
--_color0: #e5e9f0;
--_color1: #bf616a;
--_color2: #a3be8c;
--_color3: #ebcb8b;
--_color4: #81a1c1;
--_color5: #b48ead;
--_color6: #88c0d0;
--_color7: #3b4252;
--_color8: #eceff4;
--_color9: #bf616a;
--_color10: #a3be8c;
--_color11: #ebcb8b;
--_color12: #81a1c1;
--_color13: #b48ead;
--_color14: #88c0d0;
--_color15: #4c566a;
--_colorFG: #2e3440;
--primary: #eceff4;
--secondary: #e5e9f0;
--tertiary: #d8dee9;
--primary-rgb: 236, 239, 244;
--secondary-rgb: 229, 233, 240;
--tertiary-rgb: 216, 222, 233;
--accent: #88c0d0;
--accent-rgb: 136, 192, 208;
--red: var(--_color1);
--text: var(--_colorFG);
--link: var(--_color12);
--highlight: #8fbcbb;
--highlight-rgb: 143, 188, 187;
--status-online: var(--_color2);
--status-idle: var(--_color3);
--status-dnd: var(--_color1);
--status-offline: var(--_color8);
--status-streaming: var(--_color5);
--titlebar-color: #4c566a;
}

View file

@ -0,0 +1,46 @@
.theme-light {
--_color0: #24292f;
--_color1: #ff8182;
--_color2: #4ac26b;
--_color3: #d4a72c;
--_color4: #54aeff;
--_color5: #c297ff;
--_color6: #76e3ea;
--_color7: #8c959f;
--_color8: #32383f;
--_color9: #ffaba8;
--_color10: #6fdd8b;
--_color11: #eac54f;
--_color12: #80ccff;
--_color13: #d8b9ff;
--_color14: #b3f0ff;
--_color15: #d0d7de;
--_colorFG: var(--_color7);
--primary: #ffffff;
--secondary: #f2f3f5;
--tertiary: #e3e5e8;
--primary-rgb: 255, 255, 255;
--secondary-rgb: 242, 243, 245;
--tertiary-rgb: 227, 229, 232;
--accent: #7289da;
--accent-rgb: 114, 137, 218;
--red: #f04747;
--text: #303338;
--link: #00aff4;
--highlight: #72767d;
--highlight-rgb: 114, 118, 125;
--status-online: #43b581;
--status-idle: #faa61a;
--status-dnd: #f04747;
--status-offline: #747f8d;
--status-streaming: #593695;
--titlebar-color: var(--highlight);
--interactive-active: #060607 !important;
}

View file

@ -0,0 +1,46 @@
.theme-light {
--_color0: #24292f;
--_color1: #ff8182;
--_color2: #4ac26b;
--_color3: #d4a72c;
--_color4: #54aeff;
--_color5: #c297ff;
--_color6: #76e3ea;
--_color7: #8c959f;
--_color8: #32383f;
--_color9: #ffaba8;
--_color10: #6fdd8b;
--_color11: #eac54f;
--_color12: #80ccff;
--_color13: #d8b9ff;
--_color14: #b3f0ff;
--_color15: #d0d7de;
--_colorFG: #373737;
--primary: #fcfcf9;
--secondary: #f4f4f1;
--tertiary: #dcdace;
--primary-rgb: 252, 252, 249;
--secondary-rgb: 244, 244, 241;
--tertiary-rgb: 220, 218, 206;
--accent: #58516d;
--accent-rgb: 88, 81, 109;
--red: var(--_color1);
--text: #373737;
--link: var(--_color6);
--highlight: #b0aca5;
--highlight-rgb: 176, 172, 165;
--status-online: var(--_color4);
--status-idle: var(--_color3);
--status-dnd: var(--_color1);
--status-offline: var(--_color8);
--status-streaming: var(--_color5);
--titlebar-color: var(--accent);
--interactive-hover: #494949 !important;
--interactive-active: #7a7a7a !important;
}

View file

@ -1,26 +1,57 @@
.theme-dark,
:root { :root {
--_font-titlebars: "Segoe UI", sans-serif; --_font-titlebars: "Segoe UI", sans-serif;
}
--button-bg: linear-gradient( .theme-dark {
to bottom,
var(--background-primary),
var(--background-secondary)
);
--button-shadow: inset 0 0 0 1px var(--background-tertiary),
inset 0 0 0 2px var(--background-primary),
inset 0 0 0 3px var(--background-secondary);
--hover-bg: #3f3f3f; --hover-bg: #3f3f3f;
--hover-shadow: inset 0 0 0 1px #373737, inset 0 0 0 2px #444444, --hover-shadow: inset 0 0 0 1px #373737, inset 0 0 0 2px #444444,
inset 0 0 0 3px #3c3c3c; inset 0 0 0 3px #3c3c3c;
--scrollbar-shadow: inset 0 0 0 1px var(--background-tertiary), --button-bg: linear-gradient(
inset 0 0 0 2px #404040, inset 0 0 0 3px var(--background-primary), to bottom,
inset 0 0 0 4px var(--background-secondary); var(--primary, var(--background-primary)),
--scrollbar-shadow-hover: inset 0 0 0 1px var(--background-tertiary), var(--secondary, var(--background-secondary))
inset 0 0 0 2px #646464, inset 0 0 0 3px var(--background-primary), );
inset 0 0 0 4px var(--background-secondary); --button-shadow: inset 0 0 0 1px var(--tertiary, var(--background-tertiary)),
inset 0 0 0 2px var(--primary, var(--background-primary)),
inset 0 0 0 3px var(--secondary, var(--background-secondary));
--scrollbar-shadow: inset 0 0 0 1px
var(--tertiary, var(--background-tertiary)),
inset 0 0 0 2px #404040,
inset 0 0 0 3px var(--primary, var(--background-primary)),
inset 0 0 0 4px var(--secondary, var(--background-secondary));
--scrollbar-shadow-hover: inset 0 0 0 1px
var(--tertiary, var(--background-tertiary)),
inset 0 0 0 2px #646464,
inset 0 0 0 3px var(--primary, var(--background-primary)),
inset 0 0 0 4px var(--secondary, var(--background-secondary));
}
.theme-light {
--hover-bg: #ebeadf;
--hover-shadow: inset 0 0 0 1px #dfdcd2, inset 0 0 0 2px #fafaf8,
inset 0 0 0 3px #d1cec6;
--button-bg: linear-gradient(
to bottom,
var(--primary, var(--background-primary)),
var(--secondary, var(--background-secondary))
);
--button-shadow: inset 0 0 0 1px var(--tertiary, var(--background-tertiary)),
inset 0 0 0 2px var(--primary, var(--background-primary)),
inset 0 0 0 3px var(--secondary, var(--background-secondary));
--scrollbar-shadow: inset 0 0 0 1px
var(--tertiary, var(--background-tertiary)),
inset 0 0 0 2px #404040,
inset 0 0 0 3px var(--primary, var(--background-primary)),
inset 0 0 0 4px var(--secondary, var(--background-secondary));
--scrollbar-shadow-hover: inset 0 0 0 1px
var(--tertiary, var(--background-tertiary)),
inset 0 0 0 2px #646464,
inset 0 0 0 3px var(--primary, var(--background-primary)),
inset 0 0 0 4px var(--secondary, var(--background-secondary));
} }
[class*="button-"][class*="lookFilled-"], [class*="button-"][class*="lookFilled-"],
@ -30,6 +61,7 @@ section[class^="panels-"]
button[class^="button-"], button[class^="button-"],
[class^="toolbar-"] [class^="iconWrapper-"] { [class^="toolbar-"] [class^="iconWrapper-"] {
border-radius: 0; border-radius: 0;
color: var(--text) !important;
background: var(--button-bg) !important; background: var(--button-bg) !important;
box-shadow: var(--button-shadow) !important; box-shadow: var(--button-shadow) !important;
} }