Cynosphere/pxvmc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

rspack fixes

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
pxvmc.scss
View file

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

10
src/account_details.scss
View file

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

174
src/avatars.scss
View file

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

142
src/channel_list.scss
View file

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

253
src/color_overrides.scss
View file

@ -313,25 +313,15 @@ $black-900: color.scale($black-500, $lightness: -95%);
background-color: #{colors.$primary}; background-color: #{colors.$primary};
} }
:root, .theme-dark {
.theme-dark,
.theme-light {
--mention-foreground: #{colors.$accent};
--mention-background: #{$mention-bg};
--background-mentioned: #{$mention-mentioned} !important;
--background-mentioned-hover: #{$mention-hover} !important;
--scrollbar-thin-thumb: #{colors.$c7} !important; --scrollbar-thin-thumb: #{colors.$c7} !important;
--scrollbar-thin-track: transparent !important;
--scrollbar-auto-thumb: #{colors.$c7} !important; --scrollbar-auto-thumb: #{colors.$c7} !important;
--scrollbar-auto-track: transparent !important;
--scrollbar-auto-scrollbar-color-thumb: #{colors.$c7} !important; --scrollbar-auto-scrollbar-color-thumb: #{colors.$c7} !important;
--scrollbar-auto-scrollbar-color-track: transparent !important; --channel-text-area-placeholder: #{colors.$highlight} !important;
--channel-text-area-placeholder: #{colors.$highlight};
--interactive-normal: #{colors.$c7}; --interactive-normal: #{colors.$c7} !important;
--interactive-active: #{colors.$c15}; --interactive-active: #{colors.$c15} !important;
--text-normal: #{colors.$c7} !important; --text-normal: #{colors.$c7} !important;
--text-link: #{colors.$c6} !important;
--text-muted: #{colors.$highlight} !important; --text-muted: #{colors.$highlight} !important;
--header-primary: #{colors.$c7} !important; --header-primary: #{colors.$c7} !important;
--header-secondary: #{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; --input-background: #{colors.$tertiary} !important;
--channeltextarea-background: #{colors.$tertiary} !important; --channeltextarea-background: #{colors.$tertiary} !important;
--status-positive-text: #{colors.$c7}; --status-positive-text: #{colors.$c7} !important;
--status-danger-text: #{colors.$c7}; --status-danger-text: #{colors.$c0} !important;
--status-warning-text: #{colors.$c7}; --status-warning-text: #{colors.$c7} !important;
--button-secondary-background: #{colors.$primary}; }
--button-secondary-background-hover: #{colors.$highlight};
--button-secondary-background-active: #{colors.$highlight}; .theme-light {
--button-secondary-background-disabled: #{colors.$secondary}; --scrollbar-thin-thumb: #{colors.$c0} !important;
--text-danger: #{colors.$c1}; --scrollbar-auto-thumb: #{colors.$c0} !important;
--status-danger: #{colors.$c1}; --scrollbar-auto-scrollbar-color-thumb: #{colors.$c0} !important;
--status-danger-background: #{colors.$c1}; --channel-text-area-placeholder: #{colors.$highlight} !important;
--button-danger-background: #{colors.$c1};
--button-danger-background-hover: #{colors.$c9}; --interactive-normal: #{colors.$c0};
--button-danger-background-active: #{colors.$c9}; --interactive-active: #{colors.$highlight};
--button-outline-danger-border: #{colors.$c1}; --text-normal: #{colors.$c0} !important;
--button-outline-danger-border-hover: #{colors.$c9}; --text-muted: #{colors.$highlight} !important;
--button-outline-danger-border-active: #{colors.$c9}; --header-primary: #{colors.$c0} !important;
--button-outline-danger-background-hover: #{colors.$c9}; --header-secondary: #{colors.$c0} !important;
--button-outline-danger-background-active: #{colors.$c9};
--text-positive: #{colors.$c2}; --background-primary: var(--primary-100) !important;
--status-positive: #{colors.$c2};
--status-positive-background: #{colors.$c2}; --status-positive-text: #{colors.$c0} !important;
--button-positive-background: #{colors.$c2}; --status-danger-text: #{colors.$c0} !important;
--button-positive-background-hover: #{colors.$c10}; --status-warning-text: #{colors.$c0} !important;
--button-positive-background-active: #{colors.$c10}; }
--button-outline-positive-border: #{colors.$c2};
--button-outline-positive-border-hover: #{colors.$c10}; :root,
--button-outline-positive-border-active: #{colors.$c10}; .theme-dark,
--button-outline-positive-background-hover: #{colors.$c10}; .theme-light {
--button-outline-positive-background-active: #{colors.$c10}; --mention-foreground: #{colors.$accent} !important;
--text-warning: #{colors.$c3}; --mention-background: #{$mention-bg} !important;
--status-warning: #{colors.$c3}; --background-mentioned: #{$mention-mentioned} !important;
--status-warning-background: #{colors.$c3}; --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-experiment: #{$brand-500} !important;
--brand-100: #{$brand-100} !important; --brand-100: #{$brand-100} !important;
@ -731,10 +756,10 @@ $black-900: color.scale($black-500, $lightness: -95%);
--black-900: #{$black-900} !important; --black-900: #{$black-900} !important;
} }
/*[class^="appMount-"], /*[class^="appMount_"],
[class^="bg-"], [class^="bg_"],
[class^="layers-"] > [class^="layer-"], [class^="layers_"] > [class^="layer_"],
[class^="app-"] { [class^="app_"] {
background-color: transparent !important; 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); fill: var(--status-streaming);
} }
[class*="menu-"] [class^="item-"]:active, [class*="menu_"] [class^="item_"]:active,
[class*="menu-"] [class^="item-"][class*="focused-"], [class*="menu_"] [class^="item_"][class*="focused_"],
[class*="lookFilled-"][class*="colorBrand-"]:not([class*="buttonColor-"]), [class*="lookFilled_"][class*="colorBrand_"]:not([class*="buttonColor_"]),
[class*="lookFilled-"][class*="colorBrandNew-"]:not([class*="buttonColor-"]), [class*="lookFilled_"][class*="colorBrandNew_"]:not([class*="buttonColor_"]),
[style*="background-color: rgb(114, 137, 218)"]:not([class*="swatch-"]), [style*="background-color: rgb(114, 137, 218)"]:not([class*="swatch_"]),
[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: #{colors.$accent} !important; background-color: #{colors.$accent} !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: #{colors.$accent} !important; border-color: #{colors.$accent} !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: #{colors.$accent} !important; color: #{colors.$accent} !important;
} }
[class*="mentioned-"]:before { [class*="mentioned_"]:before {
background-color: #{colors.$accent}; background-color: #{colors.$accent};
} }
[class^="slider-"] [class^="bar-"], [class^="slider_"] [class^="bar_"],
[class^="control-"] [class^="control_"]
[class^="container-"][style*="background-color: rgb(114, 118, 125);"] { [class^="container_"][style*="background-color: rgb(114, 118, 125);"] {
background-color: var(--background-secondary) !important; background-color: var(--background-secondary) !important;
} }
.mention[class*="wrapper-"] { .mention[class*="wrapper_"] {
color: #{colors.$accent}; color: #{colors.$accent};
background: #{$mention-bg}; background: #{$mention-bg};
} }
.mention[class*="wrapper-"]:hover { .mention[class*="wrapper_"]:hover {
color: #ffffff; color: #ffffff;
background: #{colors.$accent}; background: #{colors.$accent};
} }
[class*="mentioned-"] .mention.interactive:hover { [class*="mentioned_"] .mention.interactive:hover {
color: #{colors.$accent} !important; color: #{colors.$accent} !important;
} }
[class^="mediaBarGrabber-"], [class^="mediaBarGrabber_"],
[class^="mediaBarProgress-"], [class^="mediaBarProgress_"],
[class^="mediaBarProgress-"]:after, [class^="mediaBarProgress_"]:after,
[class^="mediaBarProgress-"]:before { [class^="mediaBarProgress_"]:before {
background-color: #{colors.$accent} !important; background-color: #{colors.$accent} !important;
} }
[class^="reaction-"] { [class^="reaction_"] {
background-color: var(--background-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: #{colors.$highlight}; background-color: #{colors.$highlight};
} }
[class^="reaction-"][class*="reactionMe-"] [class*="reactionCount-"], [class^="reaction_"][class*="reactionMe_"] [class*="reactionCount_"],
[class^="reaction-"]:hover [class*="reactionCount-"] { [class^="reaction_"]:hover [class*="reactionCount_"] {
color: var(--white-500) !important; color: var(--white-500) !important;
} }
[class^="reaction-"] [class*="reactionCount-"] { [class^="reaction_"] [class*="reactionCount_"] {
color: var(--text-normal); color: var(--text-normal);
} }
[class*="progressBarHeader-"] > [class^="container-"]:not([class*="checked-"]), [class*="progressBarHeader_"] > [class^="container_"]:not([class*="checked_"]),
[class^="control-"] > [class^="container-"]:not([class*="checked-"]) { [class^="control_"] > [class^="container_"]:not([class*="checked_"]) {
background-color: #{colors.$highlight} !important; background-color: #{colors.$highlight} !important;
} }
[class*="progressBarHeader-"] > [class^="container-"][class*="checked-"], [class*="progressBarHeader_"] > [class^="container_"][class*="checked_"],
[class^="control-"] > [class^="container-"][class*="checked-"] { [class^="control_"] > [class^="container_"][class*="checked_"] {
background-color: #{colors.$c2} !important; 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; --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; --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; --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; background-color: #{colors.$c1} !important;
} }
[class^="updateIconForeground-"] { [class^="updateIconForeground_"] {
fill: #{colors.$c2}; fill: #{colors.$c2};
} }
[class*="tierHeaderLocked-"], [class*="tierHeaderLocked_"],
[class*="tierHeaderUnlocked-"] { [class*="tierHeaderUnlocked_"] {
background-color: var(--background-secondary) !important; background-color: var(--background-secondary) !important;
} }
[class*="tierAccomplished-"], [class*="tierAccomplished_"],
[class*="tierCurrent-"], [class*="tierCurrent_"],
[class*="tierFirst-"] { [class*="tierFirst_"] {
background: #{colors.$c13} !important; background: #{colors.$c13} !important;
} }
[class^="progressWithSubscriptions-"] > svg > g > rect[class^="background-"] { [class^="progressWithSubscriptions_"] > svg > g > rect[class^="background_"] {
color: var(--background-secondary); color: var(--background-secondary);
} }
[class^="tierIcon-"], [class^="tierIcon_"],
[class^="unlockedIcon-"], [class^="unlockedIcon_"],
[class^="progressWithSubscriptions-"] > svg > g > rect[class^="foreground-"] { [class^="progressWithSubscriptions_"] > svg > g > rect[class^="foreground_"] {
color: #{colors.$c13} !important; color: #{colors.$c13} !important;
} }
svg[fill="#FF73FA"] { svg[fill="#FF73FA"] {
fill: #{colors.$c13} !important; fill: #{colors.$c13} !important;
} }
[class^="activeCircle-"] { [class^="activeCircle_"] {
background-color: #{colors.$c2} !important; background-color: #{colors.$c2} !important;
} }
[class*="allow-"][class*="selected-"] { [class*="allow_"][class*="selected_"] {
background-color: var(--status-positive) !important; 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; background-color: #{colors.$c2} !important;
} }
[class*="unreadBar-"][class*="mention-"], [class*="unreadBar_"][class*="mention_"],
[class^="numberBadge-"] { [class^="numberBadge_"] {
background-color: #{colors.$c1} !important; background-color: #{colors.$c1} !important;
} }
[class*="bar-"][class*="mention-"] { [class*="bar_"][class*="mention_"] {
background-color: #{colors.$c1}; background-color: #{colors.$c1};
} }
a[class^="anchor-"]:not([aria-controls^="popout_"]) { a[class^="anchor_"]:not([aria-controls^="popout_"]) {
color: var(--text-link) !important; 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; 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-repo-wrapper,
.postnet-expanded-category { .postnet-expanded-category {
border-color: var(--background-tertiary) !important; border-color: var(--background-tertiary) !important;
@ -972,12 +1007,12 @@ a[class^="anchor-"]:not([aria-controls^="popout_"]) {
color: #{colors.$highlight} !important; color: #{colors.$highlight} !important;
} }
[class^="markdown-"] [class^="codeInline-"], [class^="markdown_"] [class^="codeInline_"],
code.inline, code.inline,
.hljs { .hljs {
color: #{colors.$c7} !important; color: #{colors.$c7} !important;
} }
[class^="markdown-"] code, [class^="markdown_"] code,
.hljs { .hljs {
background: var(--background-secondary) !important; background: var(--background-secondary) !important;
} }
@ -1124,7 +1159,7 @@ code.inline,
.hljs-module { .hljs-module {
color: #{colors.$c7} !important; color: #{colors.$c7} !important;
} }
.hljs-ansi-foreground-black [class^="hljs-ansi-background-"], .hljs-ansi-foreground-black [class^="hljs-ansi-background_"],
.hljs-ansi-foreground-black { .hljs-ansi-foreground-black {
color: #{colors.$c0} !important; color: #{colors.$c0} !important;
} }
@ -1146,7 +1181,7 @@ code.inline,
.hljs-ansi-foreground-cyan { .hljs-ansi-foreground-cyan {
color: #{colors.$c6} !important; color: #{colors.$c6} !important;
} }
.hljs-ansi-foreground-white [class^="hljs-ansi-background-"], .hljs-ansi-foreground-white [class^="hljs-ansi-background_"],
.hljs-ansi-foreground-white { .hljs-ansi-foreground-white {
color: #{colors.$c7} !important; color: #{colors.$c7} !important;
} }

453
src/compact.scss
View file

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

54
src/context_menu.scss
View file

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

158
src/cozy_compact.scss
View file

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

24
src/embeds.css
View file

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

74
src/font.css
View file

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

2
src/italics.css
View file

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

14
src/member_list.scss
View file

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

58
src/private_channels.scss
View file

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

131
src/textbox.scss
View file

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

6
src/voice_rings.css
View file

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

8
src/wide_settings.css
View file

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