diff --git a/pxvmc.scss b/pxvmc.scss index 6ca7dc9..b70b2d1 100644 --- a/pxvmc.scss +++ b/pxvmc.scss @@ -6,16 +6,16 @@ //@use "src/ripcord"; @use "src/textbox"; @use "src/avatars"; -//@use "src/channel_list"; +@use "src/channel_list"; @use "src/compact"; -//@use "src/member_list"; -//@use "src/context_menu"; +@use "src/member_list"; +@use "src/context_menu"; @use "src/voice_rings"; @use "src/wide_settings"; -//@use "src/private_channels"; -//@use "src/embeds"; +@use "src/private_channels"; +@use "src/embeds"; //@use "src/winclassic"; -//@use "src/guilds"; +@use "src/guilds"; @use "src/misc"; @use "src/ansi_chain"; @use "src/collapse"; diff --git a/src/avatars.scss b/src/avatars.scss index 3e09ba2..4600156 100644 --- a/src/avatars.scss +++ b/src/avatars.scss @@ -111,9 +111,7 @@ div[class^="listItem_"] [class^="wrapper_"] > svg > foreignObject, left: 0; border-radius: 0% !important; - box-shadow: - inset 0 0 0 1px var(--status-color), - inset 0 0 0 2px #{colors.$tertiary}, + box-shadow: inset 0 0 0 1px var(--status-color), inset 0 0 0 2px #{colors.$tertiary}, inset 0 0 2px 3px #{colors.$primary}; } & > svg { @@ -135,20 +133,16 @@ div[class^="listItem_"] [class^="wrapper_"] > svg > foreignObject, } } - &:has(rect[fill="#23a55a"]), - &:has(rect[fill="#43a25a"]) { + &:has(rect[fill="#23a55a"]) { --status-color: #{colors.$c2}; } - &:has(rect[fill="#f0b232"]), - &:has(rect[fill="#ca9654"]) { + &:has(rect[fill="#f0b232"]) { --status-color: #{colors.$c3}; } - &:has(rect[fill="#f23f43"]), - &:has(rect[fill="#d83a42"]) { + &:has(rect[fill="#f23f43"]) { --status-color: #{colors.$c5}; } - &:has(rect[fill="#593695"]), - &:has(rect[fill="#9147ff"]) { + &:has(rect[fill="#593695"]) { --status-color: #{colors.$c4}; } } diff --git a/src/color_overrides.scss b/src/color_overrides.scss index d2a01e5..c3b8a09 100644 --- a/src/color_overrides.scss +++ b/src/color_overrides.scss @@ -998,120 +998,17 @@ svg[fill="#FF73FA"] { color: var(--text-muted); } -[class^="mediaBarWrapper_"] { - &, - &:before, - &:after { - background: #1a1a1a; - } +.postnet-repo-wrapper, +.postnet-expanded-category { + border-color: var(--background-tertiary) !important; + background: var(--deprecated-card-bg) !important; } -/****/ - -.visual-refresh.theme-dark, -.visual-refresh .theme-dark { - --text-primary: #{colors.$c15}; - --text-secondary: #{colors.$c7}; - --channels-default: #{colors.$highlight}; - --text-brand: #{colors.$accent}; - - --interactive-muted: #2d2d2d; - - --bg-brand: #{colors.$accent}; - --bg-base-primary: #{colors.$primary} !important; - --bg-base-secondary: #{colors.$secondary} !important; - --bg-base-tertiary: #{colors.$tertiary} !important; - --background-primary: #{colors.$primary} !important; - --background-secondary: #{colors.$secondary} !important; - --background-tertiary: #{colors.$tertiary} !important; - --background-base-low: #{colors.$primary} !important; - --background-base-lower: #{colors.$secondary} !important; - --background-base-lowest: #{colors.$tertiary} !important; - --chat-background-default: #{colors.$tertiary} !important; - --background-surface-high: #{colors.$secondary} !important; - --background-surface-higher: #{colors.$secondary} !important; - --checkbox-border-checked: #{colors.$accent} !important; - --card-primary-bg: #{colors.$secondary} !important; - --background-message-hover: #{colors.$tertiary} !important; - - --custom-app-top-bar-height: 24px; - - [class^="base_"] > [class^="bar_"] { - background: #{colors.$primary} !important; - - & > [class^="title_"] > [class^="title_"] { - gap: 4px; - - & > [class^="icon_"] { - width: 16px; - height: 16px; - } - - & > [class^="defaultColor_"] { - font-size: 9pt; - font-weight: 700; - color: #424242; - } - } - - [class^="button_"] { - width: 16px; - height: 16px; - } - [class^="trailing_"] { - gap: 4px; - } - [class^="winButtons_"] { - gap: 0px; - } - } - &.app-focused [class^="base_"] > [class^="bar_"] > [class^="title_"] > [class^="title_"] > [class^="defaultColor_"] { - color: #979797; - } - - [class^="chatContent_"] { - background: #{colors.$primary} !important; - } - [class^="panels_"] { - background: #{colors.$secondary} !important; - - .mediaControls { - background: transparent !important; - } - } - - [class^="sidebarRegion_"] > [class^="sidebarRegionScroller_"] > [class^="sidebar_"] [class^="side_"] { - [class^="header_"] { - color: var(--text-secondary) !important; - } - [class^="item_"] { - color: var(--text-primary) !important; - - &[class*="selected_"] { - background: #{colors.$accent} !important; - } - } - } - - [class^="cardHeader_"] { - background: #1a1a1a !important; - } - - [class^="member_"] { - color: #7f7f7f; - - &:hover { - color: #{colors.$c7}; - } - - [class*="activityText_"] { - color: #{colors.$highlight}; - } - } +.hh2-spotify-controls-album-name, +.showTag-username { + color: #{colors.$highlight} !important; } -/****/ - [class^="markdown_"] [class^="codeInline_"], code.inline, .hljs { diff --git a/src/compact.scss b/src/compact.scss index df36842..a800984 100644 --- a/src/compact.scss +++ b/src/compact.scss @@ -194,7 +194,36 @@ section[class^="panels_"] > [class^="container_"] > [class*="directionRow_"] { padding-right: 4px !important; } -/*div[class^="sidebar_"]:not(:has(> [class^="side_"])) +.hh2-spotify-controls-player { + margin: 4px 4px !important; + height: 32px !important; +} +.hh2-spotify-controls-album-image { + width: 32px !important; + height: 32px !important; +} +button.hh2-spotify-controls-button { + width: 24px !important; +} +.hh2-spotify-controls-info-box { + margin-left: 4px !important; + max-width: 112px !important; + margin-right: 4px !important; +} +.hh2-spotify-controls-buttons { + display: grid !important; + grid-auto-flow: column; + grid-gap: 4px; +} +.hh2-spotify-controls-track-name { + font-size: 0.75em; +} +.hh2-spotify-controls-album-name span, +.hh2-spotify-controls-album-name a { + color: var(--text-muted) !important; +} + +div[class^="sidebar_"]:not(:has(> [class^="side_"])) > nav[class^="container_"] > [class^="container_"][class*="clickable_"] > [class^="animatedContainer_"] { @@ -229,7 +258,7 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) [class^="sidebar_"] header[class^="header_"] { padding: 4px 8px; -}*/ +} /*[class^="chat_"] > [class^="title_"], [class^="chat_"] > section[class*="container_"], [class^="base_"] @@ -310,64 +339,62 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) } }*/ -html:not(.visual-refresh-chat-input) { - [class^="chatContent_"] - > form - [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] - > div - > [class*="fontSize16Padding_"] { - padding-top: 9px !important; - padding-bottom: 9px !important; - } - [class^="channelTextArea_"] [class^="inner_"] { - padding-left: 0 !important; - } - [class^="channelTextArea_"], - [class^="channelTextArea_"] [class^="inner_"], - [class^="channelTextArea_"] [class^="buttons_"], - [class^="channelTextArea_"] [class^="attachWrapper_"], - [class^="channelTextArea_"] [class^="attachButton_"], - [class^="channelTextArea_"] > [class^="scrollableContainer_"], - [class^="channelTextArea_"] [class^="inner_"] > [class^="textArea_"] { - min-height: 40px !important; - } - [class^="channelTextArea_"] [class^="buttons_"], - [class^="channelTextArea_"] [class^="attachWrapper_"], - [class^="chatContent_"] - > form - [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] { - height: 40px; - } - [class^="channelTextArea_"] [class^="attachWrapper_"] { - min-width: 40px; - } - [class^="channelTextArea_"] [class^="attachWrapper_"] [class^="attachButton_"] { - margin-left: 0; - padding-top: 0; - } - [class^="channelTextArea_"] [class^="attachButton_"], - [class^="channelTextArea_"] [class^="attachButton_"] > [class^="icon_"] { - padding: 5px 8px; - } - [class^="channelTextArea_"] - [class^="buttons_"] - [class*="buttonContainer_"] - > button:not(:has(> [class*="innerButton_"])) { - margin: 0; - } - [class^="channelTextArea_"] [class^="buttons_"] > [class^="separator_"], - [class^="channelTextArea_"] [class^="buttons_"] > [class^="separator_"] [class*="innerButton_"] { - margin-left: 4px; - } - [class^="channelTextArea_"] [class^="buttons_"] > [class^="separator_"] [class*="innerButton_"] { - margin-right: 0; - } +[class^="chatContent_"] + > form + [class^="channelTextArea"] + > [class^="scrollableContainer_"] + > [class^="inner_"] + > [class^="textArea_"] + > div + > [class*="fontSize16Padding_"] { + padding-top: 9px !important; + padding-bottom: 9px !important; +} +[class^="channelTextArea_"] [class^="inner_"] { + padding-left: 0 !important; +} +[class^="channelTextArea_"], +[class^="channelTextArea_"] [class^="inner_"], +[class^="channelTextArea_"] [class^="buttons_"], +[class^="channelTextArea_"] [class^="attachWrapper_"], +[class^="channelTextArea_"] [class^="attachButton_"], +[class^="channelTextArea_"] > [class^="scrollableContainer_"], +[class^="channelTextArea_"] [class^="inner_"] > [class^="textArea_"] { + min-height: 40px !important; +} +[class^="channelTextArea_"] [class^="buttons_"], +[class^="channelTextArea_"] [class^="attachWrapper_"], +[class^="chatContent_"] + > form + [class^="channelTextArea"] + > [class^="scrollableContainer_"] + > [class^="inner_"] + > [class^="textArea_"] { + height: 40px; +} +[class^="channelTextArea_"] [class^="attachWrapper_"] { + min-width: 40px; +} +[class^="channelTextArea_"] [class^="attachWrapper_"] [class^="attachButton_"] { + margin-left: 0; + padding-top: 0; +} +[class^="channelTextArea_"] [class^="attachButton_"], +[class^="channelTextArea_"] [class^="attachButton_"] > [class^="icon_"] { + padding: 5px 8px; +} +[class^="channelTextArea_"] + [class^="buttons_"] + [class*="buttonContainer_"] + > button:not(:has(> [class*="innerButton_"])) { + margin: 0; +} +[class^="channelTextArea_"] [class^="buttons_"] > [class^="separator_"], +[class^="channelTextArea_"] [class^="buttons_"] > [class^="separator_"] [class*="innerButton_"] { + margin-left: 4px; +} +[class^="channelTextArea_"] [class^="buttons_"] > [class^="separator_"] [class*="innerButton_"] { + margin-right: 0; } [class^="sidebar_"] > [class^="privateChannels_"] ul[class^="content_"] > [class*="privateChannelsHeaderContainer_"] { diff --git a/src/embeds.scss b/src/embeds.scss index 0079ba4..f8af21a 100644 --- a/src/embeds.scss +++ b/src/embeds.scss @@ -41,13 +41,15 @@ [class^="embedWrapper_"] { max-width: 500px !important; - [class*="embedProvider_"], - [class*="embedAuthor_"], - [class*="embedTitle_"], - [class*="embedDescription_"], - [class*="embedFields_"], - [class*="embedFooter_"], - [class*="embedMedia_"] { + :is( + [class*="embedProvider_"], + [class*="embedAuthor_"], + [class*="embedTitle_"], + [class*="embedDescription_"], + [class*="embedFields_"], + [class*="embedFooter_"], + [class*="embedMedia_"] + ) { min-width: unset !important; max-width: 480px; } @@ -66,8 +68,7 @@ width: max-content !important; height: max-content !important; - img, - video { + :is(img, video) { max-width: 480px !important; max-height: 480px !important; width: max-content !important; @@ -93,16 +94,14 @@ [class*="embedMedia_"] [class^="imageWrapper_"] { max-height: unset !important; - img, - video { + :is(img, video) { max-height: unset !important; } } } /* linked images equal to attachments */ - [class^="inlineMediaEmbed_"], - [class^="messageAttachment_"] { + :is([class^="inlineMediaEmbed_"], [class^="messageAttachment_"]) { max-width: 480px !important; max-height: 480px !important; @@ -112,8 +111,7 @@ width: max-content !important; height: max-content !important; - img, - video { + :is(img, video) { max-width: 480px !important; max-height: 480px !important; width: max-content !important; diff --git a/src/guilds.scss b/src/guilds.scss index 644d57a..3f169cc 100644 --- a/src/guilds.scss +++ b/src/guilds.scss @@ -285,10 +285,10 @@ nav[class*="guilds_"] { } } - /*&:hover { + &:hover { box-shadow: var(--HoverEdge); background-color: var(--ThreeDFace); - }*/ + } } [class^="wrapperSimple_"] { width: 40px; diff --git a/src/misc.scss b/src/misc.scss index 32c0534..cc8d381 100644 --- a/src/misc.scss +++ b/src/misc.scss @@ -65,11 +65,7 @@ nav[class*="guilds_"] [class^="itemsContainer_"] > [class^="footer_"] { .mediaControls { padding: 4px; - /* padding-bottom: 0.5rem;*/ - - .visual-refresh & { - height: unset !important; - } + padding-bottom: 0.5rem; .mediaControls-controls { margin-bottom: 4px; @@ -80,105 +76,6 @@ nav[class*="guilds_"] [class^="itemsContainer_"] > [class^="footer_"] { --__lottieIconColor: var(--interactive-normal) !important; } -.staffTags-tag-icon.staffTags-tag-memberList, -.staffTags-tag-icon.staffTags-tag-chat { - width: 18px; - height: 18px; - margin-left: 0; - top: 0; - - span:has(> &) { - height: 20px; - display: inline-flex; - align-items: center; - object-fit: contain; - margin-left: 0.25rem; - vertical-align: text-top; - } -} - -[id|="chat-messages"] [class*="cozy"] .pronouns-badge { - margin-left: 0.25rem; -} - -[class^="micButtonParent_"] { - margin-right: 0; -} - -[class^="member_"] > [class^="childContainer_"] > [class^="memberInner_"] { - width: 100%; -} - -.visual-refresh { - [class^="panels_"] { - display: flex; - flex-direction: column; - - [class^="devBanner_"] { - order: 9999; - } - } - - svg[class^="radioIndicator_"] { - border: 1px solid #2d2d2d; - &[class*="radioIndicatorChecked_"] { - background-color: var(--brand-experiment); - } - - & > circle { - display: none; - } - } - - [class^="base_"] > [class^="bar_"] > [class^="title_"] { - justify-content: left; - align-items: left; - margin-left: 3px; - } - - [class^="member_"] > [class^="childContainer_"] { - padding: 0; - - & > [class^="memberInner_"] { - padding: var(--space-xxs) var(--space-xs); - } - } - [class*="membersGroup_"] { - padding: var(--space-md) var(--space-md) var(--space-xxs) var(--space-md); - } - - [class^="carouselModal_"] { - border: none; - } -} -.visual-refresh-chat-input { - [class^="scrollerSpacer_"] { - height: 8px !important; - } - - [class^="channelBottomBarArea_"] { - margin: var(--space-xs); - - [class^="accessoryBar_"] { - margin: 0; - padding: 4px; - - & > [class^="accessoryBarRight_"] { - margin-right: 0; - - & > [class^="buttons_"] { - gap: 0; - } - } - - [class^="attachButton_"] { - margin-left: 0; - padding: 0 6px; - } - } - } -} - /* unround */ *, [class], diff --git a/src/textbox.scss b/src/textbox.scss index f7abba9..154b0ce 100644 --- a/src/textbox.scss +++ b/src/textbox.scss @@ -1,130 +1,128 @@ -html:not(.visual-refresh-chat-input) { - [class*="chat_"] [class*="chatContent_"] form { - position: relative; - margin: 0; - } - - [class*="chat_"] form [class*="typing_"] { - position: absolute; - top: 0px; - left: 0px; - } - - [class*="channelTextArea_"] { - margin-bottom: 10px !important; - margin-top: 24px !important; - padding: 0 !important; - } - - [class*="channelTextArea_"] [class*="inner_"] { - border-radius: 6px; - } - - [class*="sansAttachButton_"] { - padding-left: 10px !important; - } - - .typing .ellipsis, - [class*="typing_"] span[class*="ellipsis_"] { - display: none; - } - - form [class*="typing_"] { - background-color: transparent !important; - } - - [class^="scrollerSpacer_"] { - height: 8px !important; - } - - [class^="chatContent_"] > form:before { - display: none !important; - } - - [class^="chatContent_"] > form { - padding: 0 !important; - bottom: 0; - background-color: var(--background-secondary); - } - [class^="chatContent_"] > form [class^="channelTextArea"] { - margin-bottom: 0 !important; - } - [class^="chatContent_"] > form [class^="channelTextArea"] > [class^="scrollableContainer_"] { - border-radius: 0 !important; - border: 0 !important; - } - - [class^="chatContent_"] - > form - [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"], - [class^="chatContent_"] - > form - [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"], - [class^="chatContent_"] - > form - [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="attachWrapper_"], - [class^="chatContent_"] - > form - [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="attachWrapper_"] - > [class^="attachButton_"] { - min-height: 53px; - } - [class^="chatContent_"] - > form - [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="textArea_"] - > div - > [class*="fontSize16Padding_"] { - padding-top: 15px !important; - padding-bottom: 15px !important; - } - [class^="chatContent_"] - > form - [class^="channelTextArea"] - > [class^="scrollableContainer_"] - > [class^="inner_"] - > [class^="buttons_"] - [class*="emojiButton_"] { - max-height: unset; - } - - [class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"], - [class^="channelTextArea_"] > [class^="attachedBars_"] [class^="threadSuggestionBar_"] { - background: transparent; - } - - [class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"] { - display: flex; - flex-direction: row-reverse; - align-self: flex-start; - } - [class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"] > [class^="actions_"] { - flex-direction: row-reverse; - } - [class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"] [class*="replyLabel_"] { - margin-left: 12px; - } - - [class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"] > [class^="actions_"]::after { - position: relative; - content: ""; - background-color: var(--background-modifier-accent); - width: 1px; - height: 20px; - left: 100%; - } +[class*="chat_"] [class*="chatContent_"] form { + position: relative; + margin: 0; +} + +[class*="chat_"] form [class*="typing_"] { + position: absolute; + top: 0px; + left: 0px; +} + +[class*="channelTextArea_"] { + margin-bottom: 10px !important; + margin-top: 24px !important; + padding: 0 !important; +} + +[class*="channelTextArea_"] [class*="inner_"] { + border-radius: 6px; +} + +[class*="sansAttachButton_"] { + padding-left: 10px !important; +} + +.typing .ellipsis, +[class*="typing_"] span[class*="ellipsis_"] { + display: none; +} + +form [class*="typing_"] { + background-color: transparent !important; +} + +[class^="scrollerSpacer_"] { + height: 8px !important; +} + +[class^="chatContent_"] > form:before { + display: none !important; +} + +[class^="chatContent_"] > form { + padding: 0 !important; + bottom: 0; + background-color: var(--background-secondary); +} +[class^="chatContent_"] > form [class^="channelTextArea"] { + margin-bottom: 0 !important; +} +[class^="chatContent_"] > form [class^="channelTextArea"] > [class^="scrollableContainer_"] { + border-radius: 0 !important; + border: 0 !important; +} + +[class^="chatContent_"] + > form + [class^="channelTextArea"] + > [class^="scrollableContainer_"] + > [class^="inner_"] + > [class^="textArea_"], +[class^="chatContent_"] + > form + [class^="channelTextArea"] + > [class^="scrollableContainer_"] + > [class^="inner_"] + > [class^="buttons_"], +[class^="chatContent_"] + > form + [class^="channelTextArea"] + > [class^="scrollableContainer_"] + > [class^="inner_"] + > [class^="attachWrapper_"], +[class^="chatContent_"] + > form + [class^="channelTextArea"] + > [class^="scrollableContainer_"] + > [class^="inner_"] + > [class^="attachWrapper_"] + > [class^="attachButton_"] { + min-height: 53px; +} +[class^="chatContent_"] + > form + [class^="channelTextArea"] + > [class^="scrollableContainer_"] + > [class^="inner_"] + > [class^="textArea_"] + > div + > [class*="fontSize16Padding_"] { + padding-top: 15px !important; + padding-bottom: 15px !important; +} +[class^="chatContent_"] + > form + [class^="channelTextArea"] + > [class^="scrollableContainer_"] + > [class^="inner_"] + > [class^="buttons_"] + [class*="emojiButton_"] { + max-height: unset; +} + +[class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"], +[class^="channelTextArea_"] > [class^="attachedBars_"] [class^="threadSuggestionBar_"] { + background: transparent; +} + +[class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"] { + display: flex; + flex-direction: row-reverse; + align-self: flex-start; +} +[class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"] > [class^="actions_"] { + flex-direction: row-reverse; +} +[class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"] [class*="replyLabel_"] { + margin-left: 12px; +} + +[class^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"] > [class^="actions_"]::after { + position: relative; + content: ""; + background-color: var(--background-modifier-accent); + width: 1px; + height: 20px; + left: 100%; }