diff --git a/scss/main.scss b/scss/main.scss index 130f022..5a21448 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -2,6 +2,8 @@ :root { --main-grid-gap: 0.5em; + --dream-glow-a: rgb(var(--tertiary-rgb) / 0.24); + --dream-glow-b: rgb(var(--tertiary-rgb) / 0.18); } html:not(:has(.has-full-page-chat)) { @@ -14,12 +16,72 @@ html:not(:has(.has-full-page-chat)) { body { -webkit-font-smoothing: antialiased; + position: relative; @include viewport.until(sm) { background-color: var(--d-content-background); } } +body:not(.has-full-page-chat, .wizard)::before, +body:not(.has-full-page-chat, .wizard)::after { + content: ""; + position: fixed; + width: min(42vw, 32rem); + aspect-ratio: 1 / 1; + border-radius: 999px; + filter: blur(56px); + pointer-events: none; + z-index: 0; +} + +body:not(.has-full-page-chat, .wizard)::before { + top: 5rem; + left: -8rem; + background: radial-gradient(circle at 30% 30%, var(--dream-glow-a), transparent 62%); + animation: dreamy-float-a 18s ease-in-out infinite alternate; +} + +body:not(.has-full-page-chat, .wizard)::after { + right: -6rem; + bottom: 2rem; + background: radial-gradient(circle at 65% 35%, var(--dream-glow-b), transparent 58%); + animation: dreamy-float-b 22s ease-in-out infinite alternate; +} + +.d-header-wrap, +#main-outlet-wrapper, +.sidebar-wrapper, +.sidebar-hamburger-dropdown { + position: relative; + z-index: 1; +} + +@keyframes dreamy-float-a { + from { + transform: translate3d(0, 0, 0) scale(1); + } + to { + transform: translate3d(3rem, -1.5rem, 0) scale(1.08); + } +} + +@keyframes dreamy-float-b { + from { + transform: translate3d(0, 0, 0) scale(1); + } + to { + transform: translate3d(-2.5rem, 2rem, 0) scale(1.1); + } +} + +@media (prefers-reduced-motion: reduce) { + body:not(.has-full-page-chat, .wizard)::before, + body:not(.has-full-page-chat, .wizard)::after { + animation: none; + } +} + #main-outlet-wrapper { gap: var(--main-grid-gap); } diff --git a/scss/self.scss b/scss/self.scss index 9930ee9..bc68a08 100644 --- a/scss/self.scss +++ b/scss/self.scss @@ -11,6 +11,7 @@ .container.list-container{ position: relative; + isolation: isolate; } .container.list-container::before{ @@ -22,14 +23,26 @@ bottom: 0; width: 100%; height: 100%; - background-color: #fff9; + background: + linear-gradient( + 180deg, + rgb(var(--secondary-rgb) / 0.46) 0%, + rgb(var(--secondary-rgb) / 0.34) 100% + ); border-radius: var(--d-border-radius); - backdrop-filter: blur(10px); - box-shadow: #00000077 0 0 19px 0; + backdrop-filter: blur(8px); + box-shadow: rgb(0 0 0 / 28%) 0 10px 26px -16px; + pointer-events: none; + z-index: 0; +} + +.container.list-container > * { + position: relative; + z-index: 1; } .topic-list-header{ - background-color: unset; + background-color: transparent; } .list-controls, .search-container{ border-radius: var(--d-border-radius); @@ -41,7 +54,7 @@ } #list-area{ - background-color: unset !important; + background-color: transparent; } #main-outlet-wrapper{ @@ -49,9 +62,9 @@ } .regular.ember-view{ - background-color: #ffffffa8 !important; + background-color: rgb(var(--secondary-rgb) / 0.58); border-radius: var(--d-border-radius); - backdrop-filter: blur(16px); - box-shadow: #00000077 0 0 19px 0; + backdrop-filter: blur(10px); + box-shadow: rgb(0 0 0 / 24%) 0 10px 24px -14px; padding: 24px; } diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss index de96b7b..8541556 100644 --- a/scss/topic-cards.scss +++ b/scss/topic-cards.scss @@ -4,6 +4,17 @@ --d-border-radius-small: calc(var(--d-border-radius) * 0.5); } +@keyframes dreamy-card-shimmer { + from { + transform: translateX(-18%); + opacity: 0.35; + } + to { + transform: translateX(18%); + opacity: 0.65; + } +} + .topic-list .topic-list-item-separator { display: none; } @@ -68,7 +79,12 @@ .topic-list-body .topic-list-item { position: relative; - background: linear-gradient(45deg, var(--d-sidebar-active-background), #ffffff63); + background: + linear-gradient( + 135deg, + rgb(var(--secondary-rgb) / 0.96) 0%, + rgb(var(--tertiary-rgb) / 0.08) 100% + ); box-shadow: 0 10px 30px -18px rgb(10 18 35 / 38%), 0 6px 16px -10px var(--topic-card-shadow); @@ -83,8 +99,11 @@ grid-gap: var(--space-3); border-radius: var(--d-border-radius); cursor: pointer; + overflow: hidden; transition: - all 0.2s ease; + box-shadow 0.25s ease, + transform 0.25s ease, + background-color 0.25s ease; &::before { content: ""; @@ -92,10 +111,40 @@ inset: 0; border-radius: inherit; padding: 1px; + background: + radial-gradient( + 120% 100% at 0% 0%, + rgb(var(--tertiary-rgb) / 0.38), + transparent 56% + ), + radial-gradient( + 120% 90% at 100% 100%, + rgb(var(--tertiary-rgb) / 0.22), + transparent 58% + ); + -webkit-mask: + linear-gradient(#000 0 0) content-box, + linear-gradient(#000 0 0); + -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } + &::after { + content: ""; + position: absolute; + inset: -35% -20%; + background: linear-gradient( + 112deg, + transparent 30%, + rgb(var(--tertiary-rgb) / 0.16) 48%, + transparent 66% + ); + pointer-events: none; + mix-blend-mode: screen; + animation: dreamy-card-shimmer 9s ease-in-out infinite alternate; + } + &.has-replies { grid-template-areas: "creator title title title status" @@ -155,17 +204,24 @@ &:hover { .discourse-no-touch & { - background: var(--d-sidebar-active-background); - box-shadow: 4px 5px 3px 1px #0003, 0 8px 20px -10px var(--topic-card-shadow); - border-left: 5px solid var(--d-button-danger-icon-color); + background: + linear-gradient( + 135deg, + rgb(var(--secondary-rgb) / 0.99) 0%, + rgb(var(--tertiary-rgb) / 0.14) 100% + ); + box-shadow: + 0 16px 34px -18px rgb(10 18 35 / 45%), + 0 8px 20px -10px var(--topic-card-shadow); + transform: translateY(-2px); } } &.selected { box-shadow: 0 14px 32px -14px rgb(10 18 35 / 48%), - 0 0 0 2px oklch(from var(--accent-color) l calc(c * 0.45) h / 0.28), - 0 0 0 8px oklch(from var(--accent-color) l calc(c * 0.2) h / 0.14); + 0 0 0 2px rgb(var(--tertiary-rgb) / 0.28), + 0 0 0 8px rgb(var(--tertiary-rgb) / 0.14); } &.excerpt-expanded {