style: align UI palette with Taonier visuals
This commit is contained in:
kdletters
374
src/index.css
374
src/index.css
@@ -35,7 +35,7 @@
|
||||
--platform-bottom-nav-label-tracking: 0.18em;
|
||||
--platform-bottom-nav-content-gap: 0.22rem;
|
||||
--platform-bottom-nav-active-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||||
0 8px 18px rgba(255, 91, 132, 0.1);
|
||||
0 8px 18px rgba(182, 98, 63, 0.1);
|
||||
}
|
||||
|
||||
html,
|
||||
@@ -485,272 +485,277 @@ body {
|
||||
|
||||
.platform-theme--light {
|
||||
color-scheme: light;
|
||||
--platform-accent: #c7653d;
|
||||
--platform-body-fill: radial-gradient(
|
||||
circle at top left,
|
||||
rgba(255, 196, 214, 0.14),
|
||||
transparent 24%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 88% 4%,
|
||||
rgba(255, 222, 196, 0.12),
|
||||
transparent 20%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at bottom,
|
||||
rgba(255, 214, 225, 0.08),
|
||||
circle at 8% 0%,
|
||||
rgba(240, 203, 169, 0.24),
|
||||
transparent 26%
|
||||
),
|
||||
linear-gradient(180deg, #fffdfd 0%, #fffefe 50%, #fff8fa 100%);
|
||||
--platform-panel-shadow: 0 22px 60px rgba(215, 87, 134, 0.12),
|
||||
0 8px 20px rgba(255, 255, 255, 0.82);
|
||||
radial-gradient(
|
||||
circle at 92% 8%,
|
||||
rgba(226, 171, 134, 0.2),
|
||||
transparent 22%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 54% 100%,
|
||||
rgba(204, 117, 76, 0.08),
|
||||
transparent 30%
|
||||
),
|
||||
linear-gradient(180deg, #fffdf9 0%, #fdf9f5 54%, #f8efe7 100%);
|
||||
--platform-panel-shadow: 0 22px 60px rgba(112, 57, 30, 0.1),
|
||||
0 8px 22px rgba(255, 255, 255, 0.82);
|
||||
--platform-panel-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.985),
|
||||
rgba(255, 250, 251, 0.96)
|
||||
rgba(253, 248, 243, 0.96)
|
||||
);
|
||||
--platform-panel-fill-soft: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.95),
|
||||
rgba(255, 248, 250, 0.88)
|
||||
rgba(255, 254, 252, 0.96),
|
||||
rgba(250, 243, 236, 0.9)
|
||||
);
|
||||
--platform-hero-fill: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 139, 162, 0.9),
|
||||
rgba(255, 184, 153, 0.88)
|
||||
rgba(244, 226, 211, 0.96),
|
||||
rgba(238, 208, 183, 0.9)
|
||||
);
|
||||
--platform-hero-glow-a: rgba(255, 255, 255, 0.22);
|
||||
--platform-hero-glow-b: rgba(255, 228, 211, 0.2);
|
||||
--platform-hero-glow-a: rgba(255, 255, 255, 0.42);
|
||||
--platform-hero-glow-b: rgba(228, 149, 91, 0.18);
|
||||
--platform-hero-overlay-strong: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 146, 170, 0.78),
|
||||
rgba(255, 201, 171, 0.72)
|
||||
rgba(238, 208, 183, 0.66),
|
||||
rgba(204, 117, 76, 0.18)
|
||||
);
|
||||
--platform-hero-overlay-soft: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.1),
|
||||
rgba(255, 246, 249, 0.26)
|
||||
rgba(255, 255, 255, 0.34),
|
||||
rgba(248, 233, 219, 0.22)
|
||||
);
|
||||
--platform-surface-border: rgba(239, 221, 228, 0.9);
|
||||
--platform-surface-hover-border: rgba(255, 154, 188, 0.58);
|
||||
--platform-shell-glow-1: rgba(255, 255, 255, 0.2);
|
||||
--platform-shell-glow-2: rgba(255, 220, 229, 0.18);
|
||||
--platform-shell-glow-3: rgba(255, 221, 194, 0.14);
|
||||
--platform-surface-glow-a: rgba(255, 213, 225, 0.14);
|
||||
--platform-surface-glow-b: rgba(255, 224, 201, 0.12);
|
||||
--platform-text-strong: #28151d;
|
||||
--platform-text-base: #5c4650;
|
||||
--platform-text-soft: #886f79;
|
||||
--platform-brand-logo-title: #3b1a24;
|
||||
--platform-brand-logo-subtitle: #d93570;
|
||||
--platform-brand-logo-shadow: #8f5870;
|
||||
--platform-line-soft: rgba(236, 214, 221, 0.72);
|
||||
--platform-surface-border: rgba(226, 203, 184, 0.88);
|
||||
--platform-surface-hover-border: rgba(204, 117, 76, 0.42);
|
||||
--platform-shell-glow-1: rgba(255, 255, 255, 0.34);
|
||||
--platform-shell-glow-2: rgba(238, 208, 183, 0.22);
|
||||
--platform-shell-glow-3: rgba(210, 132, 93, 0.12);
|
||||
--platform-surface-glow-a: rgba(240, 203, 169, 0.18);
|
||||
--platform-surface-glow-b: rgba(204, 117, 76, 0.1);
|
||||
--platform-text-strong: #3d1f10;
|
||||
--platform-text-base: #6f5848;
|
||||
--platform-text-soft: #988476;
|
||||
--platform-text-muted: #a38f80;
|
||||
--platform-brand-logo-title: #4a220f;
|
||||
--platform-brand-logo-subtitle: #c7653d;
|
||||
--platform-brand-logo-shadow: #caa48b;
|
||||
--platform-line-soft: rgba(226, 203, 184, 0.72);
|
||||
--platform-subpanel-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.94),
|
||||
rgba(255, 250, 251, 0.9)
|
||||
rgba(255, 254, 252, 0.94),
|
||||
rgba(250, 243, 236, 0.9)
|
||||
);
|
||||
--platform-subpanel-border: rgba(233, 217, 223, 0.82);
|
||||
--platform-warm-border: rgba(255, 140, 116, 0.28);
|
||||
--platform-warm-bg: rgba(255, 140, 116, 0.14);
|
||||
--platform-warm-text: #cf4f4e;
|
||||
--platform-cool-border: rgba(255, 83, 142, 0.24);
|
||||
--platform-cool-bg: rgba(255, 83, 142, 0.14);
|
||||
--platform-cool-text: #d93570;
|
||||
--platform-neutral-border: rgba(232, 191, 205, 0.44);
|
||||
--platform-neutral-bg: rgba(255, 255, 255, 0.68);
|
||||
--platform-neutral-text: #715662;
|
||||
--platform-button-primary-border: rgba(255, 101, 147, 0.3);
|
||||
--platform-button-primary-fill: linear-gradient(135deg, #ff4f8b, #ff8a73);
|
||||
--platform-button-primary-text: #fff7fb;
|
||||
--platform-button-secondary-fill: rgba(255, 255, 255, 0.72);
|
||||
--platform-button-secondary-text: #4b3340;
|
||||
--platform-button-ghost-fill: rgba(255, 255, 255, 0.52);
|
||||
--platform-button-ghost-text: #6e5460;
|
||||
--platform-button-danger-border: rgba(251, 113, 133, 0.22);
|
||||
--platform-button-danger-fill: rgba(255, 228, 233, 0.94);
|
||||
--platform-button-danger-text: #c2415d;
|
||||
--platform-success-border: rgba(52, 211, 153, 0.24);
|
||||
--platform-success-bg: rgba(236, 253, 245, 0.92);
|
||||
--platform-success-text: #0f8a61;
|
||||
--platform-icon-fill: rgba(255, 255, 255, 0.62);
|
||||
--platform-icon-border: rgba(232, 191, 205, 0.46);
|
||||
--platform-icon-text: #7a5d67;
|
||||
--platform-subpanel-border: rgba(225, 204, 187, 0.82);
|
||||
--platform-warm-border: rgba(204, 117, 76, 0.28);
|
||||
--platform-warm-bg: rgba(234, 204, 179, 0.32);
|
||||
--platform-warm-text: #b6623f;
|
||||
--platform-cool-border: rgba(199, 117, 76, 0.24);
|
||||
--platform-cool-bg: rgba(238, 208, 183, 0.26);
|
||||
--platform-cool-text: #b76038;
|
||||
--platform-neutral-border: rgba(226, 203, 184, 0.44);
|
||||
--platform-neutral-bg: rgba(255, 253, 250, 0.7);
|
||||
--platform-neutral-text: #7b6150;
|
||||
--platform-button-primary-border: rgba(182, 98, 63, 0.32);
|
||||
--platform-button-primary-solid: #c7653d;
|
||||
--platform-button-primary-fill: linear-gradient(135deg, #df7f40, #b95d3a);
|
||||
--platform-button-primary-text: #fffaf5;
|
||||
--platform-button-secondary-fill: rgba(255, 253, 250, 0.78);
|
||||
--platform-button-secondary-text: #4b2412;
|
||||
--platform-button-ghost-fill: rgba(255, 253, 250, 0.56);
|
||||
--platform-button-ghost-text: #755a49;
|
||||
--platform-button-danger-border: rgba(185, 75, 58, 0.22);
|
||||
--platform-button-danger-fill: rgba(255, 237, 229, 0.94);
|
||||
--platform-button-danger-text: #a6402f;
|
||||
--platform-success-border: rgba(73, 144, 96, 0.24);
|
||||
--platform-success-bg: rgba(237, 248, 239, 0.92);
|
||||
--platform-success-text: #2f7b46;
|
||||
--platform-icon-fill: rgba(255, 253, 250, 0.68);
|
||||
--platform-icon-border: rgba(226, 203, 184, 0.5);
|
||||
--platform-icon-text: #7b5c49;
|
||||
--platform-nav-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.96),
|
||||
rgba(255, 249, 250, 0.92)
|
||||
rgba(255, 254, 252, 0.96),
|
||||
rgba(250, 243, 236, 0.92)
|
||||
);
|
||||
--platform-nav-active-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 91, 132, 0.16),
|
||||
rgba(255, 151, 116, 0.16)
|
||||
rgba(238, 208, 183, 0.48),
|
||||
rgba(204, 117, 76, 0.16)
|
||||
);
|
||||
--platform-nav-active-border: rgba(255, 126, 154, 0.32);
|
||||
--platform-nav-active-shadow: 0 10px 22px rgba(255, 91, 132, 0.12);
|
||||
--platform-nav-active-border: rgba(204, 117, 76, 0.34);
|
||||
--platform-nav-active-shadow: 0 10px 24px rgba(182, 98, 63, 0.12);
|
||||
--platform-modal-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.96),
|
||||
rgba(255, 245, 248, 0.95)
|
||||
rgba(255, 254, 252, 0.97),
|
||||
rgba(250, 243, 236, 0.95)
|
||||
);
|
||||
--platform-modal-border: rgba(255, 255, 255, 0.52);
|
||||
--platform-modal-border: rgba(255, 255, 255, 0.58);
|
||||
--platform-desktop-shell-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.99),
|
||||
rgba(255, 251, 252, 0.985)
|
||||
rgba(253, 249, 245, 0.985)
|
||||
);
|
||||
--platform-desktop-shell-border: rgba(240, 228, 232, 0.94);
|
||||
--platform-desktop-shell-inner-border: rgba(241, 230, 234, 0.92);
|
||||
--platform-desktop-shell-border: rgba(230, 213, 199, 0.94);
|
||||
--platform-desktop-shell-inner-border: rgba(233, 218, 205, 0.92);
|
||||
--platform-desktop-topbar-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.95),
|
||||
rgba(255, 251, 252, 0.92)
|
||||
rgba(253, 249, 245, 0.92)
|
||||
);
|
||||
--platform-desktop-panel-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.95),
|
||||
rgba(255, 250, 251, 0.91)
|
||||
rgba(255, 254, 252, 0.95),
|
||||
rgba(250, 243, 236, 0.91)
|
||||
);
|
||||
--platform-desktop-panel-border: rgba(238, 223, 228, 0.88);
|
||||
--platform-desktop-hover-shadow: 0 16px 28px rgba(222, 82, 124, 0.12);
|
||||
--platform-desktop-panel-border: rgba(226, 203, 184, 0.88);
|
||||
--platform-desktop-hover-shadow: 0 16px 30px rgba(112, 57, 30, 0.12);
|
||||
--platform-overlay-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 184, 204, 0.14),
|
||||
rgba(255, 255, 255, 0.56)
|
||||
rgba(240, 203, 169, 0.14),
|
||||
rgba(255, 255, 255, 0.58)
|
||||
);
|
||||
--platform-track-border: rgba(234, 193, 208, 0.46);
|
||||
--platform-track-fill: rgba(255, 255, 255, 0.88);
|
||||
--platform-track-border: rgba(226, 203, 184, 0.48);
|
||||
--platform-track-fill: rgba(255, 253, 250, 0.9);
|
||||
--platform-page-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.9),
|
||||
rgba(255, 250, 251, 0.8)
|
||||
rgba(250, 243, 236, 0.8)
|
||||
);
|
||||
--platform-page-border: rgba(241, 230, 234, 0.88);
|
||||
--platform-input-fill: rgba(255, 255, 255, 0.94);
|
||||
--platform-input-fill-focus: rgba(255, 255, 255, 0.96);
|
||||
--platform-page-border: rgba(233, 218, 205, 0.88);
|
||||
--platform-input-fill: rgba(255, 253, 250, 0.94);
|
||||
--platform-input-fill-focus: rgba(255, 254, 252, 0.96);
|
||||
--platform-input-highlight: rgba(255, 255, 255, 0.9);
|
||||
--platform-input-focus-ring: rgba(255, 91, 132, 0.14);
|
||||
--platform-nav-item-text: #7c6770;
|
||||
--platform-nav-item-text-active: #2d1820;
|
||||
--platform-nav-item-hover-fill: rgba(255, 244, 247, 0.92);
|
||||
--platform-nav-item-icon-fill: rgba(248, 244, 246, 1);
|
||||
--platform-nav-item-icon-text: #7a5d67;
|
||||
--platform-nav-item-icon-active-fill: rgba(255, 255, 255, 0.98);
|
||||
--platform-nav-item-icon-active-text: #d93570;
|
||||
--platform-nav-icon-active-shadow: 0 12px 24px rgba(255, 91, 132, 0.16);
|
||||
--platform-input-focus-ring: rgba(204, 117, 76, 0.15);
|
||||
--platform-nav-item-text: #80695a;
|
||||
--platform-nav-item-text-active: #3d1f10;
|
||||
--platform-nav-item-hover-fill: rgba(253, 248, 243, 0.94);
|
||||
--platform-nav-item-icon-fill: rgba(250, 243, 236, 1);
|
||||
--platform-nav-item-icon-text: #7b5c49;
|
||||
--platform-nav-item-icon-active-fill: rgba(255, 254, 252, 0.98);
|
||||
--platform-nav-item-icon-active-text: #c7653d;
|
||||
--platform-nav-icon-active-shadow: 0 12px 24px rgba(182, 98, 63, 0.16);
|
||||
--platform-profile-hero-fill: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.96),
|
||||
rgba(255, 245, 248, 0.9)
|
||||
rgba(255, 254, 252, 0.96),
|
||||
rgba(250, 239, 229, 0.9)
|
||||
);
|
||||
--platform-profile-hero-border: rgba(255, 255, 255, 0.52);
|
||||
--platform-profile-hero-shadow: 0 20px 56px rgba(216, 74, 124, 0.18);
|
||||
--platform-profile-hero-border: rgba(255, 255, 255, 0.56);
|
||||
--platform-profile-hero-shadow: 0 20px 56px rgba(112, 57, 30, 0.16);
|
||||
--platform-profile-avatar-fill: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 79, 139, 0.96),
|
||||
rgba(255, 140, 110, 0.9)
|
||||
rgba(223, 127, 64, 0.96),
|
||||
rgba(181, 91, 56, 0.92)
|
||||
);
|
||||
--platform-profile-avatar-shadow: 0 14px 30px rgba(255, 79, 139, 0.24);
|
||||
--platform-profile-chip-fill: rgba(255, 255, 255, 0.88);
|
||||
--platform-profile-chip-hover-fill: rgba(255, 255, 255, 0.96);
|
||||
--platform-profile-chip-text: #6a505b;
|
||||
--platform-profile-action-fill: linear-gradient(135deg, #ff4f8b, #ff8a73);
|
||||
--platform-profile-action-text: #fff7fb;
|
||||
--platform-profile-action-shadow: 0 14px 30px rgba(255, 79, 139, 0.24);
|
||||
--platform-profile-avatar-shadow: 0 14px 30px rgba(182, 98, 63, 0.22);
|
||||
--platform-profile-chip-fill: rgba(255, 253, 250, 0.88);
|
||||
--platform-profile-chip-hover-fill: rgba(255, 254, 252, 0.96);
|
||||
--platform-profile-chip-text: #755a49;
|
||||
--platform-profile-action-fill: linear-gradient(135deg, #df7f40, #b95d3a);
|
||||
--platform-profile-action-solid: #c7653d;
|
||||
--platform-profile-action-text: #fffaf5;
|
||||
--platform-profile-action-shadow: 0 14px 30px rgba(182, 98, 63, 0.22);
|
||||
--platform-card-overlay-soft: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.08),
|
||||
rgba(255, 247, 249, 0.82)
|
||||
rgba(250, 243, 236, 0.82)
|
||||
);
|
||||
--platform-card-overlay-strong: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.16),
|
||||
rgba(255, 243, 247, 0.92)
|
||||
rgba(248, 239, 231, 0.92)
|
||||
);
|
||||
--platform-card-overlay-deep: radial-gradient(
|
||||
circle at top left,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent 30%
|
||||
),
|
||||
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));
|
||||
radial-gradient(circle at right, rgba(228, 149, 91, 0.14), transparent 28%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(248, 239, 231, 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),
|
||||
--platform-recommend-runtime-border: rgba(226, 203, 184, 0.42);
|
||||
--platform-recommend-runtime-shadow: 0 18px 44px rgba(112, 57, 30, 0.12),
|
||||
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),
|
||||
rgba(204, 117, 76, 0.12),
|
||||
transparent 34%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.98),
|
||||
rgba(255, 246, 249, 0.94)
|
||||
rgba(250, 243, 236, 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),
|
||||
rgba(204, 117, 76, 0.13),
|
||||
transparent 30%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 18% 82%,
|
||||
rgba(255, 138, 115, 0.13),
|
||||
rgba(240, 203, 169, 0.18),
|
||||
transparent 28%
|
||||
),
|
||||
linear-gradient(180deg, #fffefe 0%, #fff7fa 58%, #fff1f5 100%);
|
||||
--puzzle-runtime-grid-line: rgba(130, 75, 95, 0.06);
|
||||
linear-gradient(180deg, #fffdf9 0%, #fbf5ed 58%, #f4e5d7 100%);
|
||||
--puzzle-runtime-grid-line: rgba(112, 57, 30, 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-surface-fill: rgba(255, 253, 250, 0.76);
|
||||
--puzzle-runtime-surface-fill-strong: rgba(255, 253, 250, 0.9);
|
||||
--puzzle-runtime-surface-border: rgba(226, 203, 184, 0.48);
|
||||
--puzzle-runtime-board-fill: rgba(255, 253, 250, 0.68);
|
||||
--puzzle-runtime-board-border: rgba(204, 117, 76, 0.28);
|
||||
--puzzle-runtime-board-shadow: 0 30px 80px rgba(112, 57, 30, 0.14);
|
||||
--puzzle-runtime-piece-fill: rgba(255, 253, 250, 0.74);
|
||||
--puzzle-runtime-piece-border: transparent;
|
||||
--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-empty-fill: rgba(238, 208, 183, 0.34);
|
||||
--puzzle-runtime-piece-empty-text: rgba(111, 88, 72, 0.4);
|
||||
--puzzle-runtime-piece-selected-fill: linear-gradient(
|
||||
135deg,
|
||||
#ff4f8b,
|
||||
#ff8a73
|
||||
#df7f40,
|
||||
#b95d3a
|
||||
);
|
||||
--puzzle-runtime-piece-selected-text: #fff7fb;
|
||||
--puzzle-runtime-piece-selected-text: #fffaf5;
|
||||
--puzzle-runtime-piece-selected-border: transparent;
|
||||
--puzzle-runtime-next-card-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-next-card-overlay: rgba(74, 34, 15, 0.06);
|
||||
--puzzle-runtime-control-fill: rgba(255, 253, 250, 0.72);
|
||||
--puzzle-runtime-control-hover-fill: rgba(204, 117, 76, 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-cool-text: #6e8d42;
|
||||
--puzzle-runtime-danger-fill: rgba(255, 237, 229, 0.9);
|
||||
--puzzle-runtime-danger-text: #a6402f;
|
||||
--puzzle-runtime-backdrop-fill: rgba(61, 31, 16, 0.34);
|
||||
--puzzle-runtime-dialog-fill: radial-gradient(
|
||||
circle at 12% 0%,
|
||||
rgba(255, 91, 132, 0.18),
|
||||
rgba(204, 117, 76, 0.18),
|
||||
transparent 36%
|
||||
),
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.98),
|
||||
rgba(255, 246, 249, 0.95)
|
||||
rgba(255, 254, 252, 0.98),
|
||||
rgba(250, 243, 236, 0.95)
|
||||
);
|
||||
--puzzle-runtime-dialog-border: rgba(255, 126, 154, 0.3);
|
||||
--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);
|
||||
--puzzle-runtime-dialog-border: rgba(204, 117, 76, 0.3);
|
||||
--puzzle-runtime-table-fill: rgba(255, 253, 250, 0.62);
|
||||
--puzzle-runtime-table-row-fill: rgba(204, 117, 76, 0.12);
|
||||
--puzzle-runtime-next-card-fill: rgba(255, 253, 250, 0.66);
|
||||
--puzzle-runtime-next-card-hover-fill: rgba(204, 117, 76, 0.1);
|
||||
}
|
||||
|
||||
.platform-theme--dark {
|
||||
color-scheme: dark;
|
||||
--platform-accent: #5b6cff;
|
||||
--platform-body-fill: radial-gradient(
|
||||
circle at top,
|
||||
rgba(129, 140, 248, 0.2),
|
||||
@@ -797,6 +802,7 @@ body {
|
||||
--platform-text-strong: #ffffff;
|
||||
--platform-text-base: rgb(228 228 231);
|
||||
--platform-text-soft: rgb(161 161 170);
|
||||
--platform-text-muted: rgb(161 161 170);
|
||||
--platform-brand-logo-title: #fff7dc;
|
||||
--platform-brand-logo-subtitle: #9fe7ff;
|
||||
--platform-brand-logo-shadow: #040814;
|
||||
@@ -813,6 +819,7 @@ body {
|
||||
--platform-neutral-bg: rgba(255, 255, 255, 0.05);
|
||||
--platform-neutral-text: rgb(228 228 231);
|
||||
--platform-button-primary-border: rgba(129, 140, 248, 0.3);
|
||||
--platform-button-primary-solid: #5b6cff;
|
||||
--platform-button-primary-fill: linear-gradient(135deg, #5b6cff, #3dd9ff);
|
||||
--platform-button-primary-text: rgb(238 248 255);
|
||||
--platform-button-secondary-fill: rgba(255, 255, 255, 0.05);
|
||||
@@ -907,6 +914,7 @@ body {
|
||||
--platform-profile-chip-hover-fill: rgba(255, 255, 255, 0.14);
|
||||
--platform-profile-chip-text: rgb(228 228 231);
|
||||
--platform-profile-action-fill: linear-gradient(135deg, #5b6cff, #3dd9ff);
|
||||
--platform-profile-action-solid: #5b6cff;
|
||||
--platform-profile-action-text: rgb(238 248 255);
|
||||
--platform-profile-action-shadow: 0 14px 32px rgba(91, 108, 255, 0.22);
|
||||
--platform-card-overlay-soft: linear-gradient(
|
||||
@@ -1748,9 +1756,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.platform-pill--rose {
|
||||
border-color: rgba(251, 113, 133, 0.2);
|
||||
background: rgba(244, 63, 94, 0.1);
|
||||
color: rgb(255 228 230);
|
||||
border-color: var(--platform-button-danger-border);
|
||||
background: var(--platform-button-danger-fill);
|
||||
color: var(--platform-button-danger-text);
|
||||
}
|
||||
|
||||
.platform-pill--success {
|
||||
@@ -1872,7 +1880,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.creation-work-card__swipe-button--danger {
|
||||
background: linear-gradient(180deg, #fb7185, #e11d48);
|
||||
background: linear-gradient(180deg, #c7653d, #8f3f27);
|
||||
}
|
||||
|
||||
.creation-work-card__swipe-button:disabled {
|
||||
@@ -2087,7 +2095,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
border-radius: 9999px;
|
||||
background: #ef4444;
|
||||
background: #b64a35;
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(255, 255, 255, 0.26),
|
||||
0 0 12px rgba(239, 68, 68, 0.68);
|
||||
@@ -2129,7 +2137,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.creation-work-card-stat--like {
|
||||
--creation-work-stat-accent: #ff6b6b;
|
||||
--creation-work-stat-accent: #b64a35;
|
||||
}
|
||||
|
||||
.creation-work-card-stat__label {
|
||||
@@ -2177,7 +2185,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.08rem;
|
||||
color: #ef233c;
|
||||
color: #b64a35;
|
||||
font-size: 0.54rem;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
@@ -2334,7 +2342,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
border-color: var(--platform-button-primary-border);
|
||||
background: var(--platform-button-primary-fill);
|
||||
color: var(--platform-button-primary-text);
|
||||
box-shadow: 0 16px 34px rgba(255, 91, 132, 0.18);
|
||||
box-shadow: 0 16px 34px rgba(182, 98, 63, 0.18);
|
||||
}
|
||||
|
||||
.platform-button--secondary {
|
||||
@@ -2409,7 +2417,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
border-color: var(--platform-button-primary-border);
|
||||
background: var(--platform-button-primary-fill);
|
||||
color: var(--platform-button-primary-text);
|
||||
box-shadow: 0 12px 26px rgba(255, 91, 132, 0.16);
|
||||
box-shadow: 0 12px 26px rgba(182, 98, 63, 0.16);
|
||||
}
|
||||
|
||||
.platform-close-confirm-dialog__button--secondary {
|
||||
@@ -2567,7 +2575,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
width: 0.48rem;
|
||||
height: 0.48rem;
|
||||
border-radius: 9999px;
|
||||
background: #ef4444;
|
||||
background: #b64a35;
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(255, 255, 255, 0.28),
|
||||
0 0 12px rgba(239, 68, 68, 0.72);
|
||||
@@ -5440,9 +5448,9 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.platform-banner--danger {
|
||||
border-color: rgba(251, 113, 133, 0.2);
|
||||
background: rgba(244, 63, 94, 0.1);
|
||||
color: #c2415d;
|
||||
border-color: var(--platform-button-danger-border);
|
||||
background: var(--platform-button-danger-fill);
|
||||
color: #a6402f;
|
||||
}
|
||||
|
||||
.platform-progress-track {
|
||||
@@ -5492,7 +5500,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
rgba(255, 138, 115, 0.22),
|
||||
transparent 34%
|
||||
),
|
||||
linear-gradient(135deg, #fff9fb 0%, #ffe8f0 48%, #ffdacf 100%);
|
||||
linear-gradient(135deg, #fffdf9 0%, #f4e5d7 48%, #eaccb3 100%);
|
||||
}
|
||||
|
||||
.platform-theme--light
|
||||
@@ -6060,14 +6068,14 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
border-color: var(--platform-surface-border) !important;
|
||||
background: radial-gradient(
|
||||
circle at top left,
|
||||
rgba(255, 204, 219, 0.34),
|
||||
rgba(240, 203, 169, 0.34),
|
||||
transparent 34%
|
||||
),
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 248, 250, 0.9)) !important;
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(250, 243, 236, 0.9)) !important;
|
||||
color: var(--platform-text-strong) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.84),
|
||||
0 18px 42px rgba(222, 82, 124, 0.1);
|
||||
0 18px 42px rgba(112, 57, 30, 0.1);
|
||||
}
|
||||
|
||||
.platform-theme--light
|
||||
@@ -6106,18 +6114,18 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
border-color: var(--platform-button-primary-border) !important;
|
||||
background: var(--platform-button-primary-fill) !important;
|
||||
color: var(--platform-button-primary-text) !important;
|
||||
box-shadow: 0 12px 26px rgba(255, 91, 132, 0.16);
|
||||
box-shadow: 0 12px 26px rgba(182, 98, 63, 0.16);
|
||||
}
|
||||
|
||||
.platform-theme--light .map-modal-overlay {
|
||||
background: rgba(73, 45, 56, 0.24) !important;
|
||||
background: rgba(74, 34, 15, 0.24) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .map-modal-shell {
|
||||
background: var(--platform-modal-fill);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.78),
|
||||
0 24px 70px rgba(131, 77, 98, 0.2) !important;
|
||||
0 24px 70px rgba(112, 57, 30, 0.2) !important;
|
||||
}
|
||||
|
||||
.platform-theme--light .map-modal-backdrop {
|
||||
@@ -6129,7 +6137,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(255, 255, 255, 0.7),
|
||||
rgba(255, 247, 250, 0.88)
|
||||
rgba(250, 243, 236, 0.88)
|
||||
) !important;
|
||||
}
|
||||
|
||||
@@ -6146,7 +6154,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.platform-theme--light .map-modal-shell svg line {
|
||||
stroke: rgba(217, 53, 112, 0.32);
|
||||
stroke: rgba(199, 101, 61, 0.32);
|
||||
}
|
||||
|
||||
button {
|
||||
@@ -7045,23 +7053,23 @@ button {
|
||||
border: 1px solid
|
||||
color-mix(
|
||||
in srgb,
|
||||
var(--platform-work-like-accent, #ff6b6b) 24%,
|
||||
var(--platform-work-like-accent, #c7653d) 24%,
|
||||
transparent
|
||||
);
|
||||
border-radius: 1rem;
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--platform-work-like-accent, #ff6b6b) 10%,
|
||||
var(--platform-work-like-accent, #c7653d) 10%,
|
||||
var(--platform-panel-fill) 90%
|
||||
);
|
||||
color: var(--platform-work-like-accent, #ff6b6b);
|
||||
color: var(--platform-work-like-accent, #c7653d);
|
||||
padding: 0.6rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 0.55rem 1.2rem
|
||||
color-mix(
|
||||
in srgb,
|
||||
var(--platform-work-like-accent, #ff6b6b) 10%,
|
||||
var(--platform-work-like-accent, #c7653d) 10%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
@@ -7080,7 +7088,7 @@ button {
|
||||
}
|
||||
|
||||
.platform-work-detail__stat {
|
||||
--platform-work-stat-accent: #ff4f8b;
|
||||
--platform-work-stat-accent: #c7653d;
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
@@ -7103,7 +7111,7 @@ button {
|
||||
}
|
||||
|
||||
.platform-work-detail__stat--like {
|
||||
--platform-work-stat-accent: #ff6b6b;
|
||||
--platform-work-stat-accent: #b64a35;
|
||||
}
|
||||
|
||||
.platform-work-detail__stat--time {
|
||||
|
||||
Reference in New Issue
Block a user