diff --git a/Themes/Unity/dist/Unity.css b/Themes/Unity/dist/Unity.css index 9536b83..16c86ce 100644 --- a/Themes/Unity/dist/Unity.css +++ b/Themes/Unity/dist/Unity.css @@ -248,18 +248,24 @@ 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); 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, 0px)); - backdrop-filter: blur(var(--base-background-blur, 0px)); - /* 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); + -webkit-backdrop-filter: blur(var(--base-background-blur)); + backdrop-filter: blur(var(--base-background-blur)); + position: absolute; } [customTitlebar] .base__3e6af .content__4bf10 { border-top-left-radius: calc(var(--unity-border-radius) * var(--enable-gaps)) !important; @@ -348,10 +354,10 @@ body #app-mount .app_b1f720 .app_de4237 .bg__12180 { background-color: transparent; /* hide overflow so borders will actually be rounded */ } -:root.theme-dark:not(.custom-theme-background) [class*=platform] .sidebar_ded4b5 .scroller__4b984, -:root.theme-dark:not(.custom-theme-background) [class*=platform] .sidebar_ded4b5.hasNotice__1d477 .scroller__4b984 { +:root.theme-dark:not(.custom-theme-background) .scroller__4b984 { background: var(--sidebar-background-color, var(--background-secondary)); } + [class*=platform] .sidebar_ded4b5 > nav, [class*=platform] .sidebar_ded4b5.scrollerBase-_bVAAt, [class*=platform] .sidebar_ded4b5.hasNotice__1d477 > nav, [class*=platform] .sidebar_ded4b5.hasNotice__1d477.scrollerBase-_bVAAt { @@ -361,8 +367,8 @@ body #app-mount .app_b1f720 .app_de4237 .bg__12180 { background-repeat: no-repeat; background-blend-mode: multiply; border: calc(var(--sidebar-border-width, 0) * var(--enable-gaps)) solid var(--sidebar-border-color, transparent); - -webkit-backdrop-filter: blur(var(--sidebar-background-blur, 0px)); - backdrop-filter: blur(var(--sidebar-background-blur, 0px)); + -webkit-backdrop-filter: blur(var(--sidebar-background-blur)); + backdrop-filter: blur(var(--sidebar-background-blur)); border-radius: calc(var(--unity-border-radius) * var(--enable-gaps)); margin-bottom: calc(var(--unity-inset) * var(--enable-gaps)); } @@ -371,12 +377,14 @@ body #app-mount .app_b1f720 .app_de4237 .bg__12180 { :root[class*=full-motion] [class*=platform] .sidebar_ded4b5.hasNotice__1d477.scrollerBase-_bVAAt { transition: margin-bottom 2s cubic-bezier(0.5, 0.25, 0, 1), border-radius 2s cubic-bezier(0.09, 0.675, 0.185, 0.98), border-width 1s cubic-bezier(0.09, 0.675, 0.185, 0.98); } + :root.custom-theme-background [class*=platform] .sidebar_ded4b5 > nav, :root.custom-theme-background [class*=platform] .sidebar_ded4b5.scrollerBase-_bVAAt, :root.custom-theme-background [class*=platform] .sidebar_ded4b5.hasNotice__1d477 > nav, :root.custom-theme-background [class*=platform] .sidebar_ded4b5.hasNotice__1d477.scrollerBase-_bVAAt { background-blend-mode: normal; background: var(--bg-overlay-3, var(--sidebar-background-color, var(--background-secondary))); } + [class*=platform] .sidebar_ded4b5 > nav button.searchBarComponent__22760, [class*=platform] .sidebar_ded4b5.scrollerBase-_bVAAt button.searchBarComponent__22760, [class*=platform] .sidebar_ded4b5.hasNotice__1d477 > nav button.searchBarComponent__22760, [class*=platform] .sidebar_ded4b5.hasNotice__1d477.scrollerBase-_bVAAt button.searchBarComponent__22760 { @@ -403,6 +411,7 @@ body #app-mount .app_b1f720 .app_de4237 .bg__12180 { background-blend-mode: normal; background: var(--background-secondary); } + [class*=platform] .panels__58331 .container_ca50b9 { margin-bottom: 0; background: none; @@ -410,7 +419,7 @@ body #app-mount .app_b1f720 .app_de4237 .bg__12180 { [class*=platform] .panels__58331 .container_d667ff { background: transparent; } -:root.custom-theme-background [class*=platform] .panels__58331 .container_d667ff { +.custom-theme-background [class*=platform] .panels__58331 .container_d667ff { background-blend-mode: normal; background: var(--bg-overlay-3, var(--background-secondary-alt)); } diff --git a/Themes/Unity/dist/Unity.theme.css b/Themes/Unity/dist/Unity.theme.css index 81d6791..bb54b17 100644 --- a/Themes/Unity/dist/Unity.theme.css +++ b/Themes/Unity/dist/Unity.theme.css @@ -12,6 +12,9 @@ /* Please visit https://github.com/joshuah345/Discord-Stuff/wiki/Themes#unity for a variable guide. Some are omitted from this theme file as they are considered optional. */ +@import url("https://joshuah345.github.io/Discord-Stuff/Themes/Unity/Unity.css"); +@import url("https://joshuah345.github.io/Discord-Stuff/Themes/Unity/Fonts/SamsungOne/SamsungOne.css"); +@import url("https://joshuah345.github.io/Discord-Stuff/Themes/Unity/Fonts/SamsungSharpSans/SamsungSharpSans.css"); /* GLOBAL VARIABLES */ *[class*=theme-] { --unity-custom-font: unset; diff --git a/Themes/Unity/src/core/_root.scss b/Themes/Unity/src/core/_root.scss index 10e61d8..5da5fef 100644 --- a/Themes/Unity/src/core/_root.scss +++ b/Themes/Unity/src/core/_root.scss @@ -1,6 +1,10 @@ /* Please visit https://github.com/joshuah345/Discord-Stuff/wiki/Themes#unity for a variable guide. Some are omitted from this theme file as they are considered optional. */ + @import url("https://joshuah345.github.io/Discord-Stuff/Themes/Unity/Unity.css"); + @import url("https://joshuah345.github.io/Discord-Stuff/Themes/Unity/Fonts/SamsungOne/SamsungOne.css"); + @import url("https://joshuah345.github.io/Discord-Stuff/Themes/Unity/Fonts/SamsungSharpSans/SamsungSharpSans.css"); + /* GLOBAL VARIABLES */ *[class*="theme-"] { diff --git a/Themes/Unity/src/theme/app/_base.scss b/Themes/Unity/src/theme/app/_base.scss index 040c832..6a671a0 100644 --- a/Themes/Unity/src/theme/app/_base.scss +++ b/Themes/Unity/src/theme/app/_base.scss @@ -38,16 +38,23 @@ 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); opacity: var(--unity-opacity, 1); - 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, 0px)); - backdrop-filter: blur(var(--base-background-blur, 0px)); /* 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; + + } + [customTitlebar] & { border-top-left-radius: calc(var(--unity-border-radius) * var(--enable-gaps)) !important; } diff --git a/Themes/Unity/src/theme/sidebar/_index.scss b/Themes/Unity/src/theme/sidebar/_index.scss index ebe40df..6fddf69 100644 --- a/Themes/Unity/src/theme/sidebar/_index.scss +++ b/Themes/Unity/src/theme/sidebar/_index.scss @@ -14,13 +14,13 @@ /* hide overflow so borders will actually be rounded */ - :root.theme-dark:not(.custom-theme-background) & .scroller__4b984 { + @at-root :root.theme-dark:not(.custom-theme-background) .scroller__4b984 { background: var(--sidebar-background-color, var(--background-secondary)); } &>nav, &.scrollerBase-_bVAAt { - :root[class*="full-motion"] & { + @at-root :root[class*="full-motion"] & { transition: margin-bottom 2s keyframes.$cubic-bezier1, border-radius 2s keyframes.$cubic-bezier-launch, @@ -33,11 +33,11 @@ background-repeat: no-repeat; background-blend-mode: multiply; border: calc(var(--sidebar-border-width, 0) * var(--enable-gaps)) solid var(--sidebar-border-color, transparent); - backdrop-filter: blur(var(--sidebar-background-blur, 0px)); + backdrop-filter: blur(var(--sidebar-background-blur)); border-radius: calc(var(--unity-border-radius) * var(--enable-gaps)); margin-bottom: calc(var(--unity-inset) * var(--enable-gaps)); - :root.custom-theme-background & { + @at-root :root.custom-theme-background & { background-blend-mode: normal; background: var(--bg-overlay-3, var((--sidebar-background-color), var(--background-secondary))); } @@ -67,7 +67,7 @@ border-radius: calc(var(--unity-border-radius) - 8px) 0 0 calc(var(--unity-border-radius) - 8px); } - :root.custom-theme-background & { + @at-root :root.custom-theme-background & { background-blend-mode: normal; background: var(--background-secondary); } @@ -81,7 +81,7 @@ .container_d667ff { background: transparent; - :root.custom-theme-background & { + .custom-theme-background & { background-blend-mode: normal; background: var(--bg-overlay-3, var(--background-secondary-alt)); }