diff --git a/pxvmc.scss b/pxvmc.scss index b70b2d1..6ca7dc9 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/color_overrides.scss b/src/color_overrides.scss index c3b8a09..1dad101 100644 --- a/src/color_overrides.scss +++ b/src/color_overrides.scss @@ -998,17 +998,71 @@ svg[fill="#FF73FA"] { color: var(--text-muted); } -.postnet-repo-wrapper, -.postnet-expanded-category { - border-color: var(--background-tertiary) !important; - background: var(--deprecated-card-bg) !important; +[class^="mediaBarWrapper_"] { + &, + &:before, + &:after { + background: #1a1a1a; + } } -.hh2-spotify-controls-album-name, -.showTag-username { - color: #{colors.$highlight} !important; +/****/ + +.visual-refresh.theme-dark, +.visual-refresh .theme-dark { + --text-primary: #{colors.$c7}; + --text-secondary: #{colors.$highlight}; + --channels-default: #{colors.$c7}; + --text-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; + + [class^="base_"] > [class^="bar_"], + [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^="markdown_"] [class^="codeInline_"], code.inline, .hljs { diff --git a/src/compact.scss b/src/compact.scss index a800984..df36842 100644 --- a/src/compact.scss +++ b/src/compact.scss @@ -194,36 +194,7 @@ section[class^="panels_"] > [class^="container_"] > [class*="directionRow_"] { padding-right: 4px !important; } -.hh2-spotify-controls-player { - margin: 4px 4px !important; - height: 32px !important; -} -.hh2-spotify-controls-album-image { - width: 32px !important; - height: 32px !important; -} -button.hh2-spotify-controls-button { - width: 24px !important; -} -.hh2-spotify-controls-info-box { - margin-left: 4px !important; - max-width: 112px !important; - margin-right: 4px !important; -} -.hh2-spotify-controls-buttons { - display: grid !important; - grid-auto-flow: column; - grid-gap: 4px; -} -.hh2-spotify-controls-track-name { - font-size: 0.75em; -} -.hh2-spotify-controls-album-name span, -.hh2-spotify-controls-album-name a { - color: var(--text-muted) !important; -} - -div[class^="sidebar_"]:not(:has(> [class^="side_"])) +/*div[class^="sidebar_"]:not(:has(> [class^="side_"])) > nav[class^="container_"] > [class^="container_"][class*="clickable_"] > [class^="animatedContainer_"] { @@ -258,7 +229,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_"] @@ -339,62 +310,64 @@ div[class^="sidebar_"]:not(:has(> [class^="side_"])) } }*/ -[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; +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^="sidebar_"] > [class^="privateChannels_"] ul[class^="content_"] > [class*="privateChannelsHeaderContainer_"] { diff --git a/src/embeds.scss b/src/embeds.scss index f8af21a..0079ba4 100644 --- a/src/embeds.scss +++ b/src/embeds.scss @@ -41,15 +41,13 @@ [class^="embedWrapper_"] { max-width: 500px !important; - :is( - [class*="embedProvider_"], - [class*="embedAuthor_"], - [class*="embedTitle_"], - [class*="embedDescription_"], - [class*="embedFields_"], - [class*="embedFooter_"], - [class*="embedMedia_"] - ) { + [class*="embedProvider_"], + [class*="embedAuthor_"], + [class*="embedTitle_"], + [class*="embedDescription_"], + [class*="embedFields_"], + [class*="embedFooter_"], + [class*="embedMedia_"] { min-width: unset !important; max-width: 480px; } @@ -68,7 +66,8 @@ width: max-content !important; height: max-content !important; - :is(img, video) { + img, + video { max-width: 480px !important; max-height: 480px !important; width: max-content !important; @@ -94,14 +93,16 @@ [class*="embedMedia_"] [class^="imageWrapper_"] { max-height: unset !important; - :is(img, video) { + img, + video { max-height: unset !important; } } } /* linked images equal to attachments */ - :is([class^="inlineMediaEmbed_"], [class^="messageAttachment_"]) { + [class^="inlineMediaEmbed_"], + [class^="messageAttachment_"] { max-width: 480px !important; max-height: 480px !important; @@ -111,7 +112,8 @@ width: max-content !important; height: max-content !important; - :is(img, video) { + 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 3f169cc..644d57a 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 cc8d381..37401ea 100644 --- a/src/misc.scss +++ b/src/misc.scss @@ -65,7 +65,11 @@ nav[class*="guilds_"] [class^="itemsContainer_"] > [class^="footer_"] { .mediaControls { padding: 4px; - padding-bottom: 0.5rem; + /* padding-bottom: 0.5rem;*/ + + .visual-refresh & { + height: unset !important; + } .mediaControls-controls { margin-bottom: 4px; @@ -76,6 +80,97 @@ 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: var(--space-8); + } + + [class^="member_"] > [class^="childContainer_"] > [class^="memberInner_"] { + padding: var(--space-xxs) var(--space-xs); + } + [class*="membersGroup_"] { + padding: var(--space-md) var(--space-md) var(--space-xxs) var(--space-md); + } +} +.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 154b0ce..f7abba9 100644 --- a/src/textbox.scss +++ b/src/textbox.scss @@ -1,128 +1,130 @@ -[class*="chat_"] [class*="chatContent_"] form { - position: relative; - margin: 0; -} +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*="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_"] { + margin-bottom: 10px !important; + margin-top: 24px !important; + padding: 0 !important; + } -[class*="channelTextArea_"] [class*="inner_"] { - border-radius: 6px; -} + [class*="channelTextArea_"] [class*="inner_"] { + border-radius: 6px; + } -[class*="sansAttachButton_"] { - padding-left: 10px !important; -} + [class*="sansAttachButton_"] { + padding-left: 10px !important; + } -.typing .ellipsis, -[class*="typing_"] span[class*="ellipsis_"] { - display: none; -} + .typing .ellipsis, + [class*="typing_"] span[class*="ellipsis_"] { + display: none; + } -form [class*="typing_"] { - background-color: transparent !important; -} + form [class*="typing_"] { + background-color: transparent !important; + } -[class^="scrollerSpacer_"] { - height: 8px !important; -} + [class^="scrollerSpacer_"] { + height: 8px !important; + } -[class^="chatContent_"] > form:before { - display: none !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 { + 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^="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_"], + [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_"] { + 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^="channelTextArea_"] > [class^="attachedBars_"] [class^="replyBar_"] > [class^="actions_"]::after { + position: relative; + content: ""; + background-color: var(--background-modifier-accent); + width: 1px; + height: 20px; + left: 100%; + } }