shiran/discourse_theme_ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'
Discourse Theme / ci (push) Failing after 0s
Details

Browse Source
This commit is contained in:
shiran
2026-02-21 09:59:32 +08:00
parent d87e9a30d5 baf01610e4
commit 1fb6a7b5a1
3 changed files with 146 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scss/main.scss
+62
View File
@@ -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);
}
scss/self.scss
+21 -8
View File
@@ -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;
}
scss/topic-cards.scss
+63 -7
View File
@@ -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 {