mirror of
https://gitlab.com/Cynosphere/xmc.git
synced 2024-08-14 22:57:03 +00:00
Make Modular
This commit is contained in:
CI
parent
590d7da8c3
commit
9acd2f8851
24 changed files with 1187 additions and 406 deletions
4
modular/accessible_styles/just_colored_italics.css
Normal file
4
modular/accessible_styles/just_colored_italics.css
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
span[data-slate-leaf="true"][class*="italics-"],
|
||||||
|
em {
|
||||||
|
color: #f80;
|
||||||
|
}
|
||||||
380
modular/base.css
380
modular/base.css
|
|
@ -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;
|
||||||
|
|
|
||||||
169
modular/collapsing_sidebar/integrated.css
Normal file
169
modular/collapsing_sidebar/integrated.css
Normal 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;
|
||||||
|
}
|
||||||
169
modular/collapsing_sidebar/integrated_-_compact-er_support.css
Normal file
169
modular/collapsing_sidebar/integrated_-_compact-er_support.css
Normal 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;
|
||||||
|
}
|
||||||
7
modular/collapsing_sidebar/simple.css
Normal file
7
modular/collapsing_sidebar/simple.css
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
[class^="sidebar-"] {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 48px;
|
||||||
|
}
|
||||||
|
[class^="sidebar-"]:hover {
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
506
modular/compacter_mode.css
Normal file
506
modular/compacter_mode.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
221
modular/overwrite_colors.css
Normal file
221
modular/overwrite_colors.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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-"]
|
||||||
|
|
|
||||||
3
modular/titlebar_icon/discord.css
Normal file
3
modular/titlebar_icon/discord.css
Normal 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=");
|
||||||
|
}
|
||||||
3
modular/titlebar_icon/discord_canary.css
Normal file
3
modular/titlebar_icon/discord_canary.css
Normal 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=");
|
||||||
|
}
|
||||||
3
modular/titlebar_icon/discord_development.css
Normal file
3
modular/titlebar_icon/discord_development.css
Normal 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=");
|
||||||
|
}
|
||||||
3
modular/titlebar_icon/mcord.css
Normal file
3
modular/titlebar_icon/mcord.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
:root {
|
||||||
|
--titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACJSURBVDhPxVABDoAgELqn388LvHDMrOnW1i060IPMYGXmsYNm8qrFddxCPg9Y01Y+QM6SJljjzGWt+j2AoiE3Ue4DD5BZIXh1cOhJ9xCoZhY85C1AmqyfgJ0BGnQD+bjOjgsEsa9vB4CBz43q4rN9sv4LOoWbnLvWGlkLIHYCpDFfJkEbK4iIOAFjx6/RbabDvAAAAABJRU5ErkJgggAAAAAAAAAAAAAAAA==");
|
||||||
|
}
|
||||||
3
modular/titlebar_icon/mcord_inverted.css
Normal file
3
modular/titlebar_icon/mcord_inverted.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
:root {
|
||||||
|
--titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACJSURBVDhPxU9bDoAwCOPDeG5ujjwsYcs0IzGR2G2FtptkxczSgZtq+YAamEO+D9jgtzVqEOjZqhqcT5rbGvV7gJEAN+Fu0U/B0ZBTjoSJnniGwAzUkLcA8OEFtlsAhNXg4qkfPV3q7e2AvHVhxJ7ixXz4Bbyimuq58uwhACG7AeCqD1MCgx0Q0QXjX8uT7Jk2OwAAAABJRU5ErkJgggAAAAAAAAAAAAAAAA==");
|
||||||
|
}
|
||||||
3
modular/titlebar_icon/mirc_6.css
Normal file
3
modular/titlebar_icon/mirc_6.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
:root {
|
||||||
|
--titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB/SURBVDhPxZALCgAhCEQ9ujcvJ1PMggwWduBRijN9CGLm9sIwRWmzzhbyeUCtDooD2ENWAyjPTKvq3wAmahVk1NkCpHJy7b2mMHuQ6iUAZkOs4PyEaPReuAHWJcAMZlr2wZhOB/UAsBhNt4Ackm5xD5iDW8jsnz8xMoZ0zYiIOusbnt1lWQzCAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
|
||||||
|
}
|
||||||
3
modular/titlebar_icon/mirc_6_inverted.css
Normal file
3
modular/titlebar_icon/mirc_6_inverted.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
:root {
|
||||||
|
--titlebar-icon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACCSURBVDhPxY7hCsAgCIT9MfbcvrnT0rIbbAmDHRx11X1GJmaWilspq11QwQj5HrCRvdq1PNC9KRdahjde7foZwCRbpukb4JRjGHOciXTzhLkKACuHtekQC+BcDOcf2LoAcFre5yJMrwHSVC+GXgAIgV9sAHwqQvxcZeHJXQOUrCK6ADMZukVNcDDrAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAA==");
|
||||||
|
}
|
||||||
3
modular/titlebar_icon/mirc_7.css
Normal file
3
modular/titlebar_icon/mirc_7.css
Normal 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");
|
||||||
|
}
|
||||||
3
modular/titlebar_icon/mirc_7_inverted.css
Normal file
3
modular/titlebar_icon/mirc_7_inverted.css
Normal 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");
|
||||||
|
}
|
||||||
3
modular/titlebar_icon/msn.css
Normal file
3
modular/titlebar_icon/msn.css
Normal 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");
|
||||||
|
}
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue