kyle
9febb8bb60
CI/CD Pipeline / Build and Push PocketBase Docker Image (push) Successful in 9s
CI/CD Pipeline / i18n Catalog Check (push) Successful in 38s
CI/CD Pipeline / Build and Push App Docker Image (push) Successful in 2m11s
CI/CD Pipeline / Deploy to Kubernetes (push) Successful in 8m31s
65 lines
3.2 KiB
CSS
65 lines
3.2 KiB
CSS
/* App-level semantic tokens; themes restyle them under [data-theme] scopes.
|
|
No light-dark() in html-level declarations — postcss-preset-mantine
|
|
rewrites it into a descendant selector that never matches <html>. Use
|
|
explicit [data-mantine-color-scheme] blocks. */
|
|
|
|
:root {
|
|
/* bottom-nav indicator travel: spring (stiffness 320, damping 30) */
|
|
--flxn-nav-travel: linear(0, 0.0102, 0.0376, 0.0778, 0.1272, 0.1829, 0.2422, 0.3033, 0.3646, 0.4247, 0.4829, 0.5383, 0.5906, 0.6393, 0.6843, 0.7256, 0.7631, 0.7969, 0.8273, 0.8543, 0.8783, 0.8993, 0.9176, 0.9335, 0.9472, 0.9589, 0.9688, 0.9772, 0.9841, 0.9898, 0.9945, 0.9982, 1.0011, 1.0034, 1.0051, 1.0063, 1.0072, 1.0077, 1.0079, 1.0079, 1.0078);
|
|
--flxn-nav-travel-ms: 333ms;
|
|
|
|
/* accolades */
|
|
--flxn-gold: gold;
|
|
--flxn-silver: var(--mantine-color-gray-5);
|
|
--flxn-bronze: var(--mantine-color-orange-6);
|
|
|
|
/* toast icons */
|
|
--flxn-toast-success: lightgreen;
|
|
--flxn-toast-error: lightcoral;
|
|
|
|
/* surfaces & decoration */
|
|
--flxn-overlay: rgba(0, 0, 0, 0.4);
|
|
--flxn-dotgrid-color: var(--mantine-color-default-border);
|
|
--flxn-pop-shadow: rgba(0, 0, 0, 0.3);
|
|
--flxn-avatar-radius: 50%;
|
|
--flxn-avatar-border: 1px solid var(--mantine-color-default-border);
|
|
--flxn-badge-radius: 12px;
|
|
|
|
/* text on accent fills: black/white from the cascaded fill (oklch block
|
|
below overrides this fallback) */
|
|
--flxn-on-accent: var(--mantine-primary-color-contrast);
|
|
|
|
/* light-scheme values */
|
|
--flxn-podium-1-bg: color-mix(in srgb, var(--mantine-color-yellow-4) 10%, var(--mantine-color-white));
|
|
--flxn-podium-1-border: color-mix(in srgb, var(--mantine-color-yellow-6) 45%, var(--mantine-color-gray-3));
|
|
--flxn-podium-1-label: var(--mantine-color-yellow-8);
|
|
--flxn-podium-2-bg: color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-white));
|
|
--flxn-podium-2-border: var(--mantine-color-gray-4);
|
|
--flxn-podium-2-label: var(--mantine-color-gray-6);
|
|
--flxn-podium-3-bg: color-mix(in srgb, var(--mantine-color-orange-5) 8%, var(--mantine-color-white));
|
|
--flxn-podium-3-border: color-mix(in srgb, var(--mantine-color-orange-6) 35%, var(--mantine-color-gray-3));
|
|
--flxn-podium-3-label: var(--mantine-color-orange-8);
|
|
--flxn-showcase-bg: var(--mantine-color-white);
|
|
}
|
|
|
|
:root[data-mantine-color-scheme="dark"] {
|
|
--flxn-podium-1-bg: color-mix(in srgb, var(--mantine-color-yellow-8) 16%, var(--mantine-color-dark-6));
|
|
--flxn-podium-1-border: color-mix(in srgb, var(--mantine-color-yellow-6) 35%, var(--mantine-color-dark-4));
|
|
--flxn-podium-1-label: var(--mantine-color-yellow-4);
|
|
--flxn-podium-2-bg: color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-dark-6));
|
|
--flxn-podium-2-border: var(--mantine-color-dark-4);
|
|
--flxn-podium-2-label: var(--mantine-color-gray-4);
|
|
--flxn-podium-3-bg: color-mix(in srgb, var(--mantine-color-orange-9) 14%, var(--mantine-color-dark-6));
|
|
--flxn-podium-3-border: color-mix(in srgb, var(--mantine-color-orange-7) 30%, var(--mantine-color-dark-4));
|
|
--flxn-podium-3-label: var(--mantine-color-orange-4);
|
|
--flxn-showcase-bg: var(--mantine-color-dark-7);
|
|
}
|
|
|
|
@supports (color: oklch(from red calc(1 - 1) 0 h)) {
|
|
:root {
|
|
--flxn-on-accent: oklch(
|
|
from var(--mantine-primary-color-filled) calc((0.6 - l) * infinity) 0 h
|
|
);
|
|
}
|
|
}
|