transparency

pxvmc.scss

@@ -20,3 +20,4 @@
 @use "src/ansi_chain";
 @use "src/collapse";
 @use "src/settings_icons";
+@use "src/transparent";

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-low: #{colors.$primary} !important;
-  --background-base-lower: #{colors.$secondary} !important;
+  //--background-base-lower: #{colors.$secondary} !important;
-  --background-base-lowest: #{colors.$tertiary} !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_"] {
+  /*[class^="base_"] > [class^="bar_"] {
-    background: #{colors.$primary} !important;
+    //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;

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],

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;
+}