Visual Refresh Enhanced

README.md

@@ -14,16 +14,23 @@ Use [Vencord](https://github.com/Vendicated/Vencord) or an equivalent client mod
 
 Paste the following link into your online theme links:
 ```
-https://chloecinders.github.io/visual-refresh-compact-title-bar/desktop.css
+https://raw.githubusercontent.com/G0d0fninjas/visual-refresh-compact-title-bar/refs/heads/main/desktop.css
 ```
 
 **If you are on a browser, Vesktop, or a client which does not come with window controls paste this instead:**
 ```
-https://chloecinders.github.io/visual-refresh-compact-title-bar/browser.css
+https://raw.githubusercontent.com/G0d0fninjas/visual-refresh-compact-title-bar/refs/heads/main/browser.css
 ```
 If you are on browser/Vesktop and do not care about the the inbox button, just wanting a performant way to remove the title bar completely you can use this instead:
 ```
-https://chloecinders.github.io/visual-refresh-compact-title-bar/hidden.css
+https://raw.githubusercontent.com/G0d0fninjas/visual-refresh-compact-title-bar/refs/heads/main/hidden.css
+```
+If you are using Discord PTB or Discord Canary, change "main" to "experimental" in the link, or copy the link below for your chosen client:
+```
+https://raw.githubusercontent.com/G0d0fninjas/visual-refresh-compact-title-bar/refs/heads/experimental/desktop.css
+```
+```
+https://raw.githubusercontent.com/G0d0fninjas/visual-refresh-compact-title-bar/refs/heads/experimental/browser.css
 ```
 
 Alternatively if your client does not support online themes you can download one of the theme files found in this repository and put them into your theme folder.
@@ -37,7 +44,7 @@ Put this into your QuickCSS (Or any non-Vencord equivalent) to configure some be
     /* controls the space above the server list */
     --vr-header-snippet-server-padding: 16px !important;
     /* controls the space the window buttons get on the channel header, experiment around with this if you get gaps or the buttons overlap! */
-    --vr-header-snippet-space: 230px !important;
+    --vr-header-snippet-space: 228px !important;
     /* controls the space to the right of the window buttons, good if you are using themes like midnight which add padding to the bar */
     --vr-header-snippet-button-padding: 0 !important;
     /* !DESKTOP SNIPPET ONLY! If set to none instead of flex, hides the window control buttons */

browser.css

@@ -1,28 +1,123 @@
 .visual-refresh {
+    /* gives each variable a default */
     --vr-header-snippet-top: 0px;
     --vr-header-snippet-server-padding: 16px;
     --vr-header-snippet-space: 100px;
     --vr-header-snippet-button-padding: 10px;
 
+    --vencord-padding: 0px;
+    --checkpoint-padding: 0px;
+    --experiments-padding: 0px;
+
+    /* adds padding to chat pages */
     div.chat_f75fb0:not(.threadSidebarOpen_f75fb0),
+    /* adds padding to friend list page */
     main.container__133bf,
+    /* adds padding to thread sidebar */
     div.chatLayerWrapper__01ae2 {
-        & section.container__9293f {
+        section.container__9293f {
             padding-right: var(--vr-header-snippet-space);
         }
     }
 
+    /* adds padding to servers/app pages */
     div.headerBar__8a7fc.overlay__8a7fc {
         padding-right: var(--vr-header-snippet-space);
     }
 
+    /* livestream video controls */
     div.videoControls_bfe55a div.subtitleContainer__49508 {
         padding-right: calc(var(--vr-header-snippet-space) - 20px);
     }
 
-    div[class*='base_'] {
+    div.base__5e434 {
         grid-template-rows: [top] 0 [titleBarEnd] min-content [noticeEnd] 1fr [contentEnd] min-content [end];
 
+        /* check if users have the vencord, "checkpoint (discord recap), or experiments button */
+        &:has(> div.bar_c38106 > div.trailing_c38106 .vc-toolbox-btn) {
+            --vencord-padding: 44px;
+        }
+        &:has(> div.bar_c38106 > div.trailing_c38106 path.iconForeground_f1f2b1) {
+            --checkpoint-padding: 44px;
+        }
+        &:has(> div.bar_c38106 > div.trailing_c38106 div.button__85643[aria-label='DevTools']) {
+            --experiments-padding: 44px;
+        }
+
+        /* pre-calculates the total padding needed when including the extra buttons */
+        --vr-header-snippet-extra-padding: calc(var(--vencord-padding) + var(--checkpoint-padding) + var(--experiments-padding));
+        --vr-header-snippet-total-padding: calc(var(--vr-header-snippet-space) + var(--vr-header-snippet-extra-padding));
+
+        /* adds padding to app detail page */
+        div.detailHeaderContainer_e1147e {
+          margin-right: calc(var(--vr-header-snippet-total-padding) - 12px);
+        }
+
+        div.subtitleContainer_f75fb0,
+        main.container__133bf {
+            /* adds padding to entire top container */
+            section.container__9293f {
+                padding-right: var(--vr-header-snippet-total-padding);
+            }
+        }
+
+        /* checks if thread sidebar is open */
+        &:has(div > div.chatLayerWrapper__01ae2) {
+            /* removes extra padding given to search bar */
+            div.subtitleContainer_f75fb0 > section.container__9293f {
+                padding-right: 8px;
+            }
+
+            /* adds padding to the thread buttons */
+            div.container__01ae2 > section.container__9293f {
+                padding-right: var(--vr-header-snippet-total-padding);
+            }
+
+            /* adds padding to the vc chat page in fullscreen */
+            &:has(> div.content__5e434 > div.hidden__5e434) div.container__01ae2 > section.container__9293f {
+                padding-right: var(--vr-header-snippet-button-padding);
+            }
+        }
+
+        /* adds extra spacing to the orbs button on orbs/shop page */
+        div.container__44ee9 {
+            padding-right: calc(var(--vr-header-snippet-extra-padding));
+        }
+
+        /* livestream header on vc */
+        div.upperContainer__9293f div.toolbar__49508 {
+            margin-right: -173px !important;
+        }  
+
+        /* adds extra padding to chat icon on vc */
+        div.video_cb9592:not(:has(.fullScreen_cb9592)) div.subtitleContainer__49508:has(button.button__201d5[aria-label^='Show Chat']) {
+            margin-right: calc(var(--vr-header-snippet-total-padding) - var(--vr-header-snippet-button-padding)) !important;
+        }
+
+        /* checks if you are searching for a server/app */
+        div.container_d08938,
+        div.innerContainer_e1147e {
+            /* adds padding to search bar */
+            div.search__1ac1c {
+                /* TODO: fix issue where doesnt let you search if window too small, or clicking search icon clips it into bar */
+                margin-right: calc(var(--vr-header-snippet-button-padding) + var(--vr-header-snippet-extra-padding) - 4px);
+            }
+
+
+            /* adds extra padding if you are looking at search results */
+            &:has(> div.headerBar__8a7fc.relative__8a7fc) {
+                .search__1ac1c {
+                    padding-right: calc(var(--vr-header-snippet-space) + var(--vr-header-snippet-extra-padding) - 60px);
+                }
+            }
+        }
+
+        /* moves element to "front" */
+        & > div.content__5e434 {
+            z-index: 0;
+        }
+
+        /* top bar variables */
         & > div.bar_c38106 {
             position: absolute;
             position-anchor: --vr-header-snippet;
@@ -31,36 +126,55 @@
             width: anchor-size(width);
             padding: 0 var(--vr-header-snippet-button-padding) 0 0;
 
+            /* removes the title bar */
             & > .title_c38106 {
                 display: none;
             }
         }
 
-        &:has(> .notice__6e2b9) {
+        &:has(> div.notice__6e2b9) {
             & > div.bar_c38106 {
                 top: anchor(top);
             }
         }
 
-        & div.trailing_c38106 {
+        /* inbox and help button variables */
+        div.trailing_c38106 {
             background: none;
             border: none;
             height: var(--custom-channel-header-height);
         }
 
-        & > div[class*='content__'] {
+        /* checks if a thread is opened on the side of your small screen */
+        &:has(.threadSidebarOpen_f75fb0.threadSidebarFloating_f75fb0) > .bar_c38106 {
             z-index: 0;
         }
+    }
 
-        &:has(.threadSidebarOpen_f75fb0.threadSidebarFloating_f75fb0) > .bar_c38106 {
-            z-index: 0;
+    /* removes the extra padding given to the popout menu on vcs */
+    div.popout__0bd4a {
+        section.container__9293f > div.upperContainer__9293f {
+            /* both areas have slightly different padding for some reason */
+            :has([aria-label="Show Chat"]) {
+                margin-right: -64px;
+            }
+            :has([aria-label="Close"]) {
+                margin-right: -96px;
+            }
         }
     }
 
-    :not(:has(div[class*='page__'] > div.chat_f75fb0)) div[class*='base_'] > div.bar_c38106 {
+    /* checks if discord is on a server page */
+    :not(:has(div.page__5e434 > div.chat_f75fb0)) div.base__5e434 > div.bar_c38106 {
         right: 0 !important;
     }
 
+    /* adds padding to server list */
+    ul[data-list-id="guildsnav"] > div.itemsContainer_ef3116 > div.stack_dbd263 {
+        margin-top: var(--vr-header-snippet-server-padding);
+    }
+
+    /* adds padding to shop page if a toolbar is showing (unsure what the toolbar is) */
     .shop__6db1d section.showToolbar__9293f {
         padding-right: var(--vr-header-snippet-space);
 
@@ -69,20 +183,35 @@
         }
     }
 
+    /* mod view padding */
     .profileThemedContainer__656be .topRow__34940 {
         align-items: end;
         padding-bottom: 0;
 
-        & .closeAction__34940 {
-            -webkit-app-region: no-drag;
-        }
-
-        & .memberNameContainer__34940 {
+        .memberNameContainer__34940 {
             padding-bottom: 12px;
         }
     }
 
-    ul[data-list-id="guildsnav"] > div.itemsContainer_ef3116 > div.stack_dbd263 {
-        margin-top: var(--vr-header-snippet-server-padding);
+    /* search/wishlist/orbs on shop page */
+    .shop__6db1d div.toolbar__9293f {
+        margin-right: calc(var(--vr-header-snippet-space) - 9px);
+    }
+
+    /* orbs balance on quests page */
+    .headerBar__1a9ce .container__44ee9 {
+        position: fixed;
+        right: calc(var(--vr-header-snippet-space) + 3px);
+    }
+
+    /* fixes extra gap of group dm button on friends page */
+    .toolbar__9293f .inviteToolbar__133bf {
+        padding-right: 0px;
+    }
+
+    /* fixes weird padding issue when searching for an app */
+    .sideFilterContainer__1eae0 {
+        position: fixed;
+        top: 57px;
     }
-}
+}