diff --git a/scss/main.scss b/scss/main.scss index 130f022..cf80bec 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -2,6 +2,9 @@ :root { --main-grid-gap: 0.5em; + --dream-glow-a: oklch(from var(--accent-color) calc(l * 1.08) calc(c * 0.45) h / 0.18); + --dream-glow-b: oklch(from var(--accent-color) calc(l * 1.2) calc(c * 0.35) calc(h + 26deg) / 0.14); + --dream-glow-c: oklch(from var(--accent-color) calc(l * 0.95) calc(c * 0.4) calc(h - 20deg) / 0.12); } html:not(:has(.has-full-page-chat)) { @@ -14,12 +17,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(48px); + 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 65%); + 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 62%); + 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/topic-cards.scss b/scss/topic-cards.scss index de96b7b..0ecc788 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, + oklch(from var(--d-content-background) calc(l * 0.995) c h) 0%, + oklch(from var(--d-content-background) calc(l * 1.02) calc(c * 0.65) h) 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%, + oklch(from var(--accent-color) calc(l * 1.15) calc(c * 0.5) h / 0.42), + transparent 56% + ), + radial-gradient( + 120% 90% at 100% 100%, + oklch(from var(--accent-color) calc(l * 1.08) calc(c * 0.42) calc(h + 18deg) / 0.28), + 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%, + oklch(from var(--accent-color) calc(l * 1.16) calc(c * 0.28) h / 0.1) 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,9 +204,11 @@ &: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: oklch(from var(--d-content-background) calc(l * 1.03) calc(c * 0.75) h); + box-shadow: + 0 16px 34px -18px rgb(10 18 35 / 45%), + 0 8px 20px -10px var(--topic-card-shadow); + transform: translateY(-2px); } }