ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI fixes
Some checks failed
Build and Deploy / build-and-push (push) Failing after 1m17s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-19 10:45:01 +02:00
parent 1bca99a6bb
commit d2618a5b45
4 changed files with 69 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
index.html
View File

@@ -23,46 +23,46 @@
:root {
color-scheme: light;
--app-font: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
--app-bg-rgb: 243, 239, 233; /* #f3efe9 — warm cream base */
--surface-rgb: 255, 255, 255; /* #ffffff — white panels (existing tokens) */
--surface-soft-rgb: 249, 245, 238; /* #f9f5ee */
--surface-strong-rgb: 235, 229, 220; /* #ebe5dc */
--line-rgb: 69, 58, 48; /* #453a30 — divider base (warm brown) */
--text-primary-rgb: 28, 24, 21; /* #1c1815 */
--text-secondary-rgb: 102, 92, 83; /* #665c53 */
--text-tertiary-rgb: 140, 130, 118; /* #8c8276 */
--app-bg-rgb: 226, 242, 241; /* #e2f2f1 — cool mint base */
--surface-rgb: 255, 255, 255; /* #ffffff — white panels */
--surface-soft-rgb: 235, 246, 245; /* #ebf6f5 */
--surface-strong-rgb: 215, 234, 232; /* #d7eae8 */
--line-rgb: 40, 58, 58; /* #283a3a — cool neutral divider base */
--text-primary-rgb: 26, 31, 31; /* #1a1f1f */
--text-secondary-rgb: 92, 100, 100; /* #5c6464 */
--text-tertiary-rgb: 125, 133, 133; /* #7d8585 */
--warm-rgb: 183, 142, 88; /* #b78e58 — caramel */
--success-rgb: 47, 133, 82; /* #2f8552 — deep emerald (AA on white) */
--danger-rgb: 187, 75, 75; /* #bb4b4b — deep rose (AA on white) */
--panel-shadow: 0 18px 40px rgba(24, 17, 11, 0.08);
--panel-shadow-strong: 0 24px 60px rgba(24, 17, 11, 0.16);
--dock-shadow: 0 24px 56px rgba(24, 17, 11, 0.18);
--success-rgb: 47, 133, 82; /* #2f8552 — deep emerald (harmonizes with mint) */
--danger-rgb: 187, 75, 75; /* #bb4b4b — deep rose */
--panel-shadow: 0 18px 40px rgba(20, 35, 35, 0.08);
--panel-shadow-strong: 0 24px 60px rgba(20, 35, 35, 0.16);
--dock-shadow: 0 24px 56px rgba(20, 35, 35, 0.18);
--highlight-top: transparent;
--highlight-bottom: transparent;
/* Extended light palette — mirrors dark hierarchy: sunken < app-bg < card. */
--card-rgb: 255, 255, 255; /* #ffffff — primary elevated card (raised via shadow) */
--card-soft-rgb: 239, 233, 221; /* #efe9dd — nested/medium surface on white */
--card-strong-rgb: 228, 219, 205; /* #e4dbcd — strong surface / stroke */
--card-raised-rgb: 252, 249, 242; /* #fcf9f2 — subtle raise (chip on card) */
--sunken-rgb: 235, 229, 217; /* #ebe5d9 — deep inputs / search shell */
--sunken-deep-rgb: 219, 211, 196; /* #dbd3c4 — deepest well */
--border-card-rgb: 224, 215, 200; /* #e0d7c8 — subtle card/dock border */
--border-input-rgb: 180, 168, 150; /* #b4a896 — input / active border */
--text-emphasis-rgb: 14, 12, 10; /* #0e0c0a — brightest interactive text */
--text-body-rgb: 48, 40, 33; /* #302821 — primary body text (most common) */
--text-body-soft-rgb: 72, 62, 52; /* #483e34 — body soft */
--text-muted-rgb: 102, 92, 83; /* #665c53 — muted (matches --text-secondary) */
--text-dim-rgb: 140, 130, 118; /* #8c8276 — dim / placeholder */
--text-faint-rgb: 156, 146, 137; /* #9c9289 — faint icon color */
--text-subdued-rgb: 176, 166, 154; /* #b0a69a — subdued */
--skeleton-rgb: 226, 220, 210; /* #e2dcd2 — image loading placeholder */
--card-soft-rgb: 220, 238, 236; /* #dceeec — nested/medium surface on white */
--card-strong-rgb: 206, 228, 225; /* #cee4e1 — strong surface / stroke */
--card-raised-rgb: 244, 250, 250; /* #f4fafa — subtle raise (chip on card) */
--sunken-rgb: 213, 232, 230; /* #d5e8e6 — deep inputs / search shell */
--sunken-deep-rgb: 193, 220, 218; /* #c1dcda — deepest well */
--border-card-rgb: 205, 225, 222; /* #cde1de — subtle card/dock border */
--border-input-rgb: 148, 180, 177; /* #94b4b1 — input / active border */
--text-emphasis-rgb: 12, 18, 18; /* #0c1212 — brightest interactive text */
--text-body-rgb: 42, 48, 48; /* #2a3030 — primary body text (most common) */
--text-body-soft-rgb: 63, 70, 70; /* #3f4646 — body soft */
--text-muted-rgb: 92, 100, 100; /* #5c6464 — muted (matches --text-secondary) */
--text-dim-rgb: 125, 133, 133; /* #7d8585 — dim / placeholder */
--text-faint-rgb: 143, 150, 150; /* #8f9696 — faint icon color */
--text-subdued-rgb: 163, 169, 169; /* #a3a9a9 — subdued */
--skeleton-rgb: 214, 228, 226; /* #d6e4e2 — image loading placeholder */
--on-accent-rgb: 255, 255, 255; /* white text on accent backgrounds */
--overlay-rgb: 24, 17, 11; /* #18110b — scrim / shadow base (warm brown-black) */
--shadow-card: 0 2px 8px rgba(24, 17, 11, 0.08);
--shadow-shell: 0 5px 10px rgba(24, 17, 11, 0.08), 0 14px 22px rgba(24, 17, 11, 0.12), 0 22px 34px rgba(24, 17, 11, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5);
--icon-watermark: rgba(24, 17, 11, 0.08);
--hover-overlay: rgba(24, 17, 11, 0.05);
--overlay-rgb: 20, 35, 35; /* #142323 — scrim / shadow base (cool dark) */
--shadow-card: 0 2px 8px rgba(20, 35, 35, 0.08);
--shadow-shell: 0 5px 10px rgba(20, 35, 35, 0.08), 0 14px 22px rgba(20, 35, 35, 0.12), 0 22px 34px rgba(20, 35, 35, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.5);
--icon-watermark: rgba(20, 35, 35, 0.08);
--hover-overlay: rgba(20, 35, 35, 0.05);
}
.dark {