diff --git a/xmc.user.css b/xmc.user.css index 684e77f..660e417 100644 --- a/xmc.user.css +++ b/xmc.user.css @@ -9,6 +9,234 @@ @version 0.0.0 @license MIT +@var select xmc_overwrite_colors 'Overwrite Colors' { + 'Off': "", + 'On*': `.theme-dark, + :root { + --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); + + --_font-titlebars: var(--font-primary); + + --titlebar-color: var(--highlight); + + --header-primary: var(--text, var(--white-500)) !important; + --header-secondary: var(--text, var(--primary-dark-300)) !important; + --text-normal: var(--text, var(--primary-dark-200)) !important; + --text-muted: var(--highlight, var(--primary-dark-330)) !important; + --text-link: var(--link, var(--link-500)) !important; + --text-brand: var(--accent); + --channels-default: var(--text, var(--primary-dark-345)) !important; + --channel-icon: var(--text, var(--primary-dark-360)); + --interactive-normal: var(--text, var(--primary-dark-300)) !important; + --interactive-hover: var(--_color15, var(--primary-dark-200)) !important; + --interactive-active: var(--_color15, var(--white-500)) !important; + --interactive-muted: var(--highlight, var(--primary-dark-500)) !important; + --background-primary: var(--primary, var(--primary-dark-600)) !important; + --background-secondary: var( + --secondary, + var(--primary-dark-630) + ) !important; + --background-secondary-alt: var( + --secondary-alt, + var(--secondary, var(--primary-dark-660)) + ) !important; + --background-tertiary: var(--tertiary, var(--primary-dark-700)) !important; + --background-accent: var(--highlight, var(--primary-dark-500)) !important; + --background-floating: var(--primary, var(--primary-dark-800)) !important; + --background-modifier-hover: rgba(var(--highlight-rgb), 0.16) !important; + --background-modifier-active: rgba(var(--highlight-rgb), 0.24) !important; + --background-modifier-selected: rgba(var(--highlight-rgb), 0.32) !important; + --background-modifier-accent: rgba(var(--highlight-rgb), 0.06) !important; + --background-mentioned: rgba(var(--accent-rgb), 0.05) !important; + --background-mentioned-hover: rgba(var(--accent-rgb), 0.08) !important; + --background-message-hover: rgba(4, 4, 5, 0.07) !important; + --background-help-warning: rgba(250, 166, 26, 0.1) !important; + --background-help-info: rgba(0, 176, 244, 0.1) !important; + --scrollbar-thin-thumb: var(--text) !important; + --scrollbar-thin-track: transparent !important; + --scrollbar-auto-thumb: var(--text) !important; + --scrollbar-auto-track: transparent !important; + --scrollbar-auto-scrollbar-color-thumb: var(--text) !important; + --scrollbar-auto-scrollbar-color-track: transparent !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; + --focus-primary: var(--link) !important; + --guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) !important; + --channeltextarea-background: var( + --secondary, + var(--primary-dark-560) + ) !important; + --activity-card-background: var( + --tertiary, + var(--primary-dark-700) + ) !important; + --textbox-markdown-syntax: #8e9297 !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: var(--primary) !important; + --deprecated-quickswitcher-input-background: var( + --primary, + --primary-dark-400 + ) !important; + --deprecated-quickswitcher-input-placeholder: hsla( + 0, + 0%, + 100%, + 0.3 + ) !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: #181b28 !important; + --deprecated-text-input-prefix: #dcddde !important; + --input-background: var(--tertiary, var(--primary-dark-700)) !important; + --control-brand-foreground: var(--accent) !important; + --channel-text-area-placeholder: var(--highlight); + --status-positive-text: var(--text); + --status-danger-text: var(--text); + --status-warning-text: var(--text); + --button-secondary-background: var(--primary); + --button-secondary-background-hover: var(--highlight); + --button-secondary-background-active: var(--highlight); + --button-secondary-background-disabled: var(--tertiary); + --text-danger: var(--_color1); + --status-danger: var(--_color1); + --status-danger-background: var(--_color1); + --button-danger-background: var(--_color1); + --button-danger-background-hover: var(--_color9); + --button-danger-background-active: var(--_color9); + --button-outline-danger-border: var(--_color1); + --button-outline-danger-border-hover: var(--_color9); + --button-outline-danger-border-active: var(--_color9); + --button-outline-danger-background-hover: var(--_color9); + --button-outline-danger-background-active: var(--_color9); + --text-positive: var(--_color2); + --status-positive: var(--_color2); + --status-positive-background: var(--_color2); + --button-positive-background: var(--_color2); + --button-positive-background-hover: var(--_color10); + --button-positive-background-active: var(--_color10); + --button-outline-positive-border: var(--_color2); + --button-outline-positive-border-hover: var(--_color10); + --button-outline-positive-border-active: var(--_color10); + --button-outline-positive-background-hover: var(--_color10); + --button-outline-positive-background-active: var(--_color10); + --text-warning: var(--_color3); + --status-warning: var(--_color3); + --status-warning-background: var(--_color3); + --status-green-600: var(--status-online) !important; + --status-yellow-500: var(--status-idle) !important; + --status-red-500: var(--status-dnd) !important; + --status-grey-500: var(--status-offline) !important; + --twitch: var(--status-streaming) !important; + } + + [data-popout-root], + html { + --brand-experiment: var(--accent) !important; + --brand-100: var(--accent) !important; + --brand-130: var(--accent) !important; + --brand-160: var(--accent) !important; + --brand-200: var(--accent) !important; + --brand-230: var(--accent) !important; + --brand-260: var(--accent) !important; + --brand-300: var(--accent) !important; + --brand-330: var(--accent) !important; + --brand-360: var(--accent) !important; + --brand-400: var(--accent) !important; + --brand-430: var(--accent) !important; + --brand-460: var(--accent) !important; + --brand-500: var(--accent) !important; + --brand-530: var(--accent) !important; + --brand-560: var(--accent) !important; + --brand-600: var(--accent) !important; + --brand-630: var(--accent) !important; + --brand-660: var(--accent) !important; + --brand-700: var(--accent) !important; + --brand-730: var(--accent) !important; + --brand-760: var(--accent) !important; + --brand-800: var(--accent) !important; + --brand-830: var(--accent) !important; + --brand-860: var(--accent) !important; + --brand-900: var(--accent) !important; + --brand-new-100: var(--accent) !important; + --brand-new-130: var(--accent) !important; + --brand-new-160: var(--accent) !important; + --brand-new-200: var(--accent) !important; + --brand-new-230: var(--accent) !important; + --brand-new-260: var(--accent) !important; + --brand-new-300: var(--accent) !important; + --brand-new-330: var(--accent) !important; + --brand-new-360: var(--accent) !important; + --brand-new-400: var(--accent) !important; + --brand-new-430: var(--accent) !important; + --brand-new-460: var(--accent) !important; + --brand-new-500: var(--accent) !important; + --brand-new-530: var(--accent) !important; + --brand-new-560: var(--accent) !important; + --brand-new-600: var(--accent) !important; + --brand-new-630: var(--accent) !important; + --brand-new-660: var(--accent) !important; + --brand-new-700: var(--accent) !important; + --brand-new-730: var(--accent) !important; + --brand-new-760: var(--accent) !important; + --brand-new-800: var(--accent) !important; + --brand-new-830: var(--accent) !important; + --brand-new-860: var(--accent) !important; + --brand-experiment-900: var(--accent) !important; + --brand-experiment-100: var(--accent) !important; + --brand-experiment-130: var(--accent) !important; + --brand-experiment-160: var(--accent) !important; + --brand-experiment-200: var(--accent) !important; + --brand-experiment-230: var(--accent) !important; + --brand-experiment-260: var(--accent) !important; + --brand-experiment-300: var(--accent) !important; + --brand-experiment-330: var(--accent) !important; + --brand-experiment-360: var(--accent) !important; + --brand-experiment-400: var(--accent) !important; + --brand-experiment-430: var(--accent) !important; + --brand-experiment-460: var(--accent) !important; + --brand-experiment-500: var(--accent) !important; + --brand-experiment-530: var(--accent) !important; + --brand-experiment-560: var(--accent) !important; + --brand-experiment-600: var(--accent) !important; + --brand-experiment-630: var(--accent) !important; + --brand-experiment-660: var(--accent) !important; + --brand-experiment-700: var(--accent) !important; + --brand-experiment-730: var(--accent) !important; + --brand-experiment-760: var(--accent) !important; + --brand-experiment-800: var(--accent) !important; + --brand-experiment-830: var(--accent) !important; + --brand-experiment-860: var(--accent) !important; + --brand-experiment-900: var(--accent) !important; + --brand-experiment-05a: rgba(var(--accent-rgb), 0.05) !important; + --brand-experiment-10a: rgba(var(--accent-rgb), 0.1) !important; + --brand-experiment-15a: rgba(var(--accent-rgb), 0.15) !important; + --brand-experiment-20a: rgba(var(--accent-rgb), 0.2) !important; + --brand-experiment-25a: rgba(var(--accent-rgb), 0.25) !important; + --brand-experiment-30a: rgba(var(--accent-rgb), 0.3) !important; + --brand-experiment-35a: rgba(var(--accent-rgb), 0.35) !important; + --brand-experiment-40a: rgba(var(--accent-rgb), 0.4) !important; + --brand-experiment-45a: rgba(var(--accent-rgb), 0.45) !important; + --brand-experiment-50a: rgba(var(--accent-rgb), 0.5) !important; + --brand-experiment-55a: rgba(var(--accent-rgb), 0.55) !important; + --brand-experiment-60a: rgba(var(--accent-rgb), 0.6) !important; + --brand-experiment-65a: rgba(var(--accent-rgb), 0.65) !important; + --brand-experiment-70a: rgba(var(--accent-rgb), 0.7) !important; + --brand-experiment-75a: rgba(var(--accent-rgb), 0.75) !important; + --brand-experiment-80a: rgba(var(--accent-rgb), 0.8) !important; + --brand-experiment-85a: rgba(var(--accent-rgb), 0.85) !important; + --brand-experiment-90a: rgba(var(--accent-rgb), 0.9) !important; + --brand-experiment-95a: rgba(var(--accent-rgb), 0.95) !important; + }`, +} + @var select xmc_scheme 'Color Scheme' { 'Stock': `.theme-dark, :root { @@ -32,20 +260,20 @@ --_colorFG: var(--_color7); - --primary: #36393f; - --secondary: #2f3136; - --tertiary: #202225; - --primary-rgb: 54, 57, 63; - --secondary-rgb: 47, 49, 54; - --tertiary-rgb: 32, 34, 37; + --__primary: #36393f; + --__secondary: #2f3136; + --__tertiary: #202225; + --__primary-rgb: 54, 57, 63; + --__secondary-rgb: 47, 49, 54; + --__tertiary-rgb: 32, 34, 37; --accent: #7289da; --accent-rgb: 114, 137, 218; - --red: #f04747; - --text: #dcddde; - --link: #00aff4; - --highlight: #72767d; - --highlight-rgb: 114, 118, 125; + --__red: #f04747; + --__text: #dcddde; + --__link: #00aff4; + --__highlight: #72767d; + --__highlight-rgb: 114, 118, 125; --status-online: #43b581; --status-idle: #faa61a; @@ -53,7 +281,7 @@ --status-offline: #747f8d; --status-streaming: #593695; - --titlebar-color: var(--highlight); + --__titlebar-color: var(--highlight); }`, 'XMC*': `.theme-dark, :root { @@ -167,13 +395,15 @@ --primary: #1a1a1a; --secondary: #171717; + --secondary-alt: #151515; --tertiary: #141414; --primary-rgb: 26, 26, 26; --secondary-rgb: 23, 23, 23; + --secondary-alt-rgb: 21, 21, 21; --tertiary-rgb: 20, 20, 20; - --accent: var(--_color1); - --accent-rgb: 232, 63, 128; + --accent: #634e75; + --accent-rgb: 99, 78, 117; --red: var(--_color6); --text: var(--_color7); --link: var(--_color10); @@ -185,6 +415,8 @@ --status-dnd: var(--_color5); --status-offline: var(--tertiary); --status-streaming: var(--_color4); + + --titlebar-color: var(--accent); }`, 'Gruvbox': `.theme-dark, :root { @@ -950,19 +1182,19 @@ span[class="role-tag"], :root { --_font-titlebars: "Segoe UI", sans-serif; - --button-bg: linear-gradient(to bottom, var(--primary), var(--secondary)); - --button-shadow: inset 0 0 0 1px var(--tertiary), - inset 0 0 0 2px var(--primary), inset 0 0 0 3px var(--secondary); + --button-bg: linear-gradient(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(--tertiary), inset 0 0 0 2px #404040, - inset 0 0 0 3px var(--primary), inset 0 0 0 4px var(--secondary); - --scrollbar-shadow-hover: inset 0 0 0 1px var(--tertiary), - inset 0 0 0 2px #646464, inset 0 0 0 3px var(--primary), - inset 0 0 0 4px var(--secondary); + --scrollbar-shadow: inset 0 0 0 1px var(--background-tertiary), inset 0 0 0 2px #404040, + inset 0 0 0 3px var(--background-primary), inset 0 0 0 4px var(--background-secondary); + --scrollbar-shadow-hover: inset 0 0 0 1px var(--background-tertiary), + inset 0 0 0 2px #646464, inset 0 0 0 3px var(--background-primary), + inset 0 0 0 4px var(--background-secondary); } [class*="button-"][class*="lookFilled-"], @@ -990,7 +1222,7 @@ nav[class^="sidebar-"] div[class^="item-"][class*="selected-"], box-shadow: var(--button-shadow) !important; } -[class^="containerDefault-"] [class^="content-"]:hover, +[class^="containerDefault-"] [class^="iconVisibility-"]:hover [class^="content-"], nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, [class^="member-"]:not([aria-expanded="true"]):hover > [class^="layout-"], [class^="channel-"] [class^="interactive-"]:not([class*="selected-"]):hover { @@ -1007,7 +1239,7 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, } [class^="channelTextArea-"] > [class^="scrollableContainer-"] { - border: 1px solid var(--tertiary); + border: 1px solid var(--background-tertiary); border-radius: 0; } @@ -1026,8 +1258,8 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, } [class^="toolbar-"] > [class^="search-"] [class^="searchBar-"] { - background-color: var(--primary); - border: 1px solid var(--tertiary); + background-color: var(--background-primary); + border: 1px solid var(--background-tertiary); border-radius: 0; height: 32px; justify-content: center; @@ -1103,6 +1335,10 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover, var(--secondary-rgb), var(--secondary-alpha) ) !important; + --transparent_background-secondary-alt: rgba( + var(--secondary--alt-rgb, --secondary-rgb), + var(--secondary-alpha) + ) !important; --transparent_background-tertiary: rgba( var(--tertiary-rgb), var(--tertiary-alpha) @@ -1226,7 +1462,6 @@ body > #app-mount > .platform-web > [class^="popout-"] > [class^="content-"] > [ background: transparent !important; } - #gm-settings-inject [class^="auto-"]::-webkit-scrollbar-track, #gm-settings-inject[class^="auto-"]::-webkit-scrollbar-track { background: transparent !important; @@ -1656,6 +1891,7 @@ html.platform-win:not(.app-focused) [class*="winButton-"] { } [class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] { border-radius: 0 !important; + border: 0 !important; } [class^="chatContent-"] > form [class^="channelTextArea"] > [class^="scrollableContainer-"] > [class^="inner-"] > [class^="textArea-"], @@ -2356,7 +2592,7 @@ section[class^="panels-"] > [class^="container-"]:last-child > div:last-child { top: 6px !important; left: 7px !important; padding: 0 !important; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAM6SURBVDhPhZJrUIxRGMePMUiDkUaMmeRSQy7lMijklg+lBg1DG8Nu6EalJFqxU7JtbcnSZd+tbMm2W3RZpdVlG7GpKJemZqKLiC9tYYsti/17rdf0gRm/mWfmzHPO7z/PnHPI/1A9rRKyLu38tPHgiiFZUV4K0/4b3dCAe6ky/nHF3YIspkXiq6kXXHUw8hu5YAv2giyciQsJl+8x22MYjUZzdXMKgD5ESytwX9MROTzyxX7H7QioDSpU9hXiKBWHmZ4cEDNnjIx8ncuov9Hr9Qviyq6hl47YVwbwMjrkD9qfhGzO40L8rhr8xxVwTcrHtD25IDPC0Nun3cqoY4hkcoUlJwdkay0M34zTdZ91y6cd8YB7Bh9bhBLYBJeBuD4EWZAKeuJJjDZGV1c9L+9mCOKTwvGspSHsV48THfmIrFgHs20BIM4iEGspmlq1USbhD/TU4568yO949VZML4cwikH4cFNxRqh839nd62Pv5qydYOsEMscVvuF8DaON8Wagpb2uR43+4Ud0AGCgK6ZkBIt9xThSwkNO23mklPuDFeeBRbuW4kTUqVqd7uMSRick9/UXsNOvQGdoNwW8pCtCVURXKKg3aXg+WghZcyICqVNYH8LGOPs1ILOXoFajuWgKSNR8794dGYAuQyd0tMxrzIJSS0HSI0PRcDmaR8uRUZ8OjjgOm6K4sPHyo/+DB8jyIPT09nFMIfStTvyOH07F3Q0NordZELTU4FglBeVoDao+VICvvg7vNBFcooWwY8diiuMBjN+SDStPSm8K+ENQHR/BVaWwDroKtioZssF7yOkuRnipFLtEFJzOSWDnL4GFy1lMXHUS5t5qI6MSUveqRehZGAur/Zmw2BcK3+p4iDpvQ9Agg+/NbGxPzMbqqDzYBhbAwk2MSY6HMctPAUYn5JIy85lVaBiIbRosD+3Enls8cDWZOHlHDK90MTbEXMey0wWYH3AHZm5yTHY4C/3Xb9aMTj+n9j07LKegrrJxgBtzi6p3SOCAJY+FjzQRrgIRVp6RYN5xOab6lICsVWCt941+Rv03Ta/bg/mq3Kb9qYKBzbykTy7R0n5Wck2roOilQtM2GPj7FCE/Ab+l9dhxypy/AAAAAElFTkSuQmCC"); + background-image: var(--titlebar-icon); background-repeat: no-repeat; } [class^="wordmarkWindows-"]::after { @@ -2457,19 +2693,48 @@ section[class^="panels-"] > [class^="container-"]:last-child > div:last-child { `, } +@var select xmc_titlebar_icon 'Titlebar Icon' { + 'Discord*': `:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFrSURBVDhPnVNNS8NAFMy5Pyd/pgGvCXi0eLT4C7wKJfSkIKjUg3jrRevFo+AHEhRvIuglabHpttnnm5fNsmmiiA8GXmbmTbKbXW+9gij1gzAddKM06YapMkiYHwRR5htbs1js8OCQB4n7H5AS6zGjY8bKYpGHs0lzoB0cMKmF8JvjNuNv4IBhNezj0yphYzOjvf0vOjie09bOVIAeHDQbEMpyfI8bbI4Vrm8Uaa1bAc31YhYBvMMlsb07ax10AY8TkCBAVcTZRS6mj8+CjkY55bkWoAcHbcQeJ0DVAm7vl2IaXy7kOXlZCdCDgwZP5a8C7BKeX1diUkrTw1MZBqAHhx4eJ0CWYDfx9DynotD09l7Q+GpBd49LAXpw0OCxAXw65TdyiCV7/RkdnsztcwVwvf7U4TDDvxHFAf85SLEMozgA9+DPR5nfXD/KKITIlzjLWQeWCg+8ZqxZcrRxnXmHGYp7IAEHzdhMed43/d6Afr0nB7gAAAAASUVORK5CYII="); +}`, + 'Discord Canary': `:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGhSURBVDhPlZNdKwRhFMfner6CzXukFE2JlIj4BHLtS/ANKOUDjGnviF3rnV03XJhyIXm92W2Wi+VGKDZSe2ae5zjneZ7ZtEhO/ZrzPOf3n7dmrNoK90cdwg33xwICDNTz3qhjtO8F2WE7zI0kCfwDL8wN2yamC/YGbcgO+WF2COn4K1/mPmdMnE8w4BH4T5I6vNPvEBgTHk2iKO2ieDjG6Hpewb0o7amZ8narvmPBdq8L232ooNuTH48opfwZmqlHiH3KWrDVExDIRFdzPwe/wE7sc9aCTQcIZMTjqZLE8zlGJ1Mo4Y14p34axdOZnpET+5y1YKMLCGRkpayvkl+gdTfK8g1xq/oo7+q7ICf2OWvBemdAICOl0JIAChZ1z3AvKmYtlGugR1jrcAlkxH1OSy8FFMVF/faZ4hLK14Kaibuscg30EjPtDmTaMCY8nMDoYqa6jokuZzE8GK/Zb9efNqy2epBuwX9BGRXmgnSzDakmH1KNSMdf4Fl17nPGxHVBqsGGlXqPwD/w2DWx7wXLCQeW61wiIMDAPe0lan5ny/oEGx2ifF3nCr4AAAAASUVORK5CYII="); +}`, + 'Discord Development': `:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGqSURBVDhPldNNTsJQEAfwt+YUCoUCItAWEFS4hPEz8RDGxBOIXweQ2rhT1xoTwa0VTVR0K1Y8QN0R3NCkjDNDGxE16iS/ZPLmPy9N04rhykwUVaRn80Urmy85fUWLzmjmxb6WlpsKaLnpfQS/MCjrrfVLyUwG1OykieCPTCVT+LgkrRUMRSvAf6S1/D4vp9QJFYFvfnEZjk9O4cK8hPLmDjPNOp/N4Wwwi1SRTGd1BCRXKIFtv0Kv1/uWbduc8fO0KxKpjIWArG9sfbs4aH1jm7MeS4wlVQcBubm941Dj/gFWVteg0+lA5+2N+0bjgWeU8fO0K+IJxUFA2u02hyq6AfFxBZ6fW9BqvXC/W9njGWX8PO2K6FjKQkBct/+YjuOAhcvUE7qo2+1y77ouZz2WkGPjOgJSrZ1z6LHZhIPDI6hfXTPqm80nnp1Va5z16CISTagIfLPzS1DGFzV4Rsqb2zAzuzB83v+0JTluSJE4/JPBy1ShcCyAzFA4Cn+D2Ujs8/8QlOQAMkZDMvxIkoEyQSn6eXmwRkIRdSQY1pGFHA/1+ijOvJhXQrwDgTTB8rXBmzwAAAAASUVORK5CYII="); +}`, + 'MSN': `:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAM6SURBVDhPhZJrUIxRGMePMUiDkUaMmeRSQy7lMijklg+lBg1DG8Nu6EalJFqxU7JtbcnSZd+tbMm2W3RZpdVlG7GpKJemZqKLiC9tYYsti/17rdf0gRm/mWfmzHPO7z/PnHPI/1A9rRKyLu38tPHgiiFZUV4K0/4b3dCAe6ky/nHF3YIspkXiq6kXXHUw8hu5YAv2giyciQsJl+8x22MYjUZzdXMKgD5ESytwX9MROTzyxX7H7QioDSpU9hXiKBWHmZ4cEDNnjIx8ncuov9Hr9Qviyq6hl47YVwbwMjrkD9qfhGzO40L8rhr8xxVwTcrHtD25IDPC0Nun3cqoY4hkcoUlJwdkay0M34zTdZ91y6cd8YB7Bh9bhBLYBJeBuD4EWZAKeuJJjDZGV1c9L+9mCOKTwvGspSHsV48THfmIrFgHs20BIM4iEGspmlq1USbhD/TU4568yO949VZML4cwikH4cFNxRqh839nd62Pv5qydYOsEMscVvuF8DaON8Wagpb2uR43+4Ud0AGCgK6ZkBIt9xThSwkNO23mklPuDFeeBRbuW4kTUqVqd7uMSRick9/UXsNOvQGdoNwW8pCtCVURXKKg3aXg+WghZcyICqVNYH8LGOPs1ILOXoFajuWgKSNR8794dGYAuQyd0tMxrzIJSS0HSI0PRcDmaR8uRUZ8OjjgOm6K4sPHyo/+DB8jyIPT09nFMIfStTvyOH07F3Q0NordZELTU4FglBeVoDao+VICvvg7vNBFcooWwY8diiuMBjN+SDStPSm8K+ENQHR/BVaWwDroKtioZssF7yOkuRnipFLtEFJzOSWDnL4GFy1lMXHUS5t5qI6MSUveqRehZGAur/Zmw2BcK3+p4iDpvQ9Agg+/NbGxPzMbqqDzYBhbAwk2MSY6HMctPAUYn5JIy85lVaBiIbRosD+3Enls8cDWZOHlHDK90MTbEXMey0wWYH3AHZm5yTHY4C/3Xb9aMTj+n9j07LKegrrJxgBtzi6p3SOCAJY+FjzQRrgIRVp6RYN5xOab6lICsVWCt941+Rv03Ta/bg/mq3Kb9qYKBzbykTy7R0n5Wck2roOilQtM2GPj7FCE/Ab+l9dhxypy/AAAAAElFTkSuQmCC"); +}`, + 'mIRC 6': `:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB/SURBVDhPxZALCgAhCEQ9ujcvJ1PMggwWduBRijN9CGLm9sIwRWmzzhbyeUCtDooD2ENWAyjPTKvq3wAmahVk1NkCpHJy7b2mMHuQ6iUAZkOs4PyEaPReuAHWJcAMZlr2wZhOB/UAsBhNt4Ackm5xD5iDW8jsnz8xMoZ0zYiIOusbnt1lWQzCAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); +}`, + 'mIRC 6 Inverted': `:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACCSURBVDhPxY7hCsAgCIT9MfbcvrnT0rIbbAmDHRx11X1GJmaWilspq11QwQj5HrCRvdq1PNC9KRdahjde7foZwCRbpukb4JRjGHOciXTzhLkKACuHtekQC+BcDOcf2LoAcFre5yJMrwHSVC+GXgAIgV9sAHwqQvxcZeHJXQOUrCK6ADMZukVNcDDrAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAA=="); +}`, + 'mIRC 7': `:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIgSURBVDhPXZAf2PJQGMZ3HRgEwSB4IfjggyAYDAbBIAgGgyAIgsFgMBgEwSAIPhgEQRAEwSB4IQiCweCF4IUXgmAwGASDQff7nNO/b53r+l17nvuc+37OmcSXZkXQ+nceNf8KNv/VL00YH0u11hhvrwLTT+AsMlH70RU9L4EdphhT7Ucl/E1JZ76gmutXiGquxGbHuWAwKzAKC3S9nPpcfN1VASug3s4E+ugMtbd8BbR7C0ouoNsp9GEC1fqENohhOGdxWBsk9KydQGjDE9rd+Sug1Q3hrS+08QNeC4yQJudk/hZ1VTuK+m6nAGMGj2/0v9DqzMQG/960pKK5q4xuGD81sf7qAdwl3ziA1xXN3L9pKWm7pyYdlBqOLfnJnvqoLj/ZPGjImA9veH0dqu7eAnZkuAaNJ5+8n1E9USqsKKT8VlHGCuJ/DFOrfgvgU65uA4XGBKLnYX1WYcH1fIRpj+GyY9hNZARmDdKaNh7wKZzrmALoICdq0lOIxQfdLO2jPLZRHJrI9iomPQpYcsOUDHfEJI9qgwKIWU1Gsafrf/1BebJwORpIlm3M7Q/4Bj1j/jYxJIN4ks5QEgH12Zoh3zL8LJiYKoyPxSdwAz/MmVJfOg3kKpnon4xlhjRq4bys4TRniAMKNRU4+j2ETyjtBjIycCb3Pm2TkfAoIBw1cVxpOG87OEUdxKEGt6PcAvgE/w3nHZpma3WMVKWCJEnSLy2BBAWWLCo4AAAAAElFTkSuQmCC"); +}`, + 'mIRC 7 Inverted': `:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMQSURBVDhPTZB7SFRZGMBP5zrThqNzR5tsMhvL1mwnyyyM/KciInXLyoW1ptSslOzFFEY1udqahG2uu2lsZVH0/KMWbTUKtAfLUqwRRJEQ7SPabWzZ3Zyg50zBr3Ovjzzw4/u+33e+7x6uME5pYn1QgYl7UJ5YR4l7X0upu+6RQvV6We3ed2fVmFrdHDZOccIeug6+N6nLuczlnd1mfne/qrM7uFgeGOgbriH3Z4pGVx/vGxdihesrbje+5+DcABfWP+dS+UuOLnxq1ka8URvmXNH/Zm3QOOcPvCP99I0LkT9iK7/Uv2FP5h386a2sG3+IrZObqZ/XZbodaRfZPPE0vpRTA+5L55aPC/JiNtJR+5zt09r5QuWq/i7PsYFLNc9Ml+dYb7hdRhzs+saFWGQvoa3mH8o8ZzFy00UPctGrTZerYr8zcsOZJ8dWyPmqx3jHNZBjKzAbRhxwkStMl61ivzNyw4kJ38QGFRgkG9TGMGbL0AES+hjvs/DDMo3GfI2KuUnk6lm9C5KqdU6/dXLstZPDL+NI+trOlVAsbSEHrYoLimbF6A0RhB96CHV+QudeC7uzNGo+1xJFoj+S8sAoZl3VyWzXce+I5IxaWN1toypgo+KJDf9fNlylknevV1I9SyPUbuWKP4LKeVqLMJ+4uR8rCT4re3tcFNzTWX5XZ1JVBJ9VaiSXabzrySP8IJnQzRheXPewTS0T8apx5FUcTer5hxTxazV8T+LJvOpgZoeDEQWS0DUroXsuwt0LCHdlcqtpLPsLbfhmyusirliy899R5PzqIOuGg7iVkrLfRpL+YxTp56MYni/pOWvhVauV35ssbJutsWmGbNmUIdPMn+j0Stb96WJ6m53prXacSyVr7seSemwoqUetxC6R/PfTOAJHLPx9wEJnhYXK+VZWpcrjRR6pC+NCSddwppwcxpQTw3AslhTfjiKlXiPlWw19oeR7r86DU2k8bcsg0JzBrYZUSqZGUJAiZwt7tgwqiM4a8pH5vUT1EixWXyv0yKAawDtBsixZPlr6qdwlhBAfAJkz9Tuj0O+XAAAAAElFTkSuQmCC"); +}`, + 'mCord': `:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACJSURBVDhPxVABDoAgELqn388LvHDMrOnW1i060IPMYGXmsYNm8qrFddxCPg9Y01Y+QM6SJljjzGWt+j2AoiE3Ue4DD5BZIXh1cOhJ9xCoZhY85C1AmqyfgJ0BGnQD+bjOjgsEsa9vB4CBz43q4rN9sv4LOoWbnLvWGlkLIHYCpDFfJkEbK4iIOAFjx6/RbabDvAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAA=="); +}`, + 'mCord Inverted': `:root { + --titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACJSURBVDhPxU9bDoAwCOPDeG5ujjwsYcs0IzGR2G2FtptkxczSgZtq+YAamEO+D9jgtzVqEOjZqhqcT5rbGvV7gJEAN+Fu0U/B0ZBTjoSJnniGwAzUkLcA8OEFtlsAhNXg4qkfPV3q7e2AvHVhxJ7ixXz4Bbyimuq58uwhACG7AeCqD1MCgx0Q0QXjX8uT7Jk2OwAAAABJRU5ErkJgggAAAAAAAAAAAAAAAA=="); +}`, +} + @var select xmc_old_roles 'Old Roles' { 'Off': "", - 'On*': `[class*="role-"] { + 'On*': `[class^="role-"] { position: relative; border-radius: 5%; } - [class^="role-"], [note="FIX ME WHEN WE HAVE :has()"] { - padding-left: 16px; - } - - [class^="roleRemoveButton-"] [class^="roleCircle-"], - [class^="roleRemoveButton-"] [class^="roleFlowerStar-"] { + [class^="role-"] [class^="roleRemoveButton-"] [class^="roleCircle-"], + [class^="role-"] [class^="roleRemoveButton-"] [class^="roleFlowerStar-"] { margin: 0 !important; border-radius: 5% !important; width: 100% !important; @@ -2481,15 +2746,15 @@ section[class^="panels-"] > [class^="container-"]:last-child > div:last-child { opacity: 0.25; } - [class^="roleFlowerStar-"] > svg[class^="linkIcon-"] { - z-index: 6; + [class^="role-"] [class^="roleFlowerStar-"] > svg[class^="linkIcon-"] { + z-index: 7; position: absolute; - opacity: 1; right: -2px; top: -2px; + opacity: 5; } - [class^="roleRemoveButton-"] { + [class^="role-"] [class^="roleRemoveButton-"] { position: absolute; left: 0; width: 100%; @@ -2502,23 +2767,20 @@ section[class^="panels-"] > [class^="container-"]:last-child > div:last-child { z-index: 5; } - [class^="roleName-"] { + [class^="role-"] [class^="roleName-"] { z-index: 2; + margin-right: 0; } - [class^="roleRemoveIcon-"] { + [class^="role-"] [class^="roleRemoveIcon-"] { display: block; position: absolute; - left: 8px; - z-index: 4; + top: 4px; + left: 4px; + z-index: 6; } - [class^="roleRemoveIcon-"] > path { - fill: #ffffff; - filter: brightness(1); - } - - [class^="roleRemoveButton-"] [class*="roleDot-"] { + [class^="role-"] [class^="roleRemoveButton-"] [class*="roleDot-"] { width: 1em !important; height: 1em !important; margin-top: 0.25em; @@ -2646,8 +2908,7 @@ section[class^="panels-"] > [class^="container-"]:last-child > div:last-child { @var select xmc_accessible_styles 'Accessible Font Styles' { 'Off*': "", - 'Italics + Bold': ` -span[data-slate-leaf="true"][class*="italics-"], + 'Italics + Bold': `span[data-slate-leaf="true"][class*="italics-"], em { font-style: normal; display: inline-block; @@ -2660,13 +2921,861 @@ strong { font-weight: 400; text-shadow: 0.1px 0.1px, -0.1px -0.1px; }`, - 'Just Italics': ` -span[data-slate-leaf="true"][class*="italics-"], + 'Just Italics': `span[data-slate-leaf="true"][class*="italics-"], em { font-style: normal; display: inline-block; transform: skewX(-8deg); color: #f80; +}`, + 'Just Colored Italics': `span[data-slate-leaf="true"][class*="italics-"], +em { + color: #f80; +}` +} + +@var select xmc_compacter_mode 'Compact-er Mode' { + 'Off*': "", + 'On': `[class*="guilds-"] [class^="listItemWrapper-"] > [class^="wrapper-"], +[class*="guilds-"] [class^="listItemWrapper-"] > [class^="wrapper-"] > svg, +[class*="guilds-"] [class^="listItem-"] [class^="wrapper-"]:has(> svg), +[class*="guilds-"] [class^="listItem-"] [class^="wrapper-"]:has(> svg) > svg, +[class*="guilds-"] [class^="listItem-"] [class^="wrapperSimple-"], +[class*="guilds-"] [class^="listItem-"] [class^="wrapperSimple-"] > svg { + width: 32px; + height: 32px; +} + +[class*="guilds-"] [class^="listItem-"] > [class^="pill-"], +[class*="guilds-"] + [class^="listItem-"] + > [class^="pill-"] + > [class^="item-"][style*="height: 40px;"] { + height: 32px !important; +} + +[class*="guilds-"], +[class*="guilds-"] [class^="listItem-"], +[class*="guilds-"] + [class^="wrapper-"]:has(> [class^="expandedFolderBackground-"]) { + width: 48px; +} +[class*="guilds-"] [class^="unreadMentionsIndicator"] { + width: 48px; + height: 16px; +} + +[class*="guilds-"] > ul > [class^="scroller-"] { + padding-top: 8px !important; +} +[class*="guilds-"] [class^="listItem-"] { + margin-bottom: 4px; +} + +[class*="guilds-"] ul[id^="folder-items-"] > [class^="listItem-"] { + width: 32px !important; + height: 32px !important; + margin-left: 8px; +} + +[class*="guilds-"] [class^="expandedFolderBackground-"] { + width: 32px; + left: 8px; +} + +[class*="guilds-"] ul[id^="folder-items-"] { + height: unset !important; +} + +section[class^="panels-"] > [class*="activityPanel-"] [class^="gameIcon-"], +section[class^="panels-"] + > [class*="activityPanel-"] + [class^="actions-"] + > [class^="panelButtonContainer-"] + > button, +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class*="directionRow-"] + > button, +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="actionButtons-"] + > button { + width: 24px; + height: 24px; + min-height: 24px; +} + +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class*="directionRow-"] { + position: absolute; + bottom: 8px; + right: 8px; + display: grid; + grid-gap: 4px; + grid-auto-flow: column; +} + +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div { + padding-left: 20px; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"] { + position: absolute; + left: 8px; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"]:has(> :nth-child(2)) { + top: 12px; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"] + > svg[class^="ping-"] { + margin-right: 0; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"], +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"] + > button { + width: 16px; + height: 16px; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"] { + position: relative; + left: -16px; + z-index: 10; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="connection-"] + > [class^="inner-"] + > div + > [class^="rtcConnectionStatus-"] + > [class^="labelWrapper-"] + > button + > [class^="contents-"] { + display: none; +} + +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="actionButtons-"] + > button { + padding: 0; + background: transparent; +} +section[class^="panels-"] + > [class^="wrapper-"] + > [class^="container-"] + > [class*="actionButtons-"] { + grid-gap: 4px; + padding-top: 0; + grid-template-columns: repeat(auto-fill, minmax(0, 24px)); + height: 24px; +} + +section[class^="panels-"] > [class^="container-"] { + height: 40px; + padding: 0 4px; +} +section[class^="panels-"] + > [class^="container-"] + > [class^="avatarWrapper-"] + > [class*="avatar-"] { + width: 24px !important; + height: 24px !important; +} +section[class^="panels-"] + > [class^="container-"] + > [class^="avatarWrapper-"] + > [class*="avatar-"] + > svg { + width: 32px !important; + height: 32px !important; +} +section[class^="panels-"] + > [class^="container-"] + > [class*="directionRow-"] + > button { + width: 24px; + height: 24px; +} +section[class^="panels-"] > [class^="container-"] > [class*="directionRow-"] { + display: grid; + grid-auto-flow: column; + grid-gap: 4px; + padding-right: 4px !important; +} + +.hh2-spotify-controls-player { + margin: 4px 4px !important; + height: 32px !important; +} +.hh2-spotify-controls-album-image { + width: 32px !important; + height: 32px !important; +} +button.hh2-spotify-controls-button { + width: 24px !important; +} +.hh2-spotify-controls-info-box { + margin-left: 4px !important; + max-width: 112px !important; + margin-right: 4px !important; +} +.hh2-spotify-controls-buttons { + display: grid !important; + grid-auto-flow: column; + grid-gap: 4px; +} +.hh2-spotify-controls-track-name { + font-size: 0.75em; +} +.hh2-spotify-controls-album-name span, +.hh2-spotify-controls-album-name a { + color: var(--text-muted) !important; +} + +[class^="members-"] [class^="member-"] > [class^="layout-"] { + height: 32px; +} +[class^="members-"] + [class^="member-"] + > [class^="layout-"] + > [class^="avatar-"], +[class^="members-"] + [class^="member-"] + > [class^="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] { + width: 24px !important; + height: 24px !important; +} +[class^="members-"] + [class^="member-"] + > [class^="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] + > svg[viewBox="0 0 40 40"] { + width: 32px !important; + height: 32px !important; +} +[class^="members-"] + [class^="member-"] + > [class^="layout-"] + > [class^="avatar-"] + > [class^="wrapper-"] + > svg[viewBox="0 0 32 32"] { + width: 24px !important; + height: 24px !important; +} +[class^="members-"] + [class^="member-"] + > [class^="layout-"] + > [class^="avatar-"] { + margin-right: 8px; +} +[class^="members-"] [class^="membersGroup-"] { + padding: 12px 8px 0 8px !important; + height: unset; +} +[class^="members-"] + [class^="member-"] + > [class^="layout-"] + > [class^="children-"] + > .presence-icons-wrapper + > span + > img { + width: 20px; + height: 20px; +} + +[class^="sidebar-"] + [class^="containerDefault-"]:has(> [class*="clickable-"]) { + padding-top: 8px; +} +[class^="sidebar-"] ul[class^="content-"] > div[style="height: 12px;"] { + height: 6px !important; +} +[class^="sidebar-"] ul[class^="content-"] > div[style="height: 84px;"] { + height: 100px !important; +} +[class^="sidebar-"] ul[class^="content-"] > [class^="sectionDivider-"] { + margin-top: 6px; +} +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="iconVisibility-"] + > [class^="content-"] { + padding: 0 4px; +} +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="mainContent-"], +[class^="sidebar-"] + [class^="containerDefault-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="children-"] + > [class^="iconItem-"] { + padding: 3px 0; +} +[class^="sidebar-"] [class^="containerDefault-"] [class^="voiceUser-"] [class^="userAvatar-"] { + margin-left: 4px; + margin-right: 4px; +} + +[nop=nop] [class^="members-"] > [class^="content-"], +[nop=nop] [class^="sidebar-"] ul[class^="content-"] { + height: unset !important; + padding-bottom: 8px; +} + +[class^="sidebar-"] header[class^="header-"] { + padding: 4px 8px; +} +[class^="chat-"] > [class^="title-"] { + height: 32px; +} +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] { + height: 24px !important; +} +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > .DraftEditor-root, +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="search-"] + [class^="searchBar-"] + > [class^="icon-"] { + margin-top: 0 !important; +} +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + [class^="iconWrapper-"] { + width: 24px !important; + height: 24px !important; +} +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + [class*="iconWrapper-"] + > svg { + margin: 0 !important; + padding: 1px; +} +[class^="chat-"] > [class^="title-"] [class^="toolbar-"] { + display: grid; + grid-auto-flow: column; + grid-gap: 4px; +} +[class^="chat-"] + > [class^="title-"] + [class^="toolbar-"] + > [class^="icon-"]:has(> [class^="text-md-normal-"]) { + margin-left: 4px; + margin-right: 0; +} +[class^="chat-"] > [class^="title-"] [class^="topic-"] { + margin-left: 4px; +} +[class^="chat-"] > [class^="title-"] [class^="titleWrapper-"] { + margin-right: 4px; +} +[class^="chat-"] + > [class^="title-"] + > [class^="children-"] + > [class^="iconWrapper-"], +[class^="chat-"] > [class^="title-"] [class^="divider-"] { + margin: 0 4px; +} +[class^="chat-"] + > [class^="title-"] + > [class^="children-"] + > [class^="iconWrapper-"] + > svg { + padding: 2px; +} + +[class^="chatContent-"] > form [class^="channelTextArea"] { + margin-bottom: 1px !important; +} +[class^="chatContent-"] + > form + [class^="channelTextArea"] + > [class^="scrollableContainer-"] + > [class^="inner-"] + > [class^="textArea-"] + > div + > [class*="fontSize16Padding-"] { + padding-top: 9px !important; + padding-bottom: 9px !important; +} +[class^="channelTextArea-"] [class^="inner-"], +[class^="channelTextArea-"] [class^="buttons-"], +[class^="channelTextArea-"] [class^="attachWrapper-"], +[class^="channelTextArea-"] [class^="attachButton-"] { + height: 40px !important; +} +[class^="channelTextArea-"] [class^="attachButton-"] , +[class^="channelTextArea-"] [class^="attachButton-"] > [class^="icon-"] { + padding: 5px 8px; +} +[class^="channelTextArea-"] + [class^="buttons-"] + [class*="buttonContainer-"] + > button:not(:has(> [class*="innerButton-"])) { + margin: 0; +} +[class^="channelTextArea-"] [class^="buttons-"] > [class^="separator-"], +[class^="channelTextArea-"] + [class^="buttons-"] + > [class^="separator-"] + [class*="innerButton-"] { + margin-left: 4px; +} +[class^="channelTextArea-"] + [class^="buttons-"] + > [class^="separator-"] + [class*="innerButton-"] { + margin-right: 0; +} + +[class^="menu-"] [class^="scroller-"] { + padding: 4px; +} +[class^="menu-"] [class^="scroller-"]::-webkit-scrollbar { + width: 4px; +} +[class^="menu-"] [class^="scroller-"] [class^="item-"] { + margin: 1px 0; + padding: 0 4px; + min-height: 24px; +} +[class^="menu-"] + [class^="scroller-"] + [class^="customItem-"][id^="message-quickreact-"] + > [class^="button-"] { + width: 24px; + height: 24px; +} +[class^="menu-"] + [class^="scroller-"] + [class^="wrapper-"]:has( + > [class^="customItem-"][id^="message-quickreact-"] + ) { + padding: 0; + margin-bottom: 4px; +} +[class^="menu-"] + [class^="scroller-"] + [class^="item-"] + > [class^="labelContainer-"], +[class^="menu-"] + [class^="scroller-"] + [class^="item-"] + > [class^="sliderContainer-"] { + padding: 0; +} +[class^="menu-"] + [class^="scroller-"] + [class^="item-"] + > [class^="labelContainer-"] { + min-height: 24px; +}`, +} + +@var select xmc_collapsing_sidebar 'Collapsing Sidebar' { + 'Off*': "", + 'Simple': `[class^="sidebar-"] { + overflow: hidden; + width: 48px; +} +[class^="sidebar-"]:hover { + width: 240px; +}`, + 'Integrated': `div[class^="sidebar-"]:has(> nav[class^="container-"]) > [class^="panels-"] { + position: absolute; + bottom: 0; + width: 240px; + height: 53px; + display: flex; + flex-direction: column-reverse; + justify-content: flex-end; + z-index: 10; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > [class^="panels-"]:hover { + height: unset; + flex-direction: column; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) { + width: unset; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] { + width: unset; + z-index: 9; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="scroller-"] { + width: 56px; + margin-top: 48px; + margin-bottom: 53px; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]):hover + > nav[class^="container-"] + > [class^="scroller-"] { + width: 240px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] { + position: fixed; + top: 0; + width: 240px; + z-index: 101; + background: var(--background-secondary); +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] { + height: 48px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + > [class^="bannerImage-"] { + height: 48px; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + > [class^="bannerImage-"]:after { + content: ""; + height: 48px; + width: 240px; + top: 0; + left: 0; + position: absolute; + background: linear-gradient( + 0deg, + var(--background-secondary) 5%, + transparent 100% + ); +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + [class^="bannerImg-"] { + top: -67px; + position: relative; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="scroller-"] + > ul + > div[style="height: 84px;"] { + height: 0 !important; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + ~ [class^="chat-"] + [class^="chatContent-"] + > form + > [class^="channelTextArea"] { + width: calc(100% - 184px); + margin-left: 184px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):hover + ~ [class^="chat-"] + [class^="chatContent-"] + > form + > [class^="channelTextArea"] { + margin-left: 0; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + ~ [class^="chat-"] + [class^="title-"] { + margin-left: 184px; + width: calc(100% - 184px); +} +div[class^="sidebar-"]:has(> nav[class^="container-"]):hover + ~ [class^="chat-"] + [class^="title-"] { + margin-left: 0; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="channelInfo-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"][class*="selected-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"]:not([class*="typeThread-"]) + > [class^="content-"] + > [class^="mainContent-"] + > [class^="name-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + > [class^="iconVisibility-"][class*="clickable-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] [class^="voiceUser-"] > [class^="content-"] > [class^="icons-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] [class^="voiceUser-"] > [class^="content-"] > [class*="username-"] { + display: none; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"][class*="typeThread-"] + > [class^="content-"] + > [class^="mainContent-"] + > [class^="name-"] { + margin-left: 20px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + ~ [class^="chat-"] [class^="autocomplete-"] { + left: -184px; +}`, +'Integrated - Compact-er support': `div[class^="sidebar-"]:has(> nav[class^="container-"]) > [class^="panels-"] { + position: absolute; + bottom: 0; + width: 240px; + height: 40px; + display: flex; + flex-direction: column-reverse; + justify-content: flex-end; + z-index: 10; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > [class^="panels-"]:hover { + height: unset; + flex-direction: column; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) { + width: unset; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] { + width: unset; + z-index: 9; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="scroller-"] { + width: 56px; + margin-top: 48px; + margin-bottom: 53px; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]):hover + > nav[class^="container-"] + > [class^="scroller-"] { + width: 240px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] { + position: fixed; + top: 0; + width: 240px; + z-index: 101; + background: var(--background-secondary); +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] { + height: 32px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + > [class^="bannerImage-"] { + height: 32px; +} +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + > [class^="bannerImage-"]:after { + content: ""; + height: 32px; + width: 240px; + top: 0; + left: 0; + position: absolute; + background: linear-gradient( + 0deg, + var(--background-secondary) 5%, + transparent 100% + ); +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="container-"][class*="clickable-"] + > [class^="animatedContainer-"] + [class^="bannerImg-"] { + top: -67px; + position: relative; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]) + > nav[class^="container-"] + > [class^="scroller-"] + > ul + > div[style="height: 84px;"] { + height: 0 !important; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + ~ [class^="chat-"] + [class^="chatContent-"] + > form + > [class^="channelTextArea"] { + width: calc(100% - 184px); + margin-left: 184px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):hover + ~ [class^="chat-"] + [class^="chatContent-"] + > form + > [class^="channelTextArea"] { + margin-left: 0; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + ~ [class^="chat-"] + [class^="title-"] { + margin-left: 184px; + width: calc(100% - 184px); +} +div[class^="sidebar-"]:has(> nav[class^="container-"]):hover + ~ [class^="chat-"] + [class^="title-"] { + margin-left: 0; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="channelInfo-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"][class*="selected-"] + [class^="iconVisibility-"] + > [class^="content-"] + > [class^="children-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"]:not([class*="typeThread-"]) + > [class^="content-"] + > [class^="mainContent-"] + > [class^="name-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + > [class^="iconVisibility-"][class*="clickable-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] [class^="voiceUser-"] > [class^="content-"] > [class^="icons-"], +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] [class^="voiceUser-"] > [class^="content-"] > [class*="username-"] { + display: none; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + [class^="containerDefault-"] + [class^="iconVisibility-"][class*="typeThread-"] + > [class^="content-"] + > [class^="mainContent-"] + > [class^="name-"] { + margin-left: 20px; +} + +div[class^="sidebar-"]:has(> nav[class^="container-"]):not(:hover) + ~ [class^="chat-"] [class^="autocomplete-"] { + left: -184px; }`, } @@ -2719,221 +3828,6 @@ em { @-moz-document domain(discord.com) { /* BASE THEME START */ - - /* colors */ - .theme-dark, - :root { - --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(--tertiary), - 0 0 0 2px var(--secondary), 0 0 0 3px var(--primary); - - --_font-titlebars: var(--font-primary); - - --titlebar-color: var(--highlight); - - --header-primary: var(--text) !important; - --header-secondary: var(--text) !important; - --text-normal: var(--text) !important; - --text-muted: var(--highlight) !important; - --text-link: var(--link) !important; - --text-brand: var(--accent); - --channels-default: var(--text) !important; - --channel-icon: var(--text); - --interactive-normal: var(--text) !important; - --interactive-hover: var(--_color15) !important; - --interactive-active: var(--_color15) !important; - --interactive-muted: var(--highlight) !important; - --background-primary: var(--primary) !important; - --background-secondary: var(--secondary) !important; - --background-secondary-alt: var(--secondary) !important; - --background-tertiary: var(--tertiary) !important; - --background-accent: var(--highlight) !important; - --background-floating: var(--primary) !important; - --background-mobile-primary: var(--primary) !important; - --background-mobile-secondary: var(--secondary) !important; - --background-modifier-hover: rgba(var(--highlight-rgb), 0.16) !important; - --background-modifier-active: rgba(var(--highlight-rgb), 0.24) !important; - --background-modifier-selected: rgba(var(--highlight-rgb), 0.32) !important; - --background-modifier-accent: rgba(var(--highlight-rgb), 0.06) !important; - --background-mentioned: rgba(var(--accent-rgb), 0.05) !important; - --background-mentioned-hover: rgba(var(--accent-rgb), 0.08) !important; - --background-message-hover: rgba(4, 4, 5, 0.07) !important; - --background-help-warning: rgba(250, 166, 26, 0.1) !important; - --background-help-info: rgba(0, 176, 244, 0.1) !important; - --scrollbar-thin-thumb: var(--text) !important; - --scrollbar-thin-track: transparent !important; - --scrollbar-auto-thumb: var(--text) !important; - --scrollbar-auto-track: transparent !important; - --scrollbar-auto-scrollbar-color-thumb: var(--text) !important; - --scrollbar-auto-scrollbar-color-track: transparent !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; - --focus-primary: var(--link) !important; - --guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) !important; - --channeltextarea-background: var(--secondary) !important; - --activity-card-background: var(--primary) !important; - --textbox-markdown-syntax: #8e9297 !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: var(--primary) !important; - --deprecated-quickswitcher-input-background: var(--primary) !important; - --deprecated-quickswitcher-input-placeholder: hsla( - 0, - 0%, - 100%, - 0.3 - ) !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: #181b28 !important; - --deprecated-text-input-prefix: #dcddde !important; - --input-background: var(--tertiary) !important; - --control-brand-foreground: var(--accent) !important; - --channel-text-area-placeholder: var(--highlight); - --status-positive-text: var(--text); - --status-danger-text: var(--text); - --status-warning-text: var(--text); - --button-secondary-background: var(--primary); - --button-secondary-background-hover: var(--highlight); - --button-secondary-background-active: var(--highlight); - --button-secondary-background-disabled: var(--tertiary); - --text-danger: var(--_color1); - --status-danger: var(--_color1); - --status-danger-background: var(--_color1); - --button-danger-background: var(--_color1); - --button-danger-background-hover: var(--_color9); - --button-danger-background-active: var(--_color9); - --button-outline-danger-border: var(--_color1); - --button-outline-danger-border-hover: var(--_color9); - --button-outline-danger-border-active: var(--_color9); - --button-outline-danger-background-hover: var(--_color9); - --button-outline-danger-background-active: var(--_color9); - --text-positive: var(--_color2); - --status-positive: var(--_color2); - --status-positive-background: var(--_color2); - --button-positive-background: var(--_color2); - --button-positive-background-hover: var(--_color10); - --button-positive-background-active: var(--_color10); - --button-outline-positive-border: var(--_color2); - --button-outline-positive-border-hover: var(--_color10); - --button-outline-positive-border-active: var(--_color10); - --button-outline-positive-background-hover: var(--_color10); - --button-outline-positive-background-active: var(--_color10); - --text-warning: var(--_color3); - --status-warning: var(--_color3); - --status-warning-background: var(--_color3); - --status-green-600: var(--status-online) !important; - --status-yellow-500: var(--status-idle) !important; - --status-red-500: var(--status-dnd) !important; - --status-grey-500: var(--status-offline) !important; - --twitch: var(--status-streaming) !important; - } - - [data-popout-root], - html { - --brand-experiment: var(--accent) !important; - --brand-100: var(--accent) !important; - --brand-130: var(--accent) !important; - --brand-160: var(--accent) !important; - --brand-200: var(--accent) !important; - --brand-230: var(--accent) !important; - --brand-260: var(--accent) !important; - --brand-300: var(--accent) !important; - --brand-330: var(--accent) !important; - --brand-360: var(--accent) !important; - --brand-400: var(--accent) !important; - --brand-430: var(--accent) !important; - --brand-460: var(--accent) !important; - --brand-500: var(--accent) !important; - --brand-530: var(--accent) !important; - --brand-560: var(--accent) !important; - --brand-600: var(--accent) !important; - --brand-630: var(--accent) !important; - --brand-660: var(--accent) !important; - --brand-700: var(--accent) !important; - --brand-730: var(--accent) !important; - --brand-760: var(--accent) !important; - --brand-800: var(--accent) !important; - --brand-830: var(--accent) !important; - --brand-860: var(--accent) !important; - --brand-900: var(--accent) !important; - --brand-new-100: var(--accent) !important; - --brand-new-130: var(--accent) !important; - --brand-new-160: var(--accent) !important; - --brand-new-200: var(--accent) !important; - --brand-new-230: var(--accent) !important; - --brand-new-260: var(--accent) !important; - --brand-new-300: var(--accent) !important; - --brand-new-330: var(--accent) !important; - --brand-new-360: var(--accent) !important; - --brand-new-400: var(--accent) !important; - --brand-new-430: var(--accent) !important; - --brand-new-460: var(--accent) !important; - --brand-new-500: var(--accent) !important; - --brand-new-530: var(--accent) !important; - --brand-new-560: var(--accent) !important; - --brand-new-600: var(--accent) !important; - --brand-new-630: var(--accent) !important; - --brand-new-660: var(--accent) !important; - --brand-new-700: var(--accent) !important; - --brand-new-730: var(--accent) !important; - --brand-new-760: var(--accent) !important; - --brand-new-800: var(--accent) !important; - --brand-new-830: var(--accent) !important; - --brand-new-860: var(--accent) !important; - --brand-experiment-900: var(--accent) !important; - --brand-experiment-100: var(--accent) !important; - --brand-experiment-130: var(--accent) !important; - --brand-experiment-160: var(--accent) !important; - --brand-experiment-200: var(--accent) !important; - --brand-experiment-230: var(--accent) !important; - --brand-experiment-260: var(--accent) !important; - --brand-experiment-300: var(--accent) !important; - --brand-experiment-330: var(--accent) !important; - --brand-experiment-360: var(--accent) !important; - --brand-experiment-400: var(--accent) !important; - --brand-experiment-430: var(--accent) !important; - --brand-experiment-460: var(--accent) !important; - --brand-experiment-500: var(--accent) !important; - --brand-experiment-530: var(--accent) !important; - --brand-experiment-560: var(--accent) !important; - --brand-experiment-600: var(--accent) !important; - --brand-experiment-630: var(--accent) !important; - --brand-experiment-660: var(--accent) !important; - --brand-experiment-700: var(--accent) !important; - --brand-experiment-730: var(--accent) !important; - --brand-experiment-760: var(--accent) !important; - --brand-experiment-800: var(--accent) !important; - --brand-experiment-830: var(--accent) !important; - --brand-experiment-860: var(--accent) !important; - --brand-experiment-900: var(--accent) !important; - --brand-experiment-05a: rgba(var(--accent-rgb), 0.05) !important; - --brand-experiment-10a: rgba(var(--accent-rgb), 0.1) !important; - --brand-experiment-15a: rgba(var(--accent-rgb), 0.15) !important; - --brand-experiment-20a: rgba(var(--accent-rgb), 0.2) !important; - --brand-experiment-25a: rgba(var(--accent-rgb), 0.25) !important; - --brand-experiment-30a: rgba(var(--accent-rgb), 0.3) !important; - --brand-experiment-35a: rgba(var(--accent-rgb), 0.35) !important; - --brand-experiment-40a: rgba(var(--accent-rgb), 0.4) !important; - --brand-experiment-45a: rgba(var(--accent-rgb), 0.45) !important; - --brand-experiment-50a: rgba(var(--accent-rgb), 0.5) !important; - --brand-experiment-55a: rgba(var(--accent-rgb), 0.55) !important; - --brand-experiment-60a: rgba(var(--accent-rgb), 0.6) !important; - --brand-experiment-65a: rgba(var(--accent-rgb), 0.65) !important; - --brand-experiment-70a: rgba(var(--accent-rgb), 0.7) !important; - --brand-experiment-75a: rgba(var(--accent-rgb), 0.75) !important; - --brand-experiment-80a: rgba(var(--accent-rgb), 0.8) !important; - --brand-experiment-85a: rgba(var(--accent-rgb), 0.85) !important; - --brand-experiment-90a: rgba(var(--accent-rgb), 0.9) !important; - --brand-experiment-95a: rgba(var(--accent-rgb), 0.95) !important; - } - - /**/ [class^="appMount-"], [class^="bg-"], [class^="layers-"] > [class^="layer-"], @@ -2953,23 +3847,23 @@ em { [class^="slider-"] [class^="bar-"] [class^="barFill-"], [class^="control-"] [class^="container-"][style*="background-color: rgb(67, 181, 129);"] { - background-color: var(--accent) !important; + background-color: var(--accent, var(--brand-new-500)) !important; } [style*="border-color: rgb(114, 137, 218)"], [class*="lookOutlined-"][class*="colorBrand-"] { - border-color: var(--accent) !important; + border-color: var(--accent, var(--brand-new-500)) !important; } [class*="lookOutlined-"][class*="colorBrand-"], [class*="colorDefault-"]:not([class*="focused-"]) [class^="checkbox-"], [class*="colorDefault-"]:not([class*="focused-"]) [class^="radioSelection-"], [class*="colorDefault-"][class*="focused-"] [class^="check-"] { - color: var(--accent) !important; + color: var(--accent, var(--brand-new-500)) !important; } [class*="mentioned-"]:before { - background-color: var(--accent); + background-color: var(--accent, var(--brand-new-500)); } [class^="slider-"] [class^="bar-"], @@ -3028,44 +3922,44 @@ em { } .mention[class*="wrapper-"] { - color: var(--accent); + color: var(--accent, var(--brand-new-500)); background: rgba(var(--accent-rgb), 0.1); } .mention[class*="wrapper-"]:hover { color: #ffffff; - background: var(--accent); + background: var(--accent, var(--brand-new-500)); } [class*="mentioned-"] .mention.interactive:hover { - color: var(--accent) !important; + color: var(--accent, var(--brand-new-500)) !important; } [class^="mediaBarGrabber-"], [class^="mediaBarProgress-"], [class^="mediaBarProgress-"]:after, [class^="mediaBarProgress-"]:before { - background-color: var(--accent) !important; + background-color: var(--accent, var(--brand-new-500)) !important; } [class^="reaction-"] { - background-color: var(--secondary); + background-color: var(--background-secondary); border: none; border-radius: 4px !important; } [class^="reaction-"]:hover, [class^="reaction-"][class*="reactionMe-"] { - background-color: var(--highlight); + background-color: var(--highlight, var(--primary-dark-500)); } [class^="reaction-"][class*="reactionMe-"] [class*="reactionCount-"], [class^="reaction-"]:hover [class*="reactionCount-"] { - color: var(--_color15); + color: var(--_color15, var(--white-500)); } [class^="reaction-"] [class*="reactionCount-"] { - color: var(--text); + color: var(--text, var(--text-normal)); } [class^="uploadModal-"], @@ -3110,10 +4004,10 @@ em { [class^="containerDefault-"]:not(:hover) [class*="modeUnread-"] [class^="name-"] { - color: var(--accent); + color: var(--accent, var(--brand-new-500)); } [class^="containerDefault-"] [class*="modeUnread-"] [class^="unread-"] { - background-color: var(--accent); + background-color: var(--accent, var(--brand-new-500)); } [class^="containerDefault-"] @@ -3201,12 +4095,12 @@ em { } [class*="unreadBar-"][class*="mention-"] { - background-color: var(--red) !important; + background-color: var(--red, var(--status-red-500)) !important; } [class^="numberBadge-"] { border-radius: 4px !important; - background-color: var(--red) !important; + background-color: var(--red, var(--status-red-500)) !important; } [class*="containerDefault-"] [class*="listDefault-"] { @@ -3310,8 +4204,8 @@ em { -webkit-mask-image: none !important; } - [class^="accountProfileCard-"] > [class^="userInfo-"] > [class*="avatar-"] { - top: 112px; + [class^="accountProfileCard-"] { + max-width: 660px; } /* chat box */ @@ -3394,15 +4288,6 @@ em { } /* User Popout */ - @keyframes active-stripes { - from { - background-position: 40px; - } - to { - background-position: 0px; - } - } - [class*="avatarHint-"], [class*="avatarNormal-"], [class*="avatarWrapper-"] [class*="wrapper-"], @@ -3690,7 +4575,7 @@ em { [class^="userPopout-"] [class*="note-"] textarea, [class^="userPopout-"] [class*="footer-"] [class*="inputDefault-"] { - border: 1px solid var(--tertiary); + border: 1px solid var(--background-tertiary); } [class^="userPopout-"] [class*="footer-"] @@ -3819,7 +4704,7 @@ em { > [class^="userInfoSection-"] > [class^="note-"] textarea { - border: 1px solid var(--tertiary); + border: 1px solid var(--background-tertiary); } [class^="focusLock-"][aria-modal="true"] @@ -4230,7 +5115,7 @@ em { [class^="chat-"][class*="background-"], [class^="title-"][class*="background-"], [class^="chat-"] > [class^="content-"] > [class^="container-"] { - background-color: var(--tertiary) !important; + background-color: var(--background-tertiary) !important; } [class*="headerBarInner-"]:after { @@ -4238,10 +5123,10 @@ em { } [class^="streamPreview-"] { - background-color: var(--secondary) !important; + background-color: var(--background-secondary) !important; } [class^="streamPreview-"] > [class^="previewContainer-"] { - background-color: var(--primary) !important; + background-color: var(--background-primary) !important; } [class*="messageContent-"].deleted-message { @@ -4262,117 +5147,6 @@ em { font-family: var(--font-code) !important; } - /* an attempt to have collapsing channel list */ - /*[class^="sidebar-"] > [class^="panels-"] { - position: absolute; - bottom: 0; - width: 240px; - height: 53px; - display: flex; - flex-direction: column-reverse; - justify-content: flex-end; - z-index: 10; - } - [class^="sidebar-"] > [class^="panels-"]:hover { - height: unset; - flex-direction: column; - } - - [class^="sidebar-"] { - width: unset; - } - [class^="sidebar-"] > nav[class^="container-"] { - width: unset; - z-index: 9; - } - - [class^="sidebar-"] > nav[class^="container-"] > [class^="scroller-"] { - width: 48px; - margin-top: 48px; - margin-bottom: 53px; - } - [class^="sidebar-"] > nav[class^="container-"] > [class^="scroller-"]:hover { - width: 240px; - } - - [class^="sidebar-"] - > nav[class^="container-"] - > [class^="container-"][class*="clickable-"] { - position: fixed; - top: 0; - width: 240px; - z-index: 101; - background: var(--background-secondary); - } - - [class^="sidebar-"] - > nav[class^="container-"] - > [class^="container-"][class*="clickable-"] - > [class^="animatedContainer-"] { - height: 48px; - } - - [class^="sidebar-"] - > nav[class^="container-"] - > [class^="container-"][class*="clickable-"] - > [class^="animatedContainer-"] - > [class^="bannerImage-"] { - height: 48px; - } - [class^="sidebar-"] - > nav[class^="container-"] - > [class^="container-"][class*="clickable-"] - > [class^="animatedContainer-"] - > [class^="bannerImage-"]:after { - content: ""; - height: 48px; - width: 240px; - top: 0; - left: 0; - position: absolute; - background: linear-gradient( - 0deg, - var(--background-secondary) 5%, - transparent 100% - ); - } - - [class^="sidebar-"] - > nav[class^="container-"] - > [class^="container-"][class*="clickable-"] - > [class^="animatedContainer-"] - [class^="bannerImg-"] { - top: -67px; - position: relative; - } - - [class^="sidebar-"] - > nav[class^="container-"] - > [class^="scroller-"] - > ul - > div[style="height: 84px;"] { - height: 0 !important; - } - - [class^="chatContent-"] > form [class^="channelTextArea"] { - margin-left: 192px; - } - - [class^="sidebar-"]:hover - ~ [class^="chat-"] - [class^="chatContent-"] - > form - [class^="channelTextArea"] { - margin-left: 0; - } - - [class^="chat-"] [class^="title-"] { - margin-left: 192px; - } - [class^="sidebar-"]:hover ~ [class^="chat-"] [class^="title-"] { - margin-left: 0; - }*/ - /* jane's steam border ext */ .steam-border-message > #border { width: 20px !important; @@ -4664,6 +5438,8 @@ em { /* USERCSS REPLACEMENTS START */ + /*[[xmc_overwrite_colors]]*/ + .theme-dark, :root { --xmc_custom_font: "/*[[xmc_font_custom]]*/"; @@ -4728,6 +5504,7 @@ em { /*[[xmc_9x_bot_tag]]*/ /*[[xmc_nyantro]]*/ /*[[xmc_titlebars]]*/ + /*[[xmc_titlebar_icon]]*/ /*[[xmc_old_titlebar]]*/ /*[[xmc_textarea]]*/ /*[[xmc_status_icons]]*/ @@ -4738,6 +5515,8 @@ em { /*[[xmc_left_reply]]*/ /*[[xmc_collapsing_members]]*/ /*[[xmc_accessible_styles]]*/ + /*[[xmc_compacter_mode]]*/ + /*[[xmc_collapsing_sidebar]]*/ /*[[xmc_override_titlebar]]*/ /* USERCSS REPLACEMENTS END */