From 861cc894d30cf00ca9d95601340dccd480edacc2 Mon Sep 17 00:00:00 2001 From: notSagyo Date: Mon, 22 Jan 2024 20:52:01 -0300 Subject: [PATCH 1/2] Grow elements height when space is available --- Themes/Spotify-Discord/css/source.css | 21 ++++++++++++++++++- .../src/_selectorPlaceholders.scss | 3 +++ Themes/Spotify-Discord/src/_variables.scss | 9 ++++++++ .../src/channels/_channels.scss | 7 +++++++ .../Spotify-Discord/src/chat/_textarea.scss | 2 -- .../src/home/_friendsList.scss | 1 + .../src/home/_messageRequests.scss | 4 ++++ Themes/Spotify-Discord/src/home/_nitro.scss | 1 + Themes/Spotify-Discord/src/pages/_shop.scss | 1 + .../Spotify-Discord/src/servers/_servers.scss | 7 +++++++ 10 files changed, 53 insertions(+), 3 deletions(-) diff --git a/Themes/Spotify-Discord/css/source.css b/Themes/Spotify-Discord/css/source.css index 63cd54ee2..17712d80b 100644 --- a/Themes/Spotify-Discord/css/source.css +++ b/Themes/Spotify-Discord/css/source.css @@ -55,6 +55,7 @@ --main-textarea-text-color: hsl(0,0%,60%); --main-textarea-placeholder-color: hsl(0,0%,54%); --main-textarea-typing-color: hsla(0,0%,7%,0.9); + --textarea-margin: calc(calc(var(--app-bar-size) - var(--main-textarea-min-height)) / 2); --switch-knob-color: hsl(0,0%,100%); --switch-slider-color: hsl(0,0%,33%); --message-color-hover: hsl(0,0%,9%); @@ -71,6 +72,10 @@ --text-link: hsl(var(--accent-hsl)); --default-shadow: 0 16px 24px hsla(0,0%,0%,0.3), 0 6px 8px hsla(0,0%,0%,0.2); --code-font: Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace; + --content-full-height: calc(100vh - var(--app-card-top-margin) - var(--textarea-margin) - 22px); +} +:root:has(#vencord-native-titlebar-style), :root:has(.typeWindows__5fa63) { + --content-full-height: calc(100vh - var(--app-card-top-margin) - var(--textarea-margin)); } /* @@ -160,6 +165,10 @@ body, background-color: transparent; } +body:not(:has(:is(.container_6sXIoE, #vc-spotify-player))) .sidebar_ded4b5 { + height: var(--content-full-height); +} + .link__95dc0 { border-radius: var(--menu-item-radius); } @@ -526,7 +535,6 @@ body, * */ .form__13a2c { - --textarea-margin: calc( calc(var(--app-bar-size) - var(--main-textarea-min-height)) / 2 ); position: relative; width: 100%; bottom: calc(var(--app-bar-size) * -1); @@ -1997,6 +2005,7 @@ body, * */ .container__5c7e7 { + height: var(--content-full-height); background-color: var(--app-foreground); border-radius: var(--app-card-radius); } @@ -2076,6 +2085,10 @@ body, * MESSAGE REQUESTS * */ +.container_d3a736 { + height: var(--content-full-height); +} + .messageRequestItem__3b951:hover, .messageRequestItem__3b951.selected_ee2dc5, .messageRequestItem__3b951.selected__2244b { border-radius: var(--card-radius); } @@ -2098,6 +2111,7 @@ body, * */ .applicationStore_fc7d76 { + height: var(--content-full-height); background-color: var(--app-foreground); border-radius: var(--app-card-radius); } @@ -2758,6 +2772,7 @@ pre, pre code, code.inline, .codeBlockText__6172e, .codeLine__3797b, .codeBlockL * */ .layer__2efaa .shop_b31ed2 { + height: var(--content-full-height); margin: var(--app-card-top-margin) var(--app-card-margin) var(--app-card-margin); border-radius: var(--app-card-radius); overflow: hidden; @@ -3290,6 +3305,10 @@ pre, pre code, code.inline, .codeBlockText__6172e, .codeLine__3797b, .codeBlockL outline: none; } +body:not(:has(:is(.container_6sXIoE, #vc-spotify-player))) .wrapper_a7e7a8 { + height: var(--content-full-height); +} + /* SERVERS LIST -> HOME BUTTON AND DMS */ .tutorialContainer__890ea { padding: 8px 0; diff --git a/Themes/Spotify-Discord/src/_selectorPlaceholders.scss b/Themes/Spotify-Discord/src/_selectorPlaceholders.scss index db1e8c360..ad71aed7d 100644 --- a/Themes/Spotify-Discord/src/_selectorPlaceholders.scss +++ b/Themes/Spotify-Discord/src/_selectorPlaceholders.scss @@ -3379,6 +3379,9 @@ .buttonShine__0be03 { @extend %libraryPlayButtonShine !optional; } +.container_d3a736 { + @extend %messageRequestPage !optional; +} .list__325e7 { @extend %messageRequestContainer !optional; } diff --git a/Themes/Spotify-Discord/src/_variables.scss b/Themes/Spotify-Discord/src/_variables.scss index b0356ecfe..b036682c3 100644 --- a/Themes/Spotify-Discord/src/_variables.scss +++ b/Themes/Spotify-Discord/src/_variables.scss @@ -70,6 +70,7 @@ --main-textarea-text-color: hsl(0,0%,60%); --main-textarea-placeholder-color: hsl(0,0%,54%); --main-textarea-typing-color: hsla(0,0%,7%,0.9); + --textarea-margin: calc(calc(var(--app-bar-size) - var(--main-textarea-min-height)) / 2); --switch-knob-color: hsl(0,0%,100%); --switch-slider-color: hsl(0,0%,33%); @@ -96,4 +97,12 @@ --default-shadow: 0 16px 24px hsla(0,0%,0%,0.3), 0 6px 8px hsla(0,0%,0%,0.2); --code-font: Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace; + + // Subtract margins and title bar height unless using native titlebars + --content-full-height: calc(100vh - var(--app-card-top-margin) - var(--textarea-margin) - 22px); + // Placeholder selectors not supported yet inside :has() + &:has(#vencord-native-titlebar-style), + &:not(:has(.typeWindows__5fa63)) { + --content-full-height: calc(100vh - var(--app-card-top-margin) - var(--textarea-margin)); + } } diff --git a/Themes/Spotify-Discord/src/channels/_channels.scss b/Themes/Spotify-Discord/src/channels/_channels.scss index 8bd3ed464..d89696680 100644 --- a/Themes/Spotify-Discord/src/channels/_channels.scss +++ b/Themes/Spotify-Discord/src/channels/_channels.scss @@ -23,6 +23,13 @@ } } +// Placeholder selectors not supported yet inside :has() / :is() +body:not(:has(:is(.container_6sXIoE, #vc-spotify-player))) { + %channelsSidebar { + height: var(--content-full-height); + } +} + %channelLink { border-radius: var(--menu-item-radius); } diff --git a/Themes/Spotify-Discord/src/chat/_textarea.scss b/Themes/Spotify-Discord/src/chat/_textarea.scss index ba0a427c2..32d164cba 100644 --- a/Themes/Spotify-Discord/src/chat/_textarea.scss +++ b/Themes/Spotify-Discord/src/chat/_textarea.scss @@ -5,8 +5,6 @@ */ %chatForm { - --textarea-margin: calc( calc(var(--app-bar-size) - var(--main-textarea-min-height)) / 2 ); - position: relative; width: 100%; bottom: calc(var(--app-bar-size) * -1); diff --git a/Themes/Spotify-Discord/src/home/_friendsList.scss b/Themes/Spotify-Discord/src/home/_friendsList.scss index 6f32d2cea..cfa518229 100644 --- a/Themes/Spotify-Discord/src/home/_friendsList.scss +++ b/Themes/Spotify-Discord/src/home/_friendsList.scss @@ -7,6 +7,7 @@ */ %friends { + height: var(--content-full-height); background-color: var(--app-foreground); border-radius: var(--app-card-radius); } diff --git a/Themes/Spotify-Discord/src/home/_messageRequests.scss b/Themes/Spotify-Discord/src/home/_messageRequests.scss index fed0bd5af..45f1e9fe0 100644 --- a/Themes/Spotify-Discord/src/home/_messageRequests.scss +++ b/Themes/Spotify-Discord/src/home/_messageRequests.scss @@ -4,6 +4,10 @@ * */ +%messageRequestPage { + height: var(--content-full-height); +} + %messageRequestItem { &:hover, &%messageRequestItemSelected { diff --git a/Themes/Spotify-Discord/src/home/_nitro.scss b/Themes/Spotify-Discord/src/home/_nitro.scss index 7ea1a60e3..44e9e463c 100644 --- a/Themes/Spotify-Discord/src/home/_nitro.scss +++ b/Themes/Spotify-Discord/src/home/_nitro.scss @@ -5,6 +5,7 @@ */ %nitroHomePage { + height: var(--content-full-height); background-color: var(--app-foreground); border-radius: var(--app-card-radius); } diff --git a/Themes/Spotify-Discord/src/pages/_shop.scss b/Themes/Spotify-Discord/src/pages/_shop.scss index e56622164..6c505ad0d 100644 --- a/Themes/Spotify-Discord/src/pages/_shop.scss +++ b/Themes/Spotify-Discord/src/pages/_shop.scss @@ -6,6 +6,7 @@ %layer { %shopContainer { + height: var(--content-full-height); margin: var(--app-card-top-margin) var(--app-card-margin) var(--app-card-margin); border-radius: var(--app-card-radius); overflow: hidden; diff --git a/Themes/Spotify-Discord/src/servers/_servers.scss b/Themes/Spotify-Discord/src/servers/_servers.scss index 58fc0574e..eee4b714d 100644 --- a/Themes/Spotify-Discord/src/servers/_servers.scss +++ b/Themes/Spotify-Discord/src/servers/_servers.scss @@ -24,6 +24,13 @@ } } +// Placeholder selectors not supported yet inside :has() / :is() +body:not(:has(:is(.container_6sXIoE, #vc-spotify-player))) { + %guildsWrapper { + height: var(--content-full-height); + } +} + /* SERVERS LIST -> HOME BUTTON AND DMS */ %guildsHomeContainer { From 8ec07058b4ef7799a7ca764dc462aa5ab4585706 Mon Sep 17 00:00:00 2001 From: notSagyo Date: Tue, 23 Jan 2024 00:48:05 -0300 Subject: [PATCH 2/2] Build source.css --- Themes/Spotify-Discord/css/source.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Themes/Spotify-Discord/css/source.css b/Themes/Spotify-Discord/css/source.css index 17712d80b..d3ae0529a 100644 --- a/Themes/Spotify-Discord/css/source.css +++ b/Themes/Spotify-Discord/css/source.css @@ -74,7 +74,7 @@ --code-font: Consolas,Andale Mono WT,Andale Mono,Lucida Console,Lucida Sans Typewriter,DejaVu Sans Mono,Bitstream Vera Sans Mono,Liberation Mono,Nimbus Mono L,Monaco,Courier New,Courier,monospace; --content-full-height: calc(100vh - var(--app-card-top-margin) - var(--textarea-margin) - 22px); } -:root:has(#vencord-native-titlebar-style), :root:has(.typeWindows__5fa63) { +:root:has(#vencord-native-titlebar-style), :root:not(:has(.typeWindows__5fa63)) { --content-full-height: calc(100vh - var(--app-card-top-margin) - var(--textarea-margin)); }