kyle
9ed3f7169e
CI/CD Pipeline / Build and Push PocketBase Docker Image (push) Successful in 13s
CI/CD Pipeline / i18n Catalog Check (push) Successful in 31s
CI/CD Pipeline / Build and Push App Docker Image (push) Successful in 3m25s
CI/CD Pipeline / Deploy to Kubernetes (push) Successful in 8m29s
761 lines
31 KiB
CSS
761 lines
31 KiB
CSS
/* Quest Log — fantasy-RPG journal.
|
|
Aged bronze is the structural decoration (2px entry frames, corner
|
|
brackets, ribbon banners); the interactive accent follows the user via
|
|
the primary aliases. All eight accent ramps are retuned as heraldic
|
|
banner dyes. Light = aged parchment journal, dark = torchlit hall. */
|
|
|
|
/* ---------------------------------------------------------------- *
|
|
* 1. Scheme-independent tokens — (0,2,0)
|
|
* ---------------------------------------------------------------- */
|
|
|
|
[data-theme="quest"][data-theme] {
|
|
/* Type: Grenze for medieval-but-readable headings, Alegreya body. */
|
|
--mantine-font-family: "Alegreya", "Iowan Old Style", Georgia, serif;
|
|
--mantine-font-family-headings: "Grenze", "Alegreya", Georgia, serif;
|
|
--mantine-font-size-xs: 0.8125rem;
|
|
--mantine-font-size-sm: 0.9375rem;
|
|
--mantine-font-size-md: 1.0625rem;
|
|
--mantine-font-size-lg: 1.1875rem;
|
|
--mantine-font-size-xl: 1.375rem;
|
|
--mantine-heading-font-weight: 600;
|
|
--mantine-h1-font-size: 2.4rem;
|
|
--mantine-h1-line-height: 1.15;
|
|
--mantine-h2-font-size: 1.95rem;
|
|
--mantine-h2-line-height: 1.2;
|
|
--mantine-h3-font-size: 1.55rem;
|
|
--mantine-h3-line-height: 1.25;
|
|
--mantine-h4-font-size: 1.3rem;
|
|
--mantine-h4-line-height: 1.3;
|
|
--mantine-h5-font-size: 1.15rem;
|
|
--mantine-h5-line-height: 1.35;
|
|
--mantine-h6-font-size: 1.05rem;
|
|
--mantine-h6-line-height: 1.4;
|
|
|
|
/* Shape: gently squared journal entries. */
|
|
--mantine-radius-xs: 0.125rem;
|
|
--mantine-radius-sm: 0.25rem;
|
|
--mantine-radius-md: 0.375rem;
|
|
--mantine-radius-lg: 0.5rem;
|
|
--mantine-radius-xl: 0.75rem;
|
|
--mantine-radius-default: 0.375rem;
|
|
|
|
/* Elevation: soft warm sepia, never harsh. */
|
|
--mantine-shadow-xs: 0 1px 2px rgba(38, 26, 10, 0.2);
|
|
--mantine-shadow-sm: 0 1px 2px rgba(38, 26, 10, 0.22), 0 5px 14px rgba(38, 26, 10, 0.16);
|
|
--mantine-shadow-md: 0 2px 4px rgba(38, 26, 10, 0.24), 0 10px 24px rgba(38, 26, 10, 0.2);
|
|
--mantine-shadow-lg: 0 3px 7px rgba(38, 26, 10, 0.26), 0 18px 40px rgba(38, 26, 10, 0.24);
|
|
--mantine-shadow-xl: 0 5px 10px rgba(38, 26, 10, 0.28), 0 26px 56px rgba(38, 26, 10, 0.28);
|
|
|
|
/* Accent ramps retuned as heraldic banner dyes — saturated but cloth-worn;
|
|
every shade 6 carries ≥4.5:1 parchment contrast text. */
|
|
|
|
/* blue → azure banner */
|
|
--mantine-color-blue-0: #eef1fa;
|
|
--mantine-color-blue-1: #d8dff2;
|
|
--mantine-color-blue-2: #b4c2e6;
|
|
--mantine-color-blue-3: #8aa0d6;
|
|
--mantine-color-blue-4: #6280c4;
|
|
--mantine-color-blue-5: #4263ae;
|
|
--mantine-color-blue-6: #2f4d96;
|
|
--mantine-color-blue-7: #263e7b;
|
|
--mantine-color-blue-8: #1d2f60;
|
|
--mantine-color-blue-9: #152246;
|
|
|
|
/* red → gules crimson */
|
|
--mantine-color-red-0: #faeceb;
|
|
--mantine-color-red-1: #f2d3d1;
|
|
--mantine-color-red-2: #e6aba7;
|
|
--mantine-color-red-3: #d87d78;
|
|
--mantine-color-red-4: #c65450;
|
|
--mantine-color-red-5: #ad322f;
|
|
--mantine-color-red-6: #92201f;
|
|
--mantine-color-red-7: #7a1719;
|
|
--mantine-color-red-8: #601114;
|
|
--mantine-color-red-9: #470c0f;
|
|
|
|
/* green → vert */
|
|
--mantine-color-green-0: #ebf3ec;
|
|
--mantine-color-green-1: #d2e5d4;
|
|
--mantine-color-green-2: #aacfae;
|
|
--mantine-color-green-3: #7db383;
|
|
--mantine-color-green-4: #55975d;
|
|
--mantine-color-green-5: #35793f;
|
|
--mantine-color-green-6: #24632e;
|
|
--mantine-color-green-7: #1c5026;
|
|
--mantine-color-green-8: #153e1e;
|
|
--mantine-color-green-9: #0e2c16;
|
|
|
|
/* yellow → or (gold leaf) */
|
|
--mantine-color-yellow-0: #fbf3dc;
|
|
--mantine-color-yellow-1: #f4e3b0;
|
|
--mantine-color-yellow-2: #e9cd7c;
|
|
--mantine-color-yellow-3: #dbb14b;
|
|
--mantine-color-yellow-4: #c99527;
|
|
--mantine-color-yellow-5: #ab7812;
|
|
--mantine-color-yellow-6: #8c5f0b;
|
|
--mantine-color-yellow-7: #714c09;
|
|
--mantine-color-yellow-8: #583b07;
|
|
--mantine-color-yellow-9: #402b05;
|
|
|
|
/* grape → purpure */
|
|
--mantine-color-grape-0: #f4edf7;
|
|
--mantine-color-grape-1: #e5d5ec;
|
|
--mantine-color-grape-2: #cfb2dc;
|
|
--mantine-color-grape-3: #b389c8;
|
|
--mantine-color-grape-4: #9663b2;
|
|
--mantine-color-grape-5: #7a4399;
|
|
--mantine-color-grape-6: #642e82;
|
|
--mantine-color-grape-7: #52246b;
|
|
--mantine-color-grape-8: #401b54;
|
|
--mantine-color-grape-9: #2f133e;
|
|
|
|
/* orange → tenné */
|
|
--mantine-color-orange-0: #faeee2;
|
|
--mantine-color-orange-1: #f3d9bd;
|
|
--mantine-color-orange-2: #e9bc8d;
|
|
--mantine-color-orange-3: #dd9a58;
|
|
--mantine-color-orange-4: #cf7a2c;
|
|
--mantine-color-orange-5: #b45e14;
|
|
--mantine-color-orange-6: #96490d;
|
|
--mantine-color-orange-7: #7a3a0b;
|
|
--mantine-color-orange-8: #602d08;
|
|
--mantine-color-orange-9: #472106;
|
|
|
|
/* pink → rose madder */
|
|
--mantine-color-pink-0: #f9ecf1;
|
|
--mantine-color-pink-1: #f0d3de;
|
|
--mantine-color-pink-2: #e3aac1;
|
|
--mantine-color-pink-3: #d27da0;
|
|
--mantine-color-pink-4: #bf5280;
|
|
--mantine-color-pink-5: #a53064;
|
|
--mantine-color-pink-6: #8a1f51;
|
|
--mantine-color-pink-7: #711842;
|
|
--mantine-color-pink-8: #581233;
|
|
--mantine-color-pink-9: #400c25;
|
|
|
|
/* lime → spring leaf */
|
|
--mantine-color-lime-0: #f2f5e6;
|
|
--mantine-color-lime-1: #e2e9c6;
|
|
--mantine-color-lime-2: #cdd89e;
|
|
--mantine-color-lime-3: #b2c26f;
|
|
--mantine-color-lime-4: #96a944;
|
|
--mantine-color-lime-5: #7a8d26;
|
|
--mantine-color-lime-6: #59690f;
|
|
--mantine-color-lime-7: #485510;
|
|
--mantine-color-lime-8: #38420d;
|
|
--mantine-color-lime-9: #293009;
|
|
|
|
/* Gray ramp as parchment/sepia so gray-derived UI stays in the world. */
|
|
--mantine-color-gray-0: #f7efdd;
|
|
--mantine-color-gray-1: #f0e6cf;
|
|
--mantine-color-gray-2: #e3d4b4;
|
|
--mantine-color-gray-3: #d0bd95;
|
|
--mantine-color-gray-4: #b5a17a;
|
|
--mantine-color-gray-5: #92805e;
|
|
--mantine-color-gray-6: #6a5a41;
|
|
--mantine-color-gray-7: #4a3d2b;
|
|
--mantine-color-gray-8: #362c1e;
|
|
--mantine-color-gray-9: #291f14;
|
|
|
|
/* Dark ramp as torch-lit umber. */
|
|
--mantine-color-dark-0: #ecdfc6;
|
|
--mantine-color-dark-1: #b3a488;
|
|
--mantine-color-dark-2: #7a6a52;
|
|
--mantine-color-dark-3: #55462f;
|
|
--mantine-color-dark-4: #3b2f1f;
|
|
--mantine-color-dark-5: #2b2318;
|
|
--mantine-color-dark-6: #241d13;
|
|
--mantine-color-dark-7: #1c160e;
|
|
--mantine-color-dark-8: #15100a;
|
|
--mantine-color-dark-9: #0e0a06;
|
|
|
|
--flxn-avatar-radius: 50%; /* party-member portraits */
|
|
--flxn-avatar-border: 2px solid var(--quest-frame);
|
|
--flxn-badge-radius: 8px;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- *
|
|
* 2. Per-scheme tokens — (0,3,0)
|
|
* ---------------------------------------------------------------- */
|
|
|
|
[data-theme="quest"][data-theme][data-mantine-color-scheme="light"] {
|
|
--mantine-color-body: #f0e6cf;
|
|
--mantine-color-text: #2f2414;
|
|
--mantine-color-bright: #1d1509;
|
|
--mantine-color-dimmed: #6a5a41;
|
|
--mantine-color-placeholder: #83704f;
|
|
--mantine-color-anchor: var(--mantine-primary-color-7);
|
|
--mantine-color-error: #9e2b20;
|
|
--mantine-color-default: #f7efdd;
|
|
--mantine-color-default-hover: #efe3c8;
|
|
--mantine-color-default-color: #2f2414;
|
|
--mantine-color-default-border: #b39a6b;
|
|
|
|
/* Accent variant vars re-derived from the retuned ramps (Mantine's
|
|
defaults are literal rgba of its stock hues). */
|
|
--mantine-color-blue-light: color-mix(in srgb, var(--mantine-color-blue-6) 10%, transparent);
|
|
--mantine-color-blue-light-hover: color-mix(in srgb, var(--mantine-color-blue-6) 16%, transparent);
|
|
--mantine-color-blue-light-color: var(--mantine-color-blue-7);
|
|
--mantine-color-blue-outline: var(--mantine-color-blue-6);
|
|
--mantine-color-blue-outline-hover: color-mix(in srgb, var(--mantine-color-blue-6) 8%, transparent);
|
|
--mantine-color-blue-text: var(--mantine-color-blue-7);
|
|
--mantine-color-blue-contrast: #f6ecd8;
|
|
--mantine-color-red-light: color-mix(in srgb, var(--mantine-color-red-6) 10%, transparent);
|
|
--mantine-color-red-light-hover: color-mix(in srgb, var(--mantine-color-red-6) 16%, transparent);
|
|
--mantine-color-red-light-color: var(--mantine-color-red-7);
|
|
--mantine-color-red-outline: var(--mantine-color-red-6);
|
|
--mantine-color-red-outline-hover: color-mix(in srgb, var(--mantine-color-red-6) 8%, transparent);
|
|
--mantine-color-red-text: var(--mantine-color-red-7);
|
|
--mantine-color-red-contrast: #f6ecd8;
|
|
--mantine-color-green-light: color-mix(in srgb, var(--mantine-color-green-6) 10%, transparent);
|
|
--mantine-color-green-light-hover: color-mix(in srgb, var(--mantine-color-green-6) 16%, transparent);
|
|
--mantine-color-green-light-color: var(--mantine-color-green-7);
|
|
--mantine-color-green-outline: var(--mantine-color-green-6);
|
|
--mantine-color-green-outline-hover: color-mix(in srgb, var(--mantine-color-green-6) 8%, transparent);
|
|
--mantine-color-green-text: var(--mantine-color-green-7);
|
|
--mantine-color-green-contrast: #f6ecd8;
|
|
--mantine-color-yellow-light: color-mix(in srgb, var(--mantine-color-yellow-6) 10%, transparent);
|
|
--mantine-color-yellow-light-hover: color-mix(in srgb, var(--mantine-color-yellow-6) 16%, transparent);
|
|
--mantine-color-yellow-light-color: var(--mantine-color-yellow-7);
|
|
--mantine-color-yellow-outline: var(--mantine-color-yellow-6);
|
|
--mantine-color-yellow-outline-hover: color-mix(in srgb, var(--mantine-color-yellow-6) 8%, transparent);
|
|
--mantine-color-yellow-text: var(--mantine-color-yellow-7);
|
|
--mantine-color-yellow-contrast: #f6ecd8;
|
|
--mantine-color-grape-light: color-mix(in srgb, var(--mantine-color-grape-6) 10%, transparent);
|
|
--mantine-color-grape-light-hover: color-mix(in srgb, var(--mantine-color-grape-6) 16%, transparent);
|
|
--mantine-color-grape-light-color: var(--mantine-color-grape-7);
|
|
--mantine-color-grape-outline: var(--mantine-color-grape-6);
|
|
--mantine-color-grape-outline-hover: color-mix(in srgb, var(--mantine-color-grape-6) 8%, transparent);
|
|
--mantine-color-grape-text: var(--mantine-color-grape-7);
|
|
--mantine-color-grape-contrast: #f6ecd8;
|
|
--mantine-color-orange-light: color-mix(in srgb, var(--mantine-color-orange-6) 10%, transparent);
|
|
--mantine-color-orange-light-hover: color-mix(in srgb, var(--mantine-color-orange-6) 16%, transparent);
|
|
--mantine-color-orange-light-color: var(--mantine-color-orange-7);
|
|
--mantine-color-orange-outline: var(--mantine-color-orange-6);
|
|
--mantine-color-orange-outline-hover: color-mix(in srgb, var(--mantine-color-orange-6) 8%, transparent);
|
|
--mantine-color-orange-text: var(--mantine-color-orange-7);
|
|
--mantine-color-orange-contrast: #f6ecd8;
|
|
--mantine-color-pink-light: color-mix(in srgb, var(--mantine-color-pink-6) 10%, transparent);
|
|
--mantine-color-pink-light-hover: color-mix(in srgb, var(--mantine-color-pink-6) 16%, transparent);
|
|
--mantine-color-pink-light-color: var(--mantine-color-pink-7);
|
|
--mantine-color-pink-outline: var(--mantine-color-pink-6);
|
|
--mantine-color-pink-outline-hover: color-mix(in srgb, var(--mantine-color-pink-6) 8%, transparent);
|
|
--mantine-color-pink-text: var(--mantine-color-pink-7);
|
|
--mantine-color-pink-contrast: #f6ecd8;
|
|
--mantine-color-lime-light: color-mix(in srgb, var(--mantine-color-lime-6) 10%, transparent);
|
|
--mantine-color-lime-light-hover: color-mix(in srgb, var(--mantine-color-lime-6) 16%, transparent);
|
|
--mantine-color-lime-light-color: var(--mantine-color-lime-7);
|
|
--mantine-color-lime-outline: var(--mantine-color-lime-6);
|
|
--mantine-color-lime-outline-hover: color-mix(in srgb, var(--mantine-color-lime-6) 8%, transparent);
|
|
--mantine-color-lime-text: var(--mantine-color-lime-7);
|
|
--mantine-color-lime-contrast: #f6ecd8;
|
|
--mantine-color-gray-light: color-mix(in srgb, var(--mantine-color-gray-6) 10%, transparent);
|
|
--mantine-color-gray-light-hover: color-mix(in srgb, var(--mantine-color-gray-6) 15%, transparent);
|
|
--mantine-color-gray-light-color: var(--mantine-color-gray-7);
|
|
|
|
/* Theme-local palette. */
|
|
--quest-frame: #a3854f;
|
|
--quest-corner: #8a6a3a;
|
|
--quest-bronze: #7c5f2c;
|
|
--quest-surface: #f7efdd;
|
|
--quest-recessed: #e7d8b6;
|
|
--quest-shell: #ece0c3;
|
|
--quest-tick: rgba(90, 66, 30, 0.22);
|
|
--quest-ribbon-hi: #8d6c38;
|
|
--quest-ribbon: #7a5c2e;
|
|
--quest-ribbon-lo: #5f4620;
|
|
--quest-ribbon-ink: #f7eedb;
|
|
|
|
/* App tokens: guild-board accolades on parchment. */
|
|
--flxn-gold: #7d5c12;
|
|
--flxn-silver: #776e5c;
|
|
--flxn-bronze: #8a4f22;
|
|
--flxn-toast-success: #45702c;
|
|
--flxn-toast-error: #9e2b20;
|
|
--flxn-podium-1-bg: color-mix(in srgb, #c99527 15%, #f7efdd);
|
|
--flxn-podium-1-border: color-mix(in srgb, #7d5c12 55%, #d0bd95);
|
|
--flxn-podium-1-label: #6f5116;
|
|
--flxn-podium-2-bg: color-mix(in srgb, #92805e 10%, #f7efdd);
|
|
--flxn-podium-2-border: #b5a17a;
|
|
--flxn-podium-2-label: #6a5a41;
|
|
--flxn-podium-3-bg: color-mix(in srgb, #8a4f22 12%, #f7efdd);
|
|
--flxn-podium-3-border: color-mix(in srgb, #8a4f22 45%, #d0bd95);
|
|
--flxn-podium-3-label: #74431c;
|
|
--flxn-showcase-bg: #f7efdd;
|
|
--flxn-overlay: rgba(35, 24, 10, 0.45);
|
|
--flxn-dotgrid-color: rgba(138, 106, 58, 0.25);
|
|
--flxn-pop-shadow: rgba(46, 32, 12, 0.3);
|
|
}
|
|
|
|
[data-theme="quest"][data-theme][data-mantine-color-scheme="dark"] {
|
|
--mantine-color-body: #211a12;
|
|
--mantine-color-text: #ecdfc6;
|
|
--mantine-color-bright: #f7efdd;
|
|
--mantine-color-dimmed: #a5937a;
|
|
--mantine-color-placeholder: #837259;
|
|
--mantine-color-anchor: var(--mantine-primary-color-2);
|
|
--mantine-color-error: #d4736a;
|
|
--mantine-color-default: #2b2216;
|
|
--mantine-color-default-hover: #342a1b;
|
|
--mantine-color-default-color: #ecdfc6;
|
|
--mantine-color-default-border: #5c4a2c;
|
|
|
|
/* Filled stays mid-ramp: shade-8 dye vanishes in the torchlit hall. */
|
|
--mantine-color-blue-filled: var(--mantine-color-blue-6);
|
|
--mantine-color-blue-filled-hover: var(--mantine-color-blue-5);
|
|
--mantine-color-blue-light: color-mix(in srgb, var(--mantine-color-blue-4) 15%, transparent);
|
|
--mantine-color-blue-light-hover: color-mix(in srgb, var(--mantine-color-blue-4) 22%, transparent);
|
|
--mantine-color-blue-light-color: var(--mantine-color-blue-2);
|
|
--mantine-color-blue-outline: var(--mantine-color-blue-3);
|
|
--mantine-color-blue-outline-hover: color-mix(in srgb, var(--mantine-color-blue-3) 12%, transparent);
|
|
--mantine-color-blue-text: var(--mantine-color-blue-3);
|
|
--mantine-color-blue-contrast: #f6ecd8;
|
|
--mantine-color-red-filled: var(--mantine-color-red-6);
|
|
--mantine-color-red-filled-hover: var(--mantine-color-red-5);
|
|
--mantine-color-red-light: color-mix(in srgb, var(--mantine-color-red-4) 15%, transparent);
|
|
--mantine-color-red-light-hover: color-mix(in srgb, var(--mantine-color-red-4) 22%, transparent);
|
|
--mantine-color-red-light-color: var(--mantine-color-red-2);
|
|
--mantine-color-red-outline: var(--mantine-color-red-3);
|
|
--mantine-color-red-outline-hover: color-mix(in srgb, var(--mantine-color-red-3) 12%, transparent);
|
|
--mantine-color-red-text: var(--mantine-color-red-3);
|
|
--mantine-color-red-contrast: #f6ecd8;
|
|
--mantine-color-green-filled: var(--mantine-color-green-6);
|
|
--mantine-color-green-filled-hover: var(--mantine-color-green-5);
|
|
--mantine-color-green-light: color-mix(in srgb, var(--mantine-color-green-4) 15%, transparent);
|
|
--mantine-color-green-light-hover: color-mix(in srgb, var(--mantine-color-green-4) 22%, transparent);
|
|
--mantine-color-green-light-color: var(--mantine-color-green-2);
|
|
--mantine-color-green-outline: var(--mantine-color-green-3);
|
|
--mantine-color-green-outline-hover: color-mix(in srgb, var(--mantine-color-green-3) 12%, transparent);
|
|
--mantine-color-green-text: var(--mantine-color-green-3);
|
|
--mantine-color-green-contrast: #f6ecd8;
|
|
--mantine-color-yellow-filled: var(--mantine-color-yellow-6);
|
|
--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-5);
|
|
--mantine-color-yellow-light: color-mix(in srgb, var(--mantine-color-yellow-4) 15%, transparent);
|
|
--mantine-color-yellow-light-hover: color-mix(in srgb, var(--mantine-color-yellow-4) 22%, transparent);
|
|
--mantine-color-yellow-light-color: var(--mantine-color-yellow-2);
|
|
--mantine-color-yellow-outline: var(--mantine-color-yellow-3);
|
|
--mantine-color-yellow-outline-hover: color-mix(in srgb, var(--mantine-color-yellow-3) 12%, transparent);
|
|
--mantine-color-yellow-text: var(--mantine-color-yellow-3);
|
|
--mantine-color-yellow-contrast: #f6ecd8;
|
|
--mantine-color-grape-filled: var(--mantine-color-grape-6);
|
|
--mantine-color-grape-filled-hover: var(--mantine-color-grape-5);
|
|
--mantine-color-grape-light: color-mix(in srgb, var(--mantine-color-grape-4) 15%, transparent);
|
|
--mantine-color-grape-light-hover: color-mix(in srgb, var(--mantine-color-grape-4) 22%, transparent);
|
|
--mantine-color-grape-light-color: var(--mantine-color-grape-2);
|
|
--mantine-color-grape-outline: var(--mantine-color-grape-3);
|
|
--mantine-color-grape-outline-hover: color-mix(in srgb, var(--mantine-color-grape-3) 12%, transparent);
|
|
--mantine-color-grape-text: var(--mantine-color-grape-3);
|
|
--mantine-color-grape-contrast: #f6ecd8;
|
|
--mantine-color-orange-filled: var(--mantine-color-orange-6);
|
|
--mantine-color-orange-filled-hover: var(--mantine-color-orange-5);
|
|
--mantine-color-orange-light: color-mix(in srgb, var(--mantine-color-orange-4) 15%, transparent);
|
|
--mantine-color-orange-light-hover: color-mix(in srgb, var(--mantine-color-orange-4) 22%, transparent);
|
|
--mantine-color-orange-light-color: var(--mantine-color-orange-2);
|
|
--mantine-color-orange-outline: var(--mantine-color-orange-3);
|
|
--mantine-color-orange-outline-hover: color-mix(in srgb, var(--mantine-color-orange-3) 12%, transparent);
|
|
--mantine-color-orange-text: var(--mantine-color-orange-3);
|
|
--mantine-color-orange-contrast: #f6ecd8;
|
|
--mantine-color-pink-filled: var(--mantine-color-pink-6);
|
|
--mantine-color-pink-filled-hover: var(--mantine-color-pink-5);
|
|
--mantine-color-pink-light: color-mix(in srgb, var(--mantine-color-pink-4) 15%, transparent);
|
|
--mantine-color-pink-light-hover: color-mix(in srgb, var(--mantine-color-pink-4) 22%, transparent);
|
|
--mantine-color-pink-light-color: var(--mantine-color-pink-2);
|
|
--mantine-color-pink-outline: var(--mantine-color-pink-3);
|
|
--mantine-color-pink-outline-hover: color-mix(in srgb, var(--mantine-color-pink-3) 12%, transparent);
|
|
--mantine-color-pink-text: var(--mantine-color-pink-3);
|
|
--mantine-color-pink-contrast: #f6ecd8;
|
|
--mantine-color-lime-filled: var(--mantine-color-lime-6);
|
|
--mantine-color-lime-filled-hover: var(--mantine-color-lime-5);
|
|
--mantine-color-lime-light: color-mix(in srgb, var(--mantine-color-lime-4) 15%, transparent);
|
|
--mantine-color-lime-light-hover: color-mix(in srgb, var(--mantine-color-lime-4) 22%, transparent);
|
|
--mantine-color-lime-light-color: var(--mantine-color-lime-2);
|
|
--mantine-color-lime-outline: var(--mantine-color-lime-3);
|
|
--mantine-color-lime-outline-hover: color-mix(in srgb, var(--mantine-color-lime-3) 12%, transparent);
|
|
--mantine-color-lime-text: var(--mantine-color-lime-3);
|
|
--mantine-color-lime-contrast: #f6ecd8;
|
|
--mantine-color-gray-light: color-mix(in srgb, var(--mantine-color-gray-5) 12%, transparent);
|
|
--mantine-color-gray-light-hover: color-mix(in srgb, var(--mantine-color-gray-5) 18%, transparent);
|
|
--mantine-color-gray-light-color: var(--mantine-color-gray-2);
|
|
|
|
/* Theme-local palette: ember-warm parchment panels in a torchlit hall. */
|
|
--quest-frame: #7a6136;
|
|
--quest-corner: #c49a5e;
|
|
--quest-bronze: #cfa768;
|
|
--quest-surface: #2b2216;
|
|
--quest-recessed: #171208;
|
|
--quest-shell: #1a140c;
|
|
--quest-tick: rgba(0, 0, 0, 0.4);
|
|
--quest-ribbon-hi: #d8b077;
|
|
--quest-ribbon: #c49a5e;
|
|
--quest-ribbon-lo: #a97f45;
|
|
--quest-ribbon-ink: #241a0c;
|
|
|
|
--flxn-gold: #d9b36b;
|
|
--flxn-silver: #a89f90;
|
|
--flxn-bronze: #c08050;
|
|
--flxn-toast-success: #a8bd85;
|
|
--flxn-toast-error: #dc9a90;
|
|
--flxn-podium-1-bg: color-mix(in srgb, #c99527 14%, #2b2216);
|
|
--flxn-podium-1-border: color-mix(in srgb, #d9b36b 45%, #3b2f1f);
|
|
--flxn-podium-1-label: #d9b36b;
|
|
--flxn-podium-2-bg: color-mix(in srgb, #a89f90 9%, #2b2216);
|
|
--flxn-podium-2-border: color-mix(in srgb, #a89f90 32%, #3b2f1f);
|
|
--flxn-podium-2-label: #b5aea1;
|
|
--flxn-podium-3-bg: color-mix(in srgb, #c08050 12%, #2b2216);
|
|
--flxn-podium-3-border: color-mix(in srgb, #c08050 42%, #3b2f1f);
|
|
--flxn-podium-3-label: #cd8f61;
|
|
--flxn-showcase-bg: #2b2216;
|
|
--flxn-overlay: rgba(8, 5, 2, 0.6);
|
|
--flxn-dotgrid-color: rgba(196, 154, 94, 0.18);
|
|
--flxn-pop-shadow: rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- *
|
|
* 3. Full-page decoration: worn parchment edges / torchlight
|
|
* ---------------------------------------------------------------- */
|
|
|
|
[data-theme="quest"][data-mantine-color-scheme="light"] .flxn-theme-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9998;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(140% 100% at 50% 32%, transparent 58%, rgba(122, 91, 42, 0.1) 88%, rgba(96, 69, 28, 0.2) 100%),
|
|
radial-gradient(55% 38% at 6% 2%, rgba(122, 91, 42, 0.07), transparent 70%),
|
|
radial-gradient(55% 38% at 95% 98%, rgba(122, 91, 42, 0.07), transparent 70%);
|
|
}
|
|
|
|
[data-theme="quest"][data-mantine-color-scheme="dark"] .flxn-theme-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9998;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(90% 55% at 50% 0%, rgba(214, 158, 84, 0.07), transparent 70%),
|
|
radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(5, 3, 1, 0.5) 100%);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- *
|
|
* 4. Quest entries: 2px bronze frames + ornate corner brackets
|
|
* ---------------------------------------------------------------- */
|
|
|
|
[data-theme="quest"] .mantine-Paper-root[data-with-border],
|
|
[data-theme="quest"] .mantine-Card-root,
|
|
[data-theme="quest"] .mantine-Modal-content,
|
|
[data-theme="quest"] .flxn-tile,
|
|
[data-theme="quest"] .flxn-match-card {
|
|
position: relative;
|
|
background-color: var(--quest-surface);
|
|
border: 2px solid var(--quest-frame);
|
|
}
|
|
|
|
/* One pseudo paints all four L-shaped brackets (2 strips per corner). */
|
|
[data-theme="quest"] .mantine-Paper-root[data-with-border]::before,
|
|
[data-theme="quest"] .mantine-Card-root::before,
|
|
[data-theme="quest"] .mantine-Modal-content::before,
|
|
[data-theme="quest"] .flxn-tile::before,
|
|
[data-theme="quest"] .flxn-match-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 3px;
|
|
pointer-events: none;
|
|
background-image:
|
|
linear-gradient(var(--quest-corner), var(--quest-corner)),
|
|
linear-gradient(var(--quest-corner), var(--quest-corner)),
|
|
linear-gradient(var(--quest-corner), var(--quest-corner)),
|
|
linear-gradient(var(--quest-corner), var(--quest-corner)),
|
|
linear-gradient(var(--quest-corner), var(--quest-corner)),
|
|
linear-gradient(var(--quest-corner), var(--quest-corner)),
|
|
linear-gradient(var(--quest-corner), var(--quest-corner)),
|
|
linear-gradient(var(--quest-corner), var(--quest-corner));
|
|
background-repeat: no-repeat;
|
|
background-size:
|
|
12px 2px, 2px 12px,
|
|
12px 2px, 2px 12px,
|
|
12px 2px, 2px 12px,
|
|
12px 2px, 2px 12px;
|
|
background-position:
|
|
left top, left top,
|
|
right top, right top,
|
|
left bottom, left bottom,
|
|
right bottom, right bottom;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- *
|
|
* 5. Component restyles
|
|
* ---------------------------------------------------------------- */
|
|
|
|
/* Headings: Grenze; section headers (h3/h4) ride ribbon banners. */
|
|
[data-theme="quest"] .mantine-Title-root {
|
|
letter-spacing: 0.01em;
|
|
}
|
|
[data-theme="quest"] h3.mantine-Title-root,
|
|
[data-theme="quest"] h4.mantine-Title-root {
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
padding: 0.12em 1.1em 0.18em;
|
|
background-image: linear-gradient(
|
|
180deg,
|
|
var(--quest-ribbon-hi) 0%,
|
|
var(--quest-ribbon) 55%,
|
|
var(--quest-ribbon-lo) 100%
|
|
);
|
|
color: var(--quest-ribbon-ink);
|
|
clip-path: polygon(
|
|
0 0,
|
|
100% 0,
|
|
calc(100% - 0.55em) 50%,
|
|
100% 100%,
|
|
0 100%,
|
|
0.55em 50%
|
|
);
|
|
}
|
|
|
|
/* Buttons: banner-dye solids in the user's accent; bronze-ruled defaults. */
|
|
[data-theme="quest"] .mantine-Button-root {
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
[data-theme="quest"] .mantine-Button-root[data-variant="filled"],
|
|
[data-theme="quest"] .mantine-ActionIcon-root[data-variant="filled"] {
|
|
border: 1px solid color-mix(in srgb, var(--mantine-primary-color-filled) 55%, black);
|
|
box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.2), 0 1px 3px var(--flxn-pop-shadow);
|
|
}
|
|
[data-theme="quest"] .mantine-Button-root[data-variant="default"],
|
|
[data-theme="quest"] .mantine-ActionIcon-root[data-variant="default"] {
|
|
border-color: var(--quest-frame);
|
|
background-color: var(--quest-surface);
|
|
}
|
|
|
|
/* Inputs: recessed ledger lines; focus follows the accent. */
|
|
[data-theme="quest"] .mantine-Input-input {
|
|
background-color: var(--quest-recessed);
|
|
border-color: var(--quest-frame);
|
|
}
|
|
[data-theme="quest"] .mantine-PinInput-input {
|
|
background-color: var(--quest-recessed);
|
|
}
|
|
|
|
/* Mantine Tabs: illuminated active label under a bronze rule. */
|
|
[data-theme="quest"] .mantine-Tabs-tab {
|
|
letter-spacing: 0.02em;
|
|
}
|
|
[data-theme="quest"] .mantine-Tabs-tab[data-active] {
|
|
border-color: var(--quest-corner);
|
|
color: var(--mantine-primary-color-light-color);
|
|
}
|
|
|
|
/* Nav: active entries follow the accent — wash plus a marginal rule. */
|
|
[data-theme="quest"] .mantine-NavLink-root[data-active] {
|
|
background-color: var(--mantine-primary-color-light);
|
|
color: var(--mantine-primary-color-light-color);
|
|
box-shadow: inset 3px 0 0 var(--mantine-primary-color-filled);
|
|
}
|
|
[data-theme="quest"] .mantine-NavLink-root[data-active]:hover {
|
|
background-color: var(--mantine-primary-color-light-hover);
|
|
}
|
|
|
|
/* Shell: the journal's leather binding. */
|
|
[data-theme="quest"] .mantine-AppShell-header {
|
|
background-color: var(--quest-shell);
|
|
border-bottom: 1px solid var(--quest-frame);
|
|
}
|
|
[data-theme="quest"] .mantine-AppShell-navbar {
|
|
background-color: var(--quest-shell);
|
|
border-color: var(--quest-frame);
|
|
}
|
|
|
|
/* Segmented control: carved channel with a parchment slider. */
|
|
[data-theme="quest"] .mantine-SegmentedControl-root {
|
|
background-color: var(--quest-recessed);
|
|
border: 1px solid var(--quest-frame);
|
|
}
|
|
[data-theme="quest"] .mantine-SegmentedControl-indicator {
|
|
background-color: var(--quest-surface);
|
|
border: 1px solid var(--quest-frame);
|
|
box-shadow: 0 1px 3px var(--flxn-pop-shadow);
|
|
}
|
|
|
|
/* Progress: XP bars — framed groove, segment ticks, glossed accent fill. */
|
|
[data-theme="quest"] .mantine-Progress-root {
|
|
position: relative;
|
|
background-color: var(--quest-recessed);
|
|
border: 1px solid var(--quest-frame);
|
|
box-shadow: inset 0 1px 2px rgba(20, 12, 4, 0.3);
|
|
}
|
|
[data-theme="quest"] .mantine-Progress-root::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
background-image: repeating-linear-gradient(
|
|
90deg,
|
|
transparent 0,
|
|
transparent 11px,
|
|
var(--quest-tick) 11px,
|
|
var(--quest-tick) 12px
|
|
);
|
|
}
|
|
[data-theme="quest"] .mantine-Progress-section {
|
|
background-image: linear-gradient(
|
|
180deg,
|
|
rgba(255, 246, 224, 0.32) 0%,
|
|
rgba(255, 246, 224, 0.06) 45%,
|
|
rgba(24, 14, 4, 0.14) 100%
|
|
);
|
|
}
|
|
|
|
/* Badges: embossed wax/metal seals; filled keeps a legible on-color. */
|
|
[data-theme="quest"] .mantine-Badge-root {
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
border: 1px solid rgba(24, 14, 4, 0.25);
|
|
box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.28),
|
|
inset 0 -1px 0 rgba(24, 14, 4, 0.18), 0 1px 2px var(--flxn-pop-shadow);
|
|
}
|
|
[data-theme="quest"] .mantine-Badge-root[data-variant="filled"],
|
|
[data-theme="quest"] .mantine-Badge-root:not([data-variant]),
|
|
[data-theme="quest"] .mantine-ThemeIcon-root[data-variant="filled"],
|
|
[data-theme="quest"] .mantine-ThemeIcon-root:not([data-variant]) {
|
|
color: var(--mantine-primary-color-contrast);
|
|
}
|
|
[data-theme="quest"] .mantine-Checkbox-root {
|
|
--checkbox-icon-color: var(--mantine-primary-color-contrast);
|
|
}
|
|
|
|
/* Dividers: bronze rule with a compass-star waypoint. */
|
|
[data-theme="quest"] .mantine-Divider-root {
|
|
--divider-color: color-mix(in srgb, var(--quest-frame) 60%, transparent);
|
|
}
|
|
[data-theme="quest"] .mantine-Divider-root[data-orientation="horizontal"]:not([data-with-label]) {
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
[data-theme="quest"] .mantine-Divider-root[data-orientation="horizontal"]:not([data-with-label])::before {
|
|
content: "\2726"; /* ✦ */
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 0 0.5em;
|
|
background-color: var(--mantine-color-body);
|
|
color: var(--quest-bronze);
|
|
font-size: 0.7rem;
|
|
line-height: 1;
|
|
}
|
|
[data-theme="quest"] .mantine-Divider-label {
|
|
color: var(--quest-bronze);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
font-size: var(--mantine-font-size-xs);
|
|
}
|
|
|
|
/* Overlays: sealed notes. Popovers get a single bronze rule (the corner
|
|
brackets are reserved for full entries; Modal-content has them above). */
|
|
[data-theme="quest"] .mantine-Popover-dropdown {
|
|
background-color: var(--quest-surface);
|
|
border: 1px solid var(--quest-frame);
|
|
}
|
|
[data-theme="quest"] .mantine-Modal-header {
|
|
background-color: var(--quest-surface);
|
|
}
|
|
[data-theme="quest"] .mantine-Tooltip-tooltip {
|
|
background-color: #1c160e;
|
|
color: #ecdfc6;
|
|
border: 1px solid var(--quest-frame);
|
|
}
|
|
|
|
/* Notifications: dispatched scrolls. */
|
|
[data-theme="quest"] .mantine-Notification-root {
|
|
background-color: var(--quest-surface);
|
|
border: 1px solid var(--quest-frame);
|
|
box-shadow: var(--mantine-shadow-md);
|
|
}
|
|
|
|
/* Alerts keep a real border for forced-colors resilience. */
|
|
[data-theme="quest"] .mantine-Alert-root {
|
|
border: 1px solid var(--quest-frame);
|
|
}
|
|
|
|
[data-theme="quest"][data-mantine-color-scheme="light"] .mantine-Skeleton-root::after {
|
|
background-color: #e3d3ae;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- *
|
|
* 6. App component hooks
|
|
* ---------------------------------------------------------------- */
|
|
|
|
/* Tab strip: flat chapter tabs resting; docked = binding strip with a
|
|
bronze rule. Underline indicator, so accent text on the tab is fine. */
|
|
[data-theme="quest"] .flxn-tabs[data-stuck] {
|
|
background-color: var(--quest-shell);
|
|
border-bottom-color: var(--quest-frame);
|
|
}
|
|
[data-theme="quest"] .flxn-tab {
|
|
color: var(--mantine-color-dimmed);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
[data-theme="quest"] .flxn-tab[data-active] {
|
|
color: var(--mantine-primary-color-light-color);
|
|
font-weight: 700;
|
|
}
|
|
[data-theme="quest"] .flxn-tabs-indicator {
|
|
border-bottom: 3px solid var(--mantine-primary-color-filled);
|
|
padding-inline: 0.5rem;
|
|
}
|
|
|
|
/* Nav grid tiles: quest entries (frame + brackets set in section 4);
|
|
glyphs stay FLAT — bronze-inked tint only. */
|
|
[data-theme="quest"] .flxn-tile-icon {
|
|
color: var(--quest-bronze);
|
|
}
|
|
|
|
/* "See all": wax-seal-tabbed chip — parchment chip, accent seal dot,
|
|
accent ink on a neutral backing. */
|
|
[data-theme="quest"] .flxn-see-all {
|
|
background-color: var(--quest-surface);
|
|
border: 1px solid var(--quest-frame);
|
|
color: var(--mantine-primary-color-light-color);
|
|
font-weight: 600;
|
|
}
|
|
[data-theme="quest"] .flxn-see-all::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 0.6em;
|
|
height: 0.6em;
|
|
margin-right: 0.45em;
|
|
border-radius: 50%;
|
|
vertical-align: baseline;
|
|
background-image: radial-gradient(
|
|
circle at 35% 30%,
|
|
color-mix(in srgb, var(--mantine-primary-color-filled) 55%, white) 0%,
|
|
var(--mantine-primary-color-filled) 45%,
|
|
color-mix(in srgb, var(--mantine-primary-color-filled) 55%, black) 100%
|
|
);
|
|
box-shadow: 0 1px 1px var(--flxn-pop-shadow);
|
|
}
|
|
@media (hover: hover) {
|
|
[data-theme="quest"] .flxn-see-all:hover {
|
|
background-color: var(--mantine-primary-color-light);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
/* Match card + reaction tray: the entry and its reward line share one
|
|
frame — same 2px bronze border, tray on deeper parchment. */
|
|
[data-theme="quest"] .flxn-reaction-row {
|
|
background-color: var(--quest-recessed);
|
|
border: 2px solid var(--quest-frame);
|
|
}
|
|
|
|
/* Badge tiles: seal-stamped keepsakes. */
|
|
[data-theme="quest"] .flxn-badge-tile {
|
|
box-shadow: var(--mantine-shadow-xs);
|
|
}
|
|
|
|
/* Avatars: party-member portrait medallions (ring via --flxn-avatar-*). */
|
|
[data-theme="quest"] .flxn-avatar-frame {
|
|
box-shadow: 0 1px 2px var(--flxn-pop-shadow);
|
|
}
|