rspack fixes

This commit is contained in:
Cynthia Foxwell 2023-10-26 14:11:59 -06:00
parent bb5934b7f6
commit 07cee57fc3
17 changed files with 1153 additions and 766 deletions

View file

@ -13,3 +13,4 @@
@use "src/wide_settings";
@use "src/private_channels";
@use "src/embeds";
@use "src/winclassic";

View file

@ -1,8 +1,8 @@
section[class^="panels-"]
> [class^="container-"]:last-child
[class*="nameTag-"] {
& > [class^="panelTitleContainer-"],
& > [class^="panelSubtextContainer-"] [class^="hovered-"] {
section[class^="panels_"]
> [class^="container_"]:last-child
[class*="nameTag_"] {
& > [class^="panelTitleContainer_"],
& > [class^="panelSubtextContainer_"] [class^="hovered_"] {
visibility: hidden;
}
}

View file

@ -1,104 +1,104 @@
@use "colors";
[class*="avatar-"],
[class*="avatar-"] [class*="image-"],
[class*="callAvatar-"],
[class*="callAvatar-"] [class*="speaking-"],
[class*="avatarDefault-"],
[class*="avatarSpeaking-"],
[class*="avatar-"] [class*="inner-"],
[class*="callAvatarVoice-"],
[class*="callAvatarWrapper-"] [class*="speaking-"],
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
[class^="message-"]
[class*="header-"]
[class*="avatar-"]
[class*="large-"],
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
[class^="message-"]
[class*="header-"]
[class*="avatar-"]
[class*="wrapper-"],
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
[class^="message-"]
[class*="contents-"]
[class*="avatar-"],
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
[class^="wrapper-"]
[class*="contents-"]
[class*="avatar-"],
[class^="messageGroupCozy-"] [class*="contents-"] [class*="avatar-"],
[class*="autocomplete-"]
[class*="autocompleteInner-"]
[class*="autocompleteRow-"]
[class*="content-"]
[class*="wrapper-"],
[class*="guildsWrapper-"]
[class*="guilds-"]
[class*="guild-"]
[class*="guildInner-"],
div[class^="listItem-"] foreignObject img,
div[class^="listItem-"] foreignObject a[class^="button-"],
div[class^="listItem-"] foreignObject [class^="childWrapper-"],
div[class^="listItem-"] foreignObject [class^="folder-"],
div[class^="listItem-"] div[class^="wrapperSimple-"],
[class^="circleIconButton-"],
[class^="folderIconWrapper-"],
[class^="avatarContainer-"],
[class^="executedCommandAvatar-"],
[class^="folderIconWrapper-"]
> [class^="closedFolderIconWrapper-"]
> [class^="icon-"],
[class^="embedAuthorIcon-"] {
[class*="avatar_"],
[class*="avatar_"] [class*="image_"],
[class*="callAvatar_"],
[class*="callAvatar_"] [class*="speaking_"],
[class*="avatarDefault_"],
[class*="avatarSpeaking_"],
[class*="avatar_"] [class*="inner_"],
[class*="callAvatarVoice_"],
[class*="callAvatarWrapper_"] [class*="speaking_"],
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
[class^="message_"]
[class*="header_"]
[class*="avatar_"]
[class*="large_"],
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
[class^="message_"]
[class*="header_"]
[class*="avatar_"]
[class*="wrapper_"],
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
[class^="message_"]
[class*="contents_"]
[class*="avatar_"],
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
[class^="wrapper_"]
[class*="contents_"]
[class*="avatar_"],
[class^="messageGroupCozy_"] [class*="contents_"] [class*="avatar_"],
[class*="autocomplete_"]
[class*="autocompleteInner_"]
[class*="autocompleteRow_"]
[class*="content_"]
[class*="wrapper_"],
[class*="guildsWrapper_"]
[class*="guilds_"]
[class*="guild_"]
[class*="guildInner_"],
div[class^="listItem_"] foreignObject img,
div[class^="listItem_"] foreignObject a[class^="button_"],
div[class^="listItem_"] foreignObject [class^="childWrapper_"],
div[class^="listItem_"] foreignObject [class^="folder_"],
div[class^="listItem_"] div[class^="wrapperSimple_"],
[class^="circleIconButton_"],
[class^="folderIconWrapper_"],
[class^="avatarContainer_"],
[class^="executedCommandAvatar_"],
[class^="folderIconWrapper_"]
> [class^="closedFolderIconWrapper_"]
> [class^="icon_"],
[class^="embedAuthorIcon_"] {
border-radius: 0% !important;
}
[class*="avatarMasked-"],
[class*="maskProfile-"],
[class*="mask-"],
[class*="avatar-"] svg[class*="mask-"] > foreignObject,
[class*="avatarWrapper-"] svg[class*="mask-"] > foreignObject,
[class*="avatarHint-"] > foreignObject,
[class*="wrapper-"] svg[class*="mask-"] > foreignObject,
[class*="callAvatarWrapper-"] svg[class*="callAvatarMask-"] > foreignObject,
div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject,
[class^="bannerSVGWrapper-"] > foreignObject,
[class^="avatarDecoration-"] > foreignObject,
[class^="avatarDecorationHint-"] > foreignObject,
[class^="viewers-"] > [class*="viewer-"] {
[class*="avatarMasked_"],
[class*="maskProfile_"],
[class*="mask_"],
[class*="avatar_"] svg[class*="mask_"] > foreignObject,
[class*="avatarWrapper_"] svg[class*="mask_"] > foreignObject,
[class*="avatarHint_"] > foreignObject,
[class*="wrapper_"] svg[class*="mask_"] > foreignObject,
[class*="callAvatarWrapper_"] svg[class*="callAvatarMask_"] > foreignObject,
div[class^="listItem_"] [class^="wrapper_"] > svg > foreignObject,
[class^="bannerSVGWrapper_"] > foreignObject,
[class^="avatarDecoration_"] > foreignObject,
[class^="avatarDecorationHint_"] > foreignObject,
[class^="viewers_"] > [class*="viewer_"] {
mask: none !important;
mask-image: none !important;
-webkit-mask-image: none !important;
}
[class*="avatarHint-"],
[class*="avatarNormal-"],
[class*="avatarWrapper-"] [class*="wrapper-"],
[class*="avatarWrapper-"] [class*="image-"],
[class*="replyAvatar-"] {
[class*="avatarHint_"],
[class*="avatarNormal_"],
[class*="avatarWrapper_"] [class*="wrapper_"],
[class*="avatarWrapper_"] [class*="image_"],
[class*="replyAvatar_"] {
border: none;
border-radius: 0 !important;
}
[class^="userPopout-"] [class*="avatarWrapper-"] > [class^="avatarHint-"] {
[class^="userPopout_"] [class*="avatarWrapper_"] > [class^="avatarHint_"] {
display: none;
}
[class^="userPopout-"]
[class*="avatarWrapper-"]
> [class^="avatar-"]
[class^="userPopout_"]
[class*="avatarWrapper_"]
> [class^="avatar_"]
> svg
> foreignObject {
x: 8px;
}
[class^="userPopout-"]
[class*="avatarWrapper-"]
> [class^="avatar-"]
[class^="userPopout_"]
[class*="avatarWrapper_"]
> [class^="avatar_"]
> svg
> rect {
x: 0;
@ -108,15 +108,15 @@ div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject,
mask: none !important;
}
[class^="accountProfileCard-"] [class^="avatar-"] {
[class^="accountProfileCard_"] [class^="avatar_"] {
border: 0;
background-color: transparent;
}
[class^="avatar-"] > [class^="wrapper-"],
[class^="avatarHoverTarget-"] > [class^="wrapper-"],
[class^="wrapper-"][class*="avatar-"],
[class^="wrapper"][class*="Avatar-"] {
[class^="avatar_"] > [class^="wrapper_"],
[class^="avatarHoverTarget_"] > [class^="wrapper_"],
[class^="wrapper_"][class*="avatar_"],
[class^="wrapper"][class*="Avatar_"] {
--status-color: #{colors.$c0};
&:not(:has([mask="url(#svg-mask-avatar-default)"]))::after {
@ -136,15 +136,15 @@ div[class^="listItem-"] [class^="wrapper-"] > svg > foreignObject,
& > rect,
& > circle,
& > svg[class^="cursorDefault-"] {
& > svg[class^="cursorDefault_"] {
display: none;
}
&[class^="avatarDecoration-"] {
&[class^="avatarDecoration_"] {
z-index: 10;
border-radius: 0 !important;
[class^="avatar-"] {
[class^="avatar_"] {
border-radius: 0 !important;
}
}

View file

@ -1,16 +1,16 @@
@use "colors";
@use "images";
[class^="base-"] > [class^="content-"] > [class^="sidebar-"] {
[class^="base_"] > [class^="content_"] > [class^="sidebar_"] {
border-radius: 0;
}
[class^="base-"]
> [class^="content-"]
> [class^="sidebar-"]
> [class^="container-"]
> [class^="scroller-"]
> [class^="content-"] {
[class^="base_"]
> [class^="content_"]
> [class^="sidebar_"]
> [class^="container_"]
> [class^="scroller_"]
> [class^="content_"] {
& > div[style="height: 84px;"],
& > div[style="height: 84px;"] + div[style="height: 12px;"],
& > div[style="height: 0px;"] + div[style="height: 12px;"],
@ -18,11 +18,11 @@
height: 0px !important;
}
& > [class*="containerWithMargin-"] {
& > [class*="containerWithMargin_"] {
margin-bottom: 4px;
padding: 0;
& > [class^="textArea-"] {
& > [class^="textArea_"] {
margin-right: 0;
}
@ -32,61 +32,61 @@
}
}
[class^="sectionDivider-"] {
[class^="sectionDivider_"] {
margin: 4px 2px !important;
//background-color: colors.$Divider !important;
}
[class^="spineBorder-"] {
[class^="spineBorder_"] {
display: none;
}
[class^="containerDefault-"] {
[class^="containerDefault_"] {
margin-left: 0;
padding: 0;
[class^="spine-"] {
[class^="spine_"] {
display: none;
}
[class^="iconVisibility-"] {
[class^="iconVisibility_"] {
margin-left: 0;
padding: 0;
[class^="link-"] {
[class^="link_"] {
border-radius: 0;
padding: 2px 4px;
--channel-icon: var(--text-muted);
[class^="icon-"] {
[class^="icon_"] {
width: 16px;
height: 16px;
}
[class^="iconContainer-"] {
[class^="iconContainer_"] {
margin-right: 3px;
}
[class^="name-"] {
[class^="name_"] {
font-size: 12px;
color: var(--text-muted);
line-height: 16px;
font-weight: normal;
}
[class^="channelInfo-"] {
& > [class^="wrapper-"] {
[class^="channelInfo_"] {
& > [class^="wrapper_"] {
border-radius: 0;
line-height: 16px;
height: 16px;
& > [class^="users-"] {
& > [class^="users_"] {
background-color: transparent;
color: var(--text-normal);
padding-right: 6px;
width: unset;
}
& > [class^="total-"] {
& > [class^="total_"] {
background-color: transparent;
color: var(--text-muted);
padding: 0;
@ -107,51 +107,51 @@
}
}
&[class*="modeSelected-"] {
[class^="link-"] {
&[class*="modeSelected_"] {
[class^="link_"] {
background-color: colors.$accent;
--channel-icon: white;
[class^="name-"] {
[class^="name_"] {
color: white;
}
}
}
&[class*="modeUnread-"] {
[class^="link-"] {
&[class*="modeUnread_"] {
[class^="link_"] {
--channel-icon: var(--text-normal);
[class^="name-"] {
[class^="name_"] {
color: var(--text-normal);
}
}
&:hover [class^="link-"] {
&:hover [class^="link_"] {
--channel-icon: white !important;
[class^="name-"] {
[class^="name_"] {
color: white !important;
}
}
}
&[class*="modeMuted-"] {
[class^="link-"] {
&[class*="modeMuted_"] {
[class^="link_"] {
--channel-icon: #{colors.$c8};
--interactive-muted: #{colors.$c8};
[class^="name-"] {
[class^="name_"] {
color: #{colors.$c8};
}
}
}
&:hover:not([class*="modeSelected-"]) {
[class^="link-"] {
&:hover:not([class*="modeSelected_"]) {
[class^="link_"] {
background-color: transparent;
--channel-icon: var(--text-normal);
--interactive-muted: var(--text-normal);
[class^="name-"] {
[class^="name_"] {
color: var(--text-normal);
}
}
}
&[class*="clickable-"] {
&[class*="clickable_"] {
height: 21px;
background: linear-gradient(
to right,
@ -160,18 +160,18 @@
);
&:hover {
[class^="mainContent-"] > svg {
[class^="mainContent_"] > svg {
background-position-x: 16px;
}
}
&[class*="collapsed-"] {
[class^="mainContent-"] > svg {
&[class*="collapsed_"] {
[class^="mainContent_"] > svg {
background-position-y: 0px;
}
}
[class^="mainContent-"] {
[class^="mainContent_"] {
height: 21px;
& > svg {
@ -189,7 +189,7 @@
}
}
[class^="name-"] {
[class^="name_"] {
line-height: 21px;
font-weight: normal;
font-size: 12px;
@ -200,9 +200,9 @@
}
}
[class^="addButton-"] {
[class^="addButton_"] {
min-width: 20px;
[class^="addButtonIcon-"] {
[class^="addButtonIcon_"] {
width: 16px;
height: 16px;
transition: none;
@ -222,106 +222,106 @@
}
}
[class^="link-"] {
[class^="link_"] {
border-radius: 0;
padding: 2px 4px;
--channel-icon: var(--text-muted);
[class^="icon-"] {
[class^="icon_"] {
width: 16px;
height: 16px;
}
[class^="iconContainer-"] {
[class^="iconContainer_"] {
margin-right: 3px;
}
[class^="name-"] {
[class^="name_"] {
font-size: 12px;
color: var(--text-muted);
line-height: 16px;
font-weight: normal;
}
& > [class^="linkBottom-"] {
& > [class^="linkBottom_"] {
margin-left: 0;
}
[class^="mentionsBadge-"] > [class^="numberBadge-"] {
[class^="mentionsBadge_"] > [class^="numberBadge_"] {
background-color: colors.$c1 !important;
}
}
&:has([class^="mentionsBadge-"]) {
[class^="link-"] {
&:has([class^="mentionsBadge_"]) {
[class^="link_"] {
--channel-icon: #{colors.$c1} !important;
--interactive-muted: #{colors.$c1} !important;
[class^="name-"] {
[class^="name_"] {
color: colors.$c1 !important;
}
}
}
&[class*="modeSelected-"] {
[class^="link-"] {
&[class*="modeSelected_"] {
[class^="link_"] {
//background-color: colors.$Focus;
--channel-icon: white;
[class^="name-"] {
[class^="name_"] {
color: white;
}
}
}
&[class*="modeUnread-"] {
[class^="link-"] {
&[class*="modeUnread_"] {
[class^="link_"] {
--channel-icon: var(--text-normal);
[class^="name-"] {
[class^="name_"] {
color: var(--text-normal);
}
}
&:hover [class^="link-"] {
&:hover [class^="link_"] {
--channel-icon: white;
[class^="name-"] {
[class^="name_"] {
color: white !important;
}
}
}
&:hover:not([class*="modeSelected-"]):not([class*="selected-"]) {
[class^="link-"] {
&:hover:not([class*="modeSelected_"]):not([class*="selected_"]) {
[class^="link_"] {
background-color: transparent;
--channel-icon: var(--text-normal);
[class^="name-"] {
[class^="name_"] {
color: colors.$c7;
}
}
}
& > [class^="list-"] {
& > [class^="list_"] {
padding: 2px 4px;
& > [class^="draggable-"] {
& > [class^="draggable_"] {
height: unset;
& > [class^="voiceUser-"] {
& > [class^="voiceUser_"] {
height: unset;
&:hover > [class^="content-"] {
&:hover > [class^="content_"] {
border-radius: 0;
background-color: transparent;
}
[class^="userAvatar-"] {
[class^="userAvatar_"] {
margin: 0;
width: 16px;
height: 16px;
margin-right: 4px;
}
[class*="username-"] {
[class*="username_"] {
font-size: 12px;
}
[class^="icons-"] {
[class^="icons_"] {
margin-right: 0;
}
}

View file

@ -313,25 +313,15 @@ $black-900: color.scale($black-500, $lightness: -95%);
background-color: #{colors.$primary};
}
:root,
.theme-dark,
.theme-light {
--mention-foreground: #{colors.$accent};
--mention-background: #{$mention-bg};
--background-mentioned: #{$mention-mentioned} !important;
--background-mentioned-hover: #{$mention-hover} !important;
.theme-dark {
--scrollbar-thin-thumb: #{colors.$c7} !important;
--scrollbar-thin-track: transparent !important;
--scrollbar-auto-thumb: #{colors.$c7} !important;
--scrollbar-auto-track: transparent !important;
--scrollbar-auto-scrollbar-color-thumb: #{colors.$c7} !important;
--scrollbar-auto-scrollbar-color-track: transparent !important;
--channel-text-area-placeholder: #{colors.$highlight};
--channel-text-area-placeholder: #{colors.$highlight} !important;
--interactive-normal: #{colors.$c7};
--interactive-active: #{colors.$c15};
--interactive-normal: #{colors.$c7} !important;
--interactive-active: #{colors.$c15} !important;
--text-normal: #{colors.$c7} !important;
--text-link: #{colors.$c6} !important;
--text-muted: #{colors.$highlight} !important;
--header-primary: #{colors.$c7} !important;
--header-secondary: #{colors.$c7} !important;
@ -349,38 +339,73 @@ $black-900: color.scale($black-500, $lightness: -95%);
--input-background: #{colors.$tertiary} !important;
--channeltextarea-background: #{colors.$tertiary} !important;
--status-positive-text: #{colors.$c7};
--status-danger-text: #{colors.$c7};
--status-warning-text: #{colors.$c7};
--button-secondary-background: #{colors.$primary};
--button-secondary-background-hover: #{colors.$highlight};
--button-secondary-background-active: #{colors.$highlight};
--button-secondary-background-disabled: #{colors.$secondary};
--text-danger: #{colors.$c1};
--status-danger: #{colors.$c1};
--status-danger-background: #{colors.$c1};
--button-danger-background: #{colors.$c1};
--button-danger-background-hover: #{colors.$c9};
--button-danger-background-active: #{colors.$c9};
--button-outline-danger-border: #{colors.$c1};
--button-outline-danger-border-hover: #{colors.$c9};
--button-outline-danger-border-active: #{colors.$c9};
--button-outline-danger-background-hover: #{colors.$c9};
--button-outline-danger-background-active: #{colors.$c9};
--text-positive: #{colors.$c2};
--status-positive: #{colors.$c2};
--status-positive-background: #{colors.$c2};
--button-positive-background: #{colors.$c2};
--button-positive-background-hover: #{colors.$c10};
--button-positive-background-active: #{colors.$c10};
--button-outline-positive-border: #{colors.$c2};
--button-outline-positive-border-hover: #{colors.$c10};
--button-outline-positive-border-active: #{colors.$c10};
--button-outline-positive-background-hover: #{colors.$c10};
--button-outline-positive-background-active: #{colors.$c10};
--text-warning: #{colors.$c3};
--status-warning: #{colors.$c3};
--status-warning-background: #{colors.$c3};
--status-positive-text: #{colors.$c7} !important;
--status-danger-text: #{colors.$c0} !important;
--status-warning-text: #{colors.$c7} !important;
}
.theme-light {
--scrollbar-thin-thumb: #{colors.$c0} !important;
--scrollbar-auto-thumb: #{colors.$c0} !important;
--scrollbar-auto-scrollbar-color-thumb: #{colors.$c0} !important;
--channel-text-area-placeholder: #{colors.$highlight} !important;
--interactive-normal: #{colors.$c0};
--interactive-active: #{colors.$highlight};
--text-normal: #{colors.$c0} !important;
--text-muted: #{colors.$highlight} !important;
--header-primary: #{colors.$c0} !important;
--header-secondary: #{colors.$c0} !important;
--background-primary: var(--primary-100) !important;
--status-positive-text: #{colors.$c0} !important;
--status-danger-text: #{colors.$c0} !important;
--status-warning-text: #{colors.$c0} !important;
}
:root,
.theme-dark,
.theme-light {
--mention-foreground: #{colors.$accent} !important;
--mention-background: #{$mention-bg} !important;
--background-mentioned: #{$mention-mentioned} !important;
--background-mentioned-hover: #{$mention-hover} !important;
--scrollbar-thin-track: transparent !important;
--scrollbar-auto-track: transparent !important;
--scrollbar-auto-scrollbar-color-track: transparent !important;
--text-link: #{colors.$c6} !important;
--button-secondary-background: #{colors.$primary} !important;
--button-secondary-background-hover: #{colors.$highlight} !important;
--button-secondary-background-active: #{colors.$highlight} !important;
--button-secondary-background-disabled: #{colors.$secondary} !important;
--text-danger: #{colors.$c1} !important;
--status-danger: #{colors.$c1} !important;
--status-danger-background: #{colors.$c1} !important;
--button-danger-background: #{colors.$c1} !important;
--button-danger-background-hover: #{colors.$c9} !important;
--button-danger-background-active: #{colors.$c9} !important;
--button-outline-danger-border: #{colors.$c1} !important;
--button-outline-danger-border-hover: #{colors.$c9} !important;
--button-outline-danger-border-active: #{colors.$c9} !important;
--button-outline-danger-background-hover: #{colors.$c9} !important;
--button-outline-danger-background-active: #{colors.$c9} !important;
--text-positive: #{colors.$c2} !important;
--status-positive: #{colors.$c2} !important;
--status-positive-background: #{colors.$c2} !important;
--button-positive-background: #{colors.$c2} !important;
--button-positive-background-hover: #{colors.$c10} !important;
--button-positive-background-active: #{colors.$c10} !important;
--button-outline-positive-border: #{colors.$c2} !important;
--button-outline-positive-border-hover: #{colors.$c10} !important;
--button-outline-positive-border-active: #{colors.$c10} !important;
--button-outline-positive-background-hover: #{colors.$c10} !important;
--button-outline-positive-background-active: #{colors.$c10} !important;
--text-warning: #{colors.$c3} !important;
--status-warning: #{colors.$c3} !important;
--status-warning-background: #{colors.$c3} !important;
--brand-experiment: #{$brand-500} !important;
--brand-100: #{$brand-100} !important;
@ -731,10 +756,10 @@ $black-900: color.scale($black-500, $lightness: -95%);
--black-900: #{$black-900} !important;
}
/*[class^="appMount-"],
[class^="bg-"],
[class^="layers-"] > [class^="layer-"],
[class^="app-"] {
/*[class^="appMount_"],
[class^="bg_"],
[class^="layers_"] > [class^="layer_"],
[class^="app_"] {
background-color: transparent !important;
}
@ -804,96 +829,96 @@ rect[fill="hsl(262, calc(var(--saturation-factor, 1) * 46.8%), 39.8%)"] {
fill: var(--status-streaming);
}
[class*="menu-"] [class^="item-"]:active,
[class*="menu-"] [class^="item-"][class*="focused-"],
[class*="lookFilled-"][class*="colorBrand-"]:not([class*="buttonColor-"]),
[class*="lookFilled-"][class*="colorBrandNew-"]:not([class*="buttonColor-"]),
[style*="background-color: rgb(114, 137, 218)"]:not([class*="swatch-"]),
[class^="slider-"] [class^="bar-"] [class^="barFill-"],
[class^="control-"]
[class^="container-"][style*="background-color: rgb(67, 181, 129);"] {
[class*="menu_"] [class^="item_"]:active,
[class*="menu_"] [class^="item_"][class*="focused_"],
[class*="lookFilled_"][class*="colorBrand_"]:not([class*="buttonColor_"]),
[class*="lookFilled_"][class*="colorBrandNew_"]:not([class*="buttonColor_"]),
[style*="background-color: rgb(114, 137, 218)"]:not([class*="swatch_"]),
[class^="slider_"] [class^="bar_"] [class^="barFill_"],
[class^="control_"]
[class^="container_"][style*="background-color: rgb(67, 181, 129);"] {
background-color: #{colors.$accent} !important;
}
[style*="border-color: rgb(114, 137, 218)"],
[class*="lookOutlined-"][class*="colorBrand-"] {
[class*="lookOutlined_"][class*="colorBrand_"] {
border-color: #{colors.$accent} !important;
}
[class*="lookOutlined-"][class*="colorBrand-"],
[class*="colorDefault-"]:not([class*="focused-"]) [class^="checkbox-"],
[class*="colorDefault-"]:not([class*="focused-"]) [class^="radioSelection-"],
[class*="colorDefault-"][class*="focused-"] [class^="check-"] {
[class*="lookOutlined_"][class*="colorBrand_"],
[class*="colorDefault_"]:not([class*="focused_"]) [class^="checkbox_"],
[class*="colorDefault_"]:not([class*="focused_"]) [class^="radioSelection_"],
[class*="colorDefault_"][class*="focused_"] [class^="check_"] {
color: #{colors.$accent} !important;
}
[class*="mentioned-"]:before {
[class*="mentioned_"]:before {
background-color: #{colors.$accent};
}
[class^="slider-"] [class^="bar-"],
[class^="control-"]
[class^="container-"][style*="background-color: rgb(114, 118, 125);"] {
[class^="slider_"] [class^="bar_"],
[class^="control_"]
[class^="container_"][style*="background-color: rgb(114, 118, 125);"] {
background-color: var(--background-secondary) !important;
}
.mention[class*="wrapper-"] {
.mention[class*="wrapper_"] {
color: #{colors.$accent};
background: #{$mention-bg};
}
.mention[class*="wrapper-"]:hover {
.mention[class*="wrapper_"]:hover {
color: #ffffff;
background: #{colors.$accent};
}
[class*="mentioned-"] .mention.interactive:hover {
[class*="mentioned_"] .mention.interactive:hover {
color: #{colors.$accent} !important;
}
[class^="mediaBarGrabber-"],
[class^="mediaBarProgress-"],
[class^="mediaBarProgress-"]:after,
[class^="mediaBarProgress-"]:before {
[class^="mediaBarGrabber_"],
[class^="mediaBarProgress_"],
[class^="mediaBarProgress_"]:after,
[class^="mediaBarProgress_"]:before {
background-color: #{colors.$accent} !important;
}
[class^="reaction-"] {
[class^="reaction_"] {
background-color: var(--background-secondary);
border: none;
border-radius: 4px !important;
}
[class^="reaction-"]:hover,
[class^="reaction-"][class*="reactionMe-"] {
[class^="reaction_"]:hover,
[class^="reaction_"][class*="reactionMe_"] {
background-color: #{colors.$highlight};
}
[class^="reaction-"][class*="reactionMe-"] [class*="reactionCount-"],
[class^="reaction-"]:hover [class*="reactionCount-"] {
[class^="reaction_"][class*="reactionMe_"] [class*="reactionCount_"],
[class^="reaction_"]:hover [class*="reactionCount_"] {
color: var(--white-500) !important;
}
[class^="reaction-"] [class*="reactionCount-"] {
[class^="reaction_"] [class*="reactionCount_"] {
color: var(--text-normal);
}
[class*="progressBarHeader-"] > [class^="container-"]:not([class*="checked-"]),
[class^="control-"] > [class^="container-"]:not([class*="checked-"]) {
[class*="progressBarHeader_"] > [class^="container_"]:not([class*="checked_"]),
[class^="control_"] > [class^="container_"]:not([class*="checked_"]) {
background-color: #{colors.$highlight} !important;
}
[class*="progressBarHeader-"] > [class^="container-"][class*="checked-"],
[class^="control-"] > [class^="container-"][class*="checked-"] {
[class*="progressBarHeader_"] > [class^="container_"][class*="checked_"],
[class^="control_"] > [class^="container_"][class*="checked_"] {
background-color: #{colors.$c2} !important;
}
[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] {
[class^="radioBar_"][style*="--radio-bar-accent-color:hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] {
--radio-bar-accent-color: #{colors.$c2} !important;
}
[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(37, calc(var(--saturation-factor, 1) * 81.2%), 43.9%);"] {
[class^="radioBar_"][style*="--radio-bar-accent-color:hsl(37, calc(var(--saturation-factor, 1) * 81.2%), 43.9%);"] {
--radio-bar-accent-color: #{colors.$c3} !important;
}
[class^="radioBar-"][style*="--radio-bar-accent-color:hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);"] {
[class^="radioBar_"][style*="--radio-bar-accent-color:hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);"] {
--radio-bar-accent-color: #{colors.$c1} !important;
}
@ -904,63 +929,73 @@ span[style*="background-color: hsl(359, calc(var(--saturation-factor, 1) * 82.6%
background-color: #{colors.$c1} !important;
}
[class^="updateIconForeground-"] {
[class^="updateIconForeground_"] {
fill: #{colors.$c2};
}
[class*="tierHeaderLocked-"],
[class*="tierHeaderUnlocked-"] {
[class*="tierHeaderLocked_"],
[class*="tierHeaderUnlocked_"] {
background-color: var(--background-secondary) !important;
}
[class*="tierAccomplished-"],
[class*="tierCurrent-"],
[class*="tierFirst-"] {
[class*="tierAccomplished_"],
[class*="tierCurrent_"],
[class*="tierFirst_"] {
background: #{colors.$c13} !important;
}
[class^="progressWithSubscriptions-"] > svg > g > rect[class^="background-"] {
[class^="progressWithSubscriptions_"] > svg > g > rect[class^="background_"] {
color: var(--background-secondary);
}
[class^="tierIcon-"],
[class^="unlockedIcon-"],
[class^="progressWithSubscriptions-"] > svg > g > rect[class^="foreground-"] {
[class^="tierIcon_"],
[class^="unlockedIcon_"],
[class^="progressWithSubscriptions_"] > svg > g > rect[class^="foreground_"] {
color: #{colors.$c13} !important;
}
svg[fill="#FF73FA"] {
fill: #{colors.$c13} !important;
}
[class^="activeCircle-"] {
[class^="activeCircle_"] {
background-color: #{colors.$c2} !important;
}
[class*="allow-"][class*="selected-"] {
[class*="allow_"][class*="selected_"] {
background-color: var(--status-positive) !important;
}
[class^="item-"][style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] {
[class^="item_"][style*="background-color: hsl(139, calc(var(--saturation-factor, 1) * 47.3%), 43.9%);"] {
background-color: #{colors.$c2} !important;
}
[class*="unreadBar-"][class*="mention-"],
[class^="numberBadge-"] {
[class*="unreadBar_"][class*="mention_"],
[class^="numberBadge_"] {
background-color: #{colors.$c1} !important;
}
[class*="bar-"][class*="mention-"] {
[class*="bar_"][class*="mention_"] {
background-color: #{colors.$c1};
}
a[class^="anchor-"]:not([aria-controls^="popout_"]) {
a[class^="anchor_"]:not([aria-controls^="popout_"]) {
color: var(--text-link) !important;
}
.theme-light [class*="button-"][class*="lookFilled-"][class*="colorPrimary-"] {
.theme-light [class*="button_"][class*="lookFilled_"][class*="colorPrimary_"] {
color: var(--text-normal) !important;
}
[class^="memberInner_"]
[class^="name_"]
> [class^="username_"]
> [class^="username_"] {
color: var(--text-normal);
}
[class^="memberInner_"] [class^="activityText_"] {
color: var(--text-muted);
}
.postnet-repo-wrapper,
.postnet-expanded-category {
border-color: var(--background-tertiary) !important;
@ -972,12 +1007,12 @@ a[class^="anchor-"]:not([aria-controls^="popout_"]) {
color: #{colors.$highlight} !important;
}
[class^="markdown-"] [class^="codeInline-"],
[class^="markdown_"] [class^="codeInline_"],
code.inline,
.hljs {
color: #{colors.$c7} !important;
}
[class^="markdown-"] code,
[class^="markdown_"] code,
.hljs {
background: var(--background-secondary) !important;
}
@ -1124,7 +1159,7 @@ code.inline,
.hljs-module {
color: #{colors.$c7} !important;
}
.hljs-ansi-foreground-black [class^="hljs-ansi-background-"],
.hljs-ansi-foreground-black [class^="hljs-ansi-background_"],
.hljs-ansi-foreground-black {
color: #{colors.$c0} !important;
}
@ -1146,7 +1181,7 @@ code.inline,
.hljs-ansi-foreground-cyan {
color: #{colors.$c6} !important;
}
.hljs-ansi-foreground-white [class^="hljs-ansi-background-"],
.hljs-ansi-foreground-white [class^="hljs-ansi-background_"],
.hljs-ansi-foreground-white {
color: #{colors.$c7} !important;
}

View file

@ -1,95 +1,95 @@
[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 {
[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;"] {
[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*="guilds_"] [class^="listItem_"],
[class*="guilds_"]
[class^="wrapper_"]:has(> [class^="expandedFolderBackground_"]) {
width: 48px !important;
}
[class*="guilds-"] [class^="unreadMentionsIndicator"] {
[class*="guilds_"] [class^="unreadMentionsIndicator"] {
width: 48px;
height: 16px;
}
[class*="guilds-"] > ul > [class^="scroller-"] {
[class*="guilds_"] > ul > [class^="scroller_"] {
padding-top: 8px !important;
}
[class*="guilds-"] [class^="listItem-"] {
[class*="guilds_"] [class^="listItem_"] {
margin-bottom: 4px;
}
[class*="guilds-"] ul[id^="folder-items-"] > [class^="listItem-"] {
[class*="guilds_"] ul[id^="folder-items-"] > [class^="listItem_"] {
width: 32px !important;
height: 32px !important;
margin-left: 8px;
}
[class*="guilds-"] [class^="expandedFolderBackground-"] {
[class*="guilds_"] [class^="expandedFolderBackground_"] {
width: 32px;
left: 8px;
}
[class*="guilds-"] ul[id^="folder-items-"] {
[class*="guilds_"] ul[id^="folder-items-"] {
height: unset !important;
}
[class*="guilds-"]
ul[class^="tree-"]
> [class^="scroller-"]
[class*="guilds_"]
ul[class^="tree_"]
> [class^="scroller_"]
> div[style*="height: 56px;"] {
height: unset !important;
}
[class*="guilds-"]
[class*="guilds_"]
ul[id^="folder-items-"]
> [class^="listItem-"]
> [class^="pill-"] {
> [class^="listItem_"]
> [class^="pill_"] {
left: -8px;
}
section[class^="panels-"] > [class*="activityPanel-"] [class^="gameIcon-"],
section[class^="panels-"]
> [class*="activityPanel-"]
[class^="actions-"]
> [class^="panelButtonContainer-"]
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-"]
section[class^="panels_"]
> [class^="wrapper_"]
> [class^="container_"]
> [class*="connection_"]
> [class*="directionRow_"]
> button,
section[class^="panels-"]
> [class^="wrapper-"]
> [class^="container-"]
> [class*="actionButtons-"]
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-"] {
section[class^="panels_"]
> [class^="wrapper_"]
> [class^="container_"]
> [class*="connection_"]
> [class*="directionRow_"] {
position: absolute;
bottom: 8px;
right: 8px;
@ -98,114 +98,114 @@ section[class^="panels-"]
grid-auto-flow: column;
}
section[class^="panels-"]
> [class^="wrapper-"]
> [class^="container-"]
> [class*="connection-"]
> [class^="inner-"]
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-"]
section[class^="panels_"]
> [class^="wrapper_"]
> [class^="container_"]
> [class*="connection_"]
> [class^="inner_"]
> div
> [class^="rtcConnectionStatus-"] {
> [class^="rtcConnectionStatus_"] {
position: absolute;
left: 8px;
}
section[class^="panels-"]
> [class^="wrapper-"]
> [class^="container-"]
> [class*="connection-"]
> [class^="inner-"]
section[class^="panels_"]
> [class^="wrapper_"]
> [class^="container_"]
> [class*="connection_"]
> [class^="inner_"]
> div
> [class^="rtcConnectionStatus-"]:has(> :nth-child(2)) {
> [class^="rtcConnectionStatus_"]:has(> :nth-child(2)) {
top: 12px;
}
section[class^="panels-"]
> [class^="wrapper-"]
> [class^="container-"]
> [class*="connection-"]
> [class^="inner-"]
section[class^="panels_"]
> [class^="wrapper_"]
> [class^="container_"]
> [class*="connection_"]
> [class^="inner_"]
> div
> [class^="rtcConnectionStatus-"]
> svg[class^="ping-"] {
> [class^="rtcConnectionStatus_"]
> svg[class^="ping_"] {
margin-right: 0;
}
section[class^="panels-"]
> [class^="wrapper-"]
> [class^="container-"]
> [class*="connection-"]
> [class^="inner-"]
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-"]
> [class^="rtcConnectionStatus_"]
> [class^="labelWrapper_"],
section[class^="panels_"]
> [class^="wrapper_"]
> [class^="container_"]
> [class*="connection_"]
> [class^="inner_"]
> div
> [class^="rtcConnectionStatus-"]
> [class^="labelWrapper-"]
> [class^="rtcConnectionStatus_"]
> [class^="labelWrapper_"]
> button {
width: 16px;
height: 16px;
}
section[class^="panels-"]
> [class^="wrapper-"]
> [class^="container-"]
> [class*="connection-"]
> [class^="inner-"]
section[class^="panels_"]
> [class^="wrapper_"]
> [class^="container_"]
> [class*="connection_"]
> [class^="inner_"]
> div
> [class^="rtcConnectionStatus-"]
> [class^="labelWrapper-"] {
> [class^="rtcConnectionStatus_"]
> [class^="labelWrapper_"] {
position: relative;
left: -16px;
z-index: 10;
}
section[class^="panels-"]
> [class^="wrapper-"]
> [class^="container-"]
> [class*="connection-"]
> [class^="inner-"]
section[class^="panels_"]
> [class^="wrapper_"]
> [class^="container_"]
> [class*="connection_"]
> [class^="inner_"]
> div
> [class^="rtcConnectionStatus-"]
> [class^="labelWrapper-"]
> [class^="rtcConnectionStatus_"]
> [class^="labelWrapper_"]
> button
> [class^="contents-"] {
> [class^="contents_"] {
display: none;
}
section[class^="panels-"]
> [class^="wrapper-"]
> [class^="container-"]
> [class*="actionButtons-"]
section[class^="panels_"]
> [class^="wrapper_"]
> [class^="container_"]
> [class*="actionButtons_"]
button {
padding: 0;
background: transparent;
}
section[class^="panels-"]
> [class^="wrapper-"]
> [class^="container-"]
> [class*="actionButtons-"] {
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-"]
> [class*="directionRow-"]
section[class^="panels_"]
> [class^="container_"]
> [class*="directionRow_"]
> button {
width: 24px;
height: 24px;
}
section[class^="panels-"] > [class^="container-"] > [class*="directionRow-"] {
section[class^="panels_"] > [class^="container_"] > [class*="directionRow_"] {
display: grid;
grid-auto-flow: column;
grid-gap: 4px;
@ -241,25 +241,25 @@ button.hh2-spotify-controls-button {
color: var(--text-muted) !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="container_"][class*="clickable_"]
> [class^="animatedContainer_"] {
height: 32px !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"] {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="container_"][class*="clickable_"]
> [class^="animatedContainer_"]
> [class^="bannerImage_"] {
height: 32px !important;
}
div[class^="sidebar-"]:not(:has(> [class^="side-"]))
> nav[class^="container-"]
> [class^="container-"][class*="clickable-"]
> [class^="animatedContainer-"]
> [class^="bannerImage-"]:after {
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="container_"][class*="clickable_"]
> [class^="animatedContainer_"]
> [class^="bannerImage_"]:after {
content: "";
height: 32px !important;
width: 240px;
@ -273,56 +273,56 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))
);
}
[class^="animatedBannerHoverLayer-"] {
[class^="animatedBannerHoverLayer_"] {
top: -32px !important;
height: 32px !important;
}
[class^="sidebar-"] header[class^="header-"] {
[class^="sidebar_"] header[class^="header_"] {
padding: 4px 8px;
}
[class^="chat-"] > [class^="title-"],
[class^="chat-"] > section[class*="container-"],
[class^="base-"]
> [class^="content-"]
> [class^="container-"]
> section[class*="container-"],
[class^="base-"]
> [class^="content-"]
> [class^="applicationStore-"]
section[class*="container-"] {
[class^="chat_"] > [class^="title_"],
[class^="chat_"] > section[class*="container_"],
[class^="base_"]
> [class^="content_"]
> [class^="container_"]
> section[class*="container_"],
[class^="base_"]
> [class^="content_"]
> [class^="applicationStore_"]
section[class*="container_"] {
height: 32px;
min-height: 32px;
padding: 0;
&[class^="libraryHeader-"]:before {
&[class^="libraryHeader_"]:before {
top: 31px;
}
& > [class^="upperContainer-"] {
& > [class^="upperContainer_"] {
height: 32px;
& > [class^="toolbar-"] {
& > [class^="toolbar_"] {
display: grid;
grid-auto-flow: column;
grid-gap: 4px;
margin-right: 4px;
& > [class^="inviteToolbar-"] {
& > [class^="inviteToolbar_"] {
display: grid;
grid-auto-flow: column;
grid-gap: 4px;
}
& > [class^="search-"] [class^="searchBar-"] {
& > [class^="search_"] [class^="searchBar_"] {
height: 24px !important;
& > .DraftEditor-root & > [class^="icon-"] {
& > .DraftEditor-root & > [class^="icon_"] {
margin-top: 0 !important;
}
}
[class^="iconWrapper-"] {
[class^="iconWrapper_"] {
width: 24px !important;
height: 24px !important;
margin: 0;
@ -333,181 +333,186 @@ div[class^="sidebar-"]:not(:has(> [class^="side-"]))
}
}
& > [class^="icon-"]:has(> [class^="text-md-normal-"]) {
& > [class^="icon_"]:has(> [class^="text-md-normal_"]) {
margin-left: 4px;
margin-right: 0;
}
}
[class^="topic-"] {
[class^="topic_"] {
margin-left: 4px;
}
[class^="titleWrapper-"] {
[class^="titleWrapper_"] {
margin-right: 4px;
}
& > [class^="children-"] > [class^="iconWrapper-"],
[class^="divider-"] {
& > [class^="children_"] > [class^="iconWrapper_"],
[class^="divider_"] {
margin: 0 4px;
}
& > [class^="children-"] > [class^="iconWrapper-"] > svg {
& > [class^="children_"] > [class^="iconWrapper_"] > svg {
padding: 2px;
}
}
}
[class^="chat-"] [class^="toolbar-"] [class*="iconWrapper-"],
[class^="chat-"] [class^="toolbar-"] > [class*="search-"] {
[class*="iconWrapper_"] & > [class*="search_"] {
margin: 0 !important;
}
}
}
[class^="chatContent-"]
[class^="chatContent_"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="textArea-"]
> [class^="scrollableContainer_"]
> [class^="inner_"]
> [class^="textArea_"]
> div
> [class*="fontSize16Padding-"] {
> [class*="fontSize16Padding_"] {
padding-top: 9px !important;
padding-bottom: 9px !important;
}
[class^="channelTextArea-"] [class^="inner-"] {
[class^="channelTextArea_"] [class^="inner_"] {
padding-left: 0 !important;
}
[class^="channelTextArea-"],
[class^="channelTextArea-"] [class^="inner-"],
[class^="channelTextArea-"] [class^="buttons-"],
[class^="channelTextArea-"] [class^="attachWrapper-"],
[class^="channelTextArea-"] [class^="attachButton-"],
[class^="channelTextArea-"] > [class^="scrollableContainer-"],
[class^="channelTextArea-"] [class^="inner-"] > [class^="textArea-"] {
[class^="channelTextArea_"],
[class^="channelTextArea_"] [class^="inner_"],
[class^="channelTextArea_"] [class^="buttons_"],
[class^="channelTextArea_"] [class^="attachWrapper_"],
[class^="channelTextArea_"] [class^="attachButton_"],
[class^="channelTextArea_"] > [class^="scrollableContainer_"],
[class^="channelTextArea_"] [class^="inner_"] > [class^="textArea_"] {
min-height: 40px !important;
}
[class^="channelTextArea-"] [class^="buttons-"],
[class^="channelTextArea-"] [class^="attachWrapper-"] {
[class^="channelTextArea_"] [class^="buttons_"],
[class^="channelTextArea_"] [class^="attachWrapper_"],
[class^="chatContent_"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer_"]
> [class^="inner_"]
> [class^="textArea_"] {
height: 40px;
}
[class^="channelTextArea-"] [class^="attachWrapper-"] {
[class^="channelTextArea_"] [class^="attachWrapper_"] {
min-width: 40px;
}
[class^="channelTextArea-"] [class^="attachWrapper-"] [class^="attachButton-"] {
[class^="channelTextArea_"] [class^="attachWrapper_"] [class^="attachButton_"] {
margin-left: 0;
padding-top: 0;
}
[class^="channelTextArea-"] [class^="attachButton-"],
[class^="channelTextArea-"] [class^="attachButton-"] > [class^="icon-"] {
[class^="channelTextArea_"] [class^="attachButton_"],
[class^="channelTextArea_"] [class^="attachButton_"] > [class^="icon_"] {
padding: 5px 8px;
}
[class^="channelTextArea-"]
[class^="buttons-"]
[class*="buttonContainer-"]
> button:not(:has(> [class*="innerButton-"])) {
[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-"] {
[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-"] {
[class^="channelTextArea_"]
[class^="buttons_"]
> [class^="separator_"]
[class*="innerButton_"] {
margin-right: 0;
}
[class*="menu-"] [class^="scroller-"] {
[class*="menu_"] [class^="scroller_"] {
padding: 4px;
}
[class*="menu-"] [class^="scroller-"]::-webkit-scrollbar {
[class*="menu_"] [class^="scroller_"]::-webkit-scrollbar {
width: 4px;
}
[class*="menu-"] [class^="scroller-"] [class^="item-"] {
[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-"] {
[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-"]) {
[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-"] {
[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-"] {
[class*="menu_"]
[class^="scroller_"]
[class^="item_"]
> [class^="labelContainer_"] {
min-height: 24px;
}
[class^="sidebar-"]
> [class^="privateChannels-"]
ul[class^="content-"]
> [class*="privateChannelsHeaderContainer-"] {
[class^="sidebar_"]
> [class^="privateChannels_"]
ul[class^="content_"]
> [class*="privateChannelsHeaderContainer_"] {
padding: 9px 4px 2px 9px;
height: 24px;
}
[class^="sidebar-"] > [class^="privateChannels-"] > [class^="searchBar-"] {
[class^="sidebar_"] > [class^="privateChannels_"] > [class^="searchBar_"] {
height: 32px;
}
section[class^="panels-"] > [class^="container-"]:last-child {
section[class^="panels_"] > [class^="container_"]:last-child {
position: relative;
margin-bottom: 0;
}
section[class^="panels-"] > [class^="container-"]:last-child > div:last-child {
section[class^="panels_"] > [class^="container_"]:last-child > div:last-child {
right: 0;
padding-right: 8px;
}
section[class^="panels-"] > [class^="container-"] {
section[class^="panels_"] > [class^="container_"] {
height: 40px;
padding: 0 4px;
}
section[class^="panels-"]
> [class^="container-"]
> [class*="directionRow-"]
section[class^="panels_"]
> [class^="container_"]
> [class*="directionRow_"]
> button {
width: 24px;
height: 24px;
}
section[class^="panels-"] > [class^="container-"] > [class*="directionRow-"] {
section[class^="panels_"] > [class^="container_"] > [class*="directionRow_"] {
display: grid;
grid-auto-flow: column;
grid-gap: 4px;
padding-right: 4px !important;
}
[class*="barBase-"] {
[class*="barBase_"] {
padding-bottom: 0 !important;
border-radius: 8px;
margin: 0;
left: 4px;
right: 4px;
&[class^="newMessagesBar-"] {
&[class^="newMessagesBar_"] {
height: 24px;
}

View file

@ -1,67 +1,67 @@
@use "colors";
@use "images";
[class*="menu-"] {
[class*="menu_"] {
padding: 2px;
& > [class^="scroller-"] {
& > [class^="scroller_"] {
padding: 1px 1px 4px 1px !important;
margin-right: -4px;
[class^="customItem-"][id^="message-quickreact-"] > [class^="button-"] {
[class^="customItem_"][id^="message-quickreact_"] > [class^="button_"] {
border-radius: 0 !important;
}
[class^="separator-"] {
[class^="separator_"] {
margin: 4px 1px;
border-bottom: 1px solid colors.$tertiary;
border-top: 1px solid colors.$c0;
}
[class^="item-"] {
[class^="item_"] {
border-radius: 0 !important;
margin: 1px 0;
padding: 0 2px !important;
min-height: 16px !important;
font-size: 12px;
&:not(:has(> [class^="iconContainer-"] > [class^="icon-"])):not(
:has(> [class^="iconContainerLeft-"])
&:not(:has(> [class^="iconContainer_"] > [class^="icon_"])):not(
:has(> [class^="iconContainerLeft_"])
) {
padding-inline-start: 20px !important;
}
&:has(> [class^="iconContainer-"] > [class^="icon-"]) {
&:has(> [class^="iconContainer_"] > [class^="icon_"]) {
flex-direction: row-reverse;
}
& > [class^="iconContainer-"]:has(> [class^="icon-"]),
& > [class^="iconContainerLeft-"] {
& > [class^="iconContainer_"]:has(> [class^="icon_"]),
& > [class^="iconContainerLeft_"] {
margin-left: 0;
margin-right: 2px;
}
& > [class^="label-"] {
& > [class^="label_"] {
padding-left: 2px;
& > [class^="subtext-"] {
& > [class^="subtext_"] {
line-height: 12px;
margin-top: 0;
}
}
& > [class^="iconContainer-"],
& > [class^="iconContainer-"] > svg {
& > [class^="iconContainer_"],
& > [class^="iconContainer_"] > svg {
width: 16px;
height: 16px;
}
& > [class^="hintContainer-"] {
& > [class^="hintContainer_"] {
margin-right: 18px;
}
&[aria-haspopup="true"] > [class^="iconContainer-"] > [class^="caret-"] {
&[aria-haspopup="true"] > [class^="iconContainer_"] > [class^="caret_"] {
display: none;
}
&[aria-haspopup="true"] > [class^="iconContainer-"]:before {
&[aria-haspopup="true"] > [class^="iconContainer_"]:before {
content: "";
position: absolute;
right: -2px;
@ -78,12 +78,12 @@
}
&[role="menuitemcheckbox"]
> [class^="iconContainer-"]
> svg[class^="icon-"] {
> [class^="iconContainer_"]
> svg[class^="icon_"] {
display: none;
}
&[role="menuitemcheckbox"][aria-checked="true"]
> [class^="iconContainer-"]:before {
> [class^="iconContainer_"]:before {
content: "";
position: absolute;
right: 0px;
@ -100,12 +100,12 @@
}
&[role="menuitemradio"]
> [class^="iconContainer-"]
> svg[class^="icon-"] {
> [class^="iconContainer_"]
> svg[class^="icon_"] {
display: none;
}
&[role="menuitemradio"][aria-checked="true"]
> [class^="iconContainer-"]:before {
> [class^="iconContainer_"]:before {
content: "";
position: absolute;
right: -1px;
@ -121,12 +121,12 @@
-webkit-mask-position: center;
}
& > [class^="label-"] > [class^="roleRow-"] > [class^="roleCircle-"] {
& > [class^="label_"] > [class^="roleRow_"] > [class^="roleCircle_"] {
width: 12px;
height: 12px;
border-radius: 0;
border-top: 1px solid colors.$highlight;
border-left: 1px solid colors.$highlight;
border-top: 1px solid colors.$c7;
border-left: 1px solid colors.$c7;
margin: 0;
margin-right: 2px;
}
@ -134,7 +134,7 @@
}
}
[class^="submenuPaddingContainer-"] {
[class^="submenuPaddingContainer_"] {
padding: 0;
margin: -4px;
}

View file

@ -1,148 +1,148 @@
html:not(.a11y-font-scaled-down)
[class*="message-"]:not([class*="systemMessage-"]):not([class*="compact-"]),
[class*="message_"]:not([class*="systemMessage_"]):not([class*="compact_"]),
html:not(.a11y-font-scaled-down)
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
> [class^="wrapper-"],
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
> [class^="wrapper_"],
html:not(.a11y-font-scaled-down)
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
> [class^="container-"]:not([class*="systemMessage-"]):not(
[class*="compact-"]
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
> [class^="container_"]:not([class*="systemMessage_"]):not(
[class*="compact_"]
) {
padding: 0 !important;
padding-left: 8px !important;
}
[class*="message-"]:not([class*="systemMessage-"]):not([class*="compact-"]),
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
> [class^="wrapper-"]:not([class*="systemMessage-"]):not([class*="compact-"]),
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
> [class^="container-"]:not([class*="systemMessage-"]):not(
[class*="compact-"]
[class*="message_"]:not([class*="systemMessage_"]):not([class*="compact_"]),
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
> [class^="wrapper_"]:not([class*="systemMessage_"]):not([class*="compact_"]),
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
> [class^="container_"]:not([class*="systemMessage_"]):not(
[class*="compact_"]
) {
padding-left: 8px !important;
}
[class*="message-"][class*="systemMessage-"] {
padding-left: 16px !important;
[class*="message_"][class*="systemMessage_"] {
padding-left: 28px !important;
}
[class*="message-"][class*="systemMessage-"] [class^="iconContainer-"] {
[class*="message_"][class*="systemMessage_"] [class^="iconContainer_"] {
margin-right: 0;
width: 24px;
width: 24px !important;
}
html:not(.a11y-font-scaled-down)
[class*="message-"]:not([class*="compact-"])
> [class^="contents-"]
> [class^="header-"],
[class*="message_"]:not([class*="compact_"])
> [class^="contents_"]
> [class^="header_"],
html:not(.a11y-font-scaled-down)
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
> [class^="wrapper-"]:not([class*="compact-"])
> [class^="contents-"]
> [class^="header-"],
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
> [class^="wrapper_"]:not([class*="compact_"])
> [class^="contents_"]
> [class^="header_"],
html:not(.a11y-font-scaled-down)
[class*="message-"]:not([class*="compact-"])
> [class^="wrapper-"]
> [class^="contents-"]
> [class^="header-"] {
[class*="message_"]:not([class*="compact_"])
> [class^="wrapper_"]
> [class^="contents_"]
> [class^="header_"] {
padding-left: 0 !important;
margin-left: 24px;
padding-bottom: 0 !important;
}
.a11y-font-scaled-down
[class*="message-"]:not([class*="compact-"])
> [class^="contents-"]
> [class^="header-"],
[class*="message_"]:not([class*="compact_"])
> [class^="contents_"]
> [class^="header_"],
.a11y-font-scaled-down
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
> [class^="wrapper-"]:not([class*="compact-"])
> [class^="contents-"]
> [class^="header-"]
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
> [class^="wrapper_"]:not([class*="compact_"])
> [class^="contents_"]
> [class^="header_"]
.a11y-font-scaled-down
[class*="message-"]:not([class*="compact-"])
> [class^="wrapper-"]
> [class^="contents-"]
> [class^="header-"] {
[class*="message_"]:not([class*="compact_"])
> [class^="wrapper_"]
> [class^="contents_"]
> [class^="header_"] {
margin-left: calc(24px - 4.5rem);
}
[class*="message-"]
> [class^="wrapper-"]
> [class^="contents-"]
[class^="avatar-"],
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
> [class^="wrapper-"]
> [class^="contents-"]
[class^="avatar-"],
[class*="message-"] > [class^="contents-"] [class^="avatar-"] {
[class*="message_"]
> [class^="wrapper_"]
> [class^="contents_"]
[class^="avatar_"],
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
> [class^="wrapper_"]
> [class^="contents_"]
[class^="avatar_"],
[class*="message_"] > [class^="contents_"] [class^="avatar_"] {
width: 20px;
height: 20px;
left: 8px;
}
[class*="message-"]
> [class^="wrapper-"]
> [class^="contents-"]
[class^="avatar-"] {
[class*="message_"]
> [class^="wrapper_"]
> [class^="contents_"]
[class^="avatar_"] {
left: 0 !important;
}
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
> [class^="wrapper-"]
> [class^="contents-"],
[class*="message-"] > [class^="contents-"],
[class*="message-"] > [class^="wrapper-"] > [class^="contents-"] {
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
> [class^="wrapper_"]
> [class^="contents_"],
[class*="message_"] > [class^="contents_"],
[class*="message_"] > [class^="wrapper_"] > [class^="contents_"] {
margin-left: 0;
padding: 0;
}
[class*="message-"][class*="systemMessage-"] > [class^="container-"] {
[class*="message_"][class*="systemMessage_"] > [class^="container_"] {
padding: 0;
}
[class*="cozy-"][class*="hasThread-"]::after {
[class*="cozy_"][class*="hasThread_"]::after {
display: none;
}
[class*="message-"] > [class^="wrapper-"] {
[class*="message_"] > [class^="wrapper_"] {
padding-left: 0;
}
[class^="messagesWrapper-"] [class^="scrollerInner-"]:after {
[class^="messagesWrapper_"] [class^="scrollerInner_"]:after {
height: 4px !important;
}
[class*="message-"]:not([class*="compact-"])
[class^="contents-"]
[class*="timestampVisibleOnHover-"] {
[class*="message_"]:not([class*="compact_"])
[class^="contents_"]
[class*="timestampVisibleOnHover_"] {
display: none;
}
[class^="messagesWrapper-"] [class^="scrollerInner-"] [class^="divider-"] {
margin: 4px;
[class^="messagesWrapper_"] [class^="scrollerInner_"] [class^="divider_"] {
margin: 4px !important;
height: 8px;
}
[class^="messagesWrapper-"]
[class^="scrollerInner-"]
[class*="groupStart-"][class*="cozy-"] {
[class^="messagesWrapper_"]
[class^="scrollerInner_"]
[class*="groupStart_"][class*="cozy_"] {
margin-top: 8px;
}
div[class*="cozyMessage-"] div[class^="repliedMessage-"] {
div[class*="cozyMessage_"] div[class^="repliedMessage_"] {
margin-left: 33px;
}
div[class*="cozyMessage-"] div[class^="repliedMessage-"]:before {
div[class*="cozyMessage_"] div[class^="repliedMessage_"]:before {
--avatar-size: 20px;
border-left: var(--spine-width) solid var(--interactive-active);
border-bottom: 0 solid var(--interactive-active);
@ -150,7 +150,7 @@ div[class*="cozyMessage-"] div[class^="repliedMessage-"]:before {
border-top: var(--spine-width) solid var(--interactive-active);
}
[class*="cozyMessage-"] [class^="avatarDecoration-"] {
[class*="cozyMessage_"] [class^="avatarDecoration_"] {
margin-top: calc(24px - 20px * var(--decoration-to-avatar-ratio));
left: calc(30px - 20px * var(--decoration-to-avatar-ratio));
width: calc(20px * var(--decoration-to-avatar-ratio));

View file

@ -1,34 +1,34 @@
[class*="embed-"] {
[class*="embed_"] {
border-radius: 0 0 0 0;
border-color: var(--interactive-active);
}
[class*="embed-"] [class*="embedInner-"] {
[class*="embed_"] [class*="embedInner_"] {
border-color: transparent;
}
[class*="embed-"] [class*="embedAuthorIcon-"] {
[class*="embed_"] [class*="embedAuthorIcon_"] {
border-radius: 0;
}
[class*="embed-"] [class^="grid-"] {
[class*="embed_"] [class^="grid_"] {
padding: 8px !important;
}
[class*="embed-"] [class*="embedMargin-"] {
[class*="embed_"] [class*="embedMargin_"] {
margin-top: 4px !important;
}
[class*="embed-"] [class*="embedMedia-"] {
[class*="embed_"] [class*="embedMedia_"] {
margin-top: 4px !important;
}
[class*="embed-"] [class*="embedTitle-"] {
[class*="embed_"] [class*="embedTitle_"] {
font-size: 16px !important;
font-weight: 200 !important;
}
[class*="embed-"] [class*="embedFieldName-"] {
[class*="embed_"] [class*="embedFieldName_"] {
font-weight: 500 !important;
}
[class*="embed-"] [class*="embedDescription-"],
[class*="embed-"] [class*="embedFieldName-"],
[class*="embed-"] [class*="embedFieldValue-"] {
[class*="embed_"] [class*="embedDescription_"],
[class*="embed_"] [class*="embedFieldName_"],
[class*="embed_"] [class*="embedFieldValue_"] {
font-size: 16px !important;
}
[class*="embed-"] [class*="embedFooterText-"] {
[class*="embed_"] [class*="embedFooterText_"] {
font-size: 0.8em;
}

View file

@ -55,27 +55,27 @@
--_font-titlebars: var(--font-primary) !important;
}
[class*="menu-"] [class^="item-"],
[class^="containerDefault-"]
> [class^="iconVisibility-"]
> [class^="content-"]
[class^="name-"] {
[class*="menu_"] [class^="item_"],
[class^="containerDefault_"]
> [class^="iconVisibility_"]
> [class^="content_"]
[class^="name_"] {
font-size: 16px;
text-transform: none;
text-transform: none !important;
font-weight: 500;
}
[class^="containerDefault-"]
> [class^="iconVisibility-"]
> [class^="mainContent-"]
[class^="name-"],
[class^="membersGroup-"],
[class^="headerContent-"] > [class^="name-"] {
[class^="containerDefault_"]
> [class^="iconVisibility_"]
> [class^="mainContent_"]
[class^="name_"],
[class^="membersGroup_"],
[class^="headerContent_"] > [class^="name_"] {
font-size: 16px;
text-transform: none;
text-transform: none !important;
font-weight: 600;
}
[class^="reaction-"] [class*="reactionCount-"] {
[class^="reaction_"] [class*="reactionCount_"] {
font-size: 12px;
}
@ -84,35 +84,35 @@
font-size: 12px !important;
}
[class^="sidebar-"]
> [class^="container-"]
> [class^="container-"]
> [class^="header-"]
> [class^="name-"],
[class*="heading-md-medium-"],
[class*="heading-md-normal-"] {
[class^="sidebar_"]
> [class^="container_"]
> [class^="container_"]
> [class^="header_"]
> [class^="name_"],
[class*="heading-md-medium_"],
[class*="heading-md-normal_"] {
font-size: 16px !important;
}
[class*="edited-"],
[class*="botTag-"] [class*="botText-"],
[class*="edited_"],
[class*="botTag_"] [class*="botText_"],
span[class="role-tag"],
.antiDelete-deleted-suffix {
font-size: 12px !important;
}
[class^="latin12CompactTimeStamp-"],
[class^="latin24CompactTimeStamp-"],
[class^="asianCompactTimeStamp-"],
[class^="embedFooterText-"] {
[class^="latin12CompactTimeStamp_"],
[class^="latin24CompactTimeStamp_"],
[class^="asianCompactTimeStamp_"],
[class^="embedFooterText_"] {
font-size: 0.75em !important;
}
[class^="codeBlockText-"],
[class^="codeLine-"],
[class*="after_inlineCode-"],
[class*="before_inlineCode-"],
[class^="inlineCode-"] {
[class^="codeBlockText_"],
[class^="codeLine_"],
[class*="after_inlineCode_"],
[class*="before_inlineCode_"],
[class^="inlineCode_"] {
font-size: 12px !important;
}
@ -120,19 +120,19 @@ span[class="role-tag"],
font-weight: 0;
}
[class^="markdown-"] [class^="codeInline-"],
[class^="markdown_"] [class^="codeInline_"],
code.inline,
.hljs {
font-size: 12px !important;
}
[class^="markdown-"] code,
[class^="markdown-"] [class^="codeInline-"],
[class^="markdown_"] code,
[class^="markdown_"] [class^="codeInline_"],
code.inline {
line-height: 12px !important;
}
[class^="markup-"] ol,
[class^="markup-"] ul {
[class^="markup_"] ol,
[class^="markup_"] ul {
margin: 4px 0 0 24px !important;
}

View file

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

View file

@ -1,23 +1,23 @@
@use "colors";
[class^="members-"] {
[class^="members_"] {
background-color: transparent;
[class^="member-"] {
[class^="member_"] {
background-color: transparent;
margin-left: 0;
[class^="memberInner-"] {
[class^="memberInner_"] {
height: 36px;
padding: 0 4px;
[class^="avatar-"] {
[class^="avatar_"] {
margin-right: 6px;
}
}
}
[class^="membersGroup-"] {
[class^="membersGroup_"] {
padding: 0;
padding-left: 4px;
height: 21px;
@ -30,12 +30,12 @@
0px 0px 4px colors.$c0, 0px 0px 4px colors.$c0;
font-weight: normal;
&:not(:has(> [class^="hiddenVisually-"])) {
&:not(:has(> [class^="hiddenVisually_"])) {
display: flex;
align-items: center;
}
&:has(> [class^="hiddenVisually-"]) > span[aria-hidden="true"] {
&:has(> [class^="hiddenVisually_"]) > span[aria-hidden="true"] {
display: flex;
align-items: center;
}

View file

@ -1,35 +1,35 @@
@use "colors";
@use "images";
[class*="baseLayer-"]
> [class^="container-"]
[class^="base-"]
> [class^="content-"]
[class^="sidebar-"]
> [class^="privateChannels-"] {
& > [class^="scroller-"] {
& > [class^="content-"] {
& > [class^="channel-"] {
[class*="baseLayer_"]
> [class^="container_"]
[class^="base_"]
> [class^="content_"]
[class^="sidebar_"]
> [class^="privateChannels_"] {
& > [class^="scroller_"] {
& > [class^="content_"] {
& > [class^="channel_"] {
margin-left: 0;
max-width: unset;
& > [class^="interactive-"] {
& > [class^="interactive_"] {
background-color: transparent;
border-radius: 0;
padding: 0;
&[class*="linkButton-"] {
[class^="link-"] {
& > [class*="layout-"] {
&[class*="linkButton_"] {
[class^="link_"] {
& > [class*="layout_"] {
height: 16px;
padding: 0;
& > [class*="avatar-"] {
& > [class*="avatar_"] {
width: 16px;
height: 16px;
margin-right: 4px;
& > [class*="linkButtonIcon-"] {
& > [class*="linkButtonIcon_"] {
width: 16px;
height: 16px;
color: var(--channel-icon);
@ -39,47 +39,47 @@
}
}
[class^="link-"] {
[class^="link_"] {
border-radius: 0;
padding: 2px 4px;
--channel-icon: #{colors.$highlight};
& > [class*="layout-"] {
& > [class*="layout_"] {
height: 32px;
padding: 0;
[class^="avatar-"] {
[class^="avatar_"] {
margin-right: 6px;
}
}
[class^="name-"] {
[class^="name_"] {
font-size: 12px;
color: colors.$highlight;
line-height: 16px;
font-weight: normal;
}
&[href="/store"] > [class^="badgeContainer-"] {
&[href="/store"] > [class^="badgeContainer_"] {
display: none;
}
}
&[class*="selected-"] {
&[class*="selected_"] {
background-color: colors.$accent;
[class^="link-"] {
[class^="link_"] {
--channel-icon: white;
[class^="name-"] {
[class^="name_"] {
color: white;
}
}
}
&:hover:not([class*="selected-"]) {
[class^="link-"] {
&:hover:not([class*="selected_"]) {
[class^="link_"] {
background-color: transparent;
--channel-icon: #{colors.$c7};
[class^="name-"] {
[class^="name_"] {
color: colors.$c7;
}
}
@ -87,7 +87,7 @@
}
}
& > [class*="privateChannelsHeaderContainer-"] {
& > [class*="privateChannelsHeaderContainer_"] {
padding: 0;
height: 22px;
flex-direction: row-reverse;
@ -98,7 +98,7 @@
);
align-items: center;
[class^="headerText-"] {
[class^="headerText_"] {
line-height: 21px;
font-weight: normal;
font-size: 12px;
@ -130,7 +130,7 @@
background-position-x: 16px;
}
& > [class^="privateChannelRecipientsInviteButtonIcon-"] {
& > [class^="privateChannelRecipientsInviteButtonIcon_"] {
position: relative;
left: 3px;
top: 0px;

View file

@ -1,149 +1,138 @@
[class*="chat-"] [class*="chatContent-"] form {
[class*="chat_"] [class*="chatContent_"] form {
position: relative;
margin: 0;
}
[class*="chat-"] form [class*="typing-"] {
[class*="chat_"] form [class*="typing_"] {
position: absolute;
top: -2px;
left: 10px;
top: 0px;
left: 0px;
}
[class*="channelTextArea-"] {
[class*="channelTextArea_"] {
margin-bottom: 10px !important;
margin-top: 24px !important;
padding: 0 !important;
}
[class*="channelTextArea-"] [class*="inner-"] {
[class*="channelTextArea_"] [class*="inner_"] {
border-radius: 6px;
}
[class*="sansAttachButton-"] {
[class*="sansAttachButton_"] {
padding-left: 10px !important;
}
.typing .ellipsis,
[class*="typing-"] span[class*="ellipsis-"] {
[class*="typing_"] span[class*="ellipsis_"] {
display: none;
}
form [class*="typing-"] {
form [class*="typing_"] {
background-color: transparent !important;
}
[class^="scrollerSpacer-"] {
height: 4px !important;
[class^="scrollerSpacer_"] {
height: 8px !important;
}
[class^="chatContent-"] > form:before {
[class^="chatContent_"] > form:before {
display: none !important;
}
[class^="chatContent-"] > form {
[class^="chatContent_"] > form {
padding: 0 !important;
bottom: 0;
background-color: var(--background-secondary);
}
[class^="chatContent-"] > form [class^="channelTextArea"] {
[class^="chatContent_"] > form [class^="channelTextArea"] {
margin-bottom: 0 !important;
}
[class^="chatContent-"]
[class^="chatContent_"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"] {
> [class^="scrollableContainer_"] {
border-radius: 0 !important;
border: 0 !important;
}
[class^="chatContent-"]
[class^="chatContent_"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="textArea-"],
[class^="chatContent-"]
> [class^="scrollableContainer_"]
> [class^="inner_"]
> [class^="textArea_"],
[class^="chatContent_"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="buttons-"],
[class^="chatContent-"]
> [class^="scrollableContainer_"]
> [class^="inner_"]
> [class^="buttons_"],
[class^="chatContent_"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="attachWrapper-"],
[class^="chatContent-"]
> [class^="scrollableContainer_"]
> [class^="inner_"]
> [class^="attachWrapper_"],
[class^="chatContent_"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="attachWrapper-"]
> [class^="attachButton-"] {
> [class^="scrollableContainer_"]
> [class^="inner_"]
> [class^="attachWrapper_"]
> [class^="attachButton_"] {
min-height: 53px;
}
[class^="chatContent-"]
[class^="chatContent_"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="textArea-"]
> [class^="scrollableContainer_"]
> [class^="inner_"]
> [class^="textArea_"]
> div
> [class*="fontSize16Padding-"] {
> [class*="fontSize16Padding_"] {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
[class^="chatContent-"]
[class^="chatContent_"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="buttons-"]
[class*="emojiButton-"] {
> [class^="scrollableContainer_"]
> [class^="inner_"]
> [class^="buttons_"]
[class*="emojiButton_"] {
max-height: unset;
}
[class^="messagesWrapper-"] {
margin-bottom: 8px;
}
[class^="chatContent-"]
> form
[class^="channelTextArea"]
> [class^="scrollableContainer-"]
> [class^="inner-"]
> [class^="textArea-"] {
height: 40px;
}
[class^="channelTextArea-"] > [class^="attachedBars-"] [class^="replyBar-"],
[class^="channelTextArea-"]
> [class^="attachedBars-"]
[class^="threadSuggestionBar-"] {
[class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"],
[class^="channelTextArea_"]
> [class^="attachedBars_"]
[class^="threadSuggestionBar_"] {
background: transparent;
}
[class^="channelTextArea-"] > [class^="attachedBars-"] [class^="replyBar-"] {
[class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"] {
display: flex;
flex-direction: row-reverse;
align-self: flex-start;
}
[class^="channelTextArea-"]
> [class^="attachedBars-"]
[class^="replyBar-"]
> [class^="actions-"] {
[class^="channelTextArea_"]
> [class^="attachedBars_"]
[class^="replyBar_"]
> [class^="actions_"] {
flex-direction: row-reverse;
}
[class^="channelTextArea-"]
> [class^="attachedBars-"]
[class^="replyBar-"]
[class*="replyLabel-"] {
[class^="channelTextArea_"]
> [class^="attachedBars_"]
[class^="replyBar_"]
[class*="replyLabel_"] {
margin-left: 12px;
}
[class^="channelTextArea-"]
> [class^="attachedBars-"]
[class^="replyBar-"]
> [class^="actions-"]::after {
[class^="channelTextArea_"]
> [class^="attachedBars_"]
[class^="replyBar_"]
> [class^="actions_"]::after {
position: relative;
content: "";
background-color: var(--background-modifier-accent);

View file

@ -1,9 +1,9 @@
[class*="avatarSpeaking-"],
[class^="avatar-"][class*="speaking-"] {
[class*="avatarSpeaking_"],
[class^="avatar_"][class*="speaking_"] {
box-shadow: 0 0 0 2px var(--status-online, var(--status-green-600)),
0 0 0 3px var(--background-secondary) !important;
}
[class^="voiceUsers-"] [class^="avatarContainer-"] {
[class^="voiceUsers_"] [class^="avatarContainer_"] {
overflow: visible;
}

View file

@ -1,12 +1,12 @@
[class*="standardSidebarView-"]
[class*="contentColumn-"]:not([class*="contentColumnWide-"]) {
[class*="standardSidebarView_"]
[class*="contentColumn_"]:not([class*="contentColumnWide_"]) {
max-width: 100%;
}
[class*="standardSidebarView-"] [class*="sidebarRegion-"] {
[class*="standardSidebarView_"] [class*="sidebarRegion_"] {
flex: 0;
}
[class^="accountProfileCard-"] {
[class^="accountProfileCard_"] {
max-width: 660px;
}

357
src/winclassic.scss Normal file
View file

@ -0,0 +1,357 @@
@use "colors";
.theme-dark {
--wc-frame: inset -1px -1px 0 0 #{colors.$tertiary},
inset 1px 1px 0 0 #{colors.$primary},
inset -2px -2px 0 0 #{colors.$secondary}, inset 2px 2px 0 0 #{colors.$c8};
--wc-outer-edge: inset -1px -1px 0 0 #{colors.$tertiary},
inset 1px 1px 0 0 #{colors.$c8}, inset -2px -2px 0 0 #{colors.$secondary},
inset 2px 2px 0 0 #{colors.$primary} !important;
--wc-inner-edge: inset -1px -1px 0 0 #{colors.$c8},
inset 1px 1px 0 0 #{colors.$secondary},
inset -2px -2px 0 0 #{colors.$primary},
inset 2px 2px 0 0 #{colors.$tertiary};
}
.theme-light {
--wc-frame: inset -1px -1px 0 0 #{colors.$c8},
inset 1px 1px 0 0 #{colors.$primary},
inset -2px -2px 0 0 #{colors.$tertiary},
inset 2px 2px 0 0 #{colors.$secondary};
--wc-outer-edge: inset -1px -1px 0 0 #{colors.$c8},
inset 1px 1px 0 0 #{colors.$secondary},
inset -2px -2px 0 0 #{colors.$primary},
inset 2px 2px 0 0 #{colors.$tertiary};
--wc-inner-edge: inset -1px -1px 0 0 #{colors.$secondary},
inset 1px 1px 0 0 #{colors.$tertiary},
inset -2px -2px 0 0 #{colors.$primary}, inset 2px 2px 0 0 #{colors.$c8};
}
[class*="button_"][class*="lookFilled_"],
section[class^="panels_"]
[class^="container_"]
[class^="flex_"]
button[class^="button_"],
[class^="toolbar_"] [class*="iconWrapper_"] {
border-radius: 0;
box-shadow: var(--wc-outer-edge) !important;
}
[class*="button_"][class*="lookFilled_"]:active,
section[class^="panels_"]
[class^="container_"]
[class^="flex_"]
button[class^="button_"]:active {
box-shadow: var(--wc-inner-edge) !important;
}
[class*="button_"][class*="lookFilled_"]:not([class*="color"]),
[class^="toolbar_"] [class*="iconWrapper_"],
section[class^="panels_"]
[class^="container_"]
[class^="flex_"]
button[class^="button_"] {
background-color: var(--background-primary);
}
[class^="chat_"] > [class^="content_"] [class^="membersWrap_"] {
padding: 2px;
box-shadow: var(--wc-inner-edge);
height: calc(100% - 4px);
max-height: calc(100% - 4px);
}
[class^="messagesWrapper_"],
[class*="guilds_"],
[class^="sidebar_"] > nav > [class^="scroller_"] {
padding: 2px;
box-shadow: var(--wc-inner-edge);
}
[class^="chat_"] > [class^="content_"] > [class^="container_"],
[class^="chat_"] > [class^="content_"] > [class^="chatContent_"],
[class^="standardSidebarView_"] > [class^="contentRegion_"] {
margin-left: 2px;
}
[class^="channelTextArea_"] > [class^="scrollableContainer_"],
[class^="chat_"]
[class^="toolbar_"]
> [class^="search_"]
> [class^="search_"]
> [class^="searchBar_"] {
box-shadow: var(--wc-inner-edge);
border-radius: 0;
}
[class^="channelTextArea_"] > [class^="scrollableContainer_"] {
min-height: 42px !important;
}
[class^="chat_"] > [class^="content_"]:before {
display: none !important;
}
[class^="chatContent_"] > form {
background-color: transparent !important;
}
[class^="standardSidebarView_"]
> [class^="sidebarRegion_"]
> [class^="sidebarRegionScroller_"],
[class^="standardSidebarView_"]
> [class^="contentRegion_"]
[class^="contentTransitionWrap_"] {
padding: 2px;
box-shadow: var(--wc-inner-edge);
}
[class^="standardSidebarView_"] > [class^="contentRegion_"],
[class^="standardSidebarView_"] > [class^="sidebarRegion_"] {
margin-top: 2px;
}
[class^="standardSidebarView_"]
> [class^="contentRegion_"]
[class^="contentTransitionWrap_"] {
height: calc(100% - 4px);
}
div[class^="sidebar_"] {
border-left: 2px solid #{colors.$primary};
}
[class*="guilds_"] [class^="guildSeparator_"] {
height: 0;
border-bottom: 1px solid #{colors.$c8};
border-top: 1px solid #{colors.$secondary};
border-radius: 0;
}
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="container_"][class*="clickable_"]
> [class^="animatedContainer_"] {
height: 48px;
}
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="container_"][class*="clickable_"]
> [class^="animatedContainer_"]
> [class^="bannerImage_"] {
height: 48px;
}
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> 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_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="container_"][class*="clickable_"]
> [class^="animatedContainer_"]
[class^="bannerImg_"] {
top: -67px;
position: relative;
}
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
> nav[class^="container_"]
> [class^="scroller_"]
> ul
> div[style="height: 84px;"] {
height: 0 !important;
}
[class*="menu_"] {
border-radius: 0 !important;
padding: 2px;
box-shadow: var(--wc-frame) !important;
}
[class*="menu_"] > [class^="scroller_"] {
padding: 1px 1px 4px 1px !important;
margin-right: -4px;
}
[class*="menu_"] > [class^="scroller_"] [class^="item_"] {
border-radius: 0 !important;
margin: 1px 0;
padding: 0 2px !important;
}
[class*="menu_"]
> [class^="scroller_"]
[class^="customItem_"][id^="message-quickreact_"]
> [class^="button_"] {
border-radius: 0 !important;
box-shadow: var(--wc-outer-edge);
}
[class^="submenuPaddingContainer_"] {
padding: 0;
margin: -4px;
}
[class^="scroller_"]:not([class*="none_"]):not([class*="thin_"]):not(
:not(:hover)[class*="fade_"]
)::-webkit-scrollbar,
[class*="scrollerBase_"]:not([class*="none_"]):not([class*="thin_"]):not(
:not(:hover)[class*="fade_"]
)::-webkit-scrollbar {
min-width: 16px;
width: 16px;
}
[class^="scroller_"]:not([class*="thin_"])::-webkit-scrollbar-track,
[class*="scrollerBase_"]:not([class*="thin_"])::-webkit-scrollbar-track {
background-color: #{colors.$c8};
border: none;
border-radius: 0;
margin: 0;
}
[class^="scroller_"]::-webkit-scrollbar-thumb,
[class*="scrollerBase_"]::-webkit-scrollbar-thumb,
[class^="scroller_"]:not(
[class*="thin_"]
)::-webkit-scrollbar-button:single-button,
[class*="scrollerBase_"]:not(
[class*="thin_"]
)::-webkit-scrollbar-button:single-button {
border-radius: 0 !important;
background: #{colors.$primary} !important;
box-shadow: var(--wc-frame);
border: none !important;
}
[class^="scroller_"][class*="fade_"]:not(
[class*="thin_"]
)::-webkit-scrollbar-button:single-button,
[class*="scrollerBase_"][class*="fade_"]:not(
[class*="thin_"]
)::-webkit-scrollbar-button:single-button {
visibility: hidden;
}
[class^="scroller_"][class*="fade_"]:not(
[class*="thin_"]
):hover::-webkit-scrollbar-button:single-button,
[class*="scrollerBase_"][class*="fade_"]:not(
[class*="thin_"]
):hover::-webkit-scrollbar-button:single-button {
visibility: visible;
}
[class^="scroller_"]::-webkit-scrollbar-button:single-button:active,
[class*="scrollerBase_"]::-webkit-scrollbar-button:single-button:active {
box-shadow: inset 1px 1px #{colors.$secondary},
inset -1px -1px #{colors.$secondary};
}
[class^="scroller_"]:not(
[class*="thin_"]
)::-webkit-scrollbar-button:single-button:vertical:decrement,
[class*="scrollerBase_"]:not(
[class*="thin_"]
)::-webkit-scrollbar-button:single-button:vertical:decrement {
background-repeat: no-repeat !important;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE1IDE1Ij4NCgk8cmVjdCBoZWlnaHQ9IjEiIHdpZHRoPSI3IiB5PSI4IiB4PSIzIiBmaWxsPSJtZW51dGV4dCIvPjxyZWN0IGhlaWdodD0iMSIgd2lkdGg9IjUiIHg9IjQiIHk9IjciIGZpbGw9Im1lbnV0ZXh0Ii8+PHJlY3QgaGVpZ2h0PSIxIiB3aWR0aD0iMyIgeT0iNiIgeD0iNSIgZmlsbD0ibWVudXRleHQiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB5PSI1IiB4PSI2IiBmaWxsPSJtZW51dGV4dCIvPg0KCQ0KCQ0KPC9zdmc+") !important;
background-position: center center !important;
}
[class^="scroller_"]:not(
[class*="thin_"]
)::-webkit-scrollbar-button:single-button:vertical:increment,
[class*="scrollerBase_"]:not(
[class*="thin_"]
)::-webkit-scrollbar-button:single-button:vertical:increment {
background-repeat: no-repeat !important;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTUiIHdpZHRoPSIxNSIgdmlld0JveD0iMCAwIDE1IDE1Ij4NCgk8cmVjdCBoZWlnaHQ9IjEiIHdpZHRoPSI3IiB4PSIzIiB5PSI1IiBmaWxsPSJtZW51dGV4dCIvPjxyZWN0IGhlaWdodD0iMSIgd2lkdGg9IjUiIHk9IjYiIHg9IjQiIGZpbGw9Im1lbnV0ZXh0Ii8+PHJlY3QgaGVpZ2h0PSIxIiB3aWR0aD0iMyIgeD0iNSIgeT0iNyIgZmlsbD0ibWVudXRleHQiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4PSI2IiB5PSI4IiBmaWxsPSJtZW51dGV4dCIvPg0KCQ0KCQ0KPC9zdmc+") !important;
background-position: center center !important;
}
[class^="scroller_"]::-webkit-scrollbar-button:single-button,
[class*="scrollerBase_"]::-webkit-scrollbar-button:single-button {
}
[class^="scroller_"]:not(
[class*="thin_"]
)::-webkit-scrollbar-button:single-button:vertical:decrement,
[class*="scrollerBase_"]:not(
[class*="thin_"]
)::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0 8px 8px 8px;
border-color: transparent transparent var(--text) transparent;
}
.postnet-expanded-category,
.postnet-repo-wrapper,
[class^="inner_"]:has(> input),
[class^="inputWrapper_"] > [class*="input_"],
[class^="colorSwatch_"] > [class^="swatch_"][aria-expanded="true"] {
border: none !important;
border-radius: 0 !important;
box-shadow: var(--wc-inner-edge);
}
[class^="colorSwatch_"] > [class^="swatch_"] {
border: none !important;
border-radius: 0 !important;
box-shadow: var(--wc-outer-edge);
}
[class^="inputWrapper_"] > [class*="input_"] {
padding: 2px 2px 2px 4px;
height: 22px;
}
[class^="select_"][class*="lookFilled_"] {
border: none !important;
border-radius: 0 !important;
box-shadow: var(--wc-inner-edge);
padding: 2px 2px 2px 4px;
}
[class^="select_"][class*="lookFilled_"] > [class^="icons_"] {
margin: 2px;
}
[class^="select_"][class*="lookFilled_"] > [class^="icons_"] > svg {
background: #{colors.$primary};
box-shadow: var(--wc-outer-edge);
width: 16px;
height: 16px;
}
[class^="select_"][class*="lookFilled_"][class*="open_"]
> [class^="icons_"]
> svg {
box-shadow: var(--wc-inner-edge);
}
[class^="popout_"][role="listbox"] > [class^="option_"] {
padding: 2px 2px 2px 4px;
margin: 2px 0;
}
[class^="popout_"][role="listbox"] > [class^="option_"]:hover {
background-color: var(--accent);
}
[class^="layerContainer_"] > [class*="layer_"] > [class^="tooltip_"] {
box-shadow: none;
-webkit-box-shadow: none;
border: 1px solid var(--text-normal);
background-color: var(--background-primary);
border-radius: 0;
[class^="tooltipContent_"] {
padding: 2px 4px;
font-size: 12px;
line-height: 12px;
}
[class^="tooltipPointer_"] {
display: none;
}
[class*="rowGuildName_"] {
align-items: center;
}
}