Make Modular

This commit is contained in:
CI 2023-02-12 05:30:52 +00:00
parent 590d7da8c3
commit 9acd2f8851
24 changed files with 1187 additions and 406 deletions

View file

@ -0,0 +1,4 @@
span[data-slate-leaf="true"][class*="italics-"],
em {
color: #f80;
}

View file

@ -1,217 +1,3 @@
/* 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^="appMount-"],
[class^="bg-"], [class^="bg-"],
[class^="layers-"] > [class^="layer-"], [class^="layers-"] > [class^="layer-"],
@ -231,23 +17,23 @@ html:not(.overlay) body {
[class^="slider-"] [class^="bar-"] [class^="barFill-"], [class^="slider-"] [class^="bar-"] [class^="barFill-"],
[class^="control-"] [class^="control-"]
[class^="container-"][style*="background-color: rgb(67, 181, 129);"] { [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)"], [style*="border-color: rgb(114, 137, 218)"],
[class*="lookOutlined-"][class*="colorBrand-"] { [class*="lookOutlined-"][class*="colorBrand-"] {
border-color: var(--accent) !important; border-color: var(--accent, var(--brand-new-500)) !important;
} }
[class*="lookOutlined-"][class*="colorBrand-"], [class*="lookOutlined-"][class*="colorBrand-"],
[class*="colorDefault-"]:not([class*="focused-"]) [class^="checkbox-"], [class*="colorDefault-"]:not([class*="focused-"]) [class^="checkbox-"],
[class*="colorDefault-"]:not([class*="focused-"]) [class^="radioSelection-"], [class*="colorDefault-"]:not([class*="focused-"]) [class^="radioSelection-"],
[class*="colorDefault-"][class*="focused-"] [class^="check-"] { [class*="colorDefault-"][class*="focused-"] [class^="check-"] {
color: var(--accent) !important; color: var(--accent, var(--brand-new-500)) !important;
} }
[class*="mentioned-"]:before { [class*="mentioned-"]:before {
background-color: var(--accent); background-color: var(--accent, var(--brand-new-500));
} }
[class^="slider-"] [class^="bar-"], [class^="slider-"] [class^="bar-"],
@ -306,44 +92,44 @@ html:not(.overlay) body {
} }
.mention[class*="wrapper-"] { .mention[class*="wrapper-"] {
color: var(--accent); color: var(--accent, var(--brand-new-500));
background: rgba(var(--accent-rgb), 0.1); background: rgba(var(--accent-rgb), 0.1);
} }
.mention[class*="wrapper-"]:hover { .mention[class*="wrapper-"]:hover {
color: #ffffff; color: #ffffff;
background: var(--accent); background: var(--accent, var(--brand-new-500));
} }
[class*="mentioned-"] .mention.interactive:hover { [class*="mentioned-"] .mention.interactive:hover {
color: var(--accent) !important; color: var(--accent, var(--brand-new-500)) !important;
} }
[class^="mediaBarGrabber-"], [class^="mediaBarGrabber-"],
[class^="mediaBarProgress-"], [class^="mediaBarProgress-"],
[class^="mediaBarProgress-"]:after, [class^="mediaBarProgress-"]:after,
[class^="mediaBarProgress-"]:before { [class^="mediaBarProgress-"]:before {
background-color: var(--accent) !important; background-color: var(--accent, var(--brand-new-500)) !important;
} }
[class^="reaction-"] { [class^="reaction-"] {
background-color: var(--secondary); background-color: var(--background-secondary);
border: none; border: none;
border-radius: 4px !important; border-radius: 4px !important;
} }
[class^="reaction-"]:hover, [class^="reaction-"]:hover,
[class^="reaction-"][class*="reactionMe-"] { [class^="reaction-"][class*="reactionMe-"] {
background-color: var(--highlight); background-color: var(--highlight, var(--primary-dark-500));
} }
[class^="reaction-"][class*="reactionMe-"] [class*="reactionCount-"], [class^="reaction-"][class*="reactionMe-"] [class*="reactionCount-"],
[class^="reaction-"]:hover [class*="reactionCount-"] { [class^="reaction-"]:hover [class*="reactionCount-"] {
color: var(--_color15); color: var(--_color15, var(--white-500));
} }
[class^="reaction-"] [class*="reactionCount-"] { [class^="reaction-"] [class*="reactionCount-"] {
color: var(--text); color: var(--text, var(--text-normal));
} }
[class^="uploadModal-"], [class^="uploadModal-"],
@ -388,10 +174,10 @@ html:not(.overlay) body {
[class^="containerDefault-"]:not(:hover) [class^="containerDefault-"]:not(:hover)
[class*="modeUnread-"] [class*="modeUnread-"]
[class^="name-"] { [class^="name-"] {
color: var(--accent); color: var(--accent, var(--brand-new-500));
} }
[class^="containerDefault-"] [class*="modeUnread-"] [class^="unread-"] { [class^="containerDefault-"] [class*="modeUnread-"] [class^="unread-"] {
background-color: var(--accent); background-color: var(--accent, var(--brand-new-500));
} }
[class^="containerDefault-"] [class^="containerDefault-"]
@ -477,12 +263,12 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] {
} }
[class*="unreadBar-"][class*="mention-"] { [class*="unreadBar-"][class*="mention-"] {
background-color: var(--red) !important; background-color: var(--red, var(--status-red-500)) !important;
} }
[class^="numberBadge-"] { [class^="numberBadge-"] {
border-radius: 4px !important; border-radius: 4px !important;
background-color: var(--red) !important; background-color: var(--red, var(--status-red-500)) !important;
} }
[class*="containerDefault-"] [class*="listDefault-"] { [class*="containerDefault-"] [class*="listDefault-"] {
@ -586,8 +372,8 @@ div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject,
-webkit-mask-image: none !important; -webkit-mask-image: none !important;
} }
[class^="accountProfileCard-"] > [class^="userInfo-"] > [class*="avatar-"] { [class^="accountProfileCard-"] {
top: 112px; max-width: 660px;
} }
/* chat box */ /* chat box */
@ -670,15 +456,6 @@ form [class*="typing-"] {
} }
/* User Popout */ /* User Popout */
@keyframes active-stripes {
from {
background-position: 40px;
}
to {
background-position: 0px;
}
}
[class*="avatarHint-"], [class*="avatarHint-"],
[class*="avatarNormal-"], [class*="avatarNormal-"],
[class*="avatarWrapper-"] [class*="wrapper-"], [class*="avatarWrapper-"] [class*="wrapper-"],
@ -964,7 +741,7 @@ form [class*="typing-"] {
[class^="userPopout-"] [class*="note-"] textarea, [class^="userPopout-"] [class*="note-"] textarea,
[class^="userPopout-"] [class*="footer-"] [class*="inputDefault-"] { [class^="userPopout-"] [class*="footer-"] [class*="inputDefault-"] {
border: 1px solid var(--tertiary); border: 1px solid var(--background-tertiary);
} }
[class^="userPopout-"] [class*="footer-"] [class*="inputDefault-"]::placeholder, [class^="userPopout-"] [class*="footer-"] [class*="inputDefault-"]::placeholder,
[class^="userPopout-"] [class*="note-"] textarea::placeholder { [class^="userPopout-"] [class*="note-"] textarea::placeholder {
@ -1087,7 +864,7 @@ form [class*="typing-"] {
> [class^="userInfoSection-"] > [class^="userInfoSection-"]
> [class^="note-"] > [class^="note-"]
textarea { textarea {
border: 1px solid var(--tertiary); border: 1px solid var(--background-tertiary);
} }
[class^="focusLock-"][aria-modal="true"] [class^="focusLock-"][aria-modal="true"]
@ -1497,7 +1274,7 @@ svg[fill="#FF73FA"] {
[class^="chat-"][class*="background-"], [class^="chat-"][class*="background-"],
[class^="title-"][class*="background-"], [class^="title-"][class*="background-"],
[class^="chat-"] > [class^="content-"] > [class^="container-"] { [class^="chat-"] > [class^="content-"] > [class^="container-"] {
background-color: var(--tertiary) !important; background-color: var(--background-tertiary) !important;
} }
[class*="headerBarInner-"]:after { [class*="headerBarInner-"]:after {
@ -1505,10 +1282,10 @@ svg[fill="#FF73FA"] {
} }
[class^="streamPreview-"] { [class^="streamPreview-"] {
background-color: var(--secondary) !important; background-color: var(--background-secondary) !important;
} }
[class^="streamPreview-"] > [class^="previewContainer-"] { [class^="streamPreview-"] > [class^="previewContainer-"] {
background-color: var(--primary) !important; background-color: var(--background-primary) !important;
} }
[class*="messageContent-"].deleted-message { [class*="messageContent-"].deleted-message {
@ -1529,117 +1306,6 @@ code,
font-family: var(--font-code) !important; 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 */ /* jane's steam border ext */
.steam-border-message > #border { .steam-border-message > #border {
width: 20px !important; width: 20px !important;

View file

@ -0,0 +1,169 @@
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;
}

View file

@ -0,0 +1,169 @@
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;
}

View file

@ -0,0 +1,7 @@
[class^="sidebar-"] {
overflow: hidden;
width: 48px;
}
[class^="sidebar-"]:hover {
width: 240px;
}

506
modular/compacter_mode.css Normal file
View file

@ -0,0 +1,506 @@
[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;
}

View file

@ -8,6 +8,10 @@
var(--secondary-rgb), var(--secondary-rgb),
var(--secondary-alpha) var(--secondary-alpha)
) !important; ) !important;
--transparent_background-secondary-alt: rgba(
var(--secondary--alt-rgb, --secondary-rgb),
var(--secondary-alpha)
) !important;
--transparent_background-tertiary: rgba( --transparent_background-tertiary: rgba(
var(--tertiary-rgb), var(--tertiary-rgb),
var(--tertiary-alpha) var(--tertiary-alpha)

View file

@ -1,15 +1,10 @@
[class*="role-"] { [class^="role-"] {
position: relative; position: relative;
border-radius: 5%; border-radius: 5%;
} }
[class^="role-"], [class^="role-"] [class^="roleRemoveButton-"] [class^="roleCircle-"],
[note="FIX ME WHEN WE HAVE :has()"] { [class^="role-"] [class^="roleRemoveButton-"] [class^="roleFlowerStar-"] {
padding-left: 16px;
}
[class^="roleRemoveButton-"] [class^="roleCircle-"],
[class^="roleRemoveButton-"] [class^="roleFlowerStar-"] {
margin: 0 !important; margin: 0 !important;
border-radius: 5% !important; border-radius: 5% !important;
width: 100% !important; width: 100% !important;
@ -21,15 +16,15 @@
opacity: 0.25; opacity: 0.25;
} }
[class^="roleFlowerStar-"] > svg[class^="linkIcon-"] { [class^="role-"] [class^="roleFlowerStar-"] > svg[class^="linkIcon-"] {
z-index: 6; z-index: 7;
position: absolute; position: absolute;
opacity: 1;
right: -2px; right: -2px;
top: -2px; top: -2px;
opacity: 5;
} }
[class^="roleRemoveButton-"] { [class^="role-"] [class^="roleRemoveButton-"] {
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%; width: 100%;
@ -42,23 +37,20 @@
z-index: 5; z-index: 5;
} }
[class^="roleName-"] { [class^="role-"] [class^="roleName-"] {
z-index: 2; z-index: 2;
margin-right: 0;
} }
[class^="roleRemoveIcon-"] { [class^="role-"] [class^="roleRemoveIcon-"] {
display: block; display: block;
position: absolute; position: absolute;
left: 8px; top: 4px;
z-index: 4; left: 4px;
z-index: 6;
} }
[class^="roleRemoveIcon-"] > path { [class^="role-"] [class^="roleRemoveButton-"] [class*="roleDot-"] {
fill: #ffffff;
filter: brightness(1);
}
[class^="roleRemoveButton-"] [class*="roleDot-"] {
width: 1em !important; width: 1em !important;
height: 1em !important; height: 1em !important;
margin-top: 0.25em; margin-top: 0.25em;

View file

@ -0,0 +1,221 @@
.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;
}

View file

@ -22,13 +22,15 @@
--primary: #1a1a1a; --primary: #1a1a1a;
--secondary: #171717; --secondary: #171717;
--secondary-alt: #151515;
--tertiary: #141414; --tertiary: #141414;
--primary-rgb: 26, 26, 26; --primary-rgb: 26, 26, 26;
--secondary-rgb: 23, 23, 23; --secondary-rgb: 23, 23, 23;
--secondary-alt-rgb: 21, 21, 21;
--tertiary-rgb: 20, 20, 20; --tertiary-rgb: 20, 20, 20;
--accent: var(--_color1); --accent: #634e75;
--accent-rgb: 232, 63, 128; --accent-rgb: 99, 78, 117;
--red: var(--_color6); --red: var(--_color6);
--text: var(--_color7); --text: var(--_color7);
--link: var(--_color10); --link: var(--_color10);
@ -40,4 +42,6 @@
--status-dnd: var(--_color5); --status-dnd: var(--_color5);
--status-offline: var(--tertiary); --status-offline: var(--tertiary);
--status-streaming: var(--_color4); --status-streaming: var(--_color4);
--titlebar-color: var(--accent);
} }

View file

@ -20,20 +20,20 @@
--_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;
@ -41,5 +41,5 @@
--status-offline: #747f8d; --status-offline: #747f8d;
--status-streaming: #593695; --status-streaming: #593695;
--titlebar-color: var(--highlight); --__titlebar-color: var(--highlight);
} }

View file

@ -2,19 +2,25 @@
:root { :root {
--_font-titlebars: "Segoe UI", sans-serif; --_font-titlebars: "Segoe UI", sans-serif;
--button-bg: linear-gradient(to bottom, var(--primary), var(--secondary)); --button-bg: linear-gradient(
--button-shadow: inset 0 0 0 1px var(--tertiary), to bottom,
inset 0 0 0 2px var(--primary), inset 0 0 0 3px var(--secondary); 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(--tertiary), inset 0 0 0 2px #404040, --scrollbar-shadow: inset 0 0 0 1px var(--background-tertiary),
inset 0 0 0 3px var(--primary), inset 0 0 0 4px var(--secondary); inset 0 0 0 2px #404040, inset 0 0 0 3px var(--background-primary),
--scrollbar-shadow-hover: inset 0 0 0 1px var(--tertiary), inset 0 0 0 4px var(--background-secondary);
inset 0 0 0 2px #646464, inset 0 0 0 3px var(--primary), --scrollbar-shadow-hover: inset 0 0 0 1px var(--background-tertiary),
inset 0 0 0 4px var(--secondary); 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-"], [class*="button-"][class*="lookFilled-"],
@ -42,7 +48,9 @@ nav[class^="sidebar-"] div[class^="item-"][class*="selected-"],
box-shadow: var(--button-shadow) !important; 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, nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover,
[class^="member-"]:not([aria-expanded="true"]):hover > [class^="layout-"], [class^="member-"]:not([aria-expanded="true"]):hover > [class^="layout-"],
[class^="channel-"] [class^="interactive-"]:not([class*="selected-"]):hover { [class^="channel-"] [class^="interactive-"]:not([class*="selected-"]):hover {
@ -59,7 +67,7 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover,
} }
[class^="channelTextArea-"] > [class^="scrollableContainer-"] { [class^="channelTextArea-"] > [class^="scrollableContainer-"] {
border: 1px solid var(--tertiary); border: 1px solid var(--background-tertiary);
border-radius: 0; border-radius: 0;
} }
@ -78,8 +86,8 @@ nav[class^="sidebar-"] div[class^="item-"]:not([class*="selected-"]):hover,
} }
[class^="toolbar-"] > [class^="search-"] [class^="searchBar-"] { [class^="toolbar-"] > [class^="search-"] [class^="searchBar-"] {
background-color: var(--primary); background-color: var(--background-primary);
border: 1px solid var(--tertiary); border: 1px solid var(--background-tertiary);
border-radius: 0; border-radius: 0;
height: 32px; height: 32px;
justify-content: center; justify-content: center;

View file

@ -9,6 +9,7 @@
[class^="channelTextArea"] [class^="channelTextArea"]
> [class^="scrollableContainer-"] { > [class^="scrollableContainer-"] {
border-radius: 0 !important; border-radius: 0 !important;
border: 0 !important;
} }
[class^="chatContent-"] [class^="chatContent-"]

View file

@ -0,0 +1,3 @@
:root {
--titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFrSURBVDhPnVNNS8NAFMy5Pyd/pgGvCXi0eLT4C7wKJfSkIKjUg3jrRevFo+AHEhRvIuglabHpttnnm5fNsmmiiA8GXmbmTbKbXW+9gij1gzAddKM06YapMkiYHwRR5htbs1js8OCQB4n7H5AS6zGjY8bKYpGHs0lzoB0cMKmF8JvjNuNv4IBhNezj0yphYzOjvf0vOjie09bOVIAeHDQbEMpyfI8bbI4Vrm8Uaa1bAc31YhYBvMMlsb07ax10AY8TkCBAVcTZRS6mj8+CjkY55bkWoAcHbcQeJ0DVAm7vl2IaXy7kOXlZCdCDgwZP5a8C7BKeX1diUkrTw1MZBqAHhx4eJ0CWYDfx9DynotD09l7Q+GpBd49LAXpw0OCxAXw65TdyiCV7/RkdnsztcwVwvf7U4TDDvxHFAf85SLEMozgA9+DPR5nfXD/KKITIlzjLWQeWCg+8ZqxZcrRxnXmHGYp7IAEHzdhMed43/d6Afr0nB7gAAAAASUVORK5CYII=");
}

View file

@ -0,0 +1,3 @@
: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=");
}

View file

@ -0,0 +1,3 @@
: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=");
}

View file

@ -0,0 +1,3 @@
:root {
--titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACJSURBVDhPxVABDoAgELqn388LvHDMrOnW1i060IPMYGXmsYNm8qrFddxCPg9Y01Y+QM6SJljjzGWt+j2AoiE3Ue4DD5BZIXh1cOhJ9xCoZhY85C1AmqyfgJ0BGnQD+bjOjgsEsa9vB4CBz43q4rN9sv4LOoWbnLvWGlkLIHYCpDFfJkEbK4iIOAFjx6/RbabDvAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAA==");
}

View file

@ -0,0 +1,3 @@
:root {
--titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACJSURBVDhPxU9bDoAwCOPDeG5ujjwsYcs0IzGR2G2FtptkxczSgZtq+YAamEO+D9jgtzVqEOjZqhqcT5rbGvV7gJEAN+Fu0U/B0ZBTjoSJnniGwAzUkLcA8OEFtlsAhNXg4qkfPV3q7e2AvHVhxJ7ixXz4Bbyimuq58uwhACG7AeCqD1MCgx0Q0QXjX8uT7Jk2OwAAAABJRU5ErkJgggAAAAAAAAAAAAAAAA==");
}

View file

@ -0,0 +1,3 @@
:root {
--titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB/SURBVDhPxZALCgAhCEQ9ujcvJ1PMggwWduBRijN9CGLm9sIwRWmzzhbyeUCtDooD2ENWAyjPTKvq3wAmahVk1NkCpHJy7b2mMHuQ6iUAZkOs4PyEaPReuAHWJcAMZlr2wZhOB/UAsBhNt4Ackm5xD5iDW8jsnz8xMoZ0zYiIOusbnt1lWQzCAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
}

View file

@ -0,0 +1,3 @@
:root {
--titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACCSURBVDhPxY7hCsAgCIT9MfbcvrnT0rIbbAmDHRx11X1GJmaWilspq11QwQj5HrCRvdq1PNC9KRdahjde7foZwCRbpukb4JRjGHOciXTzhLkKACuHtekQC+BcDOcf2LoAcFre5yJMrwHSVC+GXgAIgV9sAHwqQvxcZeHJXQOUrCK6ADMZukVNcDDrAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAA==");
}

View file

@ -0,0 +1,3 @@
: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");
}

View file

@ -0,0 +1,3 @@
: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");
}

View file

@ -0,0 +1,3 @@
: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");
}

View file

@ -194,7 +194,7 @@ html.platform-win:not(.app-focused) [class*="winButton-"]:hover {
top: 6px !important; top: 6px !important;
left: 7px !important; left: 7px !important;
padding: 0 !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; background-repeat: no-repeat;
} }
[class^="wordmarkWindows-"]::after { [class^="wordmarkWindows-"]::after {