refactor(css): migrate all hardcoded colours to primitives (CSS → zero literals)
Move every non-structural colour literal in source CSS into the primitive palette and reference via var(--p-*): - 194 hex + 139 rgba() across 38 files replaced - 90 new primitives added (brand azure/red, violet/indigo, cyan, pink, emerald, slate, navy, Notion paper, illustration art, vendor/OS-media) - near-duplicate neutrals snapped to existing ramp values - coloured rgba() alpha tints -> color-mix(in srgb, var(--p-*) N%, transparent) - structural rgba(0,0,0/255,255,255) and comment breadcrumbs left intact Source CSS now contains zero hardcoded colour outside primitives.css. Build + theme-lint pass; every var(--p-*) reference resolves.
This commit is contained in:
EthanHealy01
+1
-1
@@ -8,7 +8,7 @@
|
||||
}
|
||||
|
||||
.freeHighlight {
|
||||
background: linear-gradient(135deg, #6366f1, #ec4899);
|
||||
background: linear-gradient(135deg, var(--p-indigo-500), var(--p-pink-500));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
Uses the app's semantic theme tokens (theme.css) so it tracks light/dark. */
|
||||
|
||||
.payg {
|
||||
--payg-accent: #0a8bff;
|
||||
--payg-accent-soft: rgba(10, 139, 255, 0.1);
|
||||
--payg-accent: var(--p-azure-500);
|
||||
--payg-accent-soft: color-mix(in srgb, var(--p-azure-500) 10%, transparent);
|
||||
--payg-radius: 14px;
|
||||
--payg-gap: 20px;
|
||||
/* Cards sit ON the modal content bg; in light that's white-on-white so we
|
||||
@@ -17,7 +17,7 @@
|
||||
/* Dark mode: surfaces/borders track the neutral --c-* tokens (set on the base
|
||||
rule); only the brand-azure accent tint is tuned brighter for dark. */
|
||||
[data-mantine-color-scheme="dark"] .payg {
|
||||
--payg-accent-soft: rgba(79, 142, 245, 0.16);
|
||||
--payg-accent-soft: color-mix(in srgb, var(--p-azure-560) 16%, transparent);
|
||||
}
|
||||
|
||||
/* ── Header ─────────────────────────────────────────────────────────── */
|
||||
@@ -46,7 +46,7 @@
|
||||
.payg-role-pill[data-leader="true"] {
|
||||
background: var(--payg-accent-soft);
|
||||
color: var(--payg-accent);
|
||||
border: 1px solid rgba(10, 139, 255, 0.25);
|
||||
border: 1px solid color-mix(in srgb, var(--p-azure-500) 25%, transparent);
|
||||
}
|
||||
.payg-role-pill[data-leader="false"] {
|
||||
background: var(--c-surface-sunken);
|
||||
@@ -95,7 +95,7 @@
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.payg-planhead__lbl--free {
|
||||
color: #10b981;
|
||||
color: var(--p-emerald-500);
|
||||
}
|
||||
.payg-planhead__lbl--meter {
|
||||
color: var(--payg-accent);
|
||||
@@ -172,22 +172,22 @@
|
||||
.payg-hero[data-state="FULL"]::before {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(10, 139, 255, 0.12) 0%,
|
||||
rgba(10, 139, 255, 0) 55%
|
||||
color-mix(in srgb, var(--p-azure-500) 12%, transparent) 0%,
|
||||
color-mix(in srgb, var(--p-azure-500) 0%, transparent) 55%
|
||||
);
|
||||
}
|
||||
.payg-hero[data-state="WARNED"]::before {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(234, 179, 8, 0.16) 0%,
|
||||
rgba(234, 179, 8, 0) 55%
|
||||
color-mix(in srgb, var(--p-yellow-500) 16%, transparent) 0%,
|
||||
color-mix(in srgb, var(--p-yellow-500) 0%, transparent) 55%
|
||||
);
|
||||
}
|
||||
.payg-hero[data-state="DEGRADED"]::before {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(239, 68, 68, 0.16) 0%,
|
||||
rgba(239, 68, 68, 0) 55%
|
||||
color-mix(in srgb, var(--p-red-500) 16%, transparent) 0%,
|
||||
color-mix(in srgb, var(--p-red-500) 0%, transparent) 55%
|
||||
);
|
||||
}
|
||||
.payg-hero__inner {
|
||||
@@ -239,11 +239,11 @@
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-green-700);
|
||||
background: rgba(34, 197, 94, 0.14);
|
||||
background: color-mix(in srgb, var(--p-green-500) 14%, transparent);
|
||||
}
|
||||
[data-mantine-color-scheme="dark"] .payg-hero__credit {
|
||||
color: #4ade80;
|
||||
background: rgba(34, 197, 94, 0.18);
|
||||
color: var(--p-green-400);
|
||||
background: color-mix(in srgb, var(--p-green-500) 18%, transparent);
|
||||
}
|
||||
|
||||
/* Make Mantine default-variant buttons read clearly on the lifted cards in
|
||||
@@ -312,7 +312,7 @@
|
||||
}
|
||||
.payg-status[data-state="FULL"] .payg-status__dot {
|
||||
background: var(--color-green-500);
|
||||
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-green-500) 18%, transparent);
|
||||
}
|
||||
.payg-status[data-state="WARNED"] {
|
||||
background: var(--color-yellow-100);
|
||||
@@ -320,7 +320,7 @@
|
||||
}
|
||||
.payg-status[data-state="WARNED"] .payg-status__dot {
|
||||
background: var(--color-yellow-500);
|
||||
box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-yellow-500) 20%, transparent);
|
||||
}
|
||||
.payg-status[data-state="DEGRADED"] {
|
||||
background: var(--color-red-100);
|
||||
@@ -328,7 +328,7 @@
|
||||
}
|
||||
.payg-status[data-state="DEGRADED"] .payg-status__dot {
|
||||
background: var(--color-red-500);
|
||||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-red-500) 20%, transparent);
|
||||
}
|
||||
|
||||
/* Segmented usage bar */
|
||||
@@ -346,7 +346,7 @@
|
||||
transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.payg-bar__fill[data-state="FULL"] {
|
||||
background: linear-gradient(90deg, #0a8bff, #38bdf8);
|
||||
background: linear-gradient(90deg, var(--p-azure-500), var(--p-azure-400));
|
||||
}
|
||||
.payg-bar__fill[data-state="WARNED"] {
|
||||
background: linear-gradient(90deg, var(--p-amber-500), var(--p-amber-400));
|
||||
@@ -406,7 +406,7 @@
|
||||
padding: 13px 16px;
|
||||
border-radius: 10px;
|
||||
background: var(--payg-accent-soft);
|
||||
border: 1px solid rgba(10, 139, 255, 0.2);
|
||||
border: 1px solid color-mix(in srgb, var(--p-azure-500) 20%, transparent);
|
||||
}
|
||||
.payg-preview__icon {
|
||||
color: var(--payg-accent);
|
||||
@@ -458,11 +458,11 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.payg-gate[data-enabled="true"] .payg-gate__chip {
|
||||
background: rgba(34, 197, 94, 0.16);
|
||||
background: color-mix(in srgb, var(--p-green-500) 16%, transparent);
|
||||
color: var(--p-green-500);
|
||||
}
|
||||
.payg-gate[data-enabled="false"] .payg-gate__chip {
|
||||
background: rgba(239, 68, 68, 0.16);
|
||||
background: color-mix(in srgb, var(--p-red-500) 16%, transparent);
|
||||
color: var(--p-red-400);
|
||||
}
|
||||
.payg-gate__label {
|
||||
@@ -487,11 +487,11 @@
|
||||
}
|
||||
.payg-gate__tag[data-variant="pause"] {
|
||||
color: var(--c-danger);
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
background: color-mix(in srgb, var(--p-red-500) 12%, transparent);
|
||||
}
|
||||
[data-mantine-color-scheme="dark"] .payg-gate__tag[data-variant="pause"] {
|
||||
color: var(--c-danger);
|
||||
background: rgba(239, 68, 68, 0.18);
|
||||
background: color-mix(in srgb, var(--p-red-500) 18%, transparent);
|
||||
}
|
||||
|
||||
/* ── Member rows ────────────────────────────────────────────────────── */
|
||||
@@ -609,11 +609,11 @@
|
||||
gap: 16px;
|
||||
padding: 20px 24px;
|
||||
border-radius: var(--payg-radius);
|
||||
border: 1px solid rgba(99, 91, 255, 0.28);
|
||||
border: 1px solid color-mix(in srgb, var(--p-periwinkle-500) 28%, transparent);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(99, 91, 255, 0.1) 0%,
|
||||
rgba(99, 91, 255, 0.02) 100%
|
||||
color-mix(in srgb, var(--p-periwinkle-500) 10%, transparent) 0%,
|
||||
color-mix(in srgb, var(--p-periwinkle-500) 2%, transparent) 100%
|
||||
);
|
||||
}
|
||||
.payg-stripe__title {
|
||||
|
||||
@@ -145,8 +145,10 @@
|
||||
border: 1.5px solid transparent;
|
||||
background:
|
||||
linear-gradient(var(--payg-card-bg), var(--payg-card-bg)) padding-box,
|
||||
linear-gradient(135deg, var(--payg-accent) 0%, #6c5ce7 100%) border-box;
|
||||
box-shadow: 0 10px 28px -18px rgba(10, 139, 255, 0.4);
|
||||
linear-gradient(135deg, var(--payg-accent) 0%, var(--p-purple-500) 100%)
|
||||
border-box;
|
||||
box-shadow: 0 10px 28px -18px
|
||||
color-mix(in srgb, var(--p-azure-500) 40%, transparent);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
@@ -161,7 +163,11 @@
|
||||
flex-shrink: 0;
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, var(--payg-accent) 0%, #6c5ce7 100%);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--payg-accent) 0%,
|
||||
var(--p-purple-500) 100%
|
||||
);
|
||||
color: white !important;
|
||||
font-size: 1.7rem !important;
|
||||
}
|
||||
@@ -292,7 +298,7 @@
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
.paygf-explainer__icon--free {
|
||||
color: #10b981;
|
||||
color: var(--p-emerald-500);
|
||||
}
|
||||
.paygf-explainer__icon--paid {
|
||||
color: var(--payg-accent);
|
||||
|
||||
+6
-6
@@ -9,10 +9,10 @@
|
||||
Payg.css / UpgradeModal.css treatments the control sits beside. */
|
||||
|
||||
.scc {
|
||||
--scc-accent: #0a8bff;
|
||||
--scc-accent-text: #0a8bff;
|
||||
--scc-accent-soft: rgba(10, 139, 255, 0.12);
|
||||
--scc-accent-border: rgba(10, 139, 255, 0.25);
|
||||
--scc-accent: var(--p-azure-500);
|
||||
--scc-accent-text: var(--p-azure-500);
|
||||
--scc-accent-soft: color-mix(in srgb, var(--p-azure-500) 12%, transparent);
|
||||
--scc-accent-border: color-mix(in srgb, var(--p-azure-500) 25%, transparent);
|
||||
--scc-chip-bg: var(--c-surface-sunken);
|
||||
--scc-chip-border: var(--c-border);
|
||||
/* Consistent vertical rhythm between the control row, the estimate, and any
|
||||
@@ -24,8 +24,8 @@
|
||||
[data-mantine-color-scheme="dark"] .scc {
|
||||
/* Chip surface/border track the neutral --c-* tokens (base rule); only the
|
||||
brand-azure accent is tuned brighter for dark. */
|
||||
--scc-accent-text: #66b8ff;
|
||||
--scc-accent-soft: rgba(10, 139, 255, 0.16);
|
||||
--scc-accent-text: var(--p-azure-300);
|
||||
--scc-accent-soft: color-mix(in srgb, var(--p-azure-500) 16%, transparent);
|
||||
}
|
||||
|
||||
/* ── Inline row: presets · custom · no-cap · (save) ──────────────────── */
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
user feels like they're filling out one form, not navigating pages. */
|
||||
|
||||
.upm {
|
||||
--upm-accent: #0a8bff;
|
||||
--upm-accent-2: #6c5ce7;
|
||||
--upm-accent-soft: rgba(10, 139, 255, 0.08);
|
||||
--upm-success: #10b981;
|
||||
--upm-accent: var(--p-azure-500);
|
||||
--upm-accent-2: var(--p-purple-500);
|
||||
--upm-accent-soft: color-mix(in srgb, var(--p-azure-500) 8%, transparent);
|
||||
--upm-success: var(--p-emerald-500);
|
||||
--upm-radius: 18px;
|
||||
--upm-card-bg: var(--c-surface);
|
||||
--upm-border: var(--c-border);
|
||||
@@ -19,7 +19,7 @@
|
||||
[data-mantine-color-scheme="dark"] .upm {
|
||||
/* Card/border/divider track the neutral --c-* tokens (base rule); only the
|
||||
brand-azure accent tint is tuned for dark. */
|
||||
--upm-accent-soft: rgba(79, 142, 245, 0.14);
|
||||
--upm-accent-soft: color-mix(in srgb, var(--p-azure-560) 14%, transparent);
|
||||
}
|
||||
|
||||
/* Backdrop locks the page and centres the modal. z-index matches
|
||||
@@ -253,7 +253,7 @@
|
||||
border-radius: 6px;
|
||||
}
|
||||
.upm-step__edit:hover {
|
||||
background: rgba(10, 139, 255, 0.12);
|
||||
background: color-mix(in srgb, var(--p-azure-500) 12%, transparent);
|
||||
}
|
||||
|
||||
/* Placeholder card for the loading / error / mock states — a dashed, centered
|
||||
@@ -327,7 +327,9 @@
|
||||
.upm-confirm__icon {
|
||||
font-size: 64px !important;
|
||||
color: var(--upm-success);
|
||||
filter: drop-shadow(0 6px 18px rgba(16, 185, 129, 0.35));
|
||||
filter: drop-shadow(
|
||||
0 6px 18px color-mix(in srgb, var(--p-emerald-500) 35%, transparent)
|
||||
);
|
||||
}
|
||||
.upm-confirm__title {
|
||||
margin: 6px 0 0;
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
}
|
||||
|
||||
.headerResting {
|
||||
background: #3b4b6e; /* dark blue for unselected in light mode */
|
||||
background: var(--p-navy-500); /* dark blue for unselected in light mode */
|
||||
color: #ffffff;
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
}
|
||||
@@ -229,7 +229,7 @@
|
||||
}
|
||||
|
||||
.pinned {
|
||||
color: #ffc107 !important;
|
||||
color: var(--p-gold-500) !important;
|
||||
}
|
||||
|
||||
/* Unsupported file indicator */
|
||||
@@ -299,7 +299,7 @@
|
||||
}
|
||||
|
||||
:global([data-mantine-color-scheme="dark"]) .headerResting {
|
||||
background: #0d1020; /* requested default unselected color */
|
||||
background: var(--p-navy-950); /* requested default unselected color */
|
||||
color: var(--c-accent-fg); /* var(--p-gray-300) */
|
||||
border-bottom-color: var(--c-border); /* #3A4047 */
|
||||
}
|
||||
|
||||
@@ -183,7 +183,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(220, 38, 38, 0.12);
|
||||
background: color-mix(in srgb, var(--p-red-600) 12%, transparent);
|
||||
border-radius: 12px;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -564,7 +564,7 @@
|
||||
gap: 0.35rem;
|
||||
padding: 0.22rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
background: var(--mantine-color-teal-6, #10b981);
|
||||
background: var(--mantine-color-teal-6, var(--p-emerald-500));
|
||||
color: #ffffff;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
@@ -600,7 +600,7 @@
|
||||
.files-page-card.is-in-workspace {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--mantine-color-teal-6, #10b981) 35%,
|
||||
var(--mantine-color-teal-6, var(--p-emerald-500)) 35%,
|
||||
var(--c-border-subtle)
|
||||
);
|
||||
}
|
||||
@@ -613,7 +613,12 @@
|
||||
pointer-events: none;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
color-mix(in srgb, var(--mantine-color-teal-6, #10b981) 6%, transparent) 0%,
|
||||
color-mix(
|
||||
in srgb,
|
||||
var(--mantine-color-teal-6, var(--p-emerald-500)) 6%,
|
||||
transparent
|
||||
)
|
||||
0%,
|
||||
transparent 40%
|
||||
);
|
||||
z-index: 0;
|
||||
@@ -625,7 +630,7 @@
|
||||
gap: 0.3rem;
|
||||
padding: 0.12rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
background: var(--mantine-color-teal-6, #10b981);
|
||||
background: var(--mantine-color-teal-6, var(--p-emerald-500));
|
||||
color: #ffffff;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
@@ -639,7 +644,7 @@
|
||||
.files-page-list-row.is-in-workspace {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--mantine-color-teal-6, #10b981) 4%,
|
||||
var(--mantine-color-teal-6, var(--p-emerald-500)) 4%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
+36
-17
@@ -22,7 +22,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
|
||||
box-shadow: 0 16px 32px
|
||||
color-mix(in srgb, var(--p-slate-900) 18%, transparent);
|
||||
animation: heroLogoScale 0.25s ease forwards;
|
||||
}
|
||||
|
||||
@@ -52,7 +53,8 @@
|
||||
background: var(--c-surface, #ffffff);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
|
||||
box-shadow: 0 12px 32px
|
||||
color-mix(in srgb, var(--p-slate-900) 12%, transparent);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
@@ -80,7 +82,8 @@
|
||||
background: var(--c-surface, #ffffff);
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
|
||||
box-shadow: 0 12px 32px
|
||||
color-mix(in srgb, var(--p-slate-900) 12%, transparent);
|
||||
}
|
||||
|
||||
.mfaSetupGrid {
|
||||
@@ -94,7 +97,7 @@
|
||||
padding: 12px;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
|
||||
box-shadow: 0 8px 16px color-mix(in srgb, var(--p-slate-900) 12%, transparent);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -262,7 +265,7 @@
|
||||
opacity: 1;
|
||||
border: 1px solid rgba(255, 255, 255, 0.9);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #1f2933;
|
||||
color: var(--p-slate-850);
|
||||
box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
@@ -334,7 +337,7 @@
|
||||
|
||||
/* Icon styles */
|
||||
.heroIcon {
|
||||
color: var(--c-text, #0f172a);
|
||||
color: var(--c-text, var(--p-slate-900));
|
||||
}
|
||||
|
||||
/* ===================================================================== */
|
||||
@@ -372,7 +375,7 @@
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--c-text, #0f172a);
|
||||
color: var(--c-text, var(--p-slate-900));
|
||||
}
|
||||
|
||||
.headerRight {
|
||||
@@ -384,8 +387,8 @@
|
||||
.stepPill {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--c-text-muted, #64748b);
|
||||
background: var(--c-surface-sunken, #f1f5f9);
|
||||
color: var(--c-text-muted, var(--p-slate-500));
|
||||
background: var(--c-surface-sunken, var(--p-slate-100));
|
||||
padding: 5px 11px;
|
||||
border-radius: 9999px;
|
||||
white-space: nowrap;
|
||||
@@ -412,7 +415,10 @@
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--c-border-subtle, rgba(15, 23, 42, 0.08));
|
||||
background: var(
|
||||
--c-border-subtle,
|
||||
color-mix(in srgb, var(--p-slate-900) 8%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
/* ---- content ---- */
|
||||
@@ -434,7 +440,12 @@
|
||||
min-height: 128px;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(155deg, #eef1fb 0%, #f6f4fc 55%, #fbf4f7 100%);
|
||||
background: linear-gradient(
|
||||
155deg,
|
||||
var(--p-tint-blue) 0%,
|
||||
var(--p-tint-violet) 55%,
|
||||
var(--p-tint-pink) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.heroArt {
|
||||
@@ -448,7 +459,9 @@
|
||||
height: 62px;
|
||||
border-radius: 15px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.16));
|
||||
filter: drop-shadow(
|
||||
0 10px 20px color-mix(in srgb, var(--p-slate-900) 16%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
.heroTile {
|
||||
@@ -459,7 +472,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
|
||||
box-shadow: 0 10px 22px
|
||||
color-mix(in srgb, var(--p-slate-900) 14%, transparent);
|
||||
}
|
||||
|
||||
/* ---- title + body (left-aligned, clean) ---- */
|
||||
@@ -468,14 +482,14 @@
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.3;
|
||||
color: var(--c-text, #0f172a);
|
||||
color: var(--c-text, var(--p-slate-900));
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bodyNew {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--c-text-muted, #475569);
|
||||
color: var(--c-text-muted, var(--p-slate-600));
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -504,10 +518,15 @@
|
||||
|
||||
/* ---- dark theme surface tuning ---- */
|
||||
:global([data-mantine-color-scheme="dark"]) .heroPanel {
|
||||
background: linear-gradient(155deg, #1a2236 0%, #171e30 55%, #201a28 100%);
|
||||
background: linear-gradient(
|
||||
155deg,
|
||||
var(--p-navy-850) 0%,
|
||||
var(--p-navy-880) 55%,
|
||||
var(--p-plum-900) 100%
|
||||
);
|
||||
}
|
||||
|
||||
:global([data-mantine-color-scheme="dark"]) .heroTile {
|
||||
background: #0f1626;
|
||||
background: var(--p-navy-900);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
box-shadow:
|
||||
0 0 0 2px var(--mantine-primary-color-filled),
|
||||
0 0 15px var(--mantine-primary-color-filled),
|
||||
inset 0 0 15px rgba(59, 130, 246, 0.1);
|
||||
inset 0 0 15px color-mix(in srgb, var(--p-blue-500) 10%, transparent);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
@@ -23,13 +23,13 @@
|
||||
box-shadow:
|
||||
0 0 0 3px var(--mantine-primary-color-filled),
|
||||
0 0 20px var(--mantine-primary-color-filled),
|
||||
inset 0 0 20px rgba(59, 130, 246, 0.1);
|
||||
inset 0 0 20px color-mix(in srgb, var(--p-blue-500) 10%, transparent);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 0 3px var(--mantine-primary-color-filled),
|
||||
0 0 30px var(--mantine-primary-color-filled),
|
||||
inset 0 0 30px rgba(59, 130, 246, 0.2);
|
||||
inset 0 0 30px color-mix(in srgb, var(--p-blue-500) 20%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+2
-1
@@ -40,7 +40,8 @@
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
|
||||
box-shadow: 0 18px 36px
|
||||
color-mix(in srgb, var(--p-slate-900) 12%, transparent);
|
||||
animation-name: circleSway;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
@@ -63,7 +63,8 @@
|
||||
}
|
||||
|
||||
.modal-nav-scroll:hover {
|
||||
scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
|
||||
scrollbar-color: color-mix(in srgb, var(--p-gray-mid) 50%, transparent)
|
||||
transparent;
|
||||
}
|
||||
|
||||
.modal-nav-scroll::-webkit-scrollbar {
|
||||
@@ -81,11 +82,11 @@
|
||||
}
|
||||
|
||||
.modal-nav-scroll:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(128, 128, 128, 0.5);
|
||||
background-color: color-mix(in srgb, var(--p-gray-mid) 50%, transparent);
|
||||
}
|
||||
|
||||
.modal-nav-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(128, 128, 128, 0.7);
|
||||
background-color: color-mix(in srgb, var(--p-gray-mid) 70%, transparent);
|
||||
}
|
||||
|
||||
.modal-nav-section {
|
||||
@@ -131,7 +132,8 @@
|
||||
}
|
||||
|
||||
.modal-content-scroll:hover {
|
||||
scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
|
||||
scrollbar-color: color-mix(in srgb, var(--p-gray-mid) 50%, transparent)
|
||||
transparent;
|
||||
}
|
||||
|
||||
.modal-content-scroll::-webkit-scrollbar {
|
||||
@@ -149,11 +151,11 @@
|
||||
}
|
||||
|
||||
.modal-content-scroll:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(128, 128, 128, 0.5);
|
||||
background-color: color-mix(in srgb, var(--p-gray-mid) 50%, transparent);
|
||||
}
|
||||
|
||||
.modal-content-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba(128, 128, 128, 0.7);
|
||||
background-color: color-mix(in srgb, var(--p-gray-mid) 70%, transparent);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
|
||||
@@ -363,7 +363,10 @@
|
||||
}
|
||||
/* Hover reads neutral (not the default blue tint); selected stays blue. */
|
||||
.file-sidebar-group-items .file-sidebar-file-item:hover:not(.selected) {
|
||||
background-color: var(--c-hover, rgba(120, 120, 120, 0.1));
|
||||
background-color: var(
|
||||
--c-hover,
|
||||
color-mix(in srgb, var(--p-gray-mid) 10%, transparent)
|
||||
);
|
||||
}
|
||||
/* A plain circle where the selected check sits — on hover, and blue when selected. */
|
||||
.file-sidebar-group-items .file-sidebar-file-checkbox-hover,
|
||||
@@ -424,7 +427,10 @@
|
||||
display: none;
|
||||
}
|
||||
.file-sidebar-view-all:hover {
|
||||
background: var(--c-hover, rgba(120, 120, 120, 0.1));
|
||||
background: var(
|
||||
--c-hover,
|
||||
color-mix(in srgb, var(--p-gray-mid) 10%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
.file-sidebar-file-list::-webkit-scrollbar {
|
||||
|
||||
+1
-1
@@ -12,7 +12,7 @@
|
||||
padding: 16px;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
background: rgba(16, 18, 27, 0.55);
|
||||
background: color-mix(in srgb, var(--p-zinc-900) 55%, transparent);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
|
||||
@@ -78,17 +78,20 @@
|
||||
);
|
||||
--fullscreen-shadow-primary: color-mix(
|
||||
in srgb,
|
||||
var(--shadow-color, rgba(15, 23, 42, 0.55)) 25%,
|
||||
var(--shadow-color, color-mix(in srgb, var(--p-slate-900) 55%, transparent))
|
||||
25%,
|
||||
transparent
|
||||
);
|
||||
--fullscreen-shadow-secondary: color-mix(
|
||||
in srgb,
|
||||
var(--shadow-color, rgba(15, 23, 42, 0.35)) 30%,
|
||||
var(--shadow-color, color-mix(in srgb, var(--p-slate-900) 35%, transparent))
|
||||
30%,
|
||||
transparent
|
||||
);
|
||||
--fullscreen-shadow-group: color-mix(
|
||||
in srgb,
|
||||
var(--shadow-color, rgba(15, 23, 42, 0.45)) 18%,
|
||||
var(--shadow-color, color-mix(in srgb, var(--p-slate-900) 45%, transparent))
|
||||
18%,
|
||||
transparent
|
||||
);
|
||||
--fullscreen-accent-hover: color-mix(
|
||||
@@ -538,7 +541,10 @@
|
||||
.tool-panel__fullscreen-item:hover:not([aria-disabled="true"]):not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--fullscreen-accent-hover);
|
||||
box-shadow: var(--shadow-xl, 0 18px 34px rgba(15, 23, 42, 0.14));
|
||||
box-shadow: var(
|
||||
--shadow-xl,
|
||||
0 18px 34px color-mix(in srgb, var(--p-slate-900) 14%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
.tool-panel__fullscreen-item--selected {
|
||||
|
||||
@@ -4,7 +4,11 @@
|
||||
box-shadow: 0 32px 64px
|
||||
color-mix(
|
||||
in srgb,
|
||||
var(--shadow-color, rgba(15, 23, 42, 0.55)) 20%,
|
||||
var(
|
||||
--shadow-color,
|
||||
color-mix(in srgb, var(--p-slate-900) 55%, transparent)
|
||||
)
|
||||
20%,
|
||||
transparent
|
||||
);
|
||||
max-width: min(46rem, 100%);
|
||||
|
||||
@@ -243,29 +243,55 @@
|
||||
/* Flash/pulse highlight for navigated change */
|
||||
@keyframes compare-flash {
|
||||
0% {
|
||||
outline: 4px solid rgba(255, 235, 59, 0);
|
||||
box-shadow: 0 0 0 rgba(255, 235, 59, 0);
|
||||
background-color: rgba(255, 235, 59, 0.2) !important;
|
||||
outline: 4px solid color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
|
||||
box-shadow: 0 0 0 color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--p-flash-yellow) 20%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
25% {
|
||||
outline: 4px solid rgba(255, 235, 59, 1);
|
||||
box-shadow: 0 0 20px rgba(255, 235, 59, 0.8);
|
||||
background-color: rgba(255, 235, 59, 0.4) !important;
|
||||
outline: 4px solid
|
||||
color-mix(in srgb, var(--p-flash-yellow) 100%, transparent);
|
||||
box-shadow: 0 0 20px
|
||||
color-mix(in srgb, var(--p-flash-yellow) 80%, transparent);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--p-flash-yellow) 40%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
50% {
|
||||
outline: 4px solid rgba(255, 235, 59, 1);
|
||||
box-shadow: 0 0 30px rgba(255, 235, 59, 0.9);
|
||||
background-color: rgba(255, 235, 59, 0.5) !important;
|
||||
outline: 4px solid
|
||||
color-mix(in srgb, var(--p-flash-yellow) 100%, transparent);
|
||||
box-shadow: 0 0 30px
|
||||
color-mix(in srgb, var(--p-flash-yellow) 90%, transparent);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--p-flash-yellow) 50%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
75% {
|
||||
outline: 4px solid rgba(255, 235, 59, 0.8);
|
||||
box-shadow: 0 0 15px rgba(255, 235, 59, 0.6);
|
||||
background-color: rgba(255, 235, 59, 0.3) !important;
|
||||
outline: 4px solid
|
||||
color-mix(in srgb, var(--p-flash-yellow) 80%, transparent);
|
||||
box-shadow: 0 0 15px
|
||||
color-mix(in srgb, var(--p-flash-yellow) 60%, transparent);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--p-flash-yellow) 30%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
100% {
|
||||
outline: 4px solid rgba(255, 235, 59, 0);
|
||||
box-shadow: 0 0 0 rgba(255, 235, 59, 0);
|
||||
background-color: rgba(255, 235, 59, 0) !important;
|
||||
outline: 4px solid color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
|
||||
box-shadow: 0 0 0 color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--p-flash-yellow) 0%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -274,14 +300,18 @@
|
||||
z-index: 1000;
|
||||
position: relative;
|
||||
/* Bonus: temporarily override red/green to yellow during flash for clarity */
|
||||
background-color: rgba(255, 235, 59, 0.5) !important;
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--p-flash-yellow) 50%,
|
||||
transparent
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Union overlay for group flash */
|
||||
.compare-diff-flash-overlay {
|
||||
animation: compare-flash 1.5s ease-in-out 1;
|
||||
z-index: 999;
|
||||
background-color: rgba(255, 235, 59, 0.4);
|
||||
background-color: color-mix(in srgb, var(--p-flash-yellow) 40%, transparent);
|
||||
pointer-events: none;
|
||||
border-radius: 2px;
|
||||
}
|
||||
@@ -514,7 +544,7 @@
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
.compare-pixel-page {
|
||||
border: 1px solid var(--mantine-color-default-border, #dee2e6);
|
||||
border: 1px solid var(--mantine-color-default-border, var(--p-slate-200));
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
background: var(--mantine-color-body, #fff);
|
||||
@@ -532,13 +562,13 @@
|
||||
}
|
||||
.compare-pixel-triptych figure img {
|
||||
display: block;
|
||||
border: 1px solid var(--mantine-color-default-border, #dee2e6);
|
||||
border: 1px solid var(--mantine-color-default-border, var(--p-slate-200));
|
||||
background: #fff;
|
||||
}
|
||||
.compare-pixel-triptych figcaption {
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
color: var(--mantine-color-dimmed, #868e96);
|
||||
color: var(--mantine-color-dimmed, var(--p-gray-450));
|
||||
}
|
||||
.compare-pixel-overlay {
|
||||
position: relative;
|
||||
@@ -547,7 +577,7 @@
|
||||
.compare-pixel-overlay-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: 1px solid var(--mantine-color-default-border, #dee2e6);
|
||||
border: 1px solid var(--mantine-color-default-border, var(--p-slate-200));
|
||||
}
|
||||
.compare-pixel-overlay-top {
|
||||
position: absolute;
|
||||
|
||||
@@ -72,11 +72,19 @@
|
||||
margin-left: 6px;
|
||||
}
|
||||
.search-hit {
|
||||
background: rgba(255, 235, 59, 0.4); /* yellow highlight */
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--p-flash-yellow) 40%,
|
||||
transparent
|
||||
); /* yellow highlight */
|
||||
border-radius: 2px;
|
||||
}
|
||||
.search-hit-active {
|
||||
background: rgba(33, 150, 243, 0.4); /* active blue */
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--p-material-blue) 40%,
|
||||
transparent
|
||||
); /* active blue */
|
||||
}
|
||||
|
||||
.showjs-root {
|
||||
|
||||
@@ -111,19 +111,29 @@
|
||||
/* Flash highlight animation for section navigation */
|
||||
@keyframes section-flash {
|
||||
0% {
|
||||
background-color: rgba(255, 235, 59, 0);
|
||||
background-color: color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
20% {
|
||||
background-color: rgba(255, 235, 59, 0.35);
|
||||
box-shadow: 0 0 20px rgba(255, 235, 59, 0.5);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--p-flash-yellow) 35%,
|
||||
transparent
|
||||
);
|
||||
box-shadow: 0 0 20px
|
||||
color-mix(in srgb, var(--p-flash-yellow) 50%, transparent);
|
||||
}
|
||||
50% {
|
||||
background-color: rgba(255, 235, 59, 0.25);
|
||||
box-shadow: 0 0 15px rgba(255, 235, 59, 0.4);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--p-flash-yellow) 25%,
|
||||
transparent
|
||||
);
|
||||
box-shadow: 0 0 15px
|
||||
color-mix(in srgb, var(--p-flash-yellow) 40%, transparent);
|
||||
}
|
||||
100% {
|
||||
background-color: rgba(255, 235, 59, 0);
|
||||
background-color: color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,11 @@
|
||||
box-shadow: -2px 0 16px
|
||||
color-mix(
|
||||
in srgb,
|
||||
var(--shadow-color, rgba(15, 23, 42, 0.35)) 20%,
|
||||
var(
|
||||
--shadow-color,
|
||||
color-mix(in srgb, var(--p-slate-900) 35%, transparent)
|
||||
)
|
||||
20%,
|
||||
transparent
|
||||
);
|
||||
backdrop-filter: blur(12px);
|
||||
|
||||
@@ -79,5 +79,5 @@ code {
|
||||
}
|
||||
|
||||
.viewer-file-tab[data-active] {
|
||||
background-color: rgba(147, 197, 253, 0.5);
|
||||
background-color: color-mix(in srgb, var(--p-blue-200) 50%, transparent);
|
||||
}
|
||||
|
||||
@@ -38,18 +38,16 @@
|
||||
);
|
||||
|
||||
/* File Manager active file colors */
|
||||
--file-active-badge-bg: rgba(
|
||||
34,
|
||||
197,
|
||||
94,
|
||||
0.15
|
||||
--file-active-badge-bg: color-mix(
|
||||
in srgb,
|
||||
var(--p-green-500) 15%,
|
||||
transparent
|
||||
); /* Transparent green for active badge */
|
||||
--file-active-badge-fg: var(--p-green-700); /* Green text for active badge */
|
||||
--file-active-badge-border: rgba(
|
||||
34,
|
||||
197,
|
||||
94,
|
||||
0.3
|
||||
--file-active-badge-border: color-mix(
|
||||
in srgb,
|
||||
var(--p-green-500) 30%,
|
||||
transparent
|
||||
); /* Green border for active badge */
|
||||
}
|
||||
|
||||
@@ -490,7 +488,7 @@
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .plan-card [data-size="sm"] {
|
||||
color: rgb(194, 200, 224) !important;
|
||||
color: var(--p-periwinkle-200) !important;
|
||||
}
|
||||
|
||||
/* Current plan badge - use light mode green in dark mode */
|
||||
@@ -500,12 +498,12 @@
|
||||
|
||||
/* Plan section button colors */
|
||||
.plan-button:not(:disabled):not([data-disabled]) {
|
||||
background-color: #0a8bff !important;
|
||||
background-color: var(--p-azure-500) !important;
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"]
|
||||
.plan-button:not(:disabled):not([data-disabled]) {
|
||||
background-color: #2040a0 !important;
|
||||
background-color: var(--p-royal-700) !important;
|
||||
}
|
||||
|
||||
/* Lighter grey for disabled plan buttons */
|
||||
@@ -534,19 +532,29 @@
|
||||
/* Flash highlight for comment card (e.g. "View comment" from annotation menu) */
|
||||
@keyframes comment-card-flash {
|
||||
0% {
|
||||
background-color: rgba(255, 235, 59, 0);
|
||||
background-color: color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
20% {
|
||||
background-color: rgba(255, 235, 59, 0.35);
|
||||
box-shadow: 0 0 20px rgba(255, 235, 59, 0.5);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--p-flash-yellow) 35%,
|
||||
transparent
|
||||
);
|
||||
box-shadow: 0 0 20px
|
||||
color-mix(in srgb, var(--p-flash-yellow) 50%, transparent);
|
||||
}
|
||||
50% {
|
||||
background-color: rgba(255, 235, 59, 0.25);
|
||||
box-shadow: 0 0 15px rgba(255, 235, 59, 0.4);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--p-flash-yellow) 25%,
|
||||
transparent
|
||||
);
|
||||
box-shadow: 0 0 15px
|
||||
color-mix(in srgb, var(--p-flash-yellow) 40%, transparent);
|
||||
}
|
||||
100% {
|
||||
background-color: rgba(255, 235, 59, 0);
|
||||
background-color: color-mix(in srgb, var(--p-flash-yellow) 0%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@@ -697,7 +705,7 @@
|
||||
|
||||
.pdf-link-toolbar-btn--delete:hover {
|
||||
background: color-mix(in srgb, var(--p-red-500) 15%, transparent);
|
||||
color: #fca5a5;
|
||||
color: var(--p-art-red-light);
|
||||
}
|
||||
|
||||
.pdf-link-toolbar-sep {
|
||||
@@ -769,19 +777,19 @@
|
||||
|
||||
/* Modern logo icon */
|
||||
.logo-icon-modern__path1 {
|
||||
fill: #acacac;
|
||||
fill: var(--p-art-gray);
|
||||
fill-opacity: 0.3;
|
||||
}
|
||||
.logo-icon-modern__path2 {
|
||||
fill: #fc9999;
|
||||
fill: var(--p-art-red-soft);
|
||||
fill-opacity: 0.5;
|
||||
}
|
||||
[data-mantine-color-scheme="dark"] .logo-icon-modern__path1 {
|
||||
fill: #e6e6e6;
|
||||
fill: var(--p-gray-200);
|
||||
fill-opacity: 0.4;
|
||||
}
|
||||
[data-mantine-color-scheme="dark"] .logo-icon-modern__path2 {
|
||||
fill: #e6e6e6;
|
||||
fill: var(--p-gray-200);
|
||||
fill-opacity: 0.7;
|
||||
}
|
||||
|
||||
@@ -790,13 +798,13 @@
|
||||
opacity: 0.2;
|
||||
}
|
||||
.logo-icon-classic__body {
|
||||
fill: #ff4b4b;
|
||||
fill: var(--p-art-red);
|
||||
}
|
||||
.logo-icon-classic__flap {
|
||||
fill: #545454;
|
||||
fill: var(--p-gray-550);
|
||||
}
|
||||
.logo-icon-classic__triangle {
|
||||
fill: #d0dbdc;
|
||||
fill: var(--p-cool-gray-200);
|
||||
}
|
||||
.logo-icon-classic__s {
|
||||
fill: white;
|
||||
@@ -808,10 +816,10 @@
|
||||
fill: white;
|
||||
}
|
||||
[data-mantine-color-scheme="dark"] .logo-icon-classic__flap {
|
||||
fill: #d3d3d3;
|
||||
fill: var(--p-gray-300);
|
||||
}
|
||||
[data-mantine-color-scheme="dark"] .logo-icon-classic__triangle {
|
||||
fill: #d0dbdc;
|
||||
fill: var(--p-cool-gray-200);
|
||||
}
|
||||
[data-mantine-color-scheme="dark"] .logo-icon-classic__s {
|
||||
fill: var(--mantine-color-body);
|
||||
@@ -827,11 +835,11 @@
|
||||
}
|
||||
/* PDF text: dimmed red in light mode, standard red in dark */
|
||||
.wordmark__pdf--muted {
|
||||
fill: #d62626;
|
||||
fill: var(--p-art-red-strong);
|
||||
fill-opacity: 0.7;
|
||||
}
|
||||
[data-mantine-color-scheme="dark"] .wordmark__pdf--muted {
|
||||
fill: #c56565;
|
||||
fill: var(--p-art-red-muted);
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -42,4 +42,95 @@
|
||||
--p-red-400: #f87171;
|
||||
--p-red-500: #ef4444;
|
||||
--p-red-600: #dc2626;
|
||||
/* Extended palette — brand, data-viz, illustration & vendor/OS fixed colours (added by app-wide literal migration) */
|
||||
--p-art-gray: #acacac;
|
||||
--p-art-red: #ff4b4b;
|
||||
--p-art-red-light: #fca5a5;
|
||||
--p-art-red-muted: #c56565;
|
||||
--p-art-red-soft: #fc9999;
|
||||
--p-art-red-strong: #d62626;
|
||||
--p-azure-300: #66b8ff;
|
||||
--p-azure-400: #38bdf8;
|
||||
--p-azure-450: #5b9bf7;
|
||||
--p-azure-500: #0a8bff;
|
||||
--p-azure-550: #4c8bf5;
|
||||
--p-azure-560: #4f8ef5;
|
||||
--p-azure-650: #3a7be8;
|
||||
--p-blue-200: #93c5fd;
|
||||
--p-brand-red: #af3434;
|
||||
--p-brand-red-200: #d9a8a8;
|
||||
--p-brand-red-300: #d98a8a;
|
||||
--p-brand-red-600: #9a2e2e;
|
||||
--p-brand-red-650: #8e3131;
|
||||
--p-brand-red-700: #7a2929;
|
||||
--p-brand-red-900: #5a2424;
|
||||
--p-cool-gray-200: #d0dbdc;
|
||||
--p-cyan-400: #22d3ee;
|
||||
--p-cyan-500: #06b6d4;
|
||||
--p-emerald-400: #34d399;
|
||||
--p-emerald-500: #10b981;
|
||||
--p-emerald-600: #059669;
|
||||
--p-flash-yellow: #ffeb3b;
|
||||
--p-gold-500: #ffc107;
|
||||
--p-gray-450: #868e96;
|
||||
--p-gray-550: #545454;
|
||||
--p-gray-b0: #b0b0b0;
|
||||
--p-gray-mid: #808080;
|
||||
--p-green-400: #4ade80;
|
||||
--p-indigo-200: #c7d2fe;
|
||||
--p-indigo-300: #a5b4fc;
|
||||
--p-indigo-400: #818cf8;
|
||||
--p-indigo-500: #6366f1;
|
||||
--p-indigo-800: #3730a3;
|
||||
--p-material-blue: #2196f3;
|
||||
--p-navy-500: #3b4b6e;
|
||||
--p-navy-700: #16213e;
|
||||
--p-navy-850: #1a2236;
|
||||
--p-navy-880: #171e30;
|
||||
--p-navy-900: #0f1626;
|
||||
--p-navy-950: #0d1020;
|
||||
--p-notion-blue: #2383e2;
|
||||
--p-notion-blue-border: #b8d5f2;
|
||||
--p-notion-blue-strong: #1b6ec2;
|
||||
--p-notion-blue-tint: #eaf2fb;
|
||||
--p-notion-border: #e3e1dc;
|
||||
--p-notion-border-2: #eae8e3;
|
||||
--p-notion-border-cool: #d3d1cb;
|
||||
--p-notion-gray: #9b9a97;
|
||||
--p-notion-gray-strong: #787774;
|
||||
--p-notion-ink: #37352f;
|
||||
--p-notion-paper: #f5f4f1;
|
||||
--p-notion-paper-2: #f0eee9;
|
||||
--p-periwinkle-200: #c2c8e0;
|
||||
--p-periwinkle-500: #635bff;
|
||||
--p-pink-500: #ec4899;
|
||||
--p-plum-900: #201a28;
|
||||
--p-purple-500: #6c5ce7;
|
||||
--p-royal-700: #2040a0;
|
||||
--p-slate-100: #f1f5f9;
|
||||
--p-slate-200: #dee2e6;
|
||||
--p-slate-300: #cbd5e1;
|
||||
--p-slate-400: #94a3b8;
|
||||
--p-slate-50: #e3e8ee;
|
||||
--p-slate-500: #64748b;
|
||||
--p-slate-600: #475569;
|
||||
--p-slate-700: #334155;
|
||||
--p-slate-850: #1f2933;
|
||||
--p-slate-900: #0f172a;
|
||||
--p-teal-700: #0f7b6c;
|
||||
--p-tint-blue: #eef1fb;
|
||||
--p-tint-pink: #fbf4f7;
|
||||
--p-tint-violet: #f6f4fc;
|
||||
--p-vendor-green: #66bb6a;
|
||||
--p-vendor-red: #ef5350;
|
||||
--p-vendor-red-bg: #ffebee;
|
||||
--p-vendor-red-bg-dark: #3d2020;
|
||||
--p-vendor-red-border: #ffcdd2;
|
||||
--p-vendor-red-border-dark: #5d3030;
|
||||
--p-vendor-red-soft: #ef9a9a;
|
||||
--p-vendor-red-text: #c62828;
|
||||
--p-violet-400: #a78bfa;
|
||||
--p-violet-500: #8b5cf6;
|
||||
--p-violet-600: #7c3aed;
|
||||
--p-yellow-500: #eab308;
|
||||
}
|
||||
|
||||
@@ -93,21 +93,21 @@
|
||||
/* Gradients */
|
||||
--grad-blue-btn: linear-gradient(
|
||||
180deg,
|
||||
#5b9bf7 0%,
|
||||
#4c8bf5 50%,
|
||||
#3a7be8 100%
|
||||
var(--p-azure-450) 0%,
|
||||
var(--p-azure-550) 50%,
|
||||
var(--p-azure-650) 100%
|
||||
);
|
||||
--grad-purple-btn: linear-gradient(
|
||||
180deg,
|
||||
#a78bfa 0%,
|
||||
#8b5cf6 50%,
|
||||
#7c3aed 100%
|
||||
var(--p-violet-400) 0%,
|
||||
var(--p-violet-500) 50%,
|
||||
var(--p-violet-600) 100%
|
||||
);
|
||||
--grad-green-btn: linear-gradient(
|
||||
180deg,
|
||||
#34d399 0%,
|
||||
#10b981 50%,
|
||||
#059669 100%
|
||||
var(--p-emerald-400) 0%,
|
||||
var(--p-emerald-500) 50%,
|
||||
var(--p-emerald-600) 100%
|
||||
);
|
||||
--grad-amber-btn: linear-gradient(
|
||||
180deg,
|
||||
|
||||
@@ -7,10 +7,10 @@
|
||||
/* Use Mantine variables in the editor; fall back to shared tokens in storybook */
|
||||
background: var(--mantine-color-body, var(--c-surface, #ffffff));
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--c-border-subtle, var(--c-border, #e3e8ee));
|
||||
border: 1px solid var(--c-border-subtle, var(--c-border, var(--p-slate-50)));
|
||||
box-shadow:
|
||||
0 8px 32px rgba(15, 23, 42, 0.14),
|
||||
0 2px 8px rgba(15, 23, 42, 0.06);
|
||||
0 8px 32px color-mix(in srgb, var(--p-slate-900) 14%, transparent),
|
||||
0 2px 8px color-mix(in srgb, var(--p-slate-900) 6%, transparent);
|
||||
overflow: hidden;
|
||||
|
||||
/* Closed state: collapsed toward bottom-right origin */
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.sui-drawer__backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.32);
|
||||
background: color-mix(in srgb, var(--p-slate-900) 32%, transparent);
|
||||
z-index: var(--z-drawer);
|
||||
animation: fadeIn 0.18s ease both;
|
||||
}
|
||||
@@ -21,13 +21,14 @@
|
||||
.sui-drawer--right {
|
||||
right: 0;
|
||||
border-left: 1px solid var(--c-border);
|
||||
box-shadow: -4px 0 24px rgba(15, 23, 42, 0.12);
|
||||
box-shadow: -4px 0 24px
|
||||
color-mix(in srgb, var(--p-slate-900) 12%, transparent);
|
||||
}
|
||||
|
||||
.sui-drawer--left {
|
||||
left: 0;
|
||||
border-right: 1px solid var(--c-border);
|
||||
box-shadow: 4px 0 24px rgba(15, 23, 42, 0.12);
|
||||
box-shadow: 4px 0 24px color-mix(in srgb, var(--p-slate-900) 12%, transparent);
|
||||
animation-name: slideInLeft;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.sui-modal__backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.55);
|
||||
background: color-mix(in srgb, var(--p-slate-900) 55%, transparent);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
@@ -19,7 +19,7 @@
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow:
|
||||
0 1.25rem 3rem rgba(15, 23, 42, 0.35),
|
||||
0 1.25rem 3rem color-mix(in srgb, var(--p-slate-900) 35%, transparent),
|
||||
0 0 0 1px var(--c-border-subtle);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -49,57 +49,57 @@ html[data-app-theme="custom"] .sui-acc-default {
|
||||
|
||||
/* neutral: low-emphasis grey — no palette token, so explicit. */
|
||||
.sui-acc-neutral {
|
||||
--_solid: #475569;
|
||||
--_solid-hover: #334155;
|
||||
--_solid: var(--p-slate-600);
|
||||
--_solid-hover: var(--p-slate-700);
|
||||
--_on: #ffffff;
|
||||
--_text: #475569;
|
||||
--_bd: #cbd5e1;
|
||||
--_tint: rgba(71, 85, 105, 0.1);
|
||||
--_text: var(--p-slate-600);
|
||||
--_bd: var(--p-slate-300);
|
||||
--_tint: color-mix(in srgb, var(--p-slate-600) 10%, transparent);
|
||||
}
|
||||
[data-theme="dark"] .sui-acc-neutral {
|
||||
--_solid: #64748b;
|
||||
--_solid-hover: #475569;
|
||||
--_text: #cbd5e1;
|
||||
--_bd: #334155;
|
||||
--_tint: rgba(148, 163, 184, 0.16);
|
||||
--_solid: var(--p-slate-500);
|
||||
--_solid-hover: var(--p-slate-600);
|
||||
--_text: var(--p-slate-300);
|
||||
--_bd: var(--p-slate-700);
|
||||
--_tint: color-mix(in srgb, var(--p-slate-400) 16%, transparent);
|
||||
}
|
||||
/* brand: Stirling red — a bespoke brand colour, not part of the token palette. */
|
||||
.sui-acc-brand {
|
||||
--_solid: #8e3131;
|
||||
--_solid-hover: #7a2929;
|
||||
--_solid: var(--p-brand-red-650);
|
||||
--_solid-hover: var(--p-brand-red-700);
|
||||
--_on: #ffffff;
|
||||
--_text: #8e3131;
|
||||
--_bd: #d9a8a8;
|
||||
--_tint: rgba(142, 49, 49, 0.09);
|
||||
--_text: var(--p-brand-red-650);
|
||||
--_bd: var(--p-brand-red-200);
|
||||
--_tint: color-mix(in srgb, var(--p-brand-red-650) 9%, transparent);
|
||||
}
|
||||
[data-theme="dark"] .sui-acc-brand {
|
||||
--_text: #d98a8a;
|
||||
--_bd: #5a2424;
|
||||
--_tint: rgba(217, 138, 138, 0.16);
|
||||
--_text: var(--p-brand-red-300);
|
||||
--_bd: var(--p-brand-red-900);
|
||||
--_tint: color-mix(in srgb, var(--p-brand-red-300) 16%, transparent);
|
||||
}
|
||||
/* ai: multi-hue gradient for AI features — no single-colour token. */
|
||||
.sui-acc-ai {
|
||||
--_solid: linear-gradient(
|
||||
135deg,
|
||||
#8b5cf6 0%,
|
||||
#6366f1 38%,
|
||||
var(--p-violet-500) 0%,
|
||||
var(--p-indigo-500) 38%,
|
||||
var(--p-blue-500) 72%,
|
||||
#22d3ee 100%
|
||||
var(--p-cyan-400) 100%
|
||||
);
|
||||
--_solid-hover: linear-gradient(
|
||||
135deg,
|
||||
#8b5cf6 0%,
|
||||
#6366f1 38%,
|
||||
var(--p-violet-500) 0%,
|
||||
var(--p-indigo-500) 38%,
|
||||
var(--p-blue-500) 72%,
|
||||
#22d3ee 100%
|
||||
var(--p-cyan-400) 100%
|
||||
);
|
||||
--_on: #ffffff;
|
||||
--_text: #6366f1;
|
||||
--_bd: #c7d2fe;
|
||||
--_tint: rgba(99, 102, 241, 0.1);
|
||||
--_text: var(--p-indigo-500);
|
||||
--_bd: var(--p-indigo-200);
|
||||
--_tint: color-mix(in srgb, var(--p-indigo-500) 10%, transparent);
|
||||
}
|
||||
[data-theme="dark"] .sui-acc-ai {
|
||||
--_text: #a5b4fc;
|
||||
--_bd: #3730a3;
|
||||
--_tint: rgba(129, 140, 248, 0.18);
|
||||
--_text: var(--p-indigo-300);
|
||||
--_bd: var(--p-indigo-800);
|
||||
--_tint: color-mix(in srgb, var(--p-indigo-400) 18%, transparent);
|
||||
}
|
||||
|
||||
+226
-213
@@ -1,362 +1,375 @@
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style:
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style:
|
||||
;
|
||||
}
|
||||
::backdrop {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style:
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
--tw-translate-x: 0;
|
||||
--tw-translate-y: 0;
|
||||
--tw-rotate: 0;
|
||||
--tw-skew-x: 0;
|
||||
--tw-skew-y: 0;
|
||||
--tw-scale-x: 1;
|
||||
--tw-scale-y: 1;
|
||||
--tw-pan-x: ;
|
||||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
--tw-numeric-spacing: ;
|
||||
--tw-numeric-fraction: ;
|
||||
--tw-ring-inset: ;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: rgb(59 130 246 / 0.5);
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-blur: ;
|
||||
--tw-brightness: ;
|
||||
--tw-contrast: ;
|
||||
--tw-grayscale: ;
|
||||
--tw-hue-rotate: ;
|
||||
--tw-invert: ;
|
||||
--tw-saturate: ;
|
||||
--tw-sepia: ;
|
||||
--tw-drop-shadow: ;
|
||||
--tw-backdrop-blur: ;
|
||||
--tw-backdrop-brightness: ;
|
||||
--tw-backdrop-contrast: ;
|
||||
--tw-backdrop-grayscale: ;
|
||||
--tw-backdrop-hue-rotate: ;
|
||||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia: ;
|
||||
--tw-contain-size: ;
|
||||
--tw-contain-layout: ;
|
||||
--tw-contain-paint: ;
|
||||
--tw-contain-style:
|
||||
;
|
||||
}
|
||||
.mb-3 {
|
||||
margin-bottom: 0.75rem
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: 1rem
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.block {
|
||||
display: block
|
||||
display: block;
|
||||
}
|
||||
.flex {
|
||||
display: flex
|
||||
display: flex;
|
||||
}
|
||||
.hidden {
|
||||
display: none
|
||||
display: none;
|
||||
}
|
||||
.h-6 {
|
||||
height: 1.5rem
|
||||
height: 1.5rem;
|
||||
}
|
||||
.h-full {
|
||||
height: 100%
|
||||
height: 100%;
|
||||
}
|
||||
.h-screen {
|
||||
height: 100vh
|
||||
height: 100vh;
|
||||
}
|
||||
.w-6 {
|
||||
width: 1.5rem
|
||||
width: 1.5rem;
|
||||
}
|
||||
.w-64 {
|
||||
width: 16rem
|
||||
width: 16rem;
|
||||
}
|
||||
.w-72 {
|
||||
width: 18rem
|
||||
width: 18rem;
|
||||
}
|
||||
.w-full {
|
||||
width: 100%
|
||||
width: 100%;
|
||||
}
|
||||
.max-w-3xl {
|
||||
max-width: 48rem
|
||||
max-width: 48rem;
|
||||
}
|
||||
.flex-1 {
|
||||
flex: 1 1 0%
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
.cursor-pointer {
|
||||
cursor: pointer
|
||||
cursor: pointer;
|
||||
}
|
||||
.list-disc {
|
||||
list-style-type: disc
|
||||
list-style-type: disc;
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column
|
||||
flex-direction: column;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center
|
||||
align-items: center;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between
|
||||
justify-content: space-between;
|
||||
}
|
||||
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.75rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse))
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto
|
||||
overflow-y: auto;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 0.25rem
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
.border {
|
||||
border-width: 1px
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-b {
|
||||
border-bottom-width: 1px
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.border-l {
|
||||
border-left-width: 1px
|
||||
border-left-width: 1px;
|
||||
}
|
||||
.border-r {
|
||||
border-right-width: 1px
|
||||
border-right-width: 1px;
|
||||
}
|
||||
.border-none {
|
||||
border-style: none
|
||||
border-style: none;
|
||||
}
|
||||
.bg-blue-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-gray-100 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-gray-50 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-green-600 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1))
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.p-2 {
|
||||
padding: 0.5rem
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.p-4 {
|
||||
padding: 1rem
|
||||
padding: 1rem;
|
||||
}
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
.px-4 {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.py-2 {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
.pl-5 {
|
||||
padding-left: 1.25rem
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left
|
||||
text-align: left;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center
|
||||
text-align: center;
|
||||
}
|
||||
.text-lg {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
.font-medium {
|
||||
font-weight: 500
|
||||
font-weight: 500;
|
||||
}
|
||||
.font-semibold {
|
||||
font-weight: 600
|
||||
font-weight: 600;
|
||||
}
|
||||
.leading-none {
|
||||
line-height: 1
|
||||
line-height: 1;
|
||||
}
|
||||
.text-blue-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(37 99 235 / var(--tw-text-opacity, 1))
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-gray-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1))
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-gray-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1))
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-red-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(239 68 68 / var(--tw-text-opacity, 1))
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(239 68 68 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-red-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(220 38 38 / var(--tw-text-opacity, 1))
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(220 38 38 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.underline {
|
||||
text-decoration-line: underline
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
.shadow {
|
||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
|
||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored:
|
||||
0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||
box-shadow:
|
||||
var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.shadow-sm {
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
|
||||
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
|
||||
box-shadow:
|
||||
var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
}
|
||||
.grayscale {
|
||||
--tw-grayscale: grayscale(100%);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
|
||||
--tw-grayscale: grayscale(100%);
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
|
||||
var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
|
||||
var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.filter {
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
|
||||
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
|
||||
var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
|
||||
var(--tw-sepia) var(--tw-drop-shadow);
|
||||
}
|
||||
.hover\:bg-blue-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1))
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.hover\:bg-gray-200:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.hover\:bg-green-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1))
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.hover\:underline:hover {
|
||||
text-decoration-line: underline
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
var(--color-purple) 100%
|
||||
);
|
||||
box-shadow:
|
||||
0 0.5rem 1.25rem rgba(59, 130, 246, 0.35),
|
||||
0 0.5rem 1.25rem color-mix(in srgb, var(--p-blue-500) 35%, transparent),
|
||||
inset 0 0.0625rem 0 rgba(255, 255, 255, 0.2);
|
||||
transition:
|
||||
transform var(--motion-base),
|
||||
@@ -26,7 +26,7 @@
|
||||
.portal-assistant-btn:hover {
|
||||
transform: scale(1.08);
|
||||
box-shadow:
|
||||
0 0.75rem 1.75rem rgba(59, 130, 246, 0.45),
|
||||
0 0.75rem 1.75rem color-mix(in srgb, var(--p-blue-500) 45%, transparent),
|
||||
inset 0 0.0625rem 0 rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
|
||||
@@ -123,7 +123,7 @@
|
||||
.portal-editor-hero__action .portal-editor-hero__cta.sui-btn {
|
||||
background: #ffffff;
|
||||
border-color: #ffffff;
|
||||
color: #16213e;
|
||||
color: var(--p-navy-700);
|
||||
}
|
||||
.portal-editor-hero__action .portal-editor-hero__cta.sui-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
|
||||
@@ -90,7 +90,7 @@
|
||||
.portal-welcome__header .portal-welcome__cta.sui-btn {
|
||||
background: #ffffff;
|
||||
border-color: #ffffff;
|
||||
color: #16213e;
|
||||
color: var(--p-navy-700);
|
||||
}
|
||||
.portal-welcome__header .portal-welcome__cta.sui-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
|
||||
@@ -231,7 +231,7 @@
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--c-primary),
|
||||
var(--color-purple, #8b5cf6)
|
||||
var(--color-purple, var(--p-violet-500))
|
||||
);
|
||||
border-radius: 999px;
|
||||
transition: width 200ms ease;
|
||||
@@ -313,7 +313,7 @@
|
||||
}
|
||||
.payg-status[data-state="FULL"] .payg-status__dot {
|
||||
background: var(--c-success);
|
||||
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-green-500) 18%, transparent);
|
||||
}
|
||||
.payg-status[data-state="WARNED"] {
|
||||
background: var(--c-warning-subtle);
|
||||
@@ -321,7 +321,7 @@
|
||||
}
|
||||
.payg-status[data-state="WARNED"] .payg-status__dot {
|
||||
background: var(--c-warning);
|
||||
box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-yellow-500) 20%, transparent);
|
||||
}
|
||||
.payg-status[data-state="DEGRADED"] {
|
||||
background: var(--c-danger-subtle);
|
||||
@@ -329,7 +329,7 @@
|
||||
}
|
||||
.payg-status[data-state="DEGRADED"] .payg-status__dot {
|
||||
background: var(--c-danger);
|
||||
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-red-500) 20%, transparent);
|
||||
}
|
||||
|
||||
/* Segmented usage bar */
|
||||
@@ -347,7 +347,7 @@
|
||||
transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.payg-bar__fill[data-state="FULL"] {
|
||||
background: linear-gradient(90deg, #0a8bff, #38bdf8);
|
||||
background: linear-gradient(90deg, var(--p-azure-500), var(--p-azure-400));
|
||||
}
|
||||
.payg-bar__fill[data-state="WARNED"] {
|
||||
background: linear-gradient(90deg, var(--p-amber-500), var(--p-amber-400));
|
||||
@@ -457,15 +457,15 @@
|
||||
}
|
||||
|
||||
.portal-billing__breakdown-fill--blue {
|
||||
background: #0a8bff;
|
||||
background: var(--p-azure-500);
|
||||
}
|
||||
|
||||
.portal-billing__breakdown-fill--purple {
|
||||
background: #8b5cf6;
|
||||
background: var(--p-violet-500);
|
||||
}
|
||||
|
||||
.portal-billing__breakdown-fill--teal {
|
||||
background: #06b6d4;
|
||||
background: var(--p-cyan-500);
|
||||
}
|
||||
|
||||
/* ── Cap control ────────────────────────────────────────────────────────── */
|
||||
@@ -570,10 +570,10 @@
|
||||
Same class names + structure so the visual is identical to the SaaS Plan
|
||||
page; when the shared-component move lands, these dedupe to one stylesheet. */
|
||||
.scc {
|
||||
--scc-accent: #0a8bff;
|
||||
--scc-accent-text: #0a8bff;
|
||||
--scc-accent-soft: rgba(10, 139, 255, 0.12);
|
||||
--scc-accent-border: rgba(10, 139, 255, 0.25);
|
||||
--scc-accent: var(--p-azure-500);
|
||||
--scc-accent-text: var(--p-azure-500);
|
||||
--scc-accent-soft: color-mix(in srgb, var(--p-azure-500) 12%, transparent);
|
||||
--scc-accent-border: color-mix(in srgb, var(--p-azure-500) 25%, transparent);
|
||||
--scc-chip-bg: var(--c-surface-sunken);
|
||||
--scc-chip-border: var(--c-border);
|
||||
--scc-text-primary: var(--c-text);
|
||||
@@ -588,8 +588,8 @@
|
||||
[data-mantine-color-scheme="dark"] .scc {
|
||||
/* Brand accent lightened for dark legibility; neutral chip bg/border come
|
||||
from the adaptive --c-* base rule above. */
|
||||
--scc-accent-text: #66b8ff;
|
||||
--scc-accent-soft: rgba(10, 139, 255, 0.16);
|
||||
--scc-accent-text: var(--p-azure-300);
|
||||
--scc-accent-soft: color-mix(in srgb, var(--p-azure-500) 16%, transparent);
|
||||
}
|
||||
|
||||
.scc-row {
|
||||
@@ -736,9 +736,9 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
.portal-billing__role-pill[data-leader="true"] {
|
||||
background: rgba(10, 139, 255, 0.12);
|
||||
color: #0a8bff;
|
||||
border: 1px solid rgba(10, 139, 255, 0.25);
|
||||
background: color-mix(in srgb, var(--p-azure-500) 12%, transparent);
|
||||
color: var(--p-azure-500);
|
||||
border: 1px solid color-mix(in srgb, var(--p-azure-500) 25%, transparent);
|
||||
}
|
||||
.portal-billing__role-pill[data-leader="false"] {
|
||||
background: var(--c-surface-sunken);
|
||||
@@ -768,10 +768,10 @@
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.portal-billing__planhead-lbl--free {
|
||||
color: #10b981;
|
||||
color: var(--p-emerald-500);
|
||||
}
|
||||
.portal-billing__planhead-lbl--meter {
|
||||
color: #0a8bff;
|
||||
color: var(--p-azure-500);
|
||||
}
|
||||
.portal-billing__planhead-title {
|
||||
margin: 0;
|
||||
@@ -988,13 +988,13 @@
|
||||
height: 100%;
|
||||
}
|
||||
.portal-billing__segbar-seg--blue {
|
||||
background: #0a8bff;
|
||||
background: var(--p-azure-500);
|
||||
}
|
||||
.portal-billing__segbar-seg--purple {
|
||||
background: #8b5cf6;
|
||||
background: var(--p-violet-500);
|
||||
}
|
||||
.portal-billing__segbar-seg--teal {
|
||||
background: #06b6d4;
|
||||
background: var(--p-cyan-500);
|
||||
}
|
||||
.portal-billing__seglegend {
|
||||
display: flex;
|
||||
@@ -1016,13 +1016,13 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.portal-billing__dot--blue {
|
||||
background: #0a8bff;
|
||||
background: var(--p-azure-500);
|
||||
}
|
||||
.portal-billing__dot--purple {
|
||||
background: #8b5cf6;
|
||||
background: var(--p-violet-500);
|
||||
}
|
||||
.portal-billing__dot--teal {
|
||||
background: #06b6d4;
|
||||
background: var(--p-cyan-500);
|
||||
}
|
||||
.portal-billing__seglegend-label {
|
||||
font-weight: 600;
|
||||
|
||||
@@ -589,9 +589,9 @@
|
||||
/* ══ Quote builder — copied from the marketing prototype (tight density) ═════ */
|
||||
.portal-qb {
|
||||
background: #ffffff;
|
||||
border: 1px solid #e3e1dc;
|
||||
border: 1px solid var(--p-notion-border);
|
||||
border-radius: 14px;
|
||||
box-shadow: inset 0 0 0 1px #eae8e3;
|
||||
box-shadow: inset 0 0 0 1px var(--p-notion-border-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
.portal-qb__head {
|
||||
@@ -599,10 +599,10 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 18px 24px 14px;
|
||||
border-bottom: 1px solid #f0eee9;
|
||||
border-bottom: 1px solid var(--p-notion-paper-2);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(35, 131, 226, 0.055) 0%,
|
||||
color-mix(in srgb, var(--p-notion-blue) 5.5%, transparent) 0%,
|
||||
transparent 100%
|
||||
);
|
||||
}
|
||||
@@ -610,13 +610,13 @@
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
}
|
||||
.portal-qb__stepchip {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #9b9a97;
|
||||
background: #f5f4f1;
|
||||
color: var(--p-notion-gray);
|
||||
background: var(--p-notion-paper);
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
@@ -629,11 +629,11 @@
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
border-radius: 999px;
|
||||
background: #f0eee9;
|
||||
background: var(--p-notion-paper-2);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.portal-qb__progress span[data-on] {
|
||||
background: #2383e2;
|
||||
background: var(--p-notion-blue);
|
||||
}
|
||||
.portal-qb__body {
|
||||
padding: 20px 24px;
|
||||
@@ -650,7 +650,7 @@
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
background: #eaf2fb;
|
||||
background: var(--p-notion-blue-tint);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -660,11 +660,11 @@
|
||||
.portal-qb__intro-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
}
|
||||
.portal-qb__intro-sub {
|
||||
font-size: 12.5px;
|
||||
color: #9b9a97;
|
||||
color: var(--p-notion-gray);
|
||||
margin-top: 1px;
|
||||
}
|
||||
.portal-qb__field {
|
||||
@@ -675,7 +675,7 @@
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #787774;
|
||||
color: var(--p-notion-gray-strong);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.portal-qb__field input,
|
||||
@@ -685,11 +685,11 @@
|
||||
padding: 9px 11px;
|
||||
font-size: 13.5px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e3e1dc;
|
||||
border: 1px solid var(--p-notion-border);
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
background: #fff;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
}
|
||||
.portal-qb__row {
|
||||
display: flex;
|
||||
@@ -703,7 +703,7 @@
|
||||
.portal-qb__hint {
|
||||
margin: 7px 0 0;
|
||||
font-size: 11.5px;
|
||||
color: #9b9a97;
|
||||
color: var(--p-notion-gray);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.portal-qb__pills {
|
||||
@@ -716,20 +716,20 @@
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e3e1dc;
|
||||
border: 1px solid var(--p-notion-border);
|
||||
background: #fff;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
cursor: pointer;
|
||||
}
|
||||
.portal-qb__pills button[data-on] {
|
||||
background: #2383e2;
|
||||
border-color: #2383e2;
|
||||
background: var(--p-notion-blue);
|
||||
border-color: var(--p-notion-blue);
|
||||
color: #fff;
|
||||
}
|
||||
.portal-qb__discount {
|
||||
margin: 6px 0 0;
|
||||
font-size: 11.5px;
|
||||
color: #0f7b6c;
|
||||
color: var(--p-teal-700);
|
||||
}
|
||||
.portal-qb__opts {
|
||||
display: flex;
|
||||
@@ -742,7 +742,7 @@
|
||||
min-width: 150px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 9px;
|
||||
border: 1px solid #e3e1dc;
|
||||
border: 1px solid var(--p-notion-border);
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@@ -750,20 +750,20 @@
|
||||
gap: 2px;
|
||||
}
|
||||
.portal-qb__opt[data-on] {
|
||||
border-color: #2383e2;
|
||||
background: #eaf2fb;
|
||||
border-color: var(--p-notion-blue);
|
||||
background: var(--p-notion-blue-tint);
|
||||
}
|
||||
.portal-qb__opt-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
}
|
||||
.portal-qb__opt[data-on] .portal-qb__opt-title {
|
||||
color: #1b6ec2;
|
||||
color: var(--p-notion-blue-strong);
|
||||
}
|
||||
.portal-qb__opt-sub {
|
||||
font-size: 11.5px;
|
||||
color: #9b9a97;
|
||||
color: var(--p-notion-gray);
|
||||
line-height: 1.4;
|
||||
}
|
||||
.portal-qb__addons {
|
||||
@@ -777,21 +777,21 @@
|
||||
gap: 11px;
|
||||
padding: 11px 13px;
|
||||
border-radius: 9px;
|
||||
border: 1px solid #e3e1dc;
|
||||
border: 1px solid var(--p-notion-border);
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.portal-qb__addon[data-on] {
|
||||
border-color: #2383e2;
|
||||
background: #eaf2fb;
|
||||
border-color: var(--p-notion-blue);
|
||||
background: var(--p-notion-blue-tint);
|
||||
}
|
||||
.portal-qb__addon-box {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #d3d1cb;
|
||||
border: 1px solid var(--p-notion-border-cool);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -800,20 +800,20 @@
|
||||
background: #fff;
|
||||
}
|
||||
.portal-qb__addon[data-on] .portal-qb__addon-box {
|
||||
background: #2383e2;
|
||||
border-color: #2383e2;
|
||||
background: var(--p-notion-blue);
|
||||
border-color: var(--p-notion-blue);
|
||||
color: #fff;
|
||||
}
|
||||
.portal-qb__addon-title {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
}
|
||||
.portal-qb__addon-sub {
|
||||
display: block;
|
||||
font-size: 11.5px;
|
||||
color: #9b9a97;
|
||||
color: var(--p-notion-gray);
|
||||
margin-top: 1px;
|
||||
}
|
||||
.portal-qb__eula {
|
||||
@@ -822,10 +822,10 @@
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
border-radius: 9px;
|
||||
border: 1px solid #f0eee9;
|
||||
background: #f5f4f1;
|
||||
border: 1px solid var(--p-notion-paper-2);
|
||||
background: var(--p-notion-paper);
|
||||
font-size: 12.5px;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -835,12 +835,12 @@
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid #f0eee9;
|
||||
border-top: 1px solid var(--p-notion-paper-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.portal-qb__running {
|
||||
font-size: 11.5px;
|
||||
color: #9b9a97;
|
||||
color: var(--p-notion-gray);
|
||||
}
|
||||
.portal-qb__foot-btns {
|
||||
display: flex;
|
||||
@@ -848,7 +848,7 @@
|
||||
}
|
||||
/* Step 4 — the itemised quote paper */
|
||||
.portal-qb__papertray {
|
||||
background: #f5f4f1;
|
||||
background: var(--p-notion-paper);
|
||||
padding: 18px;
|
||||
max-height: 56vh;
|
||||
overflow-y: auto;
|
||||
@@ -856,26 +856,26 @@
|
||||
}
|
||||
.portal-qb__paper {
|
||||
background: #fff;
|
||||
border: 1px solid #f0eee9;
|
||||
border: 1px solid var(--p-notion-paper-2);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
|
||||
box-shadow: 0 1px 3px color-mix(in srgb, var(--p-slate-900) 6%, transparent);
|
||||
}
|
||||
.portal-qb__paper-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #f0eee9;
|
||||
border-bottom: 1px solid var(--p-notion-paper-2);
|
||||
}
|
||||
.portal-qb__paper-brand {
|
||||
font-size: 13.5px;
|
||||
font-weight: 800;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
}
|
||||
.portal-qb__paper-eyebrow {
|
||||
font-size: 11px;
|
||||
color: #9b9a97;
|
||||
color: var(--p-notion-gray);
|
||||
}
|
||||
.portal-qb__paper-meta {
|
||||
text-align: right;
|
||||
@@ -883,11 +883,11 @@
|
||||
.portal-qb__quote-number {
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
}
|
||||
.portal-qb__paper-meta div:not(.portal-qb__quote-number) {
|
||||
font-size: 11px;
|
||||
color: #9b9a97;
|
||||
color: var(--p-notion-gray);
|
||||
}
|
||||
.portal-qb__paper-for {
|
||||
padding: 18px 24px 0;
|
||||
@@ -895,7 +895,7 @@
|
||||
.portal-qb__paper-company {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
}
|
||||
.portal-qb__lines {
|
||||
list-style: none;
|
||||
@@ -907,16 +907,16 @@
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f0eee9;
|
||||
border-bottom: 1px solid var(--p-notion-paper-2);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
}
|
||||
.portal-qb__lines li[data-kind="DISCOUNT"] {
|
||||
color: #0f7b6c;
|
||||
color: var(--p-teal-700);
|
||||
}
|
||||
.portal-qb__lines li[data-kind="INCLUDED"] span:last-child {
|
||||
color: #9b9a97;
|
||||
color: var(--p-notion-gray);
|
||||
font-weight: 500;
|
||||
}
|
||||
.portal-qb__total {
|
||||
@@ -926,17 +926,17 @@
|
||||
margin: 16px 24px 24px;
|
||||
padding: 16px 18px;
|
||||
border-radius: 10px;
|
||||
background: #eaf2fb;
|
||||
border: 1px solid #b8d5f2;
|
||||
background: var(--p-notion-blue-tint);
|
||||
border: 1px solid var(--p-notion-blue-border);
|
||||
}
|
||||
.portal-qb__total-label {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
}
|
||||
.portal-qb__total-tcv {
|
||||
font-size: 11.5px;
|
||||
color: #787774;
|
||||
color: var(--p-notion-gray-strong);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.portal-qb__total-num {
|
||||
@@ -946,12 +946,12 @@
|
||||
display: block;
|
||||
font-size: 23px;
|
||||
font-weight: 800;
|
||||
color: #37352f;
|
||||
color: var(--p-notion-ink);
|
||||
line-height: 1;
|
||||
}
|
||||
.portal-qb__total-num span {
|
||||
font-size: 11px;
|
||||
color: #9b9a97;
|
||||
color: var(--p-notion-gray);
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
@@ -968,7 +968,7 @@
|
||||
background:
|
||||
radial-gradient(
|
||||
120% 140% at 100% 0%,
|
||||
rgba(124, 58, 237, 0.08),
|
||||
color-mix(in srgb, var(--p-violet-600) 8%, transparent),
|
||||
transparent 55%
|
||||
),
|
||||
var(--c-surface);
|
||||
@@ -1069,7 +1069,8 @@
|
||||
background: var(--c-surface);
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
|
||||
box-shadow: 0 24px 64px
|
||||
color-mix(in srgb, var(--p-slate-900) 28%, transparent);
|
||||
padding: 1.5rem 1.5rem 1.75rem;
|
||||
}
|
||||
.portal-procmodal__close {
|
||||
@@ -1199,7 +1200,7 @@
|
||||
}
|
||||
.portal-hero__chip--action:hover {
|
||||
background: var(--c-surface);
|
||||
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.1);
|
||||
box-shadow: 0 2px 5px color-mix(in srgb, var(--p-slate-900) 10%, transparent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
@@ -1284,7 +1285,8 @@
|
||||
background: var(--c-surface);
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
|
||||
box-shadow: 0 24px 64px
|
||||
color-mix(in srgb, var(--p-slate-900) 28%, transparent);
|
||||
padding: 1.35rem 1.4rem 1.4rem;
|
||||
max-height: 86vh;
|
||||
overflow-y: auto;
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
.auth-checkbox {
|
||||
width: 1rem; /* 16px */
|
||||
height: 1rem; /* 16px */
|
||||
accent-color: #af3434;
|
||||
accent-color: var(--p-brand-red);
|
||||
}
|
||||
|
||||
.auth-terms-label {
|
||||
@@ -258,8 +258,8 @@
|
||||
.oauth-button-vertical-tinted {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
color-mix(in srgb, var(--oauth-accent) 65%, #0f172a) 0 6px,
|
||||
#0f172a 6px 100%
|
||||
color-mix(in srgb, var(--oauth-accent) 65%, var(--p-slate-900)) 0 6px,
|
||||
var(--p-slate-900) 6px 100%
|
||||
);
|
||||
}
|
||||
|
||||
@@ -313,28 +313,31 @@
|
||||
|
||||
.oauth-button-vertical-outline {
|
||||
background: transparent;
|
||||
border: 2px solid #0f172a;
|
||||
color: #0f172a;
|
||||
border: 2px solid var(--p-slate-900);
|
||||
color: var(--p-slate-900);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.oauth-button-vertical-outline:hover:not(:disabled) {
|
||||
background: #0f172a;
|
||||
background: var(--p-slate-900);
|
||||
color: var(--p-gray-50);
|
||||
box-shadow: 0 0.35rem 0.9rem rgba(15, 23, 42, 0.2);
|
||||
box-shadow: 0 0.35rem 0.9rem
|
||||
color-mix(in srgb, var(--p-slate-900) 20%, transparent);
|
||||
}
|
||||
|
||||
.oauth-button-vertical-light {
|
||||
background: var(--p-gray-50);
|
||||
color: #0f172a;
|
||||
border: 1px solid rgba(15, 23, 42, 0.12);
|
||||
box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.12);
|
||||
color: var(--p-slate-900);
|
||||
border: 1px solid color-mix(in srgb, var(--p-slate-900) 12%, transparent);
|
||||
box-shadow: 0 0.25rem 0.75rem
|
||||
color-mix(in srgb, var(--p-slate-900) 12%, transparent);
|
||||
}
|
||||
|
||||
.oauth-button-vertical-light:hover:not(:disabled) {
|
||||
background: #eef2f7;
|
||||
color: #0f172a;
|
||||
box-shadow: 0 0.35rem 0.9rem rgba(15, 23, 42, 0.16);
|
||||
background: var(--p-gray-150);
|
||||
color: var(--p-slate-900);
|
||||
box-shadow: 0 0.35rem 0.9rem
|
||||
color-mix(in srgb, var(--p-slate-900) 16%, transparent);
|
||||
}
|
||||
|
||||
.oauth-button-vertical:disabled {
|
||||
@@ -345,7 +348,7 @@
|
||||
}
|
||||
|
||||
.oauth-button-vertical:focus-visible {
|
||||
outline: 3px solid rgba(59, 130, 246, 0.5);
|
||||
outline: 3px solid color-mix(in srgb, var(--p-blue-500) 50%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -430,8 +433,8 @@
|
||||
|
||||
.oauth-button-vertical-outline .oauth-icon-wrapper,
|
||||
.oauth-button-vertical-light .oauth-icon-wrapper {
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
border-color: rgba(15, 23, 42, 0.14);
|
||||
background: color-mix(in srgb, var(--p-slate-900) 6%, transparent);
|
||||
border-color: color-mix(in srgb, var(--p-slate-900) 14%, transparent);
|
||||
}
|
||||
.oauth-button-right {
|
||||
display: flex;
|
||||
@@ -631,18 +634,18 @@
|
||||
|
||||
/* Email login button - red CTA style matching SaaS version */
|
||||
.auth-cta-button {
|
||||
background-color: #af3434 !important;
|
||||
background-color: var(--p-brand-red) !important;
|
||||
color: white !important;
|
||||
border: none !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.auth-cta-button:hover:not(:disabled) {
|
||||
background-color: #9a2e2e !important;
|
||||
background-color: var(--p-brand-red-600) !important;
|
||||
}
|
||||
|
||||
.auth-cta-button:disabled {
|
||||
background-color: #af3434 !important;
|
||||
background-color: var(--p-brand-red) !important;
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
@@ -689,8 +692,8 @@
|
||||
}
|
||||
|
||||
.auth-expandable-trigger--active {
|
||||
border-color: #af3434 !important;
|
||||
box-shadow: 0 0 0 3px rgba(175, 52, 52, 0.12);
|
||||
border-color: var(--p-brand-red) !important;
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-brand-red) 12%, transparent);
|
||||
}
|
||||
|
||||
/* ── Animated expand/collapse via grid-template-rows ───────────────── */
|
||||
|
||||
@@ -325,7 +325,7 @@
|
||||
flex-shrink: 0;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 0, 0, 0.04),
|
||||
0 4px 14px rgba(15, 23, 42, 0.08);
|
||||
0 4px 14px color-mix(in srgb, var(--p-slate-900) 8%, transparent);
|
||||
transition: box-shadow 160ms ease-out;
|
||||
}
|
||||
|
||||
|
||||
@@ -173,7 +173,10 @@
|
||||
.labels-group-count {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--c-text-subtle, rgba(128, 128, 128, 0.9));
|
||||
color: var(
|
||||
--c-text-subtle,
|
||||
color-mix(in srgb, var(--p-gray-mid) 90%, transparent)
|
||||
);
|
||||
}
|
||||
.labels-group-ungrouped {
|
||||
margin: 0;
|
||||
|
||||
@@ -60,11 +60,11 @@
|
||||
|
||||
.errorBox {
|
||||
margin-top: 20px;
|
||||
background: #ffebee;
|
||||
border: 1px solid #ffcdd2;
|
||||
background: var(--p-vendor-red-bg);
|
||||
border: 1px solid var(--p-vendor-red-border);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
color: #c62828;
|
||||
color: var(--p-vendor-red-text);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
word-break: break-word;
|
||||
@@ -73,23 +73,23 @@
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.page {
|
||||
background: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
background: var(--p-zinc-800);
|
||||
color: var(--p-gray-200);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #2d2d2d;
|
||||
background: var(--p-zinc-600);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
color: var(--p-gray-200);
|
||||
border-color: var(--p-gray-700);
|
||||
}
|
||||
|
||||
.iconSuccess {
|
||||
color: #66bb6a;
|
||||
color: var(--p-vendor-green);
|
||||
}
|
||||
|
||||
.iconError {
|
||||
color: #ef5350;
|
||||
color: var(--p-vendor-red);
|
||||
}
|
||||
|
||||
.iconNeutral {
|
||||
@@ -102,13 +102,13 @@
|
||||
|
||||
.message,
|
||||
.loadingExtra {
|
||||
color: #b0b0b0;
|
||||
color: var(--p-gray-b0);
|
||||
}
|
||||
|
||||
.errorBox {
|
||||
background: #3d2020;
|
||||
border: 1px solid #5d3030;
|
||||
color: #ef9a9a;
|
||||
background: var(--p-vendor-red-bg-dark);
|
||||
border: 1px solid var(--p-vendor-red-border-dark);
|
||||
color: var(--p-vendor-red-soft);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -39,7 +39,10 @@
|
||||
|
||||
.fsg-chevron {
|
||||
font-size: 1.1rem !important;
|
||||
color: var(--c-text-subtle, rgba(128, 128, 128, 0.9));
|
||||
color: var(
|
||||
--c-text-subtle,
|
||||
color-mix(in srgb, var(--p-gray-mid) 90%, transparent)
|
||||
);
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
@@ -56,7 +59,10 @@
|
||||
}
|
||||
|
||||
.fsg-cat-name:hover {
|
||||
background: var(--c-hover, rgba(128, 128, 128, 0.12));
|
||||
background: var(
|
||||
--c-hover,
|
||||
color-mix(in srgb, var(--p-gray-mid) 12%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
.fsg-rename {
|
||||
@@ -70,11 +76,17 @@
|
||||
padding: 2px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: var(--c-text-subtle, rgba(128, 128, 128, 0.9));
|
||||
color: var(
|
||||
--c-text-subtle,
|
||||
color-mix(in srgb, var(--p-gray-mid) 90%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
.fsg-cat-action:hover {
|
||||
background: var(--c-hover, rgba(128, 128, 128, 0.12));
|
||||
background: var(
|
||||
--c-hover,
|
||||
color-mix(in srgb, var(--p-gray-mid) 12%, transparent)
|
||||
);
|
||||
color: var(--c-text, inherit);
|
||||
}
|
||||
|
||||
@@ -96,7 +108,10 @@
|
||||
.fsg-count {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--c-text-subtle, rgba(128, 128, 128, 0.9));
|
||||
color: var(
|
||||
--c-text-subtle,
|
||||
color-mix(in srgb, var(--p-gray-mid) 90%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
.fsg-add,
|
||||
@@ -108,7 +123,11 @@
|
||||
|
||||
.fsg-new {
|
||||
padding-top: 4px;
|
||||
border-top: 1px solid var(--c-border-subtle, rgba(128, 128, 128, 0.2));
|
||||
border-top: 1px solid
|
||||
var(
|
||||
--c-border-subtle,
|
||||
color-mix(in srgb, var(--p-gray-mid) 20%, transparent)
|
||||
);
|
||||
}
|
||||
|
||||
.fsg-add-input {
|
||||
@@ -116,7 +135,11 @@
|
||||
min-width: 0;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
border: 1px solid var(--c-border-subtle, rgba(128, 128, 128, 0.35));
|
||||
border: 1px solid
|
||||
var(
|
||||
--c-border-subtle,
|
||||
color-mix(in srgb, var(--p-gray-mid) 35%, transparent)
|
||||
);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--c-text, inherit);
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
.auth-guest-button {
|
||||
background-color: #ffffff;
|
||||
color: #af3434;
|
||||
color: var(--p-brand-red);
|
||||
border: 2px solid currentColor;
|
||||
}
|
||||
|
||||
@@ -86,8 +86,8 @@
|
||||
}
|
||||
|
||||
.auth-expandable-trigger--active {
|
||||
border-color: #af3434 !important;
|
||||
box-shadow: 0 0 0 3px rgba(175, 52, 52, 0.12);
|
||||
border-color: var(--p-brand-red) !important;
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--p-brand-red) 12%, transparent);
|
||||
}
|
||||
|
||||
/* ── Animated expand/collapse via grid-template-rows ───────────────── */
|
||||
|
||||
Reference in New Issue
Block a user