diff --git a/Themes/Unity/Unity.css b/Themes/Unity/Unity.css index b5b8ee4..d67caf9 100644 --- a/Themes/Unity/Unity.css +++ b/Themes/Unity/Unity.css @@ -226,7 +226,10 @@ } } /* container for sidebar and chat) */ -:root.platform-osx .base__3e6af:before { +.base__3e6af { + border: calc(var(--base-border-width, 0) * var(--enable-gaps)) solid var(--base-border-color, transparent); +} +:root.platform-osx .base__3e6af::after { content: ""; width: 100vw; height: 30px; @@ -236,6 +239,23 @@ top: 0; right: 0; } +.base__3e6af::before { + content: ""; + width: 100%; + height: 100%; + background-image: var(--base-background-image); + background-blend-mode: multiply; + /* blends background color and image if set */ + background-size: cover; + background-position: center; + background-repeat: no-repeat; + -webkit-backdrop-filter: blur(var(--base-background-blur)); + backdrop-filter: blur(var(--base-background-blur)); + position: absolute; + z-index: 0; + border-radius: var(--unity-border-radius); + background-color: var(--bg-overlay-1, var(--base-background-color, var(--background-primary))); +} :root[class*=full-motion] .base__3e6af { transition: padding 1s cubic-bezier(0.09, 0.675, 0.185, 0.98); padding: calc(var(--unity-inset) * var(--enable-gaps)); @@ -254,29 +274,13 @@ .base__3e6af .content__4bf10 { padding: calc(var(--unity-inset) * var(--enable-gaps)); border-radius: calc(var(--unity-border-radius) + var(--unity-inset) * var(--enable-gaps)); - background-color: var(--bg-overlay-1, var(--base-background-color, var(--background-primary))); - border: calc(var(--base-border-width, 0) * var(--enable-gaps)) solid var(--base-border-color, transparent); + background-color: transparent; opacity: var(--unity-opacity, 1); /* disable tiling of image */ } :root[class*=full-motion] .base__3e6af .content__4bf10 { transition: padding 1s cubic-bezier(0.09, 0.675, 0.185, 0.98), border-radius 0.5s cubic-bezier(0.09, 0.675, 0.185, 0.98); } -.base__3e6af .content__4bf10::before { - content: ""; - width: 100%; - height: 100%; - background-image: var(--base-background-image); - background-blend-mode: multiply; - /* blends background color and image if set */ - background-size: cover; - background-position: center; - background-repeat: no-repeat; - -webkit-backdrop-filter: blur(var(--base-background-blur)); - backdrop-filter: blur(var(--base-background-blur)); - position: absolute; - z-index: 0; -} [customTitlebar] .base__3e6af .content__4bf10 { border-top-left-radius: calc(var(--unity-border-radius) * var(--enable-gaps)) !important; } @@ -538,8 +542,17 @@ nav.wrapper_a7e7a8 .scroller__3d071 { .form__13a2c .channelTextArea__2e60f .autocomplete_df266d { border-radius: var(--unity-border-radius); background-color: var(--unity-background-floating); - -webkit-backdrop-filter: blur(var(--unity-floating-blur-radius)); - backdrop-filter: blur(var(--unity-floating-blur-radius)); +} +.form__13a2c .channelTextArea__2e60f .autocomplete_df266d::before { + content: ""; + -webkit-backdrop-filter: blur(30px); + backdrop-filter: blur(30px); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; } .form__13a2c .channelTextArea__2e60f .autocomplete_df266d .rail_ad1aea .wrapper__4f229 { background: transparent; @@ -745,6 +758,26 @@ nav.wrapper_a7e7a8 .scroller__3d071 { min-width: none; } +@keyframes chat-blur { + 0% { + -webkit-backdrop-filter: blur(0); + backdrop-filter: blur(0); + } + 100% { + -webkit-backdrop-filter: blur(var(--chat-background-blur)); + backdrop-filter: blur(var(--chat-background-blur)); + } +} +@keyframes header-blur { + 0% { + -webkit-backdrop-filter: blur(0); + backdrop-filter: blur(0); + } + 100% { + -webkit-backdrop-filter: blur(var(--header-background-blur)); + backdrop-filter: blur(var(--header-background-blur)); + } +} .base__3e6af { /* HEADER */ } @@ -760,14 +793,22 @@ nav.wrapper_a7e7a8 .scroller__3d071 { .base__3e6af .container__11d72.themed_b152d4:not(:has(+ .chat_f9a759)) { border-radius: calc(var(--unity-border-radius) * var(--enable-gaps)) calc(var(--unity-border-radius) * var(--enable-gaps)); background-color: var(--header-background-color, var(--chat-background-color, var(--background-primary))); - -webkit-backdrop-filter: blur(var(--header-background-blur)); - backdrop-filter: blur(var(--header-background-blur)); } :root.full-motion .base__3e6af .title_b7d661, :root.full-motion .base__3e6af .subtitleContainer_f754d4, :root.full-motion .base__3e6af .container__11d72.themed_b152d4:not(:has(+ .chat_f9a759)) { transition: border-radius 2s cubic-bezier(0.5, 0.25, 0, 1); } +.base__3e6af .title_b7d661::after, +.base__3e6af .subtitleContainer_f754d4::after, +.base__3e6af .container__11d72.themed_b152d4:not(:has(+ .chat_f9a759))::after { + content: ""; + position: absolute; + top: 0; + left: 0; + -webkit-backdrop-filter: blur(var(--header-background-blur)); + backdrop-filter: blur(var(--header-background-blur)); +} .base__3e6af .title_b7d661 + *, .base__3e6af .title_b7d661 ~ .container__0eeef, .base__3e6af .subtitleContainer_f754d4 + *, .base__3e6af .subtitleContainer_f754d4 ~ .container__0eeef, @@ -804,7 +845,6 @@ nav.wrapper_a7e7a8 .scroller__3d071 { .base__3e6af :is(.chat__52833, .chat__52833.threadSidebarOpen_fa231d), .base__3e6af .container__5c7e7, .base__3e6af .container__10dc7 { - transition: margin-left 3s cubic-bezier(0.5, 0.25, 0, 1), border-radius 2s cubic-bezier(0.5, 0.25, 0, 1), opacity 1s cubic-bezier(0.5, 0.25, 0, 1); margin-left: calc(var(--unity-inset) / 2 * var(--enable-gaps)); border: calc(var(--chat-border-width, 0) * var(--enable-gaps)) solid var(--chat-border-color, transparent); opacity: var(--unity-opacity, 1); @@ -814,10 +854,30 @@ nav.wrapper_a7e7a8 .scroller__3d071 { background-size: cover; background-position: center; background-repeat: no-repeat; - -webkit-backdrop-filter: blur(var(--chat-background-blur, 0px)); - backdrop-filter: blur(var(--chat-background-blur, 0px)); overflow: hidden; } +:root.full-motion .base__3e6af .noChannel__7bbff, +:root.full-motion .base__3e6af .sidebar_ded4b5 + *, +:root.full-motion .base__3e6af :is(.chat__52833, .chat__52833.threadSidebarOpen_fa231d), +:root.full-motion .base__3e6af .container__5c7e7, +:root.full-motion .base__3e6af .container__10dc7 { + transition: margin-left 3s cubic-bezier(0.5, 0.25, 0, 1), border-radius 2s cubic-bezier(0.5, 0.25, 0, 1), opacity 1s cubic-bezier(0.5, 0.25, 0, 1); +} +.base__3e6af .noChannel__7bbff::before, +.base__3e6af .sidebar_ded4b5 + *::before, +.base__3e6af :is(.chat__52833, .chat__52833.threadSidebarOpen_fa231d)::before, +.base__3e6af .container__5c7e7::before, +.base__3e6af .container__10dc7::before { + content: ""; + -webkit-backdrop-filter: blur(var(--chat-background-blur)); + backdrop-filter: blur(var(--chat-background-blur)); + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + animation: chat-blur linear 1s forwards; +} .base__3e6af .noChannel__7bbff .tabBody_b3d268 .nowPlayingColumn_f5023f, .base__3e6af .sidebar_ded4b5 + * .tabBody_b3d268 .nowPlayingColumn_f5023f, .base__3e6af :is(.chat__52833, .chat__52833.threadSidebarOpen_fa231d) .tabBody_b3d268 .nowPlayingColumn_f5023f, diff --git a/Themes/Unity/dist/Unity.css b/Themes/Unity/dist/Unity.css index b5b8ee4..d67caf9 100644 --- a/Themes/Unity/dist/Unity.css +++ b/Themes/Unity/dist/Unity.css @@ -226,7 +226,10 @@ } } /* container for sidebar and chat) */ -:root.platform-osx .base__3e6af:before { +.base__3e6af { + border: calc(var(--base-border-width, 0) * var(--enable-gaps)) solid var(--base-border-color, transparent); +} +:root.platform-osx .base__3e6af::after { content: ""; width: 100vw; height: 30px; @@ -236,6 +239,23 @@ top: 0; right: 0; } +.base__3e6af::before { + content: ""; + width: 100%; + height: 100%; + background-image: var(--base-background-image); + background-blend-mode: multiply; + /* blends background color and image if set */ + background-size: cover; + background-position: center; + background-repeat: no-repeat; + -webkit-backdrop-filter: blur(var(--base-background-blur)); + backdrop-filter: blur(var(--base-background-blur)); + position: absolute; + z-index: 0; + border-radius: var(--unity-border-radius); + background-color: var(--bg-overlay-1, var(--base-background-color, var(--background-primary))); +} :root[class*=full-motion] .base__3e6af { transition: padding 1s cubic-bezier(0.09, 0.675, 0.185, 0.98); padding: calc(var(--unity-inset) * var(--enable-gaps)); @@ -254,29 +274,13 @@ .base__3e6af .content__4bf10 { padding: calc(var(--unity-inset) * var(--enable-gaps)); border-radius: calc(var(--unity-border-radius) + var(--unity-inset) * var(--enable-gaps)); - background-color: var(--bg-overlay-1, var(--base-background-color, var(--background-primary))); - border: calc(var(--base-border-width, 0) * var(--enable-gaps)) solid var(--base-border-color, transparent); + background-color: transparent; opacity: var(--unity-opacity, 1); /* disable tiling of image */ } :root[class*=full-motion] .base__3e6af .content__4bf10 { transition: padding 1s cubic-bezier(0.09, 0.675, 0.185, 0.98), border-radius 0.5s cubic-bezier(0.09, 0.675, 0.185, 0.98); } -.base__3e6af .content__4bf10::before { - content: ""; - width: 100%; - height: 100%; - background-image: var(--base-background-image); - background-blend-mode: multiply; - /* blends background color and image if set */ - background-size: cover; - background-position: center; - background-repeat: no-repeat; - -webkit-backdrop-filter: blur(var(--base-background-blur)); - backdrop-filter: blur(var(--base-background-blur)); - position: absolute; - z-index: 0; -} [customTitlebar] .base__3e6af .content__4bf10 { border-top-left-radius: calc(var(--unity-border-radius) * var(--enable-gaps)) !important; } @@ -538,8 +542,17 @@ nav.wrapper_a7e7a8 .scroller__3d071 { .form__13a2c .channelTextArea__2e60f .autocomplete_df266d { border-radius: var(--unity-border-radius); background-color: var(--unity-background-floating); - -webkit-backdrop-filter: blur(var(--unity-floating-blur-radius)); - backdrop-filter: blur(var(--unity-floating-blur-radius)); +} +.form__13a2c .channelTextArea__2e60f .autocomplete_df266d::before { + content: ""; + -webkit-backdrop-filter: blur(30px); + backdrop-filter: blur(30px); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; } .form__13a2c .channelTextArea__2e60f .autocomplete_df266d .rail_ad1aea .wrapper__4f229 { background: transparent; @@ -745,6 +758,26 @@ nav.wrapper_a7e7a8 .scroller__3d071 { min-width: none; } +@keyframes chat-blur { + 0% { + -webkit-backdrop-filter: blur(0); + backdrop-filter: blur(0); + } + 100% { + -webkit-backdrop-filter: blur(var(--chat-background-blur)); + backdrop-filter: blur(var(--chat-background-blur)); + } +} +@keyframes header-blur { + 0% { + -webkit-backdrop-filter: blur(0); + backdrop-filter: blur(0); + } + 100% { + -webkit-backdrop-filter: blur(var(--header-background-blur)); + backdrop-filter: blur(var(--header-background-blur)); + } +} .base__3e6af { /* HEADER */ } @@ -760,14 +793,22 @@ nav.wrapper_a7e7a8 .scroller__3d071 { .base__3e6af .container__11d72.themed_b152d4:not(:has(+ .chat_f9a759)) { border-radius: calc(var(--unity-border-radius) * var(--enable-gaps)) calc(var(--unity-border-radius) * var(--enable-gaps)); background-color: var(--header-background-color, var(--chat-background-color, var(--background-primary))); - -webkit-backdrop-filter: blur(var(--header-background-blur)); - backdrop-filter: blur(var(--header-background-blur)); } :root.full-motion .base__3e6af .title_b7d661, :root.full-motion .base__3e6af .subtitleContainer_f754d4, :root.full-motion .base__3e6af .container__11d72.themed_b152d4:not(:has(+ .chat_f9a759)) { transition: border-radius 2s cubic-bezier(0.5, 0.25, 0, 1); } +.base__3e6af .title_b7d661::after, +.base__3e6af .subtitleContainer_f754d4::after, +.base__3e6af .container__11d72.themed_b152d4:not(:has(+ .chat_f9a759))::after { + content: ""; + position: absolute; + top: 0; + left: 0; + -webkit-backdrop-filter: blur(var(--header-background-blur)); + backdrop-filter: blur(var(--header-background-blur)); +} .base__3e6af .title_b7d661 + *, .base__3e6af .title_b7d661 ~ .container__0eeef, .base__3e6af .subtitleContainer_f754d4 + *, .base__3e6af .subtitleContainer_f754d4 ~ .container__0eeef, @@ -804,7 +845,6 @@ nav.wrapper_a7e7a8 .scroller__3d071 { .base__3e6af :is(.chat__52833, .chat__52833.threadSidebarOpen_fa231d), .base__3e6af .container__5c7e7, .base__3e6af .container__10dc7 { - transition: margin-left 3s cubic-bezier(0.5, 0.25, 0, 1), border-radius 2s cubic-bezier(0.5, 0.25, 0, 1), opacity 1s cubic-bezier(0.5, 0.25, 0, 1); margin-left: calc(var(--unity-inset) / 2 * var(--enable-gaps)); border: calc(var(--chat-border-width, 0) * var(--enable-gaps)) solid var(--chat-border-color, transparent); opacity: var(--unity-opacity, 1); @@ -814,10 +854,30 @@ nav.wrapper_a7e7a8 .scroller__3d071 { background-size: cover; background-position: center; background-repeat: no-repeat; - -webkit-backdrop-filter: blur(var(--chat-background-blur, 0px)); - backdrop-filter: blur(var(--chat-background-blur, 0px)); overflow: hidden; } +:root.full-motion .base__3e6af .noChannel__7bbff, +:root.full-motion .base__3e6af .sidebar_ded4b5 + *, +:root.full-motion .base__3e6af :is(.chat__52833, .chat__52833.threadSidebarOpen_fa231d), +:root.full-motion .base__3e6af .container__5c7e7, +:root.full-motion .base__3e6af .container__10dc7 { + transition: margin-left 3s cubic-bezier(0.5, 0.25, 0, 1), border-radius 2s cubic-bezier(0.5, 0.25, 0, 1), opacity 1s cubic-bezier(0.5, 0.25, 0, 1); +} +.base__3e6af .noChannel__7bbff::before, +.base__3e6af .sidebar_ded4b5 + *::before, +.base__3e6af :is(.chat__52833, .chat__52833.threadSidebarOpen_fa231d)::before, +.base__3e6af .container__5c7e7::before, +.base__3e6af .container__10dc7::before { + content: ""; + -webkit-backdrop-filter: blur(var(--chat-background-blur)); + backdrop-filter: blur(var(--chat-background-blur)); + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + animation: chat-blur linear 1s forwards; +} .base__3e6af .noChannel__7bbff .tabBody_b3d268 .nowPlayingColumn_f5023f, .base__3e6af .sidebar_ded4b5 + * .tabBody_b3d268 .nowPlayingColumn_f5023f, .base__3e6af :is(.chat__52833, .chat__52833.threadSidebarOpen_fa231d) .tabBody_b3d268 .nowPlayingColumn_f5023f, diff --git a/Themes/Unity/src/theme/_keyframes.scss b/Themes/Unity/src/theme/_keyframes.scss index db6ff4f..4dd5e90 100644 --- a/Themes/Unity/src/theme/_keyframes.scss +++ b/Themes/Unity/src/theme/_keyframes.scss @@ -8,6 +8,14 @@ } } +@mixin blur-anim($name) { + @keyframes #{$name}-blur { + 0% { backdrop-filter:blur(0)} + 100% {backdrop-filter: blur(var(--#{$name}-background-blur))} + } +} + + $cubic-bezier1:cubic-bezier(0.5,0.25,0,1); $cubic-bezier-launch:cubic-bezier(0.090, 0.675, 0.185, 0.980); diff --git a/Themes/Unity/src/theme/app/_base.scss b/Themes/Unity/src/theme/app/_base.scss index 8898ba9..c7b4b46 100644 --- a/Themes/Unity/src/theme/app/_base.scss +++ b/Themes/Unity/src/theme/app/_base.scss @@ -2,7 +2,7 @@ /* container for sidebar and chat) */ .base__3e6af { - :root.platform-osx &:before { + :root.platform-osx &::after { content:""; width: 100vw; height:30px; @@ -13,6 +13,26 @@ right: 0; } +border: calc(var(--base-border-width, 0) * var(--enable-gaps)) solid var(--base-border-color, transparent); + +&::before{ + content:""; + width: 100%; + height: 100%; + background-image: var(--base-background-image); + background-blend-mode: multiply; + /* blends background color and image if set */ + background-size: cover; + background-position: center; + background-repeat: no-repeat; + backdrop-filter: blur(var(--base-background-blur)); + position: absolute; + z-index: 0; + border-radius: var(--unity-border-radius); + background-color: var(--bg-overlay-1, var(--base-background-color, var(--background-primary))); + +} + :root[class*="full-motion"] & { transition: padding 1s keyframes.$cubic-bezier-launch; @@ -45,26 +65,11 @@ padding: calc(var(--unity-inset) * var(--enable-gaps)); border-radius: calc(var(--unity-border-radius) + var(--unity-inset) * var(--enable-gaps)); - background-color: var(--bg-overlay-1, var(--base-background-color, var(--background-primary))); - border: calc(var(--base-border-width, 0) * var(--enable-gaps)) solid var(--base-border-color, transparent); + background-color: transparent; opacity: var(--unity-opacity, 1); /* disable tiling of image */ - &::before{ - content:""; - width: 100%; - height: 100%; - background-image: var(--base-background-image); - background-blend-mode: multiply; - /* blends background color and image if set */ - background-size: cover; - background-position: center; - background-repeat: no-repeat; - backdrop-filter: blur(var(--base-background-blur)); - position: absolute; - z-index: 0; - - } + [customTitlebar] & { border-top-left-radius: calc(var(--unity-border-radius) * var(--enable-gaps)) !important; diff --git a/Themes/Unity/src/theme/chat/_index.scss b/Themes/Unity/src/theme/chat/_index.scss index 787b351..e9121eb 100644 --- a/Themes/Unity/src/theme/chat/_index.scss +++ b/Themes/Unity/src/theme/chat/_index.scss @@ -5,6 +5,10 @@ @use '../keyframes'; @use './forums'; +@include keyframes.blur-anim(chat); +@include keyframes.blur-anim(header); + + .base__3e6af { @@ -29,7 +33,14 @@ border-radius: calc(var(--unity-border-radius) * var(--enable-gaps)) calc(var(--unity-border-radius) * var(--enable-gaps)); background-color: var(--header-background-color, var(--chat-background-color, var(--background-primary))); - backdrop-filter: blur(var(--header-background-blur)); + + &::after { + content: ""; + position: absolute; + top:0; + left: 0; + backdrop-filter: blur(var(--header-background-blur)); + } &+*, @@ -49,7 +60,6 @@ background-size: cover; background-position: center; background-repeat: no-repeat; - } &::before { @@ -71,10 +81,12 @@ .container__5c7e7, .container__10dc7 { + :root.full-motion & { transition: margin-left 3s keyframes.$cubic-bezier1, border-radius 2s keyframes.$cubic-bezier1, opacity 1s keyframes.$cubic-bezier1; + } margin-left: calc(var(--unity-inset) / 2 * var(--enable-gaps)); border: calc(var(--chat-border-width, 0) * var(--enable-gaps)) solid var(--chat-border-color, transparent); @@ -87,10 +99,18 @@ background-position: center; background-repeat: no-repeat; // disable tiling of image - -webkit-backdrop-filter: blur(var(--chat-background-blur, 0px)); - backdrop-filter: blur(var(--chat-background-blur, 0px)); overflow: hidden; - + + &::before { + content: ""; + backdrop-filter: blur(var(--chat-background-blur)); + width: 100%; + height: 100%; + position:absolute; + top: 0; + left:0; + animation: chat-blur linear 1s forwards; + } .tabBody_b3d268 { diff --git a/Themes/Unity/src/theme/chat/_textarea.scss b/Themes/Unity/src/theme/chat/_textarea.scss index caa1383..d28fd32 100644 --- a/Themes/Unity/src/theme/chat/_textarea.scss +++ b/Themes/Unity/src/theme/chat/_textarea.scss @@ -46,7 +46,16 @@ .autocomplete_df266d { border-radius: var(--unity-border-radius); background-color: var(--unity-background-floating); - backdrop-filter: blur(var(--unity-floating-blur-radius)); + &::before { + content:""; + backdrop-filter: blur(30px); + position:absolute; + top:0; + left:0; + width: 100%; + height: 100%; + z-index: -1; + } .rail_ad1aea { diff --git a/Themes/Unity/src/theme/plugins/_index.scss b/Themes/Unity/src/theme/plugins/_index.scss index 1ea090f..9390249 100644 --- a/Themes/Unity/src/theme/plugins/_index.scss +++ b/Themes/Unity/src/theme/plugins/_index.scss @@ -12,14 +12,15 @@ background-color: var(--unity-green-2); } - &.toast-danger, &.toast-error { - background-color: var(--unity-red); -} + &.toast-danger, + &.toast-error { + background-color: var(--unity-red); + } -&.toast-warning, -&.toast-warn { - background-color: var(--unity-orange); + &.toast-warning, + &.toast-warn { + background-color: var(--unity-orange); -} + } } \ No newline at end of file