This commit is contained in:
2026-05-08 21:46:11 +08:00
parent 94975e4735
commit e410f7974e
13 changed files with 757 additions and 426 deletions

View File

@@ -505,6 +505,59 @@ body {
),
radial-gradient(circle at right, rgba(255, 205, 178, 0.14), transparent 28%),
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 241, 246, 0.9));
--platform-recommend-runtime-fill: var(--platform-panel-fill);
--platform-recommend-runtime-border: rgba(232, 191, 205, 0.42);
--platform-recommend-runtime-shadow: 0 18px 44px rgba(215, 87, 134, 0.13),
inset 0 0 0 1px rgba(255, 255, 255, 0.58);
--platform-recommend-runtime-state-fill: radial-gradient(
circle at 50% 18%,
rgba(255, 91, 132, 0.12),
transparent 34%
),
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 249, 0.94));
--platform-recommend-runtime-state-text: var(--platform-text-strong);
--puzzle-runtime-shell-fill: var(--platform-body-fill);
--puzzle-runtime-stage-fill: radial-gradient(
circle at 50% 18%,
rgba(255, 91, 132, 0.13),
transparent 30%
),
radial-gradient(circle at 18% 82%, rgba(255, 138, 115, 0.13), transparent 28%),
linear-gradient(180deg, #fffefe 0%, #fff7fa 58%, #fff1f5 100%);
--puzzle-runtime-grid-line: rgba(130, 75, 95, 0.06);
--puzzle-runtime-text-strong: var(--platform-text-strong);
--puzzle-runtime-text-base: var(--platform-text-base);
--puzzle-runtime-text-soft: var(--platform-text-soft);
--puzzle-runtime-surface-fill: rgba(255, 255, 255, 0.76);
--puzzle-runtime-surface-fill-strong: rgba(255, 255, 255, 0.9);
--puzzle-runtime-surface-border: rgba(232, 191, 205, 0.48);
--puzzle-runtime-board-fill: rgba(255, 255, 255, 0.68);
--puzzle-runtime-board-border: rgba(255, 126, 154, 0.28);
--puzzle-runtime-board-shadow: 0 30px 80px rgba(215, 87, 134, 0.14);
--puzzle-runtime-piece-fill: rgba(255, 255, 255, 0.74);
--puzzle-runtime-piece-border: rgba(232, 191, 205, 0.54);
--puzzle-runtime-piece-empty-fill: rgba(255, 228, 236, 0.34);
--puzzle-runtime-piece-empty-text: rgba(92, 70, 80, 0.38);
--puzzle-runtime-piece-selected-fill: linear-gradient(135deg, #ff4f8b, #ff8a73);
--puzzle-runtime-piece-selected-text: #fff7fb;
--puzzle-runtime-piece-selected-border: rgba(255, 79, 139, 0.68);
--puzzle-runtime-piece-overlay: rgba(61, 24, 38, 0.06);
--puzzle-runtime-control-fill: rgba(255, 255, 255, 0.72);
--puzzle-runtime-control-hover-fill: rgba(255, 91, 132, 0.1);
--puzzle-runtime-primary-fill: var(--platform-button-primary-fill);
--puzzle-runtime-primary-text: var(--platform-button-primary-text);
--puzzle-runtime-primary-shadow: var(--platform-profile-action-shadow);
--puzzle-runtime-accent-text: var(--platform-cool-text);
--puzzle-runtime-cool-text: #0f8fa9;
--puzzle-runtime-danger-fill: rgba(255, 228, 233, 0.9);
--puzzle-runtime-danger-text: #c2415d;
--puzzle-runtime-backdrop-fill: rgba(43, 20, 32, 0.34);
--puzzle-runtime-dialog-fill: var(--platform-modal-fill);
--puzzle-runtime-dialog-border: var(--platform-modal-border);
--puzzle-runtime-table-fill: rgba(255, 255, 255, 0.62);
--puzzle-runtime-table-row-fill: rgba(255, 91, 132, 0.12);
--puzzle-runtime-next-card-fill: rgba(255, 255, 255, 0.66);
--puzzle-runtime-next-card-hover-fill: rgba(255, 91, 132, 0.1);
}
.platform-theme--dark {
@@ -684,6 +737,54 @@ body {
),
radial-gradient(circle at right, rgba(255, 205, 178, 0.14), transparent 28%),
linear-gradient(180deg, rgba(8, 10, 14, 0.22), rgba(8, 10, 14, 0.9));
--platform-recommend-runtime-fill: #030303;
--platform-recommend-runtime-border: rgba(255, 255, 255, 0.08);
--platform-recommend-runtime-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025),
0 18px 44px rgba(0, 0, 0, 0.18);
--platform-recommend-runtime-state-fill: #030303;
--platform-recommend-runtime-state-text: rgba(255, 255, 255, 0.92);
--puzzle-runtime-shell-fill: #020617;
--puzzle-runtime-stage-fill: radial-gradient(
circle at 50% 20%,
rgba(251, 191, 36, 0.18),
transparent 28%
),
radial-gradient(circle at 20% 80%, rgba(249, 115, 22, 0.16), transparent 26%),
linear-gradient(180deg, #2d160e, #020617);
--puzzle-runtime-grid-line: rgba(255, 255, 255, 0.04);
--puzzle-runtime-text-strong: #ffffff;
--puzzle-runtime-text-base: rgba(255, 255, 255, 0.82);
--puzzle-runtime-text-soft: rgba(255, 255, 255, 0.58);
--puzzle-runtime-surface-fill: rgba(0, 0, 0, 0.34);
--puzzle-runtime-surface-fill-strong: rgba(0, 0, 0, 0.5);
--puzzle-runtime-surface-border: rgba(255, 255, 255, 0.12);
--puzzle-runtime-board-fill: rgba(255, 255, 255, 0.08);
--puzzle-runtime-board-border: rgba(255, 255, 255, 0.16);
--puzzle-runtime-board-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
--puzzle-runtime-piece-fill: rgba(255, 255, 255, 0.12);
--puzzle-runtime-piece-border: rgba(255, 255, 255, 0.22);
--puzzle-runtime-piece-empty-fill: rgba(0, 0, 0, 0.18);
--puzzle-runtime-piece-empty-text: rgba(255, 255, 255, 0.2);
--puzzle-runtime-piece-selected-fill: rgba(251, 191, 36, 0.84);
--puzzle-runtime-piece-selected-text: #020617;
--puzzle-runtime-piece-selected-border: rgba(253, 230, 138, 1);
--puzzle-runtime-piece-overlay: rgba(0, 0, 0, 0.1);
--puzzle-runtime-control-fill: rgba(0, 0, 0, 0.36);
--puzzle-runtime-control-hover-fill: rgba(255, 255, 255, 0.1);
--puzzle-runtime-primary-fill: #fde68a;
--puzzle-runtime-primary-text: #020617;
--puzzle-runtime-primary-shadow: 0 14px 36px rgba(251, 191, 36, 0.26);
--puzzle-runtime-accent-text: #fde68a;
--puzzle-runtime-cool-text: #cffafe;
--puzzle-runtime-danger-fill: rgba(239, 68, 68, 0.2);
--puzzle-runtime-danger-text: #fee2e2;
--puzzle-runtime-backdrop-fill: rgba(2, 6, 23, 0.68);
--puzzle-runtime-dialog-fill: rgba(2, 6, 23, 0.94);
--puzzle-runtime-dialog-border: rgba(255, 255, 255, 0.14);
--puzzle-runtime-table-fill: rgba(255, 255, 255, 0.06);
--puzzle-runtime-table-row-fill: rgba(251, 191, 36, 0.14);
--puzzle-runtime-next-card-fill: rgba(255, 255, 255, 0.06);
--puzzle-runtime-next-card-hover-fill: rgba(251, 191, 36, 0.1);
}
.platform-brand-logo {
@@ -1907,6 +2008,205 @@ body {
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.puzzle-runtime-shell {
background: var(--puzzle-runtime-shell-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-stage {
background: var(--puzzle-runtime-stage-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-stage__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--puzzle-runtime-grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--puzzle-runtime-grid-line) 1px, transparent 1px);
background-size: 34px 34px;
opacity: 0.8;
}
.puzzle-runtime-pill,
.puzzle-runtime-icon-button,
.puzzle-runtime-header-card,
.puzzle-runtime-toolbar {
border: 1px solid var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-surface-fill);
color: var(--puzzle-runtime-text-strong);
backdrop-filter: blur(14px);
}
.puzzle-runtime-icon-button {
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-header-card {
background: var(--puzzle-runtime-surface-fill-strong);
}
.puzzle-runtime-level-badge {
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-accent-text);
}
.puzzle-runtime-timer {
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-timer--urgent {
background: var(--puzzle-runtime-danger-fill);
color: var(--puzzle-runtime-danger-text);
}
.puzzle-runtime-board {
border-color: var(--puzzle-runtime-board-border);
background: var(--puzzle-runtime-board-fill);
box-shadow: var(--puzzle-runtime-board-shadow);
}
.puzzle-runtime-piece {
border-color: var(--puzzle-runtime-piece-border);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-piece--selected {
border-color: var(--puzzle-runtime-piece-selected-border);
background: var(--puzzle-runtime-piece-selected-fill);
color: var(--puzzle-runtime-piece-selected-text);
box-shadow: var(--puzzle-runtime-primary-shadow);
}
.puzzle-runtime-piece--merged {
border-color: transparent;
background: transparent;
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-piece--filled {
background: var(--puzzle-runtime-piece-fill);
}
.puzzle-runtime-piece--empty {
border-color: var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-piece-empty-fill);
color: var(--puzzle-runtime-piece-empty-text);
}
.puzzle-runtime-piece-overlay {
background: var(--puzzle-runtime-piece-overlay);
}
.puzzle-runtime-primary-button {
border: 1px solid var(--platform-button-primary-border);
background: var(--puzzle-runtime-primary-fill);
color: var(--puzzle-runtime-primary-text);
box-shadow: var(--puzzle-runtime-primary-shadow);
}
.puzzle-runtime-tool-button {
color: var(--puzzle-runtime-text-base);
}
.puzzle-runtime-tool-button:hover {
background: var(--puzzle-runtime-control-hover-fill);
}
.puzzle-runtime-tool-button--active {
background: var(--platform-button-primary-fill);
color: var(--platform-button-primary-text);
}
.puzzle-runtime-tool-button__warm {
color: var(--puzzle-runtime-accent-text);
}
.puzzle-runtime-tool-button__cool {
color: var(--puzzle-runtime-cool-text);
}
.puzzle-runtime-status-chip {
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-text-soft);
backdrop-filter: blur(12px);
}
.puzzle-runtime-error-chip {
background: var(--puzzle-runtime-danger-fill);
color: var(--puzzle-runtime-danger-text);
}
.puzzle-runtime-modal-overlay {
background: var(--puzzle-runtime-backdrop-fill);
}
.puzzle-runtime-dialog {
border: 1px solid var(--puzzle-runtime-dialog-border);
background: var(--puzzle-runtime-dialog-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-dialog__line {
border-color: var(--puzzle-runtime-surface-border);
}
.puzzle-runtime-dialog__soft {
color: var(--puzzle-runtime-text-soft);
}
.puzzle-runtime-dialog__body {
color: var(--puzzle-runtime-text-base);
}
.puzzle-runtime-secondary-button {
border: 1px solid var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-stat-card,
.puzzle-runtime-settings-card {
border: 1px solid var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-table-fill);
}
.puzzle-runtime-leaderboard-head {
background: var(--puzzle-runtime-table-fill);
color: var(--puzzle-runtime-text-soft);
}
.puzzle-runtime-leaderboard-row {
border-color: var(--puzzle-runtime-surface-border);
color: var(--puzzle-runtime-text-base);
}
.puzzle-runtime-leaderboard-row--active {
background: var(--puzzle-runtime-table-row-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-next-card {
border: 1px solid var(--puzzle-runtime-surface-border);
background: var(--puzzle-runtime-next-card-fill);
color: var(--puzzle-runtime-text-strong);
}
.puzzle-runtime-next-card:hover {
border-color: var(--platform-button-primary-border);
background: var(--puzzle-runtime-next-card-hover-fill);
}
.puzzle-runtime-next-card__media {
background: var(--puzzle-runtime-control-fill);
}
.puzzle-runtime-next-card__tag {
background: var(--puzzle-runtime-control-fill);
color: var(--puzzle-runtime-text-soft);
}
@media (max-width: 639px) {
:root {
--platform-bottom-nav-height: 3.85rem;
@@ -2095,7 +2395,7 @@ body {
height: 100%;
min-height: 0;
flex-direction: column;
gap: 0.55rem;
gap: 0.28rem;
border: 0;
border-radius: 0;
background: transparent;
@@ -2109,12 +2409,10 @@ body {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--platform-recommend-runtime-border);
border-radius: 1.65rem;
background: #030303;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.025),
0 18px 44px rgba(0, 0, 0, 0.18);
background: var(--platform-recommend-runtime-fill);
box-shadow: var(--platform-recommend-runtime-shadow);
}
.platform-recommend-runtime-viewport {
@@ -2122,7 +2420,7 @@ body {
inset: 0;
min-width: 0;
overflow: hidden;
background: #030303;
background: var(--platform-recommend-runtime-fill);
}
.platform-recommend-runtime-state {
@@ -2132,8 +2430,8 @@ body {
width: 100%;
border: 0;
place-items: center;
background: #030303;
color: rgba(255, 255, 255, 0.92);
background: var(--platform-recommend-runtime-state-fill);
color: var(--platform-recommend-runtime-state-text);
font-size: clamp(1.8rem, 10vw, 2.45rem);
font-weight: 950;
letter-spacing: 0;
@@ -2148,6 +2446,8 @@ body {
flex: 0 0 auto;
min-width: 0;
color: var(--platform-text-strong);
touch-action: pan-y;
user-select: none;
}
.platform-recommend-work-meta__stats {
@@ -2170,7 +2470,7 @@ body {
}
.platform-recommend-work-meta__row {
margin-top: 0.55rem;
margin-top: 0.36rem;
display: flex;
min-width: 0;
align-items: center;
@@ -2184,9 +2484,6 @@ body {
flex: 1 1 auto;
align-items: center;
gap: 0.55rem;
border: 0;
background: transparent;
padding: 0;
color: inherit;
text-align: left;
}
@@ -2231,107 +2528,6 @@ body {
color: var(--platform-text-soft);
}
.platform-recommend-work-meta__detail-button {
display: inline-flex;
width: 2.35rem;
height: 2.35rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border: 1px solid var(--platform-surface-border);
border-radius: 9999px;
background: var(--platform-button-secondary-fill);
color: var(--platform-text-strong);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.platform-recommend-switcher {
display: flex;
flex: 0 0 auto;
min-width: 0;
gap: 0.55rem;
margin-right: -0.25rem;
overflow-x: auto;
overscroll-behavior-x: contain;
padding: 0.05rem 0.25rem 0.2rem 0;
scroll-snap-type: x mandatory;
scrollbar-width: none;
touch-action: pan-x;
-webkit-overflow-scrolling: touch;
}
.platform-recommend-switcher::-webkit-scrollbar {
display: none;
}
.platform-recommend-switch-card {
display: grid;
width: min(9.1rem, 42vw);
min-height: 4.25rem;
flex: 0 0 auto;
scroll-snap-align: start;
gap: 0.18rem;
border: 1px solid color-mix(in srgb, var(--platform-surface-border) 72%, transparent);
border-radius: 1.05rem;
background: color-mix(in srgb, var(--platform-panel-fill) 90%, #050505);
padding: 0.58rem 0.65rem;
color: var(--platform-text-strong);
text-align: left;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.platform-recommend-switch-card--active {
border-color: color-mix(
in srgb,
var(--platform-warm-text) 72%,
var(--platform-surface-border)
);
background: color-mix(
in srgb,
var(--platform-button-secondary-fill) 84%,
#151515
);
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.16),
inset 0 0 0 1px color-mix(in srgb, var(--platform-warm-text) 42%, transparent);
}
.platform-recommend-switch-card__kind {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.64rem;
font-weight: 850;
color: var(--platform-text-soft);
}
.platform-recommend-switch-card__title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.88rem;
font-weight: 950;
line-height: 1.15;
}
.platform-recommend-switch-card__stats {
display: flex;
min-width: 0;
gap: 0.55rem;
font-size: 0.68rem;
font-weight: 850;
color: var(--platform-text-base);
}
.platform-recommend-switch-card__stats span {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 0.18rem;
}
.platform-mobile-home-stage .platform-desktop-search {
border-radius: 9999px;
padding: 0.64rem 0.9rem;