Make Modular

modular/base.css

@@ -67,6 +67,11 @@
   padding: 0.5em;
 }
 
+[id^="message-username-"]
+  [class^="badge-"]:has(> [class^="badgeVerifiedIcon-"]) {
+  display: none;
+}
+
 /* remove "dead space"/padding from vc users */
 [class*="containerDefault-"] [class*="listDefault-"] {
   padding-left: 8px !important;
@@ -280,6 +285,15 @@
   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 */
 /*.steam-border-message > #border {
     width: 20px !important;
@@ -320,3 +334,22 @@ code,
 .hljs {
   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;
+  }*/

modular/font/terminus.css

@@ -43,11 +43,11 @@
 .theme-dark,
 :root {
   --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)",
-    "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;
 }

modular/font/unifont.css

@@ -51,10 +51,12 @@
 
 .theme-dark,
 :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-"],

modular/overwrite_colors.css

@@ -1,5 +1,6 @@
+:root,
 .theme-dark,
-:root {
+.theme-light {
   --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),
     0 0 0 2px var(--background-secondary), 0 0 0 3px var(--background-primary);
@@ -124,6 +125,7 @@
   --red-400: var(--status-dnd) !important;
   --primary-400: var(--status-offline) !important;
   --twitch: var(--status-streaming) !important;
+  --primary-600: var(--primary);
 }
 
 [data-popout-root],
@@ -296,7 +298,9 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] {
   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*="modeUnread-"]
   [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));
 }
 
+[class^="containerDefault-"]:not(:hover)
+  [class*="modeSelected-"]
+  svg[class^="icon-"] {
+  color: var(--interactive-active);
+}
+
 [class^="containerDefault-"]
   [class*="iconVisibility-"]:hover
   svg[class^="icon-"],

modular/scheme/amoled.css

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

modular/scheme/amora.css

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

modular/scheme/amora_focus.css

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

modular/scheme/annie_dark.css

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

modular/scheme/catppuccin_frappe.css

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

modular/scheme/catppuccin_macchiato.css

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

modular/scheme/catppuccin_mocha.css

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

modular/scheme/everforest.css

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

modular/scheme/gruvbox.css

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

modular/scheme/lovelace.css

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

modular/scheme/nord.css

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

modular/scheme/stock.css

@@ -1,45 +1,44 @@
-.theme-dark,
+.theme-dark {
-:root {
+  --_color0: #0d1117;
-  --_color0: #484f58;
+  --_color1: #ff7b72;
-  --_color1: #f85149;
   --_color2: #3fb950;
   --_color3: #d29922;
   --_color4: #58a6ff;
   --_color5: #bc8cff;
-  --_color6: #39c5cf;
+  --_color6: #76e3ea;
   --_color7: #b1bac4;
 
-  --_color8: #6e7681;
+  --_color8: #161b22;
-  --_color9: #ff7b72;
+  --_color9: #ffa198;
   --_color10: #56d364;
   --_color11: #e3b341;
   --_color12: #79c0ff;
   --_color13: #d2a8ff;
-  --_color14: #56d4dd;
+  --_color14: #b3f0ff;
   --_color15: #f0f6fc;
 
   --_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);
 }

modular/scheme/tokyo_night.css

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

modular/scheme/xmc.css

@@ -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;
 

modular/scheme_light/catppuccin_latte.css

@@ -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;
+}

modular/scheme_light/gruvbox.css

@@ -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);
+}

modular/scheme_light/nord.css

@@ -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;
+}

modular/scheme_light/stock.css

@@ -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;
+}

modular/scheme_light/xmc.css

@@ -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;
+}

modular/stylings.css

@@ -1,26 +1,57 @@
-.theme-dark,
 :root {
   --_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-shadow: inset 0 0 0 1px #373737, inset 0 0 0 2px #444444,
     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-"],
@@ -30,6 +61,7 @@ section[class^="panels-"]
   button[class^="button-"],
 [class^="toolbar-"] [class^="iconWrapper-"] {
   border-radius: 0;
+  color: var(--text) !important;
   background: var(--button-bg) !important;
   box-shadow: var(--button-shadow) !important;
 }