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
641 lines
28 KiB
CSS
641 lines
28 KiB
CSS
/* Dark Academia — candlelit library gothic.
|
|
Antique brass #b08d57 is the structural decoration (double borders, rules,
|
|
fleurons); the interactive accent follows the user via the primary aliases.
|
|
All eight accent ramps are retuned as heraldic manuscript pigments. */
|
|
|
|
/* ---------------------------------------------------------------- *
|
|
* 1. Scheme-independent tokens — (0,2,0)
|
|
* ---------------------------------------------------------------- */
|
|
|
|
[data-theme="gothic"][data-theme] {
|
|
/* Type: Garamond has a small x-height — sizes are bumped to compensate. */
|
|
--mantine-font-family: "EB Garamond", "Iowan Old Style", Georgia, serif;
|
|
--mantine-font-family-headings: "Cormorant Garamond", "EB Garamond", 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.6rem;
|
|
--mantine-h1-line-height: 1.15;
|
|
--mantine-h2-font-size: 2.1rem;
|
|
--mantine-h2-line-height: 1.2;
|
|
--mantine-h3-font-size: 1.65rem;
|
|
--mantine-h3-line-height: 1.25;
|
|
--mantine-h4-font-size: 1.35rem;
|
|
--mantine-h4-line-height: 1.3;
|
|
--mantine-h5-font-size: 1.175rem;
|
|
--mantine-h5-line-height: 1.35;
|
|
--mantine-h6-font-size: 1.05rem;
|
|
--mantine-h6-line-height: 1.4;
|
|
|
|
/* Shape: near-square, engraved rather than rounded. */
|
|
--mantine-radius-xs: 0;
|
|
--mantine-radius-sm: 0.0625rem;
|
|
--mantine-radius-md: 0.125rem;
|
|
--mantine-radius-lg: 0.125rem;
|
|
--mantine-radius-xl: 0.125rem;
|
|
--mantine-radius-default: 0.125rem;
|
|
|
|
/* Elevation: deep, soft, black — never bright. */
|
|
--mantine-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
|
|
--mantine-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.35);
|
|
--mantine-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.4);
|
|
--mantine-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 20px 44px rgba(0, 0, 0, 0.45);
|
|
--mantine-shadow-xl: 0 6px 12px rgba(0, 0, 0, 0.55), 0 28px 64px rgba(0, 0, 0, 0.5);
|
|
|
|
/* Accent ramps retuned as heraldic manuscript pigments — muted and
|
|
ink-saturated; every shade 6 carries parchment contrast text. */
|
|
|
|
/* blue → lapis lazuli */
|
|
--mantine-color-blue-0: #edeff7;
|
|
--mantine-color-blue-1: #d7dcee;
|
|
--mantine-color-blue-2: #b6bede;
|
|
--mantine-color-blue-3: #8e9ac9;
|
|
--mantine-color-blue-4: #6879b1;
|
|
--mantine-color-blue-5: #4a5b97;
|
|
--mantine-color-blue-6: #374a80;
|
|
--mantine-color-blue-7: #2c3b69;
|
|
--mantine-color-blue-8: #222d52;
|
|
--mantine-color-blue-9: #18213c;
|
|
|
|
/* red → oxblood */
|
|
--mantine-color-red-0: #f9ecea;
|
|
--mantine-color-red-1: #f0d5d3;
|
|
--mantine-color-red-2: #e2b0ad;
|
|
--mantine-color-red-3: #d18a86;
|
|
--mantine-color-red-4: #bd5f5c;
|
|
--mantine-color-red-5: #a53a3f;
|
|
--mantine-color-red-6: #8a1c2b;
|
|
--mantine-color-red-7: #741522;
|
|
--mantine-color-red-8: #5e101b;
|
|
--mantine-color-red-9: #470b14;
|
|
|
|
/* green → forest */
|
|
--mantine-color-green-0: #ecf1ea;
|
|
--mantine-color-green-1: #d4e1d1;
|
|
--mantine-color-green-2: #b2c9af;
|
|
--mantine-color-green-3: #8aac88;
|
|
--mantine-color-green-4: #628e62;
|
|
--mantine-color-green-5: #427245;
|
|
--mantine-color-green-6: #2f5b35;
|
|
--mantine-color-green-7: #25492b;
|
|
--mantine-color-green-8: #1c3821;
|
|
--mantine-color-green-9: #132818;
|
|
|
|
/* yellow → gilded gold leaf */
|
|
--mantine-color-yellow-0: #faf3df;
|
|
--mantine-color-yellow-1: #f1e3ba;
|
|
--mantine-color-yellow-2: #e5cd8c;
|
|
--mantine-color-yellow-3: #d5b05c;
|
|
--mantine-color-yellow-4: #c1963a;
|
|
--mantine-color-yellow-5: #a87a1a;
|
|
--mantine-color-yellow-6: #8a600f;
|
|
--mantine-color-yellow-7: #6f4d0c;
|
|
--mantine-color-yellow-8: #573c0a;
|
|
--mantine-color-yellow-9: #402c07;
|
|
|
|
/* grape → royal purple */
|
|
--mantine-color-grape-0: #f2edf5;
|
|
--mantine-color-grape-1: #e1d6e9;
|
|
--mantine-color-grape-2: #c8b4d6;
|
|
--mantine-color-grape-3: #a98bbd;
|
|
--mantine-color-grape-4: #8965a3;
|
|
--mantine-color-grape-5: #6e4789;
|
|
--mantine-color-grape-6: #593272;
|
|
--mantine-color-grape-7: #48285d;
|
|
--mantine-color-grape-8: #381e49;
|
|
--mantine-color-grape-9: #291636;
|
|
|
|
/* orange → burnt amber */
|
|
--mantine-color-orange-0: #f9efe3;
|
|
--mantine-color-orange-1: #f1dcc0;
|
|
--mantine-color-orange-2: #e6c192;
|
|
--mantine-color-orange-3: #dc9d5c;
|
|
--mantine-color-orange-4: #cd7c33;
|
|
--mantine-color-orange-5: #b95f18;
|
|
--mantine-color-orange-6: #9c4a10;
|
|
--mantine-color-orange-7: #7e3c0d;
|
|
--mantine-color-orange-8: #62300b;
|
|
--mantine-color-orange-9: #482407;
|
|
|
|
/* pink → rose madder */
|
|
--mantine-color-pink-0: #f8edf0;
|
|
--mantine-color-pink-1: #efd6dc;
|
|
--mantine-color-pink-2: #e2b3c0;
|
|
--mantine-color-pink-3: #d18b9e;
|
|
--mantine-color-pink-4: #bc637e;
|
|
--mantine-color-pink-5: #a34463;
|
|
--mantine-color-pink-6: #882f4e;
|
|
--mantine-color-pink-7: #712540;
|
|
--mantine-color-pink-8: #591c32;
|
|
--mantine-color-pink-9: #421425;
|
|
|
|
/* lime → sage */
|
|
--mantine-color-lime-0: #f0f2ea;
|
|
--mantine-color-lime-1: #dfe3d0;
|
|
--mantine-color-lime-2: #c8cdae;
|
|
--mantine-color-lime-3: #aab187;
|
|
--mantine-color-lime-4: #8c9465;
|
|
--mantine-color-lime-5: #707a48;
|
|
--mantine-color-lime-6: #5a6337;
|
|
--mantine-color-lime-7: #48502c;
|
|
--mantine-color-lime-8: #373d22;
|
|
--mantine-color-lime-9: #292d19;
|
|
|
|
/* Gray ramp as parchment/ink so grey-derived UI stays in the world. */
|
|
--mantine-color-gray-0: #f6efe0;
|
|
--mantine-color-gray-1: #efe6d5;
|
|
--mantine-color-gray-2: #e2d5bc;
|
|
--mantine-color-gray-3: #cfc0a4;
|
|
--mantine-color-gray-4: #b3a487;
|
|
--mantine-color-gray-5: #8f8069;
|
|
--mantine-color-gray-6: #6b5d4b;
|
|
--mantine-color-gray-7: #4a3f33;
|
|
--mantine-color-gray-8: #352c23;
|
|
--mantine-color-gray-9: #2b2118;
|
|
|
|
/* Dark ramp as ink-black with a violet-umber cast. */
|
|
--mantine-color-dark-0: #e8e0d0;
|
|
--mantine-color-dark-1: #a89a8a;
|
|
--mantine-color-dark-2: #6e5f68;
|
|
--mantine-color-dark-3: #4a3e4a;
|
|
--mantine-color-dark-4: #322833;
|
|
--mantine-color-dark-5: #241c26;
|
|
--mantine-color-dark-6: #1a141c;
|
|
--mantine-color-dark-7: #141016;
|
|
--mantine-color-dark-8: #0e0b10;
|
|
--mantine-color-dark-9: #0a0709;
|
|
|
|
--flxn-pop-shadow: rgba(0, 0, 0, 0.55);
|
|
--flxn-avatar-radius: 50%; /* portrait miniatures */
|
|
--flxn-avatar-border: 1px solid var(--gothic-brass-faint);
|
|
--flxn-badge-radius: 2px;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- *
|
|
* 2. Per-scheme tokens — (0,3,0)
|
|
* ---------------------------------------------------------------- */
|
|
|
|
[data-theme="gothic"][data-theme][data-mantine-color-scheme="dark"] {
|
|
--mantine-color-body: #0e0b10;
|
|
--mantine-color-text: #e8e0d0;
|
|
--mantine-color-bright: #f6efe0;
|
|
--mantine-color-dimmed: #a89a82;
|
|
--mantine-color-placeholder: #7d7264;
|
|
--mantine-color-anchor: var(--mantine-primary-color-2);
|
|
--mantine-color-error: #d4736a;
|
|
--mantine-color-default: #171219;
|
|
--mantine-color-default-hover: #1f1822;
|
|
--mantine-color-default-color: #e8e0d0;
|
|
--mantine-color-default-border: #453729;
|
|
|
|
/* Accent variant vars re-derived from the retuned ramps (Mantine's
|
|
defaults are literal rgba of its stock hues). Filled stays mid-ramp:
|
|
shade 8 pigment vanishes on ink black. */
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--mantine-color-gray-light: color-mix(in srgb, var(--mantine-color-gray-4) 12%, transparent);
|
|
--mantine-color-gray-light-hover: color-mix(in srgb, var(--mantine-color-gray-4) 18%, transparent);
|
|
--mantine-color-gray-light-color: var(--mantine-color-gray-2);
|
|
|
|
/* Theme-local palette used by component rules below. */
|
|
--gothic-brass: #b08d57;
|
|
--gothic-brass-bright: #c9a86b;
|
|
--gothic-brass-faint: rgba(176, 141, 87, 0.38);
|
|
--gothic-brass-ghost: rgba(176, 141, 87, 0.14);
|
|
--gothic-surface: #17121a;
|
|
--gothic-recessed: #0a0709;
|
|
--gothic-shell: #120e14;
|
|
--gothic-line: #060409;
|
|
--gothic-line-highlight: rgba(232, 224, 208, 0.08);
|
|
|
|
/* App tokens: gold -> antique brass; manuscript podium tiers. */
|
|
--flxn-gold: #c9a86b;
|
|
--flxn-silver: #a8a196;
|
|
--flxn-bronze: #b57945;
|
|
--flxn-toast-success: #a3b98a;
|
|
--flxn-toast-error: #dc9a90;
|
|
--flxn-podium-1-bg: color-mix(in srgb, #b08d57 14%, #141016);
|
|
--flxn-podium-1-border: color-mix(in srgb, #b08d57 55%, #322833);
|
|
--flxn-podium-1-label: #d6b878;
|
|
--flxn-podium-2-bg: color-mix(in srgb, #a8a196 8%, #141016);
|
|
--flxn-podium-2-border: color-mix(in srgb, #a8a196 32%, #322833);
|
|
--flxn-podium-2-label: #b5aea1;
|
|
--flxn-podium-3-bg: color-mix(in srgb, #b57945 12%, #141016);
|
|
--flxn-podium-3-border: color-mix(in srgb, #b57945 45%, #322833);
|
|
--flxn-podium-3-label: #c08757;
|
|
--flxn-showcase-bg: #141016;
|
|
--flxn-overlay: rgba(6, 3, 8, 0.62);
|
|
--flxn-dotgrid-color: rgba(176, 141, 87, 0.18);
|
|
}
|
|
|
|
[data-theme="gothic"][data-theme][data-mantine-color-scheme="light"] {
|
|
--mantine-color-body: #efe6d5;
|
|
--mantine-color-text: #2b2118;
|
|
--mantine-color-bright: #1a140e;
|
|
--mantine-color-dimmed: #6b5d4b;
|
|
--mantine-color-placeholder: #857661;
|
|
--mantine-color-anchor: var(--mantine-primary-color-7);
|
|
--mantine-color-error: #9e2b20;
|
|
--mantine-color-default: #f4ecdc;
|
|
--mantine-color-default-hover: #ece1cb;
|
|
--mantine-color-default-color: #2b2118;
|
|
--mantine-color-default-border: #b9a67f;
|
|
|
|
/* Accent variant vars re-derived from the retuned ramps; ink-saturated
|
|
text shades on aged parchment. */
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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: #f3ead8;
|
|
--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);
|
|
|
|
--gothic-brass: #8a6a34;
|
|
--gothic-brass-bright: #7a5a28;
|
|
--gothic-brass-faint: rgba(138, 106, 52, 0.45);
|
|
--gothic-brass-ghost: rgba(138, 106, 52, 0.12);
|
|
--gothic-surface: #f6efe0;
|
|
--gothic-recessed: #e4d6bd;
|
|
--gothic-shell: #e9dec9;
|
|
--gothic-line: rgba(74, 58, 38, 0.45);
|
|
--gothic-line-highlight: rgba(255, 252, 240, 0.85);
|
|
|
|
--flxn-gold: #7a5a16;
|
|
--flxn-silver: #7b7264;
|
|
--flxn-bronze: #8c4f22;
|
|
--flxn-toast-success: #4d6b34;
|
|
--flxn-toast-error: #9e2b20;
|
|
--flxn-podium-1-bg: color-mix(in srgb, #b08d57 16%, #f6efe0);
|
|
--flxn-podium-1-border: color-mix(in srgb, #8a6a34 55%, #cfc0a4);
|
|
--flxn-podium-1-label: #6f5116;
|
|
--flxn-podium-2-bg: color-mix(in srgb, #8f8069 10%, #f6efe0);
|
|
--flxn-podium-2-border: #b3a487;
|
|
--flxn-podium-2-label: #6b5d4b;
|
|
--flxn-podium-3-bg: color-mix(in srgb, #8c4f22 12%, #f6efe0);
|
|
--flxn-podium-3-border: color-mix(in srgb, #8c4f22 45%, #cfc0a4);
|
|
--flxn-podium-3-label: #74431c;
|
|
--flxn-showcase-bg: #f6efe0;
|
|
--flxn-overlay: rgba(26, 18, 10, 0.45);
|
|
--flxn-dotgrid-color: rgba(138, 104, 58, 0.22);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- *
|
|
* 3. Full-page decoration: candlelit vignette (dark scheme only)
|
|
* ---------------------------------------------------------------- */
|
|
|
|
[data-theme="gothic"][data-mantine-color-scheme="dark"] .flxn-theme-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9998;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(80% 50% at 50% 0%, rgba(176, 141, 87, 0.04), transparent 70%),
|
|
radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(4, 2, 6, 0.45) 100%);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- *
|
|
* 4. Component restyles
|
|
* ---------------------------------------------------------------- */
|
|
|
|
/* Headings: Cormorant, slight italic from h3 down for the manuscript voice. */
|
|
[data-theme="gothic"] .mantine-Title-root {
|
|
letter-spacing: 0.01em;
|
|
}
|
|
[data-theme="gothic"] h3.mantine-Title-root,
|
|
[data-theme="gothic"] h4.mantine-Title-root {
|
|
font-style: italic;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Cards & panels: thin double border in brass (1px border + inset outline). */
|
|
[data-theme="gothic"] .mantine-Paper-root[data-with-border] {
|
|
border: 1px solid var(--gothic-brass-faint);
|
|
outline: 1px solid var(--gothic-brass-ghost);
|
|
outline-offset: -4px;
|
|
background-color: var(--gothic-surface);
|
|
}
|
|
[data-theme="gothic"] .mantine-Card-root {
|
|
background-color: var(--gothic-surface);
|
|
}
|
|
|
|
/* Buttons: wax-seal solids in the user's accent, or brass-ruled outlines. */
|
|
[data-theme="gothic"] .mantine-Button-root {
|
|
letter-spacing: 0.03em;
|
|
}
|
|
[data-theme="gothic"] .mantine-Button-root[data-variant="filled"],
|
|
[data-theme="gothic"] .mantine-ActionIcon-root[data-variant="filled"] {
|
|
border: 1px solid var(--mantine-primary-color-9);
|
|
box-shadow: inset 0 1px 0 rgba(246, 239, 224, 0.12), 0 2px 8px rgba(0, 0, 0, 0.45);
|
|
}
|
|
[data-theme="gothic"] .mantine-Button-root[data-variant="default"],
|
|
[data-theme="gothic"] .mantine-Button-root[data-variant="outline"],
|
|
[data-theme="gothic"] .mantine-ActionIcon-root[data-variant="default"],
|
|
[data-theme="gothic"] .mantine-ActionIcon-root[data-variant="outline"] {
|
|
border-color: var(--gothic-brass-faint);
|
|
}
|
|
|
|
/* Inputs: recessed ledger lines with brass rules; focus follows the accent. */
|
|
[data-theme="gothic"] .mantine-Input-input {
|
|
background-color: var(--gothic-recessed);
|
|
border-color: var(--gothic-brass-faint);
|
|
}
|
|
[data-theme="gothic"] .mantine-PinInput-input {
|
|
background-color: var(--gothic-recessed);
|
|
}
|
|
|
|
/* Tabs: rubricated active label in the accent under a brass rule. */
|
|
[data-theme="gothic"] .mantine-Tabs-list {
|
|
--tabs-list-border-size: 1px;
|
|
}
|
|
[data-theme="gothic"] .mantine-Tabs-tab {
|
|
letter-spacing: 0.02em;
|
|
}
|
|
[data-theme="gothic"] .mantine-Tabs-tab[data-active] {
|
|
border-color: var(--gothic-brass);
|
|
color: var(--mantine-primary-color-light-color);
|
|
}
|
|
[data-theme="gothic"] .mantine-Tabs-tab[data-active]:hover {
|
|
border-color: var(--gothic-brass-bright);
|
|
}
|
|
|
|
/* Nav: active entries follow the accent — tinted wash plus a marginal rule. */
|
|
[data-theme="gothic"] .mantine-NavLink-root[data-active] {
|
|
background-color: var(--mantine-primary-color-light);
|
|
color: var(--mantine-primary-color-light-color);
|
|
box-shadow: inset 2px 0 0 var(--mantine-primary-color-filled);
|
|
}
|
|
[data-theme="gothic"] .mantine-NavLink-root[data-active]:hover {
|
|
background-color: var(--mantine-primary-color-light-hover);
|
|
}
|
|
|
|
/* Shell: bound pages — header and navbar as darker leather edges. */
|
|
[data-theme="gothic"] .mantine-AppShell-header {
|
|
background-color: var(--gothic-shell);
|
|
border-bottom: 1px solid var(--gothic-brass-faint);
|
|
}
|
|
[data-theme="gothic"] .mantine-AppShell-navbar {
|
|
background-color: var(--gothic-shell);
|
|
border-color: var(--gothic-brass-faint);
|
|
}
|
|
|
|
/* Segmented control: engraved channel with a brass-edged slider. */
|
|
[data-theme="gothic"] .mantine-SegmentedControl-root {
|
|
background-color: var(--gothic-recessed);
|
|
}
|
|
[data-theme="gothic"] .mantine-SegmentedControl-indicator {
|
|
background-color: var(--gothic-surface);
|
|
border: 1px solid var(--gothic-brass-faint);
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
|
|
}
|
|
[data-theme="gothic"] .mantine-SegmentedControl-label {
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
/* Dividers: engraved rule with a centered fleuron ornament. */
|
|
[data-theme="gothic"] .mantine-Divider-root {
|
|
--divider-color: var(--gothic-line);
|
|
}
|
|
[data-theme="gothic"] .mantine-Divider-root[data-orientation="horizontal"] {
|
|
box-shadow: 0 1px 0 var(--gothic-line-highlight);
|
|
}
|
|
[data-theme="gothic"] .mantine-Divider-root[data-orientation="horizontal"]:not([data-with-label]) {
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
[data-theme="gothic"] .mantine-Divider-root[data-orientation="horizontal"]:not([data-with-label])::before {
|
|
content: "\2766"; /* ❦ fleuron */
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 0 0.5em;
|
|
background-color: var(--mantine-color-body);
|
|
color: var(--gothic-brass);
|
|
font-size: 0.8rem;
|
|
line-height: 1;
|
|
}
|
|
[data-theme="gothic"] .mantine-Divider-label {
|
|
color: var(--gothic-brass);
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
font-size: var(--mantine-font-size-xs);
|
|
}
|
|
|
|
/* Overlays: sealed-note dropdowns and modals with double brass borders. */
|
|
[data-theme="gothic"] .mantine-Modal-content,
|
|
[data-theme="gothic"] .mantine-Popover-dropdown {
|
|
background-color: var(--gothic-surface);
|
|
border: 1px solid var(--gothic-brass-faint);
|
|
outline: 1px solid var(--gothic-brass-ghost);
|
|
outline-offset: -4px;
|
|
}
|
|
[data-theme="gothic"] .mantine-Modal-header {
|
|
background-color: var(--gothic-surface);
|
|
}
|
|
[data-theme="gothic"] .mantine-Tooltip-tooltip {
|
|
background-color: #060409;
|
|
color: #e8e0d0;
|
|
border: 1px solid var(--gothic-brass-faint);
|
|
}
|
|
|
|
/* Notifications: sealed notes with a brass frame. */
|
|
[data-theme="gothic"] .mantine-Notification-root {
|
|
background-color: var(--gothic-surface);
|
|
border: 1px solid var(--gothic-brass-faint);
|
|
box-shadow: var(--mantine-shadow-md);
|
|
}
|
|
|
|
/* Badges: engraved plaques. */
|
|
[data-theme="gothic"] .mantine-Badge-root {
|
|
letter-spacing: 0.06em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Alerts keep a real border for forced-colors resilience. */
|
|
[data-theme="gothic"] .mantine-Alert-root {
|
|
border: 1px solid var(--gothic-brass-faint);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- *
|
|
* 5. App component hooks
|
|
* ---------------------------------------------------------------- */
|
|
|
|
/* Tab strip: docks as a shell strip with a brass rule; active label
|
|
rubricated in the accent over a thin double brass rule (gilded underline). */
|
|
[data-theme="gothic"] .flxn-tabs[data-stuck] {
|
|
background-color: var(--gothic-shell);
|
|
box-shadow: inset 0 -1px 0 var(--gothic-brass-faint);
|
|
}
|
|
[data-theme="gothic"] .flxn-tab {
|
|
color: var(--mantine-color-dimmed);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
[data-theme="gothic"] .flxn-tab[data-active] {
|
|
color: var(--mantine-primary-color-light-color);
|
|
font-weight: 600;
|
|
}
|
|
[data-theme="gothic"] .flxn-tabs-indicator {
|
|
border-bottom: 3px double var(--gothic-brass);
|
|
padding-inline: 0.5rem;
|
|
}
|
|
|
|
/* Nav grid tiles: brass double-ruled panels, flat gilded glyph. */
|
|
[data-theme="gothic"] .flxn-tile {
|
|
background-color: var(--gothic-surface);
|
|
border: 1px solid var(--gothic-brass-faint);
|
|
outline: 1px solid var(--gothic-brass-ghost);
|
|
outline-offset: -4px;
|
|
}
|
|
[data-theme="gothic"] .flxn-tile-icon {
|
|
color: var(--gothic-brass-bright);
|
|
}
|
|
|
|
/* "See all" link: brass-rimmed chip, accent-inked label. */
|
|
[data-theme="gothic"] .flxn-see-all {
|
|
background-color: var(--gothic-brass-ghost);
|
|
border: 1px solid var(--gothic-brass-faint);
|
|
color: var(--mantine-primary-color-light-color);
|
|
}
|
|
@media (hover: hover) {
|
|
[data-theme="gothic"] .flxn-see-all:hover {
|
|
background-color: var(--mantine-primary-color-light);
|
|
}
|
|
}
|
|
|
|
/* Match card + reaction tray: one construction — matching brass rules,
|
|
tray recessed as a deeper ink panel. */
|
|
[data-theme="gothic"] .flxn-match-card {
|
|
background-color: var(--gothic-surface);
|
|
border: 1px solid var(--gothic-brass-faint);
|
|
}
|
|
[data-theme="gothic"] .flxn-reaction-row {
|
|
background-color: var(--gothic-recessed);
|
|
border: 1px solid var(--gothic-brass-faint);
|
|
}
|