diff --git a/README.md b/README.md index f80b6a7..722eb0b 100644 --- a/README.md +++ b/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 */ diff --git a/browser.css b/browser.css index 1897458..8eedadf 100644 --- a/browser.css +++ b/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; } -} +} \ No newline at end of file diff --git a/desktop.css b/desktop.css index ea3818e..0be79bd 100644 --- a/desktop.css +++ b/desktop.css @@ -1,36 +1,38 @@ .visual-refresh { + /* gives each variable a default */ --vr-header-snippet-top: 0px; --vr-header-snippet-server-padding: 16px; --vr-header-snippet-space: 230px; --vr-header-snippet-button-padding: 0; --vr-header-snippet-winbuttons: flex; + --update-padding: 0px; + --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 { 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); - & .tab__65d41, - & .searchBar__1ac1c { - -webkit-app-region: no-drag; - } - } - - div.videoControls_bfe55a div.subtitleContainer__49508 { - padding-right: calc(var(--vr-header-snippet-space) - 20px); - - & .toolbar__9293f { + .tab__65d41, + .searchBar__1ac1c { -webkit-app-region: no-drag; } } - div[class*='page__'] { + div.page__5e434 { &:not(:has(> div.chat_f75fb0)) { anchor-name: --vr-header-snippet; } @@ -40,32 +42,123 @@ } } - .winButtons_c38106 { + /* shows or removes window buttons depending on variable */ + div.winButtons_c38106 { display: var(--vr-header-snippet-winbuttons); } - div[class*='base_'] { + /* inbox, help, window buttons variables */ + div.trailing_c38106 { + background: none; + border: none; + height: var(--custom-channel-header-height); + + /* adds padding to window buttons on settings/picture pages */ + & > div.winButtons_c38106:not(.winButtonsWithDivider_c38106) { + padding-right: var(--vr-header-snippet-button-padding); + } + } + + div.base__5e434 { grid-template-rows: [top] 0 [titleBarEnd] min-content [noticeEnd] 1fr [contentEnd] min-content [end]; - &:has(div.bar_c38106 > div.trailing_c38106 .updateIconForeground__49676) { - & div.chat_f75fb0, - & div.subtitleContainer_f75fb0, - & main.container__133bf, - & div.chatLayerWrapper__01ae2 { - & section.container__9293f { - padding-right: calc(var(--vr-header-snippet-space) + 50px); - } + /* check if users have the update, vencord, "checkpoint (discord recap), or experiments button */ + /* TODO: find the actual class name */ + &:has(> div.bar_c38106 > div.trailing_c38106 div.clickable__81391[aria-label='Update Ready!']) { + --update-padding: 44px; + } + &: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(--update-padding) + 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 { + padding-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); } - & div.videoControls_bfe55a .topControls_bfe55a div.toolbar__9293f { - margin-right: calc(var(--vr-header-snippet-space) + 30px) !important; + /* 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); } } - & > div[class*='content__'] { + /* adds extra spacing to the orbs button on orbs/shop page */ + div.container__44ee9 { + padding-right: var(--vr-header-snippet-extra-padding); + } + + /* livestream header on vc */ + div.upperContainer__9293f { + div.toolbar__49508 { + margin-right: -214px !important; + -webkit-app-region: no-drag; + } + div.title__49508, + div.container__49508 { + -webkit-app-region: no-drag; + } + } + + /* 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); + -webkit-app-region: no-drag; + } + + + /* 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; @@ -74,44 +167,63 @@ 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 { - background: none; - border: none; - height: var(--custom-channel-header-height); - } - + /* checks if a thread is opened on the side of your screen */ &:has(.threadSidebarOpen_f75fb0.threadSidebarFloating_f75fb0) > .bar_c38106 { z-index: 0; } } - :not(:has(div[class*='page__'] > div.chat_f75fb0)) div[class*='base_'] > div.bar_c38106 { + /* removes the extra padding given to the popout menu on vcs */ + div.popout__0bd4a { + div.bar_c38106 { + /* changing this value does nothing, but removes the extra padding so oh well */ + height: 0px + } + /* fixes padding issue with the close chat button on popout page */ + section.container__9293f > div.upperContainer__9293f:has([aria-label="Close"]) { + margin-right: -220px; + } + } + + /* 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); } - section.headerBar__80679, + section.header__0b563 div.toolbar__9293f, section.header_c791b2 div.toolbar__9293f, section.header_c791b2 div.children__9293f, + div.shop__6db1d div.shopHomeLink__80679, + /* main thread + all/claimed quest buttons */ + div.titleWrapper__9293f, + /* back button on discover pages */ + div.iconButton__8a7fc, + /* "follow" button for announcements */ + div.followButton_f75fb0 > button, :not(.videoControls_bfe55a) div.topic__6ec1a { + /* allows these areas to be clickable */ -webkit-app-region: no-drag; } + /* 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); @@ -124,16 +236,58 @@ z-index: -1; } + /* mod view padding */ .profileThemedContainer__656be .topRow__34940 { align-items: end; padding-bottom: 0; - & .closeAction__34940 { + .closeAction__34940 { -webkit-app-region: no-drag; } - & .memberNameContainer__34940 { + .memberNameContainer__34940 { padding-bottom: 12px; } } + + /* search/wishlist/orbs on shop page */ + .shop__6db1d div.toolbar__9293f { + margin-right: calc(var(--vr-header-snippet-space) - 9px); + -webkit-app-region: no-drag; + } + + /* orbs balance on quests page */ + .headerBar__1a9ce .container__44ee9 { + position: fixed; + right: calc(var(--vr-header-snippet-space) + 3px); + -webkit-app-region: no-drag; + } + + /* 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; + } + + /* allows back button on discover pages to be clickable */ + & .iconButton__8a7fc { + -webkit-app-region: no-drag; + } + + /* allows "follow" button for announcements to be clickable */ + div.followButton_f75fb0 > button{ + -webkit-app-region: no-drag; + } + + /* fixes padding issue for livestream indicator on main window when vc is popped out */ + div.videoControls_bfe55a:has(button.button__201d5[aria-label='Return to Discord']) { + div.streamQualityIndicator__30845 { + margin-right: calc(var(--vr-header-snippet-space) - 10px); + } + } }