diff --git a/pxvmc.scss b/pxvmc.scss index 10e69bf..5f6ad16 100644 --- a/pxvmc.scss +++ b/pxvmc.scss @@ -20,3 +20,4 @@ @use "src/ansi_chain"; @use "src/collapse"; @use "src/settings_icons"; +@use "src/transparent"; diff --git a/src/color_overrides.scss b/src/color_overrides.scss index b1d6ac2..93f5e7d 100644 --- a/src/color_overrides.scss +++ b/src/color_overrides.scss @@ -1024,22 +1024,22 @@ svg[fill="#FF73FA"] { --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; + //--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; + //--card-primary-bg: #{colors.$secondary} !important; --background-message-hover: #{colors.$tertiary} !important; --background-code: #{colors.$secondary} !important; --border-normal: #383838; - --custom-app-top-bar-height: 24px; + //--custom-app-top-bar-height: 24px; - [class^="base_"] > [class^="bar_"] { - background: #{colors.$primary} !important; + /*[class^="base_"] > [class^="bar_"] { + //background: #{colors.$primary} !important; & > [class^="title_"] > [class^="title_"] { gap: 4px; @@ -1069,13 +1069,13 @@ svg[fill="#FF73FA"] { } &.app-focused [class^="base_"] > [class^="bar_"] > [class^="title_"] > [class^="title_"] > [class^="defaultColor_"] { color: #979797; - } + }*/ - [class^="chatContent_"] { + /*[class^="chatContent_"] { background: #{colors.$primary} !important; - } + }*/ [class^="panels_"] { - background: #{colors.$secondary} !important; + //background: #{colors.$secondary} !important; .mediaControls { background: transparent !important; diff --git a/src/misc.scss b/src/misc.scss index 517c83f..42abd3a 100644 --- a/src/misc.scss +++ b/src/misc.scss @@ -199,6 +199,74 @@ nav[class*="guilds_"] [class^="itemsContainer_"] > [class^="footer_"] { top: unset; } +.platform-linux.visual-refresh { + --vr-header-snippet-top: 0px; + --vr-header-snippet-server-padding: 16px; + --vr-header-snippet-space: 100px; + --vr-header-snippet-button-padding: 10px; + + div[class^="chat_"]:not([class*="threadSidebarOpen_"]) div[class^="subtitleContainer_"], + main[class^="container_"], + div[class^="chatLayerWrapper_"] { + & section[class*="container_"] { + padding-right: var(--vr-header-snippet-space); + } + } + + div[class^="headerBar_"][class*="overlay_"] { + padding-right: var(--vr-header-snippet-space); + } + + div[class^="videoControls_"] div[class^="subtitleContainer_"] { + padding-right: calc(var(--vr-header-snippet-space) - 20px); + } + + div[class^="base_"] { + grid-template-rows: [top] 0 [titleBarEnd] min-content [noticeEnd] 1fr [contentEnd] min-content [end]; + + & > div[class^="bar_"] { + position: absolute; + position-anchor: --vr-header-snippet; + top: var(--vr-header-snippet-top); + right: anchor(right); + width: anchor-size(width); + padding: 0 var(--vr-header-snippet-button-padding) 0 0; + + & > [class^="title_"] { + display: none; + } + } + + &:has(> [class^="notice_"]) { + & > div[class^="bar_"] { + top: anchor(top); + } + } + + & div[class^="trailing_"] { + background: none; + border: none; + height: var(--custom-channel-header-height); + } + + & > div[class^="content_"] { + z-index: 0; + } + + &:has([class*="threadSidebarOpen_"][class*="threadSidebarFloating_"]) > [class^="bar_"] { + z-index: 0; + } + } + + :not(:has(div[class^="page_"] > div[class^="chat_"])) div[class^="base_"] > div[class^="bar_"] { + right: 0 !important; + } + + ul[data-list-id="guildsnav"] > div[class^="itemsContainer_"] > div[class^="stack_"] { + margin-top: var(--vr-header-snippet-server-padding); + } +} + /* unround */ *, [class], diff --git a/src/transparent.scss b/src/transparent.scss new file mode 100644 index 0000000..b03c672 --- /dev/null +++ b/src/transparent.scss @@ -0,0 +1,49 @@ +:root, +.theme-dark, +.visual-refresh .theme-dark, +.visual-refresh.theme-dark, +.custom-theme-background { + --bg-overlay-opacity-1: 0.9 !important; + --bg-overlay-opacity-2: 0.85 !important; + --bg-overlay-opacity-3: 0.8 !important; + --bg-overlay-opacity-4: 0.75 !important; + --bg-overlay-opacity-5: 0.7 !important; + --bg-overlay-opacity-6: 0.15 !important; + --bg-overlay-opacity-app-frame: var(--bg-overlay-opacity-5) !important; + --bg-overlay-app-frame: transparent !important; + + --custom-theme-background: transparent !important; + + --background-base-lowest: transparent; + --theme-base-color: transparent; + --theme-base-color-amount: 50%; + + --chat-background-default: transparent !important; + --custom-channel-members-bg: transparent !important; +} + +body, +.visual-refresh body, +.visual-refresh #app-mount, +#app-mount, +[class^="app_"] > [class^="app_"], +[class^="layer_"]:not([class*="baseLayer_"]) { + background: transparent !important; +} + +[class^="chatContent_"], +[class^="sidebar_"], +nav[class*="guilds_"], +[class^="chat_"] > [class^="content_"] > [class^="container_"], +[class^="members_"], +[class^="channelTextArea_"], +[class^="chatContent_"] > form[class^="form_"], +[class^="chat_"] > [class^="subtitleContainer_"] > [class^="title_"], +[class^="contentRegion_"], +[class^="contentRegionScroller_"] { + background: var(--background-base-lowest) !important; +} + +[class^="chat_"] > [class^="subtitleContainer_"] > [class^="title_"] [class^="children"]::after { + display: none; +}