/* nexcalia/ui — bundled CSS. Generated by scripts/build-dist.php. Do not edit. */
/* ===== tokens.css ===== */
:root {
--font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--nx-blue: #3359A5;
--nx-blue-ribbon: #264D91;
--nx-royal-blue: #4B6FB7;
--nx-dodger-blue: #5F8FD1;
--nx-mariner: #7FA7DE;
--nx-botticelli: #D4DEEF;
--nx-puertorico: #57B893;
--nx-highlight: #F6DB78;
--nx-whisper: #FBFBFD;
--nx-white-lilac: #F3F5FA;
--nx-ghost: #C6CDD8;
--nx-regent-gray: #8894A5;
--nx-pickled: #2B3948;
--nx-night-shadz: #A53359;
--nx-tall-poppy: #B22A36;
/* Universal anchors — only place where hex literals live by design.
--nx-white: always-white text reference for accent buttons + dark code blocks
(do NOT use --surface, which becomes dark in dark mode).
--nx-code-fg: light foreground for the dark code-snippet panel in the catalog. */
--nx-white: #FFFFFF;
--nx-code-fg: #E6EAF5;
--bg: var(--nx-whisper);
--bg-2: var(--nx-white-lilac);
--surface: #ffffff;
--surface-2: var(--nx-white-lilac);
--ink: var(--nx-pickled);
--ink-2: #3A4658;
/* A11Y-001 — repointed from #8894A5 (3.8:1, AA fail) to #5B6878 (5.5:1, AA pass) */
/* A11Y-002 — bumped from #5B6878 (5.5:1) to #4E5B6C (7.0:1) for stronger
section labels (Aujourd'hui / Gestion) and tertiary text on tinted surfaces. */
--regent-darker: #4E5B6C;
--ink-3: var(--regent-darker);
--line: #E6EAF1;
--line-2: var(--nx-ghost);
--hover: #ECF0F6;
/* Accessible badge tints — paired with their *-dark ink for AA contrast */
--puertorico-dark: #1F5F46;
--puertorico-tint: #E7F4EE;
--highlight-dark: #6B5817;
--highlight-tint: #FFF7DD;
--night-shadz-tint: #F8E0E8;
--primary: var(--nx-blue);
--primary-deep: var(--nx-blue-ribbon);
--primary-soft: var(--nx-botticelli);
--primary-tint: #ECF0F8;
--ok: var(--nx-puertorico);
--ok-deep: color-mix(in oklab, var(--nx-puertorico) 75%, var(--ink));
--ok-soft: #DDEFE6;
--warn: var(--nx-night-shadz);
--warn-soft: color-mix(in oklab, var(--nx-highlight) 45%, var(--surface));
--info: var(--nx-blue);
--info-soft: var(--nx-botticelli);
--danger: var(--nx-tall-poppy);
--danger-soft: #F5D6DA;
/* Rouge d'à-plat sous texte blanc (pastilles de compteur, badges pleins).
En palette claire --danger convient déjà : blanc sur #B22A36 = 6.4:1. */
--danger-strong: var(--nx-tall-poppy);
--neutral: #4A5667;
--neutral-soft: #E6EAF1;
--accent-yellow: var(--nx-highlight);
--accent-green: var(--nx-puertorico);
--accent-burgundy: var(--nx-night-shadz);
--row-h: 48px;
--pad-y: 12px;
--pad-x: 18px;
--fs-body: 0.9375rem;
--fs-sm: 0.875rem;
--fs-xs: 0.8125rem;
--gap: 14px;
--radius: 8px;
--radius-sm: 6px;
--radius-lg: 12px;
--shadow-sm: 0 1px 0 rgba(40, 24, 16, 0.04), 0 1px 2px rgba(40, 24, 16, 0.04);
--shadow-md: 0 1px 0 rgba(40, 24, 16, 0.04), 0 8px 24px rgba(40, 24, 16, 0.08);
--shadow-lg: 0 12px 40px rgba(40, 24, 16, 0.14), 0 2px 6px rgba(40, 24, 16, 0.06);
}
[data-palette="burgundy"] {
--primary: var(--nx-night-shadz);
--primary-deep: #7A1F40;
--primary-soft: #F5D6E1;
--primary-tint: #FBEEF3;
--info: var(--nx-night-shadz);
--info-soft: #F5D6E1;
}
[data-palette="mariner"] {
--primary: var(--nx-mariner);
--primary-deep: var(--nx-royal-blue);
--primary-soft: #DFE8F5;
--primary-tint: #EEF3FA;
--info: var(--nx-mariner);
--info-soft: #DFE8F5;
}
[data-palette="emerald"] {
--primary: var(--nx-puertorico);
--primary-deep: #3D8C6E;
--primary-soft: #D8F1E5;
--primary-tint: #EBF7F1;
--info: var(--nx-puertorico);
--info-soft: #D8F1E5;
}
[data-palette="dark"] {
--bg: #0B1020;
--bg-2: #131A2E;
--surface: #161E36;
--surface-2: #0F1528;
--ink: #E6EAF5;
--ink-2: #A3ADC7;
/* A11Y-001 — bumped from #6B7591 to #A8B5C4 for AA on dark surface */
--ink-3: #A8B5C4;
--line: #232C47;
--line-2: #2E3856;
--hover: #1C2540;
/* A11Y: was #6BA0FF — white text on it gave 2.6:1 (FAIL). #3B79F2 ≈ 4.1:1. */
--primary: #3B79F2;
--primary-deep: #2455B5;
--primary-soft: rgba(107, 160, 255, 0.18);
--primary-tint: rgba(107, 160, 255, 0.08);
--ok: #36D399;
--ok-deep: #6EE3B4;
--ok-soft: rgba(54, 211, 153, 0.16);
--warn: #F4C242;
--warn-soft: rgba(244, 194, 66, 0.16);
--info: #6BA0FF;
--info-soft: rgba(107, 160, 255, 0.16);
--danger: #F87171;
--danger-soft: rgba(248, 113, 113, 0.16);
/* A11Y — --danger sous texte blanc ne donne que 2.8:1 (FAIL) : trop clair pour un
à-plat. #D02F3D = 5.1:1 avec blanc, et 3.6:1 sur --surface-2 (> 3:1 requis pour
un élément non textuel) donc la pastille reste franche sur fond sombre. */
--danger-strong: #D02F3D;
--neutral: #A3ADC7;
--neutral-soft: #232C47;
--shadow-sm: 0 1px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.35);
--shadow-md: 0 1px 0 rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.45);
--shadow-lg: 0 12px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}
[data-density="compact"] {
--row-h: 34px;
--pad-y: 7px;
--pad-x: 12px;
--fs-body: 0.8125rem;
--fs-sm: 0.75rem;
--fs-xs: 0.6875rem;
--gap: 8px;
}
[data-density="comfy"] {
--row-h: 48px;
--pad-y: 14px;
--pad-x: 20px;
--fs-body: 0.9375rem;
--fs-sm: 0.875rem;
--fs-xs: 0.8125rem;
--gap: 16px;
}
html { font-size: 16px; }
html[data-scale="md"] {
font-size: 17px;
--row-h: 52px;
--pad-y: 14px;
}
html[data-scale="lg"] {
font-size: 18px;
--row-h: 56px;
--pad-y: 16px;
}
html[data-scale="xl"] {
font-size: 20px;
--row-h: 60px;
--pad-y: 18px;
}
.nexcalia-app, .nexcalia-app * { box-sizing: border-box; }
.nexcalia-app {
font-family: var(--font-sans);
background: var(--bg);
color: var(--ink);
font-size: var(--fs-body);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* .nexcalia-shell carries shell-grid sizing; .nexcalia-app stays a pure CSS
scope with no layout opinions. Pairs with the .nexcalia-shell grid declared
in components.css (commit 2411060 — feat/decouple-app-scope-from-shell-grid). */
.nexcalia-shell { height: 100vh; }
.nexcalia-app button { font-family: inherit; }
/* ===== components.css ===== */
/* ===== catalog.css ===== */
.nx-ds-section {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--shadow-sm);
transition: box-shadow .2s ease-out, transform .2s ease-out;
}
.nx-ds-section:hover {
box-shadow: var(--shadow-md);
}
.nx-ds-section-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px dashed color-mix(in oklab, var(--line) 80%, transparent);
}
.nx-ds-section-head h2 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.nx-ds-section-head p {
font-size: 0.78125rem;
color: var(--ink-3);
margin: 0;
max-width: 70ch;
line-height: 1.5;
}
.nx-ds-section-head code {
font-family: var(--font-mono);
font-size: 0.6875rem;
padding: 1px 5px;
background: var(--bg-2);
border-radius: 4px;
color: var(--ink-2);
}
.nx-ds-badge {
flex-shrink: 0;
font-family: var(--font-mono);
font-size: 0.65625rem;
padding: 4px 8px;
border-radius: 6px;
background: color-mix(in oklab, var(--primary-soft) 70%, var(--surface));
color: var(--primary-deep);
font-weight: 500;
white-space: nowrap;
}
.nx-ds-demo {
display: flex;
flex-direction: column;
gap: 14px;
}
.nx-ds-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-start;
}
.nx-ds-hint {
align-self: center;
margin-left: 8px;
font-size: 0.6875rem;
color: var(--ink-3);
font-style: italic;
}
.nx-ds-icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 8px;
}
.nx-ds-icon-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 8px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg);
cursor: default;
transition: all .15s ease-out;
}
.nx-ds-icon-tile:hover {
background: var(--surface);
border-color: var(--primary-soft);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(43,57,72,.08);
}
.nx-ds-icon-svg {
color: var(--ink-2);
transition: color .15s, transform .2s;
}
.nx-ds-icon-tile:hover .nx-ds-icon-svg {
color: var(--primary);
transform: scale(1.15);
}
.nx-ds-icon-tile code {
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--ink-3);
text-align: center;
}
.nx-ds-spark-card {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg);
padding: 14px;
}
.nx-ds-spark-label {
font-size: 0.6875rem;
color: var(--ink-3);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 6px;
}
.nx-ds-spark-card ui-chart {
display: block;
margin: 0 -14px -14px;
width: calc(100% + 28px);
}
.nx-ds-palette-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.nx-ds-palette-tile {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg);
font-size: 0.78125rem;
transition: transform .15s, box-shadow .15s;
}
.nx-ds-palette-tile:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.nx-ds-palette-swatch {
width: 30px;
height: 30px;
border-radius: 8px;
flex-shrink: 0;
display: grid;
place-items: center;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(43,57,72,.1);
}
.nx-ds-palette-name {
font-weight: 500;
color: var(--ink);
}
.nx-ds-brand-palette {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.nx-ds-color-tile {
display: flex;
gap: 12px;
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg);
transition: transform .15s, box-shadow .15s;
cursor: default;
}
.nx-ds-color-tile:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.nx-ds-color-swatch {
width: 48px;
height: 48px;
border-radius: 8px;
flex-shrink: 0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.20),
0 1px 3px rgba(43,57,72,.10),
inset 0 0 0 1px rgba(0,0,0,.06);
}
.nx-ds-color-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.nx-ds-color-name {
font-size: 0.75rem;
font-weight: 600;
color: var(--ink);
line-height: 1.3;
}
.nx-ds-color-var {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
color: var(--ink-2);
letter-spacing: -0.01em;
line-height: 1.4;
margin-top: 1px;
}
.nx-ds-color-hex {
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--ink-3);
letter-spacing: 0.02em;
line-height: 1.3;
}
.nx-ds-color-tokens {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 4px;
}
.nx-ds-color-token {
font-family: var(--font-mono);
font-size: 0.625rem;
color: var(--primary-deep);
background: color-mix(in oklab, var(--primary-soft) 55%, var(--surface));
padding: 1px 6px;
border-radius: 999px;
line-height: 1.4;
font-weight: 500;
letter-spacing: -0.01em;
}
[data-palette="dark"] .nx-ds-section {
background: color-mix(in oklab, var(--surface) 92%, white);
border-color: rgba(255,255,255,.10);
}
[data-palette="dark"] .nx-ds-section-head {
border-bottom-color: rgba(255,255,255,.10);
}
[data-palette="dark"] .nx-ds-icon-tile,
[data-palette="dark"] .nx-ds-spark-card,
[data-palette="dark"] .nx-ds-palette-tile {
background: color-mix(in oklab, var(--surface) 92%, white);
border-color: rgba(255,255,255,.10);
}
.nx-sortable-tag {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-size: 0.6875rem;
font-weight: 500;
color: var(--nx-night-shadz);
background: color-mix(in oklab, var(--nx-highlight) 35%, var(--surface));
border-radius: 999px;
}
.nx-ds-subtitle {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-3);
margin-bottom: 8px;
}
.nx-sortable-readout {
margin-top: 16px;
padding: 12px 14px;
background: color-mix(in oklab, var(--primary) 5%, var(--surface));
border: 1px dashed color-mix(in oklab, var(--primary) 35%, var(--line));
border-radius: 10px;
font-size: 0.8125rem;
color: var(--ink-2);
display: flex;
flex-direction: column;
gap: 6px;
}
.nx-sortable-readout-head {
display: flex;
align-items: center;
gap: 8px;
color: var(--ink);
}
.nx-sortable-readout-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.02em;
color: white;
background: var(--primary);
border-radius: 999px;
}
.nx-sortable-readout-row {
display: flex;
align-items: baseline;
gap: 8px;
}
.nx-sortable-readout-label {
min-width: 48px;
color: var(--ink-3);
font-variant: small-caps;
letter-spacing: 0.04em;
}
.nx-sortable-readout code {
font-size: 0.8125rem;
color: var(--ink);
}
.nx-sortable-readout-hint {
color: var(--ink-3);
font-style: italic;
}
.nx-ds-group-title {
margin: 28px 0 12px;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-3);
padding-bottom: 8px;
border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
scroll-margin-top: 16px;
}
.nx-ds-group-title:first-child { margin-top: 0; }
.nx-ds-card {
background: var(--surface);
border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
border-radius: 12px;
overflow: hidden;
}
.nx-ds-tabs-frame {
background: linear-gradient(180deg,
color-mix(in oklab, var(--surface-2) 60%, var(--surface)),
var(--surface));
padding: 0 8px;
border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.nx-ds-tabs-panel {
display: flex;
align-items: center;
gap: 8px;
padding: 16px 18px;
color: var(--ink-2);
font-size: 0.8125rem;
background: var(--surface);
}
.nx-ds-tabs-panel-icon { color: var(--primary); flex-shrink: 0; }
.nx-ds-tabs-panel code {
color: var(--ink);
background: color-mix(in oklab, var(--primary) 7%, var(--surface));
border-radius: 4px;
padding: 1px 6px;
font-size: 0.75rem;
}
.nx-ds-seg-row {
flex-wrap: wrap;
gap: 20px;
align-items: flex-end;
}
.nx-ds-seg-card {
display: flex;
flex-direction: column;
gap: 6px;
}
.nx-ds-seg-label {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-3);
}
.nx-ds-chart-card {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg);
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.nx-ds-chart-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.nx-ds-chart-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--ink);
}
.nx-ds-chart-sub {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--ink-3);
}
.nexcalia-app .nx-ds-search .nx-input { background: var(--surface); }
.nexcalia-app .nx-ds-search .nx-input-control { padding: 8px 4px 8px 0; }
.nexcalia-app .nx-input-clear:hover { color: var(--ink) !important; background: var(--hover); border-radius: 4px; }
.nexcalia-app .nx-ds-code-block {
margin-top: 16px;
padding-top: 12px;
border-top: 1px dashed color-mix(in oklab, var(--line) 60%, transparent);
}
.nexcalia-app .nx-ds-code-toggle {
appearance: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 8px;
border-radius: 6px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink-2);
font-size: 0.6875rem;
font-weight: 600;
font-family: var(--font-mono);
cursor: pointer;
transition: background-color .15s, color .15s, border-color .15s;
}
.nexcalia-app .nx-ds-code-toggle:hover {
background: var(--primary-tint);
color: var(--primary-deep);
border-color: color-mix(in oklab, var(--primary) 40%, var(--line));
}
.nexcalia-app .nx-ds-code-toggle[aria-expanded="true"] {
background: var(--primary-soft);
color: var(--primary-deep);
border-color: var(--primary);
}
.nexcalia-app .nx-ds-code-glyph {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--ink-3);
transition: color .15s;
}
.nexcalia-app .nx-ds-code-toggle:hover .nx-ds-code-glyph,
.nexcalia-app .nx-ds-code-toggle[aria-expanded="true"] .nx-ds-code-glyph {
color: var(--primary);
}
.nexcalia-app .nx-ds-code-body {
position: relative;
margin-top: 10px;
border-radius: 8px;
background: color-mix(in oklab, var(--ink) 96%, var(--surface));
border: 1px solid color-mix(in oklab, var(--ink) 90%, var(--line));
overflow: hidden;
}
.nexcalia-app .nx-ds-code-pre {
margin: 0;
padding: 16px 18px;
overflow-x: auto;
font-family: var(--font-mono);
font-size: 0.75rem;
line-height: 1.55;
color: var(--nx-code-fg);
background: transparent;
}
.nexcalia-app .nx-ds-code-pre code {
font-family: inherit;
color: inherit;
background: transparent;
padding: 0;
}
.nexcalia-app .nx-ds-code-copy {
appearance: none;
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 5px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.78);
font-size: 0.625rem;
font-weight: 600;
cursor: pointer;
transition: background-color .15s, color .15s, border-color .15s;
z-index: 1;
}
.nexcalia-app .nx-ds-code-copy:hover {
background: rgba(255,255,255,0.12);
color: white;
border-color: rgba(255,255,255,0.24);
}
/* ===== loading-a11y.css ===== */
.nexcalia-app button:focus-visible,
.nexcalia-app a:focus-visible,
.nexcalia-app [role="button"]:focus-visible,
.nexcalia-app [tabindex]:not([tabindex="-1"]):focus-visible,
.nx-modal-panel button:focus-visible,
.nx-modal-panel a:focus-visible,
.nx-slideover button:focus-visible,
.nx-slideover a:focus-visible,
.nx-dropdown-menu button:focus-visible,
.nx-dropdown-menu a:focus-visible,
.nx-tooltip-menu a:focus-visible {
outline: 2px solid color-mix(in oklab, currentColor 60%, transparent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
@media (prefers-reduced-motion: reduce) {
.nexcalia-app *,
.nexcalia-app *::before,
.nexcalia-app *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.nx-toaster {
position: fixed;
top: 16px;
right: 16px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
max-width: calc(100vw - 32px);
}
.nx-toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 280px;
max-width: 420px;
padding: 12px 14px;
background: var(--surface);
color: var(--ink);
border: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
border-radius: 10px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 12px 32px rgba(43, 57, 72, 0.18),
0 2px 8px rgba(43, 57, 72, 0.08);
font-size: 0.8125rem;
line-height: 1.4;
}
.nx-toast-icon {
flex-shrink: 0;
width: 6px;
align-self: stretch;
border-radius: 3px;
margin: 2px 0;
}
.nx-toast-info .nx-toast-icon { background: var(--info); }
.nx-toast-ok .nx-toast-icon { background: var(--nx-puertorico); }
.nx-toast-warn .nx-toast-icon { background: var(--warn); }
.nx-toast-danger .nx-toast-icon { background: var(--nx-tall-poppy); }
.nx-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nx-toast-message { font-weight: 600; color: var(--ink); }
.nx-toast-description { font-size: 0.75rem; color: var(--ink-3); }
.nx-toast-close {
appearance: none;
border: 0;
background: transparent;
color: var(--ink-3);
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
padding: 0 2px;
margin-top: -2px;
transition: color .15s;
}
.nx-toast-close:hover { color: var(--ink); }
[data-palette="dark"] .nx-toast {
background: color-mix(in oklab, var(--surface) 92%, white);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 12px 32px rgba(0, 0, 0, 0.55),
0 2px 8px rgba(0, 0, 0, 0.35);
}
.nexcalia-app .nx-empty-sm {
padding: 20px 16px;
gap: 4px;
}
.nexcalia-app .nx-empty-sm .nx-empty-icon {
width: 44px; height: 44px;
margin-bottom: 2px;
}
.nexcalia-app .nx-empty-sm .nx-empty-title { font-size: 0.875rem; }
.nexcalia-app .nx-empty-sm .nx-empty-message { font-size: 0.75rem; }
.nexcalia-app .nx-empty-sm .nx-empty-cta { margin-top: 6px; }
.nx-skeleton {
display: inline-block;
background: linear-gradient(90deg,
color-mix(in oklab, var(--ink-3) 14%, transparent) 0%,
color-mix(in oklab, var(--ink-3) 22%, transparent) 50%,
color-mix(in oklab, var(--ink-3) 14%, transparent) 100%);
background-size: 200% 100%;
animation: nx-skeleton-shimmer 1.4s ease-in-out infinite;
vertical-align: middle;
}
.nx-skeleton-rd-sm { border-radius: 4px; }
.nx-skeleton-rd-md { border-radius: 6px; }
.nx-skeleton-rd-full { border-radius: 999px; }
.nx-skeleton-stack {
display: flex;
flex-direction: column;
}
.nx-skeleton-stack .nx-skeleton { display: block; }
@keyframes nx-skeleton-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.nx-spinner {
display: inline-block;
animation: nx-spinner-rotate 0.9s linear infinite;
flex-shrink: 0;
vertical-align: middle;
}
.nx-spinner-primary { color: var(--primary); }
.nx-spinner-ink { color: var(--ink-2); }
.nx-spinner-white { color: white; }
@keyframes nx-spinner-rotate {
to { transform: rotate(360deg); }
}
.nx-banner {
position: relative;
width: 100%;
color: var(--ink);
font-size: 0.8125rem;
line-height: 1.4;
border-bottom: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
}
.nx-banner-inner {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
max-width: 100%;
}
.nx-banner-icon {
flex-shrink: 0;
width: 22px; height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
color: white;
}
.nx-banner-body {
flex: 1;
min-width: 0;
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.nx-banner-title {
font-weight: 600;
color: var(--ink);
}
.nx-banner-message { color: var(--ink-2); }
.nx-banner-cta {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
padding: 4px 10px;
border-radius: 999px;
font-weight: 600;
font-size: 0.75rem;
color: var(--ink);
background: color-mix(in oklab, var(--surface) 60%, transparent);
border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent);
text-decoration: none;
transition: background-color .15s, transform .12s, border-color .15s;
}
.nx-banner-cta:hover {
background: var(--surface);
border-color: color-mix(in oklab, var(--ink) 25%, transparent);
transform: translateY(-1px);
}
.nx-banner-close {
appearance: none;
border: 0;
background: transparent;
color: inherit;
padding: 6px;
border-radius: 4px;
cursor: pointer;
opacity: 0.6;
display: grid;
place-items: center;
transition: opacity .15s, background-color .15s;
flex-shrink: 0;
}
.nx-banner-close:hover { opacity: 1; background: color-mix(in oklab, currentColor 12%, transparent); }
.nx-banner-info {
background: color-mix(in oklab, var(--info) 12%, var(--surface));
border-bottom-color: color-mix(in oklab, var(--info) 35%, var(--line));
}
.nx-banner-info .nx-banner-icon { background: var(--info); }
.nx-banner-ok {
background: color-mix(in oklab, var(--nx-puertorico) 14%, var(--surface));
border-bottom-color: color-mix(in oklab, var(--nx-puertorico) 40%, var(--line));
}
.nx-banner-ok .nx-banner-icon { background: var(--nx-puertorico); }
.nx-banner-warn {
background: color-mix(in oklab, var(--nx-highlight) 35%, var(--surface));
border-bottom-color: color-mix(in oklab, var(--nx-highlight) 70%, var(--line));
}
.nx-banner-warn .nx-banner-icon { background: var(--nx-highlight); color: var(--nx-night-shadz); }
.nx-banner-warn .nx-banner-title { color: var(--nx-night-shadz); }
.nx-banner-danger {
background: color-mix(in oklab, var(--nx-tall-poppy) 14%, var(--surface));
border-bottom-color: color-mix(in oklab, var(--nx-tall-poppy) 40%, var(--line));
}
.nx-banner-danger .nx-banner-icon { background: var(--nx-tall-poppy); }
.nx-banner-promo {
background: linear-gradient(90deg,
var(--primary-deep),
var(--primary));
color: white;
border-bottom-color: transparent;
}
.nx-banner-promo .nx-banner-icon { background: rgba(255,255,255,.22); color: white; }
.nx-banner-promo .nx-banner-title,
.nx-banner-promo .nx-banner-message { color: white; }
.nx-banner-promo .nx-banner-cta {
background: rgba(255,255,255,.18);
color: white;
border-color: rgba(255,255,255,.25);
}
.nx-banner-promo .nx-banner-cta:hover {
background: rgba(255,255,255,.28);
border-color: rgba(255,255,255,.35);
}
.nx-checkcard {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
border-radius: var(--radius);
cursor: pointer;
user-select: none;
transition: background-color .25s ease-out, border-color .25s ease-out,
transform .12s ease-out, box-shadow .2s ease-out;
}
.nx-checkcard:hover {
border-color: color-mix(in oklab, var(--ink) 18%, var(--line));
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(43, 57, 72, 0.04), 0 4px 12px rgba(43, 57, 72, 0.08);
}
.nx-checkcard:active { transform: translateY(0); transition-duration: .08s; }
.nx-checkcard-input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0; height: 0;
}
.nx-checkcard-box {
flex-shrink: 0;
width: 22px; height: 22px;
border: 1.5px solid var(--line-2);
border-radius: 6px;
background: var(--surface);
display: grid;
place-items: center;
color: transparent;
transition: background-color .2s, border-color .2s, color .2s, transform .15s;
}
.nx-checkcard:hover .nx-checkcard-box {
border-color: color-mix(in oklab, var(--ink) 30%, var(--line-2));
}
.nx-checkcard-input:focus-visible + .nx-checkcard-box {
outline: 2px solid color-mix(in oklab, currentColor 60%, transparent);
outline-offset: 2px;
}
.nx-checkcard-label {
flex: 1;
font-size: 0.875rem;
color: var(--ink);
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 60%;
background-size: 0% 1.5px;
transition: background-size .35s ease-out, color .25s ease-out, opacity .25s ease-out;
}
.nx-checkcard-meta {
flex-shrink: 0;
font-size: 0.75rem;
color: var(--ink-3);
transition: color .2s;
}
.nx-checkcard-ok { --nx-checkcard-tone: var(--nx-puertorico); --nx-checkcard-soft: color-mix(in oklab, var(--nx-puertorico) 14%, var(--surface)); }
.nx-checkcard-info { --nx-checkcard-tone: var(--info); --nx-checkcard-soft: color-mix(in oklab, var(--info) 14%, var(--surface)); }
.nx-checkcard-warn { --nx-checkcard-tone: var(--nx-night-shadz); --nx-checkcard-soft: color-mix(in oklab, var(--nx-highlight) 35%, var(--surface)); }
.nx-checkcard:has(.nx-checkcard-input:checked) {
background: var(--nx-checkcard-soft);
border-color: color-mix(in oklab, var(--nx-checkcard-tone) 35%, var(--line));
}
.nx-checkcard-input:checked + .nx-checkcard-box {
background: var(--nx-checkcard-tone);
border-color: var(--nx-checkcard-tone);
color: white;
transform: scale(1.04);
}
.nx-checkcard:has(.nx-checkcard-input:checked) .nx-checkcard-label {
color: color-mix(in oklab, var(--nx-checkcard-tone) 65%, var(--ink));
background-size: 100% 1.5px;
opacity: 0.75;
}
.nx-checkcard:has(.nx-checkcard-input:checked) .nx-checkcard-meta {
color: color-mix(in oklab, var(--nx-checkcard-tone) 55%, var(--ink-3));
}
.nx-checkcard.is-invalid {
border-color: var(--nx-tall-poppy);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--nx-tall-poppy) 18%, transparent);
}
.nx-checkcard.is-invalid .nx-checkcard-box {
border-color: var(--nx-tall-poppy);
}
.nx-del-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border: 1px solid color-mix(in oklab, var(--nx-tall-poppy) 22%, var(--line));
border-radius: 8px;
background: color-mix(in oklab, var(--nx-tall-poppy) 6%, var(--surface));
color: var(--nx-tall-poppy);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: color .18s, background-color .18s, border-color .18s, box-shadow .18s;
}
.nx-del-btn-sm { padding: 6px 10px; font-size: 0.75rem; }
.nx-del-btn:hover,
.nx-del-btn:focus-visible {
background: color-mix(in oklab, var(--nx-tall-poppy) 14%, var(--surface));
border-color: color-mix(in oklab, var(--nx-tall-poppy) 45%, var(--line));
outline: none;
}
.nx-del-btn:focus-visible {
box-shadow: 0 0 0 3px color-mix(in oklab, var(--nx-tall-poppy) 25%, transparent);
}
.nx-del-btn[disabled],
.nx-del-btn.nx-del-loading { opacity: .85; cursor: not-allowed; }
.nx-del-ico,
.nx-del-spinner {
display: inline-grid;
place-items: center;
width: 18px; height: 18px;
}
.nx-del-spinner svg {
width: 18px; height: 18px;
color: var(--nx-tall-poppy);
animation: nx-del-spin .8s linear infinite;
}
@keyframes nx-del-spin { to { transform: rotate(360deg); } }
.nx-del-label {
display: inline-block;
font-weight: 600;
color: var(--nx-tall-poppy);
transform-origin: right center;
white-space: nowrap;
}
.nx-del-label-enter { transition: transform .18s ease-out, opacity .18s ease-out; }
.nx-del-label-enter-start { transform: scale(0.6); opacity: 0; }
.nx-del-label-enter-end { transform: scale(1); opacity: 1; }
.nx-del-btn.is-armed {
background: color-mix(in oklab, var(--nx-tall-poppy) 14%, var(--surface));
border-color: color-mix(in oklab, var(--nx-tall-poppy) 45%, var(--line));
}
.nx-sortable-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.nx-sortable-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 12px;
border-top: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
background: var(--surface);
transition: background-color .2s ease-out;
}
.nx-sortable-item:first-child { border-top: 0; }
.nx-sortable-item:hover { background: color-mix(in oklab, var(--ink) 3%, var(--surface)); }
.nx-sortable-grip {
appearance: none;
border: 1px solid transparent;
background: transparent;
color: var(--ink-3);
width: 28px; height: 28px;
border-radius: 6px;
cursor: grab;
display: grid;
place-items: center;
transition: background-color .15s, border-color .15s, color .15s;
flex-shrink: 0;
}
.nx-sortable-grip:hover,
.nx-sortable-grip:focus-visible {
background: color-mix(in oklab, var(--ink) 6%, var(--surface));
border-color: color-mix(in oklab, var(--ink) 12%, var(--line));
color: var(--ink);
outline: none;
}
.nx-sortable-grip:active { cursor: grabbing; }
.nx-sortable-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nx-sortable-title {
font-weight: 600;
color: var(--ink);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.nx-sortable-meta { font-size: 0.8125rem; color: var(--ink-3); }
.nx-sortable-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.nx-sortable-empty {
padding: 24px;
color: var(--ink-3);
text-align: center;
font-size: 0.875rem;
}
.nx-sortable-ghost {
background: color-mix(in oklab, var(--primary) 8%, var(--surface)) !important;
opacity: 0.6;
border-radius: 8px;
box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent);
}
.nx-sortable-chosen { cursor: grabbing; }
.nx-sortable-drag {
background: var(--surface) !important;
box-shadow:
0 1px 0 rgba(255,255,255,.4) inset,
0 12px 28px rgba(43, 57, 72, 0.18),
0 4px 10px rgba(43, 57, 72, 0.10);
border-radius: 10px;
transform: rotate(0.5deg);
}
.nx-ds-section[id] { scroll-margin-top: 16px; }
/* ─── Disabled state — uniform treatment across interactive components.
Opacity dim + not-allowed cursor + neutralize hover lift / transform. */
.nexcalia-app .btn:disabled,
.nexcalia-app .btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
transform: none !important;
box-shadow: var(--shadow-sm) !important;
}
.nx-del-btn:disabled,
.nx-del-btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
.nexcalia-app .nx-toggle:has(.nx-toggle-input:disabled) {
opacity: 0.55;
cursor: not-allowed;
}
.nexcalia-app .nx-toggle:has(.nx-toggle-input:disabled) .nx-toggle-track {
background: color-mix(in oklab, var(--ink-3) 40%, var(--surface-2));
}
.nx-checkcard:has(.nx-checkcard-input:disabled) {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
.nx-checkbox:has(.nx-checkbox-input:disabled) {
opacity: 0.55;
cursor: not-allowed;
}
/* Sortable item — keyboard pick-up state (Space/Enter on grip) */
.nx-sortable-item.is-keyboard-picked {
background: color-mix(in oklab, var(--primary) 10%, var(--surface));
box-shadow:
inset 0 0 0 2px color-mix(in oklab, var(--primary) 45%, transparent),
0 4px 14px rgba(43, 57, 72, 0.10);
border-radius: 8px;
z-index: 2;
position: relative;
}
.nx-sortable-item.is-keyboard-picked .nx-sortable-grip {
color: var(--primary);
background: color-mix(in oklab, var(--primary) 12%, var(--surface));
}
/* ─── .nx-surface — opt-in primitive for card-like neutral surfaces.
Composes: bg/border/radius/shadow + optional lift on hover. Use as a base
class on any new card-like component instead of re-declaring the stanza.
Variants:
.nx-surface--lift hover lift + deeper shadow
.nx-surface--press press down on click
.nx-surface--flat no shadow (for inset/sub-cards) */
.nexcalia-app .nx-surface {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .15s;
}
.nexcalia-app .nx-surface--lift:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
border-color: color-mix(in oklab, var(--primary) 22%, var(--line));
}
.nexcalia-app .nx-surface--press:active {
transform: translateY(0);
transition-duration: .08s;
}
.nexcalia-app .nx-surface--flat {
box-shadow: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.nexcalia-app .nx-helptip {
position: relative;
display: inline-flex;
vertical-align: middle;
margin-left: 4px;
}
.nexcalia-app .nx-helptip-trigger {
appearance: none;
width: 16px; height: 16px;
border-radius: 50%;
border: 1px solid var(--line-2);
background: var(--surface);
color: var(--ink-3);
display: grid; place-items: center;
cursor: help;
padding: 0;
transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.nexcalia-app .nx-helptip-trigger:hover,
.nexcalia-app .nx-helptip-trigger[aria-expanded="true"] {
background: var(--primary-soft);
border-color: var(--primary);
color: var(--primary-deep);
}
.nexcalia-app .nx-helptip-trigger:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.nexcalia-app .nx-helptip-pop {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
z-index: 200;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 12px;
box-shadow:
0 1px 0 rgba(43,57,72,.04),
0 8px 24px rgba(43,57,72,.14);
font-size: 0.75rem;
color: var(--ink);
line-height: 1.4;
text-align: left;
white-space: normal;
min-width: 200px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .15s ease-out, visibility 0s linear .15s;
}
.nexcalia-app .nx-helptip-pop.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity .15s ease-out, visibility 0s linear 0s;
}
.nexcalia-app .nx-helptip-pop::after {
content: '';
position: absolute;
top: 100%; left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--surface);
filter: drop-shadow(0 1px 0 var(--line));
}
.nexcalia-app .nx-helptip-title {
display: block;
font-weight: 600;
color: var(--ink);
margin-bottom: 4px;
}
.nexcalia-app .nx-helptip-body {
color: var(--ink-2);
}
.nexcalia-app .nx-range {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
--nx-range-h: 6px;
--nx-range-thumb: 16px;
}
.nexcalia-app .nx-range-label {
font-size: 0.75rem;
color: var(--ink-2);
font-weight: 500;
}
.nexcalia-app .nx-range-track-wrap {
position: relative;
height: var(--nx-range-thumb);
padding: 0 calc(var(--nx-range-thumb) / 2);
}
.nexcalia-app .nx-range-rail,
.nexcalia-app .nx-range-fill {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: var(--nx-range-h);
border-radius: 999px;
pointer-events: none;
}
.nexcalia-app .nx-range-rail {
left: 0; right: 0;
background: var(--surface-2, color-mix(in oklab, var(--ink) 6%, var(--surface)));
border: 1px solid var(--line);
}
.nexcalia-app .nx-range-fill {
background: linear-gradient(90deg, var(--primary), var(--primary-deep));
}
.nexcalia-app .nx-range-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
background: transparent;
appearance: none;
-webkit-appearance: none;
pointer-events: none;
}
.nexcalia-app .nx-range-input::-webkit-slider-runnable-track {
background: transparent;
height: 100%;
}
.nexcalia-app .nx-range-input::-moz-range-track {
background: transparent;
height: 100%;
}
.nexcalia-app .nx-range-input::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: var(--nx-range-thumb);
height: var(--nx-range-thumb);
border-radius: 50%;
background: var(--surface);
border: 2px solid var(--primary);
box-shadow: 0 1px 3px rgba(43,57,72,.18);
cursor: grab;
pointer-events: auto;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.nexcalia-app .nx-range-input::-moz-range-thumb {
width: var(--nx-range-thumb);
height: var(--nx-range-thumb);
border-radius: 50%;
background: var(--surface);
border: 2px solid var(--primary);
box-shadow: 0 1px 3px rgba(43,57,72,.18);
cursor: grab;
pointer-events: auto;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.nexcalia-app .nx-range-input:hover::-webkit-slider-thumb,
.nexcalia-app .nx-range-input:focus-visible::-webkit-slider-thumb {
transform: scale(1.15);
border-color: var(--primary-deep);
box-shadow: 0 0 0 4px var(--primary-soft), 0 2px 6px rgba(43,57,72,.22);
}
.nexcalia-app .nx-range-input:hover::-moz-range-thumb,
.nexcalia-app .nx-range-input:focus-visible::-moz-range-thumb {
transform: scale(1.15);
border-color: var(--primary-deep);
box-shadow: 0 0 0 4px var(--primary-soft), 0 2px 6px rgba(43,57,72,.22);
}
.nexcalia-app .nx-range-input:active::-webkit-slider-thumb,
.nexcalia-app .nx-range-input:active::-moz-range-thumb {
cursor: grabbing;
}
.nexcalia-app .nx-range-input:focus { outline: none; }
.nexcalia-app .nx-range-input-to {
z-index: 2;
}
.nexcalia-app .nx-range-values {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
color: var(--ink);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.nexcalia-app .nx-range-sep {
color: var(--ink-3);
}
.nexcalia-app .nx-actmsg {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-weight: 500;
opacity: 0;
transform: translateX(-4px);
pointer-events: none;
transition: opacity .25s ease-out, transform .25s ease-out;
}
.nexcalia-app .nx-actmsg.is-shown {
opacity: 1;
transform: translateX(0);
}
.nexcalia-app .nx-actmsg-ok { color: var(--ok-deep); }
.nexcalia-app .nx-actmsg-info { color: var(--info); }
.nexcalia-app .nx-actmsg-warn { color: var(--warn); }
.nexcalia-app .nx-actmsg-danger { color: var(--danger); }
.nexcalia-app .nx-input-time {
max-width: 90px;
}
.nexcalia-app .nx-input-time .nx-input-control {
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
text-align: center;
}
.nexcalia-app .nx-ctxmenu-wrap {
position: relative;
}
.nexcalia-app .nx-ctxmenu-target {
display: contents;
}
.nx-ctxmenu {
position: relative;
z-index: 9999;
color: var(--ink);
border-radius: 10px;
padding: 6px;
/* Aurora-blue halo at the top edge — same visual language used by
.nx-modal-panel, .nx-overlay-head and the booking-preview popover.
Subtle, fades before mid-height so items remain perfectly legible. */
background:
radial-gradient(
160% 60px at 50% -10%,
color-mix(in oklab, var(--primary) 12%, transparent),
transparent 70%
),
var(--surface);
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 12px 32px rgba(43,57,72,0.18),
0 2px 8px rgba(43,57,72,0.08),
0 0 0 1px color-mix(in oklab, var(--line) 80%, transparent);
}
/* Specular highlight strip at the top — same trick as .nx-modal-panel::before */
.nx-ctxmenu::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
border-radius: 10px 10px 0 0;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.95) 40%,
rgba(255,255,255,0.95) 60%,
transparent
);
pointer-events: none;
z-index: 2;
}
.nx-ctxmenu .nx-dropdown-item {
padding: 6px 10px;
font-size: 0.78125rem;
}
[data-palette="dark"] .nx-ctxmenu {
background: color-mix(in oklab, var(--surface) 92%, white);
}
/* Confirm modal — rendered inside .nx-modal-panel which is teleported outside
.nexcalia-app (wire-elements/modal renders at the body root). The rules
below scope to .nx-modal-panel instead so the prefix matches. */
.nx-modal-panel .nx-confirm-modal {
padding: 24px;
}
.nx-modal-panel .nx-confirm-body {
display: flex;
align-items: flex-start;
gap: 16px;
}
.nx-modal-panel .nx-confirm-icon {
flex-shrink: 0;
width: 48px; height: 48px;
border-radius: 50%;
display: grid;
place-items: center;
color: white;
}
.nx-modal-panel .nx-confirm-icon-danger {
background: color-mix(in oklab, var(--nx-tall-poppy) 18%, var(--surface));
color: var(--nx-tall-poppy);
}
.nx-modal-panel .nx-confirm-icon-warn {
background: color-mix(in oklab, var(--nx-highlight) 35%, var(--surface));
color: var(--nx-night-shadz);
}
.nx-modal-panel .nx-confirm-icon-info {
background: color-mix(in oklab, var(--info) 14%, var(--surface));
color: var(--info);
}
.nx-modal-panel .nx-confirm-text {
flex: 1;
min-width: 0;
}
.nx-modal-panel .nx-confirm-title {
font-size: 1.0625rem;
font-weight: 600;
color: var(--ink);
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.nx-modal-panel .nx-confirm-message {
font-size: 0.8125rem;
color: var(--ink-2);
line-height: 1.5;
margin: 0;
}
.nx-modal-panel .nx-confirm-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px dashed color-mix(in oklab, var(--line) 70%, transparent);
}
.nexcalia-app .nx-fileup {
display: block;
width: 100%;
}
.nexcalia-app .nx-fileup .nx-fileup-dropzone {
border-color: color-mix(in oklab, var(--ink) 14%, var(--line));
background: color-mix(in oklab, var(--ink) 4%, var(--surface));
color: var(--ink-2);
transition: background-color .18s ease-out, border-color .18s ease-out, transform .18s ease-out;
}
.nexcalia-app .nx-fileup .nx-fileup-dropzone:hover,
.nexcalia-app .nx-fileup [data-flux-file-upload-trigger]:hover .nx-fileup-dropzone {
border-color: var(--primary);
background: var(--primary-tint);
color: var(--ink);
}
.nexcalia-app .nx-fileup [data-dragging] .nx-fileup-dropzone,
.nexcalia-app .nx-fileup .nx-fileup-dropzone[data-dragging] {
border-color: var(--primary);
background: var(--primary-soft);
color: var(--primary-deep);
transform: scale(1.005);
}
.nexcalia-app .nx-fileup .nx-fileup-dropzone [data-flux-icon] {
color: var(--ink-3);
transition: color .18s, transform .22s cubic-bezier(0.34, 1.3, 0.4, 1);
}
.nexcalia-app .nx-fileup .nx-fileup-dropzone:hover [data-flux-icon] {
color: var(--primary);
transform: translateY(-2px);
}
.nexcalia-app .nx-fileup [data-loading] .nx-fileup-dropzone {
background: var(--primary-soft);
border-color: var(--primary);
}
.nexcalia-app .nx-avatar-upload {
position: relative;
display: inline-block;
}
.nexcalia-app .nx-avatar-upload-pill {
position: relative;
display: grid;
place-items: center;
width: var(--nx-av-size);
height: var(--nx-av-size);
border-radius: 50%;
overflow: hidden;
cursor: pointer;
background: var(--surface-2);
border: 2px solid color-mix(in oklab, var(--primary) 25%, var(--line));
box-shadow: 0 2px 6px rgba(43,57,72,.08);
transition: border-color .18s, box-shadow .18s, transform .18s;
}
.nexcalia-app .nx-avatar-upload-pill:hover,
.nexcalia-app .nx-avatar-upload-pill:focus-visible {
border-color: var(--primary);
box-shadow: 0 0 0 4px var(--primary-soft), 0 4px 12px rgba(43,57,72,.12);
transform: translateY(-1px);
}
.nexcalia-app .nx-avatar-upload-input {
position: absolute;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
.nexcalia-app .nx-avatar-upload-img {
width: 100%; height: 100%;
object-fit: cover;
}
.nexcalia-app .nx-avatar-upload-fallback {
font-size: calc(var(--nx-av-size) * 0.32);
font-weight: 600;
color: var(--primary-deep);
background: linear-gradient(135deg, var(--primary-tint), var(--primary-soft));
width: 100%; height: 100%;
display: grid;
place-items: center;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.nexcalia-app .nx-avatar-upload-overlay {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: rgba(15, 23, 42, 0.55);
color: white;
opacity: 0;
transition: opacity .18s ease-out;
}
.nexcalia-app .nx-avatar-upload-pill:hover .nx-avatar-upload-overlay,
.nexcalia-app .nx-avatar-upload-pill:focus-visible .nx-avatar-upload-overlay {
opacity: 1;
}
.nexcalia-app .nx-avatar-upload-remove {
position: absolute;
top: -4px; right: -4px;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--nx-tall-poppy);
color: white;
border: 2px solid var(--surface);
display: grid;
place-items: center;
cursor: pointer;
transition: background-color .15s, transform .15s;
}
.nexcalia-app .nx-avatar-upload-remove:hover {
background: color-mix(in oklab, var(--nx-tall-poppy) 85%, black);
transform: scale(1.1);
}
.nexcalia-app .nx-image-upload {
position: relative;
display: block;
width: 100%;
}
.nexcalia-app .nx-image-upload-area {
position: relative;
display: block;
width: 100%;
overflow: hidden;
border-radius: 10px;
border: 1.5px dashed color-mix(in oklab, var(--ink) 18%, var(--line));
background: color-mix(in oklab, var(--ink) 3%, var(--surface));
cursor: pointer;
transition: border-color .18s, background-color .18s, transform .18s;
}
.nexcalia-app .nx-image-upload-area:hover,
.nexcalia-app .nx-image-upload-area:focus-visible {
border-color: var(--primary);
background: var(--primary-tint);
transform: translateY(-1px);
}
/* Aspect ratios apply to the .area itself (it carries the dashed border).
max-width is also on the area so the dashed box doesn't sprawl in a wide
parent — wrapper stays width:100% so the trash button anchors against it. */
.nexcalia-app .nx-image-upload-area.nx-image-upload-square { aspect-ratio: 1 / 1; max-width: 220px; }
.nexcalia-app .nx-image-upload-area.nx-image-upload-video { aspect-ratio: 16 / 9; }
.nexcalia-app .nx-image-upload-area.nx-image-upload-banner { aspect-ratio: 3 / 1; }
.nexcalia-app .nx-image-upload-area.nx-image-upload-portrait { aspect-ratio: 3 / 4; max-width: 240px; }
.nexcalia-app .nx-image-upload-input {
position: absolute;
width: 1px; height: 1px;
opacity: 0;
pointer-events: none;
}
.nexcalia-app .nx-image-upload-img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.nexcalia-app .nx-image-upload-empty {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--ink-3);
padding: 12px;
text-align: center;
}
.nexcalia-app .nx-image-upload-heading {
font-size: 0.8125rem;
font-weight: 600;
color: var(--ink-2);
margin-top: 4px;
}
.nexcalia-app .nx-image-upload-text {
font-size: 0.6875rem;
color: var(--ink-3);
}
.nexcalia-app .nx-image-upload-overlay {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%) translateY(4px);
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.78);
color: white;
font-size: 0.6875rem;
font-weight: 600;
opacity: 0;
transition: opacity .18s ease-out, transform .22s cubic-bezier(0.34, 1.3, 0.4, 1);
pointer-events: none;
}
.nexcalia-app .nx-image-upload-area:hover .nx-image-upload-overlay,
.nexcalia-app .nx-image-upload-area:focus-visible .nx-image-upload-overlay {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.nexcalia-app .nx-image-upload-remove {
position: absolute;
top: 6px; right: 6px;
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.78);
color: white;
border: 0;
display: grid;
place-items: center;
cursor: pointer;
z-index: 1;
transition: background-color .15s, transform .15s;
}
.nexcalia-app .nx-image-upload-remove:hover {
background: var(--nx-tall-poppy);
transform: scale(1.1);
}
.nexcalia-app .nx-combobox {
width: 100%;
}
.nexcalia-app .nx-combobox-item {
border-radius: 6px;
transition: background-color .12s;
}
.nexcalia-app .nx-combobox-item:hover,
.nexcalia-app .nx-combobox-item[data-active] {
background: var(--primary-tint) !important;
color: var(--ink) !important;
}
.nexcalia-app .nx-combobox-item-content {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.nexcalia-app .nx-combobox-label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--ink);
}
.nexcalia-app .nx-combobox-meta {
font-size: 0.6875rem;
color: var(--ink-3);
}
.nexcalia-app .nx-repeater {
display: flex;
flex-direction: column;
gap: 8px;
}
.nexcalia-app .nx-repeater-rows {
display: flex;
flex-direction: column;
gap: 6px;
}
.nexcalia-app .nx-repeater-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 8px;
transition: border-color .15s, background-color .15s;
}
.nexcalia-app .nx-repeater-row:hover {
border-color: var(--line-2);
}
.nexcalia-app .nx-repeater-cell {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.nexcalia-app .nx-repeater-remove {
appearance: none;
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 6px;
border: 1px solid transparent;
background: transparent;
color: var(--ink-3);
display: grid;
place-items: center;
cursor: pointer;
transition: background-color .15s, color .15s, border-color .15s;
}
.nexcalia-app .nx-repeater-remove:hover {
background: color-mix(in oklab, var(--nx-tall-poppy) 10%, var(--surface));
color: var(--nx-tall-poppy);
border-color: color-mix(in oklab, var(--nx-tall-poppy) 25%, var(--line));
}
.nexcalia-app .nx-repeater-add {
appearance: none;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px 6px 8px;
border-radius: 6px;
border: 1px dashed color-mix(in oklab, var(--primary) 35%, var(--line-2));
background: transparent;
color: var(--primary-deep);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
min-height: 24px;
transition: background-color .15s, border-color .15s, color .15s;
}
.nexcalia-app .nx-repeater-add:hover {
background: var(--primary-tint);
border-color: var(--primary);
border-style: solid;
}
.nexcalia-app .nx-repeater-empty {
margin: 0;
padding: 14px 12px;
border: 1px dashed var(--line-2);
border-radius: 8px;
text-align: center;
font-size: 0.75rem;
color: var(--ink-3);
background: color-mix(in oklab, var(--ink) 2%, var(--surface));
}
.nexcalia-app .nx-breadcrumbs {
display: block;
}
.nexcalia-app .nx-breadcrumbs-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
list-style: none;
padding: 0;
margin: 0;
font-size: 0.75rem;
}
.nexcalia-app .nx-breadcrumbs-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.nexcalia-app .nx-breadcrumbs-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--ink-3);
text-decoration: none;
padding: 2px 4px;
border-radius: 4px;
transition: color .15s, background-color .15s;
}
.nexcalia-app .nx-breadcrumbs-link:hover {
color: var(--primary-deep);
background: var(--primary-tint);
}
.nexcalia-app .nx-breadcrumbs-label {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--ink-3);
padding: 2px 4px;
}
.nexcalia-app .nx-breadcrumbs-item.is-current .nx-breadcrumbs-label {
color: var(--ink);
font-weight: 600;
}
.nexcalia-app .nx-breadcrumbs-sep {
color: var(--ink-3);
opacity: 0.6;
margin: 0 2px;
}
.nexcalia-app .nx-breadcrumbs-ellipsis {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--ink-3);
padding: 2px 4px;
font-weight: 500;
}
.nexcalia-app .nx-pagination {
display: flex;
align-items: center;
gap: 16px;
padding: 12px 4px;
font-size: 0.75rem;
color: var(--ink-2);
flex-wrap: wrap;
}
.nexcalia-app .nx-pagination-label {
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.nexcalia-app .nx-pagination-label strong {
color: var(--ink);
font-weight: 600;
}
.nexcalia-app .nx-pagination-of { color: var(--ink-3); }
.nexcalia-app .nx-pagination-spacer { flex: 1; min-width: 0; }
.nexcalia-app .nx-pagination-size {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ink-3);
}
.nexcalia-app .nx-pagination-size-label { font-size: 0.6875rem; }
.nexcalia-app .nx-pagination-select {
appearance: none;
-webkit-appearance: none;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 6px;
padding: 4px 22px 4px 10px;
font-size: 0.75rem;
color: var(--ink);
cursor: pointer;
background-image: url("data:image/svg+xml;utf8, émet ces classes (md = défaut,
porté par .btn lui-même). */
.nexcalia-app .btn-sm {
height: 28px; padding: 0 10px;
font-size: 0.75rem; gap: 5px;
}
.nexcalia-app .btn-lg {
height: 42px; padding: 0 18px;
font-size: 0.875rem; gap: 8px;
}
.nexcalia-app .btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.nexcalia-app .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.nexcalia-app .btn.ghost:hover {
background: var(--hover);
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(43,57,72,.04), 0 2px 8px rgba(43,57,72,.08);
}
.nexcalia-app .nx-clipboard-btn {
appearance: none;
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink-2);
font-size: 0.8125rem;
cursor: pointer;
transition: background-color .15s, color .15s, border-color .15s, transform .15s;
min-height: 24px;
}
.nexcalia-app .nx-clipboard-btn:hover {
background: var(--hover);
color: var(--ink);
border-color: var(--line-2);
}
.nexcalia-app .nx-clipboard-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.nexcalia-app .nx-clipboard-icon {
position: relative;
width: 12px; height: 12px;
display: inline-grid;
place-items: center;
color: var(--ink-3);
transition: color .15s;
}
.nexcalia-app .nx-clipboard-btn:hover .nx-clipboard-icon { color: var(--primary); }
.nexcalia-app .nx-clipboard-icon .nx-clipboard-check,
.nexcalia-app .nx-clipboard-icon .nx-clipboard-clip {
position: absolute; inset: 0;
transition: opacity .18s ease-out, transform .22s cubic-bezier(0.34, 1.3, 0.4, 1);
}
.nexcalia-app .nx-clipboard-icon .nx-clipboard-check { opacity: 0; transform: scale(0.6); color: var(--ok); }
.nexcalia-app .nx-clipboard-btn.is-copied { color: var(--ok-deep); border-color: color-mix(in oklab, var(--ok) 40%, var(--line)); }
.nexcalia-app .nx-clipboard-btn.is-copied .nx-clipboard-icon .nx-clipboard-check { opacity: 1; transform: scale(1); }
.nexcalia-app .nx-clipboard-btn.is-copied .nx-clipboard-icon .nx-clipboard-clip { opacity: 0; transform: scale(0.7); }
.nexcalia-app .nx-splitbtn {
display: inline-flex;
align-items: stretch;
position: relative;
}
.nexcalia-app .nx-splitbtn > .btn.nx-splitbtn-main {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
position: relative;
z-index: 1;
}
.nexcalia-app .nx-splitbtn > .nx-splitbtn-chev {
margin-left: -1px;
}
.nexcalia-app .nx-splitbtn .nx-dropdown-menu {
top: calc(100% + 6px);
margin: 0;
}
.nexcalia-app .nx-splitbtn .nx-splitbtn-chev {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding-left: 8px;
padding-right: 8px;
position: relative;
}
.nexcalia-app .nx-splitbtn .nx-splitbtn-chev::before {
content: '';
position: absolute;
top: 6px; bottom: 6px; left: 0;
width: 1px;
background: color-mix(in oklab, currentColor 22%, transparent);
pointer-events: none;
}
.nexcalia-app .nx-splitbtn .nx-splitbtn-main:focus-visible,
.nexcalia-app .nx-splitbtn .nx-splitbtn-chev:focus-visible {
z-index: 2;
}
.nexcalia-app .btn.danger {
color: white;
background: var(--nx-tall-poppy);
border-color: var(--nx-tall-poppy);
box-shadow:
0 1px 0 rgba(0,0,0,.06),
0 1px 3px color-mix(in oklab, var(--nx-tall-poppy) 22%, transparent),
inset 0 1px 0 rgba(255,255,255,.22);
}
.nexcalia-app .btn.danger:hover {
background: color-mix(in oklab, var(--nx-tall-poppy) 85%, black);
border-color: color-mix(in oklab, var(--nx-tall-poppy) 85%, black);
transform: translateY(-1px);
box-shadow:
0 2px 0 rgba(0,0,0,.06),
0 6px 18px color-mix(in oklab, var(--nx-tall-poppy) 35%, transparent),
inset 0 1px 0 rgba(255,255,255,.22);
}
/* ===== pills.css ===== */
.nexcalia-app .pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px;
border-radius: 999px;
font-size: var(--fs-xs);
font-weight: 500;
font-variant-numeric: tabular-nums;
white-space: nowrap;
border: 1px solid transparent;
}
.nexcalia-app .pill .d { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.nexcalia-app .pill.ok { background: var(--ok-soft); color: var(--ok-deep); }
.nexcalia-app .pill.warn { background: var(--warn-soft); color: var(--warn); }
.nexcalia-app .pill.info { background: var(--info-soft); color: var(--info); }
.nexcalia-app .pill.danger{ background: var(--danger-soft); color: var(--danger); }
.nexcalia-app .pill.neutral{ background: var(--neutral-soft); color: var(--ink-2); }
.nexcalia-app .pill.accent{ background: var(--primary-soft); color: var(--primary-deep); }
.nexcalia-app .pill.outline { background: var(--neutral-soft); border-color: transparent; color: var(--ink-2); }
/* En palette sombre --primary-deep reste un bleu foncé (contrairement à --ok-deep,
éclairci lui), donc .pill.accent rendait du bleu foncé sur bleu nuit : 1,4:1.
On ne peut pas éclaircir le token — il sert AUSSI de fond (btn.primary:hover,
6 usages) — d'où une variante portée par la pill elle-même. Mesuré à 5,05:1. */
[data-palette="dark"] .nexcalia-app .pill.accent {
background: color-mix(in oklab, var(--primary) 24%, transparent);
color: color-mix(in oklab, var(--primary) 40%, var(--ink));
}
.nexcalia-app .pill.has-icon { padding: 2px 8px 2px 6px; gap: 3px; line-height: 1; }
.nexcalia-app .pill.has-icon svg { flex-shrink: 0; margin-top: -0.5px; }
/* ─── Pastille de compteur sur une icône de nav repliée ───
Usage : dans une `.nx-nav-item` (position: relative), à côté de l'icône 16px, avec
[data-collapse-only] pour n'exister qu'en sidebar repliée :
{{ $n }}
Repliée, la rangée ne contient plus que l'icône centrée : l'ancrage top/left 50 %
vise donc le centre de l'icône, et le décalage porte la pastille sur son coin
haut-droit. Le ring `--surface-2` la détache du fond de la sidebar ; `pointer-events`
neutralisé pour ne pas manger le survol du lien (tooltip du mode replié). */
.nexcalia-app .nx-nav-icon-badge {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(1.5px, -15.5px);
display: inline-flex;
align-items: center;
justify-content: center;
height: 14px;
min-width: 14px;
padding: 0 3px;
border-radius: 999px;
background: var(--danger-strong);
color: var(--nx-white);
font-size: 0.5625rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
font-variant-numeric: tabular-nums;
pointer-events: none;
box-shadow:
0 0 0 1.5px var(--surface-2),
0 1px 2px rgba(43, 57, 72, 0.28);
}
.nexcalia-app .page-head {
display: flex; align-items: flex-end; gap: 16px;
padding: 18px 24px 12px;
border-bottom: 1px solid var(--line);
}
.nexcalia-app .page-head h1 {
font-size: 1.375rem; font-weight: 600;
letter-spacing: -0.02em; margin: 0;
}
.nexcalia-app .page-head .sub { font-size: 0.75rem; color: var(--ink-3); margin-top: 2px; }
.nexcalia-app .page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.nexcalia-app .page-tabs {
display: flex; gap: 2px;
padding: 0 24px;
border-bottom: 1px solid var(--line);
background: var(--surface);
}
.nexcalia-app .page-tabs .tab {
appearance: none;
background: transparent;
border: 0;
font-family: inherit;
position: relative;
padding: 8px 12px;
font-size: 0.75rem; font-weight: 500;
color: var(--ink-2);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.nexcalia-app .page-tabs .tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.nexcalia-app .page-tabs .tab .count {
margin-left: 6px; font-size: 0.625rem; color: var(--ink-3);
background: var(--bg-2); padding: 1px 5px; border-radius: 4px;
}
/* ===== cards.css ===== */
.nexcalia-app .card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.nexcalia-app .card-head {
display: flex; align-items: center;
padding: 10px 12px;
border-bottom: 1px solid var(--line);
font-size: 0.875rem; font-weight: 600; color: var(--ink);
}
.nexcalia-app .card-head .more { margin-left: auto; color: var(--ink-3); font-size: 0.6875rem; font-weight: 500; }
/* Composable hover treatment for list rows: mouse-following blue halo + primary
border tint + soft lift. Same visual language as .nx-resource-row, but layout
agnostic so it composes with any row markup (e.g. rows with a flush color bar).
Pair with x-data="nxSpotlight" (sets --nx-mx/--nx-my) for the cursor-tracking. */
.nexcalia-app .nx-row-spotlight {
position: relative;
transition: border-color 0.15s, box-shadow 0.15s;
}
.nexcalia-app .nx-row-spotlight::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
360px 200px at calc(var(--nx-mx, 50) * 1%) 25%,
color-mix(in oklab, var(--primary) 16%, transparent),
transparent 70%
);
opacity: 0;
transition: opacity 0.25s ease-out;
pointer-events: none;
}
.nexcalia-app .nx-row-spotlight:hover::before { opacity: 1; }
.nexcalia-app .nx-row-spotlight:has(.icon-btn:hover)::before { opacity: 0; }
.nexcalia-app .nx-row-spotlight:hover {
border-color: color-mix(in oklab, var(--primary) 30%, var(--line));
box-shadow: 0 1px 0 rgba(43, 57, 72, 0.04), 0 4px 12px rgba(43, 57, 72, 0.08);
}
.nexcalia-app .nx-row-spotlight > * { position: relative; }
/* Variante tabulaire du halo ci-dessus, pour une vraie .tbl.
Activation : (le prop pose la classe et le
tracking Alpine sur la table).
⚠ NE PAS transposer .nx-row-spotlight tel quel : PAS de pseudo-élément sur
un . Blink enveloppe tout enfant hors-flux d'une rangée de table dans
une CELLULE ANONYME, même en position: absolute. La table gagne alors une
colonne fantôme qui absorbe une part de la largeur restante, et toutes les
données se décalent d'un cran vers la droite par rapport aux en-têtes
(constaté : premier th à x=273 pour un premier td à x=429). Le CSS
s'applique pourtant comme écrit — le piège est dans le modèle de boîtes
tabulaire, pas dans les règles.
Le halo est donc peint comme BACKGROUND de la rangée elle-même :
- les fonds de rangée se peignent sous les fonds de cellule et couvrent
toute la largeur de la rangée (border-spacing: 0, donc aucun trou) ; le
fond plat `--hover` posé sur les cellules est neutralisé et repris ici,
ce qui le rend transitionnable ;
- les pourcentages du gradient se résolvent sur la boîte de la rangée,
c'est-à-dire la largeur de la table : --nx-mx reste valable tel quel, et
un seul x-data="nxSpotlight" sur la suffit pour toutes les lignes
(les rangées ont la même origine X et la même largeur que la table) ;
- le fondu 0.25s est conservé en faisant passer l'alpha du gradient par une
custom property ENREGISTRÉE, seule façon de rendre un dégradé animable.
Le lift box-shadow du modèle carte est remplacé par une teinte primaire de
la bordure basse : les lignes sont contiguës, pas des cartes détachées. */
@property --nx-halo-alpha {
syntax: "";
inherits: false;
initial-value: 0;
}
.nexcalia-app .tbl.nx-tbl-spotlight tbody tr {
background-color: transparent;
background-image: radial-gradient(
360px 200px at calc(var(--nx-mx, 50) * 1%) 50%,
color-mix(in oklab, var(--primary) calc(16% * var(--nx-halo-alpha)), transparent),
transparent 70%
);
transition: background-color 0.25s ease-out, --nx-halo-alpha 0.25s ease-out;
}
.nexcalia-app .tbl.nx-tbl-spotlight tbody tr:hover {
background-color: var(--hover);
--nx-halo-alpha: 1;
}
/* Le halo se coupe sous le curseur d'un bouton d'action ; le fond plat, lui,
reste (la ligne doit continuer de se lire comme active). */
.nexcalia-app .tbl.nx-tbl-spotlight tbody tr:has(.icon-btn:hover) {
--nx-halo-alpha: 0;
}
.nexcalia-app .tbl.nx-tbl-spotlight tbody tr > td {
transition: border-color 0.15s;
}
/* Neutralise le fond plat que `.tbl tbody tr:hover td` pose sur les cellules
(il masquerait le halo). Exclut .selected pour ne pas effacer la teinte de
sélection. Spécificité volontairement supérieure : cette règle vit dans un
part importé AVANT les règles .tbl de components.css. */
.nexcalia-app .tbl.nx-tbl-spotlight tbody tr:hover:not(.selected) td {
background: transparent;
border-bottom-color: color-mix(in oklab, var(--primary) 30%, var(--line));
}
/* Radio-card — single-select clickable cards (mutually-exclusive choices).
Sibling of .nx-checkcard but radio semantics: a dot instead of a box,
no strike-through. Composes .nx-row-spotlight (above) for the cursor-
following halo + primary border tint + lift on hover. Stacked-block
rendering: contiguous borders, rounded corners only on the group. */
.nexcalia-app .nx-radiocard-group {
display: flex;
flex-direction: column;
}
.nexcalia-app .nx-radiocard {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
border-radius: var(--radius);
cursor: pointer;
user-select: none;
position: relative;
transition:
background-color 0.25s ease-out,
border-color 0.25s ease-out,
box-shadow 0.2s ease-out;
}
/* Empilement en bloc : on fusionne les bordures et n'arrondit que le groupe. */
.nexcalia-app .nx-radiocard-group .nx-radiocard {
border-radius: 0;
margin-top: -1px;
}
.nexcalia-app .nx-radiocard-group .nx-radiocard:first-child {
margin-top: 0;
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.nexcalia-app .nx-radiocard-group .nx-radiocard:last-child {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}
/* Le feedback hover est fourni par le halo spotlight (.nx-row-spotlight) :
bordure teintée + box-shadow lift. On garde seulement le z-index pour que
le lift passe au-dessus des cartes voisines (bordures contiguës). */
.nexcalia-app .nx-radiocard:hover {
z-index: 1;
}
.nexcalia-app .nx-radiocard-input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
/* Puce radio : cercle vide → point plein --primary à l'état coché. */
.nexcalia-app .nx-radiocard-dot {
flex-shrink: 0;
width: 20px;
height: 20px;
border: 2px solid var(--line-2);
border-radius: 50%;
background: var(--surface);
display: grid;
place-items: center;
transition:
border-color 0.2s ease-out,
box-shadow 0.2s ease-out;
}
.nexcalia-app .nx-radiocard-dot::after {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--primary);
transform: scale(0);
transition: transform 0.15s ease-out;
}
.nexcalia-app .nx-radiocard:hover .nx-radiocard-dot {
border-color: color-mix(in oklab, var(--ink) 30%, var(--line-2));
}
.nexcalia-app .nx-radiocard-input:focus-visible + .nx-radiocard-dot {
outline: 2px solid color-mix(in oklab, var(--primary) 60%, transparent);
outline-offset: 2px;
}
/* Texte : label + description optionnelle. */
.nexcalia-app .nx-radiocard-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.nexcalia-app .nx-radiocard-label {
font-size: var(--fs-body);
color: var(--ink);
transition: color 0.2s ease-out;
}
.nexcalia-app .nx-radiocard-desc {
font-size: var(--fs-xs);
color: var(--ink-3);
}
.nexcalia-app .nx-radiocard-meta {
flex-shrink: 0;
font-size: var(--fs-xs);
color: var(--ink-3);
transition: color 0.2s ease-out;
}
/* État coché. */
.nexcalia-app .nx-radiocard:has(.nx-radiocard-input:checked) {
background: var(--primary-tint);
border-color: var(--primary);
z-index: 2;
}
.nexcalia-app .nx-radiocard-input:checked + .nx-radiocard-dot {
border-color: var(--primary);
}
.nexcalia-app .nx-radiocard-input:checked + .nx-radiocard-dot::after {
transform: scale(1);
}
.nexcalia-app
.nx-radiocard:has(.nx-radiocard-input:checked)
.nx-radiocard-label {
color: color-mix(in oklab, var(--primary) 55%, var(--ink));
font-weight: 500;
}
/* États erreur / désactivé. */
.nexcalia-app .nx-radiocard.is-invalid {
border-color: var(--danger);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--danger) 18%, transparent);
z-index: 2;
}
.nexcalia-app .nx-radiocard.is-invalid .nx-radiocard-dot {
border-color: var(--danger);
}
.nexcalia-app .nx-radiocard:has(.nx-radiocard-input:disabled) {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
/* ===== kpi.css ===== */
.nexcalia-app .kpi {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 12px 14px;
display: flex; flex-direction: column; gap: 4px;
position: relative;
overflow: hidden;
transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
}
.nexcalia-app .kpi::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(300px 120px at 50% 0%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 70%);
opacity: 0;
transition: opacity .3s ease-out;
pointer-events: none;
}
.nexcalia-app .kpi:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(43,57,72,.10), 0 2px 4px rgba(43,57,72,.06);
border-color: color-mix(in oklab, var(--primary) 28%, var(--line));
}
.nexcalia-app .kpi:hover::before { opacity: 1; }
.nexcalia-app .kpi > * { position: relative; }
.nexcalia-app .kpi .lbl { font-size: 0.6875rem; color: var(--ink-3); letter-spacing: 0.02em; }
.nexcalia-app .kpi .val { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.nexcalia-app .kpi .row { display: flex; align-items: baseline; gap: 8px; }
.nexcalia-app .kpi .delta { font-size: 0.6875rem; font-variant-numeric: tabular-nums; font-weight: 500; }
.nexcalia-app .kpi .delta-arrow-up::before { content: '▲ ' / ''; font-size: 0.625rem; }
.nexcalia-app .kpi .delta-arrow-down::before { content: '▼ ' / ''; font-size: 0.625rem; }
.nexcalia-app .kpi .delta-arrow-flat::before { content: '— ' / ''; font-size: 0.625rem; }
/* A11Y: --ok (#57B893) on light bg fails AA (2.2:1). --ok-deep is darker. */
.nexcalia-app .kpi .delta-sentiment-good { color: var(--ok-deep); }
.nexcalia-app .kpi .delta-sentiment-bad { color: var(--danger); }
.nexcalia-app .kpi .delta-sentiment-neutral { color: var(--ink-2); }
.nexcalia-app .kpi .delta.up { color: var(--ok-deep); }
.nexcalia-app .kpi .delta.dn { color: var(--danger); }
.nexcalia-app .kpi .spark { height: 28px; margin-top: 4px; }
.nexcalia-app .kpi .nx-kpi-spark {
display: block;
margin: 8px -14px -12px;
width: calc(100% + 28px);
height: 48px;
}
.nexcalia-app .kpi .nx-kpi-spark ui-chart {
display: block;
height: 100%;
width: 100%;
}
[data-palette="dark"] .nexcalia-app .kpi:hover {
box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.30);
}
/* ===== color-picker.css ===== */
/* ============================================================================
color-picker — déclencheur (pastille + hex) + contenant une
grille de pastilles + couleur personnalisée + saisie hex. Recolorise les
primitives Flux (dropdown/popover, palette zinc) vers les tokens Nexcalia.
========================================================================== */
.nexcalia-app .nx-colorpicker {
display: inline-flex;
}
/* ---- Déclencheur ------------------------------------------------------- */
.nexcalia-app .nx-colorpicker-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
height: 38px;
padding: 0 10px;
border-radius: var(--radius, 8px);
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
cursor: pointer;
transition:
border-color 0.12s ease,
box-shadow 0.12s ease;
}
.nexcalia-app .nx-colorpicker-trigger:hover {
border-color: var(--ink-3);
}
.nexcalia-app .nx-colorpicker-trigger:focus-visible {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.nexcalia-app .nx-colorpicker-trigger-sw {
width: 18px;
height: 18px;
border-radius: 5px;
border: 1px solid rgba(0, 0, 0, 0.12);
flex-shrink: 0;
}
.nexcalia-app .nx-colorpicker-trigger-sw.is-empty {
background: repeating-conic-gradient(var(--line) 0% 25%, transparent 0% 50%)
50% / 8px 8px !important;
}
.nexcalia-app .nx-colorpicker-trigger-text {
font-size: 0.85rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: lowercase;
color: var(--ink-2);
min-width: 58px;
text-align: left;
}
.nexcalia-app .nx-colorpicker-chev {
width: 14px;
height: 14px;
color: var(--ink-3);
flex-shrink: 0;
}
/* ---- Popover (override du chrome Flux zinc → tokens) -------------------
NE PAS toucher au `display` : Flux masque/affiche le popover via
`not-data-open:hidden` (display:none quand fermé). On ne stylise QUE
l'apparence ; le layout flex va sur le conteneur interne `.nx-colorpicker-panel`. */
.nexcalia-app .nx-colorpicker-pop {
position: relative;
min-width: 0 !important;
width: max-content;
padding: 14px !important;
border: 0 !important;
border-radius: 12px !important;
background: var(--surface) !important;
overflow: hidden;
/* Même langage visuel que .nx-dropdown-menu : liseré inset blanc + ombres
douces + anneau 1px ; le halo bleu est porté par ::after. */
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 18px 40px rgba(43, 57, 72, 0.16),
0 4px 12px rgba(43, 57, 72, 0.08),
0 0 0 1px color-mix(in oklab, var(--line) 80%, transparent) !important;
}
/* Léger halo bleu dans le coin haut-gauche (identique aux dropdowns). */
.nexcalia-app .nx-colorpicker-pop::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
140px 80px at 20% 0%,
color-mix(in oklab, var(--primary) 10%, transparent),
transparent 70%
);
pointer-events: none;
}
.nexcalia-app .nx-colorpicker-panel {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
/* ---- Grille de pastilles ---------------------------------------------- */
.nexcalia-app .nx-colorpicker-swatches {
display: grid;
grid-template-columns: repeat(10, 24px);
gap: 7px;
}
.nexcalia-app .nx-colorpicker-swatch {
--sw: transparent;
position: relative;
width: 24px;
height: 24px;
border-radius: 6px;
background: var(--sw);
border: 1px solid rgba(0, 0, 0, 0.12);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
transition:
transform 0.12s ease,
box-shadow 0.12s ease;
}
.nexcalia-app .nx-colorpicker-swatch:hover {
transform: translateY(-1px);
}
.nexcalia-app .nx-colorpicker-swatch:focus-visible {
outline: none;
box-shadow:
0 0 0 2px var(--surface),
0 0 0 4px var(--primary);
}
.nexcalia-app .nx-colorpicker-swatch.is-selected {
box-shadow:
0 0 0 2px var(--surface),
0 0 0 4px var(--primary);
}
.nexcalia-app .nx-colorpicker-check,
.nexcalia-app .nx-colorpicker-plus {
width: 14px;
height: 14px;
color: #fff;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.nexcalia-app .nx-colorpicker-check {
opacity: 0;
transition: opacity 0.12s ease;
}
.nexcalia-app .nx-colorpicker-swatch.is-selected .nx-colorpicker-check {
opacity: 1;
}
/* Pastille « couleur personnalisée » : roue arc-en-ciel quand inactive */
.nexcalia-app .nx-colorpicker-custom {
border-style: dashed;
border-color: var(--line);
background: conic-gradient(
from 90deg,
#ef4444,
#f59e0b,
#16a34a,
#0891b2,
#6366f1,
#db2777,
#ef4444
);
}
.nexcalia-app .nx-colorpicker-custom.is-selected {
background: var(--sw);
border-style: solid;
border-color: rgba(0, 0, 0, 0.12);
}
/* ---- Couleur personnalisée + saisie hex ------------------------------- */
.nexcalia-app .nx-colorpicker-hexrow {
display: flex;
align-items: center;
gap: 8px;
}
.nexcalia-app .nx-colorpicker-hexrow .nx-colorpicker-swatch {
flex-shrink: 0;
}
.nexcalia-app .nx-colorpicker-hex {
flex: 1;
height: 34px;
border-radius: var(--radius, 8px);
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
font-size: 0.85rem;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
padding: 0 10px;
text-transform: lowercase;
}
.nexcalia-app .nx-colorpicker-hex:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
/* ===== multipick.css ===== */
.nexcalia-app .nx-multipick { position: relative; }
.nexcalia-app .nx-multipick [x-cloak] { display: none; }
.nexcalia-app .nx-multipick-trigger {
align-items: center;
flex-wrap: wrap;
gap: 4px;
min-height: 36px;
padding: 4px 30px 4px 6px;
cursor: pointer;
}
.nexcalia-app .nx-input-sm.nx-multipick-trigger { min-height: 30px; padding: 3px 28px 3px 5px; }
.nexcalia-app .nx-input-lg.nx-multipick-trigger { min-height: 42px; padding: 6px 32px 6px 8px; }
.nexcalia-app .nx-multipick-placeholder {
padding: 2px 4px;
font-size: var(--fs-body);
color: var(--ink-3);
}
.nexcalia-app .nx-multipick-panel {
top: calc(100% + 6px);
left: 0;
right: 0;
min-width: 0;
padding: 6px;
}
.nexcalia-app .nx-multipick-panel.is-up {
top: auto;
bottom: calc(100% + 6px);
}
.nexcalia-app .nx-multipick-search { padding-bottom: 6px; }
.nexcalia-app .nx-multipick-list { max-height: 220px; overflow-y: auto; }
.nexcalia-app .nx-multipick-option {
width: 100%;
border: 0;
background: transparent;
text-align: left;
}
.nexcalia-app .nx-multipick-option.is-active { background: var(--hover); }
.nexcalia-app .nx-multipick-check { opacity: 0; }
.nexcalia-app .nx-multipick-option[aria-selected="true"] .nx-multipick-check { opacity: 1; }
.nexcalia-app .nx-multipick-sentinel { font-weight: 600; }
.nexcalia-app .nx-multipick-sep {
height: 1px;
margin: 4px 0;
background: color-mix(in oklab, var(--line) 70%, transparent);
}
.nexcalia-app .nx-multipick-empty {
padding: 8px 10px;
font-size: var(--fs-sm);
color: var(--ink-3);
}
.nexcalia-app .nx-multipick-foot {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--line);
}
.nexcalia-app .nx-multipick-foot .btn { width: 100%; justify-content: center; }
.nexcalia-app .nx-pill-remove {
display: inline-flex;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
opacity: 0.8;
}
.nexcalia-app .nx-pill-remove:hover { opacity: 1; }
/* ===== autocomplete.css ===== */
.nexcalia-app .nx-autocomplete { position: relative; }
.nexcalia-app .nx-autocomplete [x-cloak] { display: none; }
.nexcalia-app .nx-autocomplete-spinner { padding-right: 10px; }
.nexcalia-app .nx-autocomplete-panel {
top: calc(100% + 6px);
left: 0;
right: 0;
min-width: 0;
padding: 6px;
}
.nexcalia-app .nx-autocomplete-list { max-height: 220px; overflow-y: auto; }
.nexcalia-app .nx-autocomplete-option {
width: 100%;
border: 0;
background: transparent;
text-align: left;
}
.nexcalia-app .nx-autocomplete-option.is-active { background: var(--hover); }
.nexcalia-app .nx-autocomplete-empty {
padding: 8px 10px;
font-size: var(--fs-sm);
color: var(--ink-3);
}
.nexcalia-app .nx-autocomplete-foot {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--line);
}
.nexcalia-app .nx-autocomplete-foot .btn { width: 100%; justify-content: center; }
/* ===== swatch-select.css ===== */
.nexcalia-app .nx-swatch-select { position: relative; }
.nexcalia-app .nx-swatch-select [x-cloak] { display: none; }
.nexcalia-app .nx-swatch-trigger {
align-items: center;
gap: 8px;
min-height: 36px;
padding: 0 30px 0 10px;
cursor: pointer;
}
.nexcalia-app .nx-input-sm.nx-swatch-trigger { min-height: 30px; }
.nexcalia-app .nx-input-lg.nx-swatch-trigger { min-height: 42px; }
.nexcalia-app .nx-swatch-trigger-label {
font-size: var(--fs-body);
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nexcalia-app .nx-swatch-placeholder {
font-size: var(--fs-body);
color: var(--ink-3);
}
.nexcalia-app .nx-swatch-dot {
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 14%, transparent);
}
.nexcalia-app .nx-swatch-panel {
top: calc(100% + 6px);
left: 0;
right: 0;
min-width: 0;
padding: 8px;
}
.nexcalia-app .nx-swatch-grid {
display: grid;
grid-template-columns: repeat(var(--nx-swatch-cols, 5), minmax(0, 1fr));
gap: 4px;
max-height: 260px;
overflow-y: auto;
}
.nexcalia-app .nx-swatch-option {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 8px 4px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
transition: background-color 0.12s ease-out;
}
.nexcalia-app .nx-swatch-option:hover,
.nexcalia-app .nx-swatch-option.is-active { background: var(--hover); }
.nexcalia-app .nx-swatch-option[aria-selected="true"] { background: var(--primary-soft); }
.nexcalia-app .nx-swatch-option .nx-swatch-dot { width: 26px; height: 26px; }
.nexcalia-app .nx-swatch-option[aria-selected="true"] .nx-swatch-dot {
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}
.nexcalia-app .nx-swatch-name {
max-width: 100%;
font-size: var(--fs-xs);
color: var(--ink-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nexcalia-app .nx-swatch-empty {
padding: 8px 10px;
font-size: var(--fs-sm);
color: var(--ink-3);
}
/* ===== flux-dark.css ===== */
/* ── Surfaces flottantes Flux en palette sombre ───────────────────────────
Tous les panneaux Flux (select listbox, pillbox, autocomplete, time-picker,
date-picker, popover/dropdown, éditeur, palette de commandes) partagent la
même recette `bg-white dark:bg-zinc-700` posée sur un élément [popover] :
une seule règle générique suffit, plutôt qu'un override par composant.
Le `.bg-white` du sélecteur est ce qui distingue un panneau d'une bulle
volontairement sombre — la bulle de jour du date-picker est en bg-zinc-800
dans les deux thèmes et reste donc intacte.
!important : `dark:bg-zinc-700` compile en `[data-palette="dark"]
.dark\:bg-zinc-700` (0,2,0), plus fort que nos sélecteurs, et flux.css est
servi après app.css. Couvre aussi les volets legacy, déjà en data-palette. */
[data-palette="dark"] [popover].bg-white {
background-color: var(--surface) !important;
border-color: var(--line) !important;
color: var(--ink) !important;
}
/* Le date-picker est le seul Flux à poser son panneau dans un plutôt
qu'un [popover], en dark:bg-zinc-900 : presque noir, donc il PARAÎT correct
en sombre alors qu'il n'est pas non plus aux tokens. */
[data-palette="dark"] [data-flux-date-picker] > dialog {
background-color: var(--surface) !important;
border-color: var(--line) !important;
color: var(--ink) !important;
}
/* Champ de recherche interne des select / pillbox / palette de commandes */
[data-palette="dark"] [popover] input.bg-white {
background-color: var(--surface-2) !important;
border-color: var(--line) !important;
color: var(--ink) !important;
}
/* Option survolée ou active au clavier */
[data-palette="dark"] [popover] [data-active] {
background-color: var(--hover) !important;
color: var(--ink) !important;
}
/* Option sélectionnée */
[data-palette="dark"] [popover] [aria-selected="true"] {
background-color: var(--primary-soft) !important;
color: var(--ink) !important;
}
/* Pills du déclencheur pillbox — zinc-400/40 par défaut, gris chaud en sombre */
[data-palette="dark"] ui-selected .dark\:bg-zinc-400\/40 {
background-color: var(--primary-soft) !important;
color: var(--ink) !important;
}
/* Infobulle des graphiques ( → flux:chart). Hors [popover] :
elle vit dans un cloné à l'exécution et positionné
en absolu, d'où le ciblage par . Le corps suit la même recette
bg-white/zinc-700 que les panneaux, l'en-tête est en zinc-600.
unverified against a live chart — l'infobulle n'apparaît qu'au survol d'un
point de données, que je n'ai pas su déclencher en test automatisé. */
[data-palette="dark"] ui-chart .bg-white {
background-color: var(--surface) !important;
border-color: var(--line) !important;
color: var(--ink) !important;
}
[data-palette="dark"] ui-chart .dark\:bg-zinc-600 {
background-color: var(--surface-2) !important;
border-color: var(--line) !important;
}
/* ===== border-beam.css ===== */
/* border-beam — un trait lumineux fin qui orbite le long de la bordure d'un
élément (carte, bouton, input), pour mettre en avant un élément sans être
criard. Pur CSS, zéro JS requis.
Technique de rendu (respecte le border-radius, contrairement à border-image) :
- un pseudo-élément ::after en inset:0 qui porte un conic-gradient (l'arc) ;
- un double mask (content-box exclude) qui n'expose que l'anneau de bordure,
d'épaisseur --nx-beam-width (= le padding du pseudo-élément) ;
- l'angle du dégradé est une custom property animée via @property, donc seule
cette variable est animée (pas de repaint massif du layout).
@property est supporté partout (Chrome 85+, Safari 15.4+, Firefox 128+). En
l'absence de support, l'arc reste simplement statique — dégradé acceptable.
TAILLE DE L'HÔTE — @property évite le *layout*, pas le *paint* : l'arc est
repeint à chaque image, sur toute la surface de l'hôte. Mesuré sur une carte
420×580 : pire image à 100,5 ms (75,9 ms sans le bloom `--nx-beam-glow: 0`),
contre 17,7 ms pour une bordure en dégradé statique. Réserver aux petits
éléments (bouton, badge, input) ; sur une carte, préférer une bordure
dégradée statique.
Variables de tuning (sur l'élément hôte) :
--nx-beam-width épaisseur du trait (défaut 1.75px)
--nx-beam-duration durée d'une orbite complète (défaut 6s, lent/calme)
--nx-beam-color couleur du trait (défaut var(--primary))
--nx-beam-size demi-longueur de l'arc, en % (défaut 11%)
--nx-beam-glow intensité du bloom (0 = off) (défaut 0.35) */
@property --nx-beam-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
.nexcalia-app .nx-border-beam {
position: relative;
--nx-beam-width: 1.75px;
--nx-beam-duration: 6s;
--nx-beam-color: var(--primary);
--nx-beam-size: 11%;
--nx-beam-glow: 0.35;
}
/* Le trait lumineux : conic-gradient étroit, fondu doux des deux côtés (pas de
bords durs), isolé sur l'anneau de bordure par le double mask. */
.nexcalia-app .nx-border-beam::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: var(--nx-beam-width);
pointer-events: none;
z-index: 1;
background: conic-gradient(
from var(--nx-beam-angle),
transparent 0%,
color-mix(in oklab, var(--nx-beam-color) 90%, transparent) var(--nx-beam-size),
transparent calc(var(--nx-beam-size) * 2)
);
-webkit-mask:
linear-gradient(var(--nx-white) 0 0) content-box,
linear-gradient(var(--nx-white) 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(var(--nx-white) 0 0) content-box,
linear-gradient(var(--nx-white) 0 0);
mask-composite: exclude;
animation: nx-beam-spin var(--nx-beam-duration) linear infinite;
}
/* Bloom : copie plus large et floutée du même arc, très basse opacité, pour un
halo cohérent avec le langage aurora/spotlight du thème. Désactivable en
posant --nx-beam-glow: 0. */
.nexcalia-app .nx-border-beam::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: calc(var(--nx-beam-width) * 2);
pointer-events: none;
z-index: 0;
opacity: var(--nx-beam-glow);
filter: blur(3px);
background: conic-gradient(
from var(--nx-beam-angle),
transparent 0%,
color-mix(in oklab, var(--nx-beam-color) 70%, transparent) var(--nx-beam-size),
transparent calc(var(--nx-beam-size) * 2)
);
-webkit-mask:
linear-gradient(var(--nx-white) 0 0) content-box,
linear-gradient(var(--nx-white) 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(var(--nx-white) 0 0) content-box,
linear-gradient(var(--nx-white) 0 0);
mask-composite: exclude;
animation: nx-beam-spin var(--nx-beam-duration) linear infinite;
}
@keyframes nx-beam-spin {
to {
--nx-beam-angle: 360deg;
}
}
/* Variantes de couleur — branchées sur les tokens sémantiques du thème. */
.nexcalia-app .nx-border-beam--success {
--nx-beam-color: var(--ok);
}
.nexcalia-app .nx-border-beam--warning {
--nx-beam-color: var(--warn);
}
.nexcalia-app .nx-border-beam--danger {
--nx-beam-color: var(--danger);
}
.nexcalia-app .nx-border-beam--info {
--nx-beam-color: var(--info);
}
/* Réglages d'ambiance optionnels. */
.nexcalia-app .nx-border-beam--calm {
--nx-beam-duration: 9s;
}
.nexcalia-app .nx-border-beam--flat {
--nx-beam-glow: 0;
}
/* prefers-reduced-motion : l'orbite est déjà quasi-gelée par la règle globale de
loading-a11y.css ; on coupe explicitement l'animation pour figer l'arc dans un
état stable (angle initial), cohérent avec le reste du thème. */
@media (prefers-reduced-motion: reduce) {
.nexcalia-app .nx-border-beam::before,
.nexcalia-app .nx-border-beam::after {
animation: none;
}
}
/* ===== spotlight.css ===== */
/* spotlight — un anneau lumineux qui tourne le long de la bordure, révélé au
survol. Même technique que border-beam (conic-gradient masqué en anneau,
angle animé via @property), mais orienté interaction : invisible au repos,
il apparaît au survol pour désigner l'action principale.
Deux usages :
.nx-spotlight anneau blanc, révélé au survol — pour un bouton plein
(primary/accent), où le blanc tranche sur le fond.
.nx-spotlight-card anneau aux couleurs de marque, permanent — pour une
surface claire (carte, sélecteur d'espace), où un
anneau blanc serait invisible.
Réservé aux petits éléments : l'arc se repeint à chaque image, ce qui reste
indolore sur un bouton mais provoque un jank net sur une grande carte
(mesuré : ~100 ms/frame sur 420×580). Voir aussi border-beam.css. */
@property --ring-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
.nexcalia-app .nx-spotlight {
position: relative;
isolation: isolate;
}
.nexcalia-app .nx-spotlight::before {
content: "";
position: absolute;
inset: -1.5px;
padding: 1.5px;
border-radius: inherit;
background: conic-gradient(
from var(--ring-angle, 0deg),
transparent 0deg,
rgba(255, 255, 255, 0.95) 14deg,
rgba(255, 255, 255, 0.45) 38deg,
rgba(255, 255, 255, 0.18) 70deg,
transparent 100deg,
transparent 360deg
);
-webkit-mask:
linear-gradient(var(--nx-white) 0 0) content-box,
linear-gradient(var(--nx-white) 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(var(--nx-white) 0 0) content-box,
linear-gradient(var(--nx-white) 0 0);
mask-composite: exclude;
opacity: 0;
transition: opacity 0.25s ease-out;
pointer-events: none;
}
/* Au focus clavier aussi : l'anneau désigne l'action principale, il doit se
montrer à qui navigue au clavier. */
.nexcalia-app .nx-spotlight:hover::before,
.nexcalia-app .nx-spotlight:focus-visible::before {
opacity: 1;
animation: nx-ring-spin 2.2s linear infinite;
}
/* Doublement de classe pour passer devant `.nx-spotlight:hover::before`, de
spécificité égale : l'anneau de marque doit rester le même au survol. */
.nexcalia-app .nx-spotlight.nx-spotlight-card::before {
background: conic-gradient(
from var(--ring-angle, 0deg),
transparent 0deg,
color-mix(in oklab, var(--primary) 75%, transparent) 14deg,
color-mix(in oklab, var(--primary) 40%, transparent) 38deg,
color-mix(in oklab, var(--primary) 12%, transparent) 70deg,
transparent 100deg,
transparent 360deg
);
opacity: 1;
animation: nx-ring-spin 2.6s linear infinite;
}
@keyframes nx-ring-spin {
from {
--ring-angle: 0deg;
}
to {
--ring-angle: 360deg;
}
}
@media (prefers-reduced-motion: reduce) {
.nexcalia-app .nx-spotlight::before,
.nexcalia-app .nx-spotlight:hover::before,
.nexcalia-app .nx-spotlight:focus-visible::before,
.nexcalia-app .nx-spotlight.nx-spotlight-card::before {
animation: none;
}
}
/* ===== powered-by.css ===== */
/* powered-by — signature « Propulsé par nexcalia » (voir
resources/views/components/nexcalia/powered-by.blade.php).
Au repos : le libellé, la barre bleue seule de la marque, le mot « nexcalia ».
Au survol : libellé et mot se rétractent pendant que le logotype se déplie
(le X glisse en place, « ne » apparaît, « calia » se dévoile au clip-path,
les deux triangles rebondissent).
Non scopé .nexcalia-app : la signature sert aussi sur des layouts publics
(borne, écran d'authentification) qui n'ont pas le wrapper. Les tokens vivant
sur :root, les couleurs suivent quand même la palette.
Retinte — la signature se pose parfois sur un fond qui ne suit PAS la palette
(photo, aplat de marque). Redéfinir alors ces deux variables sur l'hôte
plutôt que de surcharger les règles :
--nx-signature-ink nom + logotype (défaut --ink)
--nx-signature-ink-soft libellé (défaut --ink-3) */
.nx-created-by {
--nx-signature-ink: var(--ink);
--nx-signature-ink-soft: var(--ink-3);
display: flex;
align-items: center;
justify-content: center;
width: 13rem;
height: 2rem;
margin-inline: auto;
}
.nx-created-by__label,
.nx-created-by__name {
display: inline-block;
position: relative;
top: 0.25rem;
overflow: hidden;
white-space: nowrap;
font-size: 0.875rem;
}
.nx-created-by__label {
max-width: 10rem;
margin-right: 0.5rem;
color: var(--nx-signature-ink-soft);
transition:
max-width 0.3s ease-in 0.55s,
margin-right 0.3s ease-in 0.55s,
opacity 0.2s ease-in 0.65s;
}
.nx-created-by:hover .nx-created-by__label {
max-width: 0;
margin-right: 0;
opacity: 0;
transition:
max-width 0.3s ease-in,
margin-right 0.3s ease-in,
opacity 0.2s ease-in;
}
.nx-created-by__name {
max-width: 8rem;
margin-left: 0.375rem;
font-weight: 500;
color: var(--nx-signature-ink);
transition:
max-width 0.3s ease-in 0.55s,
margin-left 0.3s ease-in 0.55s,
opacity 0.2s ease-in 0.65s;
}
.nx-created-by:hover .nx-created-by__name {
max-width: 0;
margin-left: 0;
opacity: 0;
transition:
max-width 0.3s ease-in,
margin-left 0.3s ease-in,
opacity 0.2s ease-in;
}
/* La boîte masque le logotype par sa largeur : au repos seule la barre bleue
dépasse, le reste est hors cadre (overflow du SVG laissé visible). */
.nx-created-by__logo-box {
width: 1.25rem;
height: 2rem;
transition: width 0.35s ease-out 0.1s;
}
.nx-created-by:hover .nx-created-by__logo-box {
width: 9rem;
transition: width 0.35s ease-out 0.3s;
}
.nx-created-by__logo {
display: block;
width: 9rem;
height: 2rem;
max-width: none;
overflow: visible;
pointer-events: none;
}
.nx-logo__ne {
opacity: 0;
transition: opacity 0.2s ease-in;
}
.nx-created-by:hover .nx-logo__ne {
opacity: 1;
transition: opacity 0.25s ease-in 0.55s;
}
.nx-logo__x {
transform: translate3d(-29.5%, 0, 0);
transition: transform 0.5s ease-in 0.35s;
}
.nx-created-by:hover .nx-logo__x {
transform: translate3d(0, 0, 0);
transition: transform 0.5s ease-in 0.3s;
}
.nx-logo__calia {
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transition: clip-path 0.4s ease-in;
}
.nx-created-by:hover .nx-logo__calia {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path 0.45s ease-in 0.4s;
}
.nx-created-by:hover .nx-logo__tri--green {
animation: nx-tri-green 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s;
}
.nx-created-by:hover .nx-logo__tri--yellow {
animation: nx-tri-yellow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s;
}
@keyframes nx-tri-green {
45% {
transform: translate(3%, -13%);
}
}
@keyframes nx-tri-yellow {
45% {
transform: translate(-3%, 13%);
}
}
/* Le logotype est monochrome hors X : ses `fill` inline sont écrasés pour qu'il
suive l'encre. --ink et pas --ink-2, ce dernier ne donnant que 4,15:1 sur
fond sombre, sous le seuil AA de 4,5. */
.nx-created-by .nx-logo__ne path,
.nx-created-by .nx-logo__calia path {
fill: var(--nx-signature-ink);
}
@media (prefers-reduced-motion: reduce) {
.nx-created-by__label,
.nx-created-by__name,
.nx-created-by__logo-box,
.nx-logo__ne,
.nx-logo__x,
.nx-logo__calia {
transition: none;
}
.nx-created-by:hover .nx-logo__tri--green,
.nx-created-by:hover .nx-logo__tri--yellow {
animation: none;
}
}
/* ===== tables.css ===== */
/*
Tables — utilitaires pour les tableaux défilants (datatables, rappasoft…).
.nx-table-sticky-right : épingle une colonne (th ET td) au bord droit d'un
conteneur en overflow-x-auto. Fond opaque en token (suit le dark mode) et
ombre de séparation à gauche pour signaler que la colonne survole le
contenu qui défile dessous. Pensée pour la colonne d'actions des tables
larges : le bouton reste atteignable sans scroller jusqu'au bout.
Le dropdown d'actions placé dans une telle colonne doit être un
(menu téléporté en position fixed) : un menu en
position absolue serait clippé par l'overflow du conteneur.
*/
.nx-table-sticky-right {
position: sticky;
right: 0;
z-index: 10;
background: var(--surface);
box-shadow: -10px 0 10px -10px rgba(43, 57, 72, 0.18);
}
thead .nx-table-sticky-right,
th.nx-table-sticky-right {
background: var(--surface-2);
}
/* ===== shell.css ===== */
/* Chrome applicatif — shell, sidebar, topbar, brand, nav, footer utilisateur.
Ces règles remplacent les utilities Tailwind que les vues du chrome
portaient jusqu'en v2.21 : le package ne doit rien devoir au Tailwind de
l'app consommatrice (cf. README « Frontière Tailwind / sémantique »).
Les tokens vivent dans tokens.css, donc palettes et dark mode suivent. */
/* ───────────────────────── shell ───────────────────────── */
/* Ancre de positionnement pour le mesh, le backdrop mobile et la bulle de
collapse, tous en absolute par rapport au shell. */
.nexcalia-shell {
position: relative;
}
/* Halo radial derrière la sidebar en verre. Purement décoratif. */
.nx-shell-mesh {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 18rem;
z-index: 0;
pointer-events: none;
}
.nx-shell-backdrop {
position: fixed;
inset: 0;
z-index: 20;
cursor: pointer;
}
/* ─────────────── bulle de collapse (seam sidebar / contenu) ─────────────── */
.nx-toggle-bubble {
position: absolute;
top: 28px;
z-index: 30;
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 9999px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.nx-bubble-halo {
position: absolute;
inset: 0;
border-radius: 9999px;
pointer-events: none;
}
.nx-bubble-chev {
position: relative;
transition: transform 0.3s cubic-bezier(0.5, 1.5, 0.5, 1);
}
.nx-bubble-chev.is-flipped {
transform: rotate(180deg);
}
/* ───────────────────────── sidebar ───────────────────────── */
/* Reste un : les règles existantes qui ciblent l'élément
(`aside:hover ~ .nx-toggle-bubble`, `aside:not(:hover) .nx-aurora`, …)
continuent de matcher. */
.nx-sidebar {
position: relative;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
z-index: 10;
}
.nx-sidebar-aurora {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.nx-sidebar-halo {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 10rem;
pointer-events: none;
}
/* ───────────────────────── topbar ───────────────────────── */
/* Le hamburger, la cloche et le bouton bornes portaient
`transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md` : déjà
couvert par `.icon-btn:hover`, qui gagnait de toute façon la cascade
(0,3,0 contre 0,2,0). Rien à réimplémenter ici. */
.nexcalia-app .nx-burger-glyph {
transition: transform 0.2s;
}
.nexcalia-app .nx-burger-glyph.is-open {
transform: rotate(90deg);
}
.nexcalia-app .crumb .site {
cursor: pointer;
transition: color 0.15s;
}
.nexcalia-app .crumb .site:hover {
color: var(--ink);
}
/* `group-hover:scale-110` d'origine n'a jamais agi : le bouton parent ne porte
pas `.group`. Seul `inline-block` était vivant, on s'en tient là. */
.nexcalia-app .nx-kiosk-glyph {
display: inline-block;
}
/* ───────────────────────── navigation ─────────────────────────
Les états passaient par des ternaires Blade/Alpine crachant des utilities
(`text-nx-ink font-semibold` vs `text-nx-ink2 hover:-translate-y-px`), et
les survols par le mécanisme `group` / `group/sub` de Tailwind. Tout est
ramené ici sur une seule classe d'état `.is-active` + des sélecteurs
descendants. */
.nx-nav-scroll {
flex: 1 1 0%;
min-height: 0;
overflow-y: auto;
position: relative;
}
.nexcalia-app .nx-section-label {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1rem 0.5rem;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
.nexcalia-app .nx-section-rule {
flex: 1 1 0%;
height: 1px;
}
.nexcalia-app .nx-nav {
display: flex;
flex-direction: column;
padding: 0 0.5rem;
gap: 0.125rem;
}
/* ── item de premier niveau ── */
.nexcalia-app .nx-nav-item {
position: relative;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.625rem;
border-radius: var(--radius-sm);
font-size: 0.8125rem;
line-height: 1;
font-weight: 500;
color: var(--ink-2);
text-decoration: none;
cursor: pointer;
transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);
}
.nexcalia-app .nx-nav-item:hover {
color: var(--ink);
transform: translateY(-1px);
}
.nexcalia-app .nx-nav-item.is-active {
color: var(--ink);
font-weight: 600;
transform: none;
}
.nexcalia-app .nx-nav-ico {
width: 1rem;
height: 1rem;
flex-shrink: 0;
color: var(--ink-3);
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.nexcalia-app .nx-nav-item:hover .nx-nav-ico {
transform: scale(1.25);
color: var(--ink-2);
}
.nexcalia-app .nx-nav-item.is-active .nx-nav-ico {
color: var(--primary);
}
.nexcalia-app .nx-nav-label {
flex: 1 1 0%;
}
.nexcalia-app .nx-nav-live {
width: 0.375rem;
height: 0.375rem;
flex-shrink: 0;
border-radius: 9999px;
background: var(--ok);
animation: nx-nav-live-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes nx-nav-live-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.nexcalia-app .nx-nav-count {
padding: 0.125rem 0.375rem;
border-radius: 9999px;
font-size: 0.625rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--ink-3);
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.nexcalia-app .nx-nav-item:hover .nx-nav-count {
transform: scale(1.1);
padding-left: 0.5rem;
padding-right: 0.5rem;
color: var(--ink-2);
}
.nexcalia-app .nx-nav-item.is-active .nx-nav-count {
color: var(--primary-deep);
}
.nexcalia-app .nx-nav-chev {
color: var(--ink-3);
transition: transform 0.2s;
}
.nexcalia-app .nx-nav-chev.is-open {
transform: rotate(90deg);
}
/* Rangée de nav portant une action rapide (`trailing`) : le lien principal
occupe la place restante, le bouton d'action reste à droite. */
.nexcalia-app .nx-nav-item-link {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
flex: 1 1 0%;
min-width: 0;
color: inherit;
font: inherit;
text-decoration: none;
}
.nexcalia-app .nx-nav-trailing {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: var(--radius-sm);
color: var(--ink-3);
transition: all 0.15s;
}
.nexcalia-app .nx-nav-trailing:hover {
color: var(--primary);
transform: scale(1.1);
}
/* ── sous-menu inline ── */
.nexcalia-app .nx-submenu-inline {
position: relative;
padding-left: 0.75rem;
margin-left: 0.75rem;
margin-top: 0.125rem;
margin-bottom: 0.375rem;
}
.nexcalia-app .nx-submenu-list {
display: flex;
flex-direction: column;
gap: 0.125rem;
padding: 0.25rem 0;
}
.nexcalia-app .nx-subnav-item {
position: relative;
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.375rem 0.5rem 0.375rem 0.625rem;
border-radius: var(--radius-sm);
font-size: 0.75rem;
line-height: 1;
color: var(--ink-3);
text-decoration: none;
cursor: pointer;
transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);
}
.nexcalia-app .nx-subnav-item:hover {
color: var(--ink);
transform: translateX(2px);
}
.nexcalia-app .nx-subnav-item.is-active {
color: var(--ink);
font-weight: 600;
transform: none;
}
.nexcalia-app .nx-subnav-connector {
position: absolute;
left: -0.75rem;
top: 50%;
width: 0.625rem;
height: 1px;
}
.nexcalia-app .nx-subnav-dot {
position: absolute;
left: -14px;
top: 50%;
transform: translateY(-50%);
width: 0.375rem;
height: 0.375rem;
border-radius: 9999px;
background: var(--ink-3);
transition: all 0.15s;
}
.nexcalia-app .nx-subnav-item:hover .nx-subnav-dot {
background: var(--ink-2);
}
.nexcalia-app .nx-subnav-item.is-active .nx-subnav-dot {
background: var(--primary);
}
.nexcalia-app .nx-subnav-ico {
width: 0.875rem;
height: 0.875rem;
flex-shrink: 0;
color: var(--ink-3);
transition: transform 0.15s;
}
.nexcalia-app .nx-subnav-item:hover .nx-subnav-ico {
transform: scale(1.1);
color: var(--ink-2);
}
.nexcalia-app .nx-subnav-item.is-active .nx-subnav-ico {
color: var(--primary);
}
.nexcalia-app .nx-subnav-label {
flex: 1 1 0%;
}
.nexcalia-app .nx-subnav-count {
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-size: 0.59375rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--ink-3);
min-width: 18px;
text-align: center;
}
.nexcalia-app .nx-subnav-item:hover .nx-subnav-count {
color: var(--ink-2);
}
/* ───────────────────── sélecteur de workspace ─────────────────────
La card vit dans l'aside (scopée), le popover est téléporté dans
et sort donc de `.nexcalia-app` : ses règles restent non scopées, comme
`.nx-site-popover` et `.dot-status` qui existaient déjà. */
.nexcalia-app .nx-site-switcher {
position: relative;
display: flex;
align-items: center;
gap: 0.625rem;
margin: 0.75rem 0.625rem 0.5rem;
padding: 0.625rem 0.75rem;
border-radius: var(--radius);
cursor: pointer;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
.nexcalia-app .nx-site-switcher:hover {
transform: translateY(-2px) scale(1.01);
}
.nexcalia-app .nx-site-avatar,
.nexcalia-app .nx-site-avatar-fallback {
width: 1.75rem;
height: 1.75rem;
flex-shrink: 0;
border-radius: var(--radius-sm);
}
.nexcalia-app .nx-site-avatar {
object-fit: contain;
}
.nexcalia-app .nx-site-avatar-fallback {
display: grid;
place-items: center;
color: var(--nx-white);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: -0.025em;
}
.nexcalia-app .nx-site-text {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 0%;
line-height: 1.25;
}
.nexcalia-app .nx-site-name {
font-size: 0.78125rem;
font-weight: 600;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nexcalia-app .nx-site-meta {
margin-top: 0.125rem;
font-size: 0.65625rem;
color: var(--ink-3);
}
.nexcalia-app .nx-site-chev {
color: var(--ink-3);
transition: transform 0.15s;
}
.nexcalia-app .nx-site-chev.is-open {
transform: rotate(180deg);
}
/* ── popover (téléporté) ── */
.nx-site-popover {
border-radius: 0.5rem;
padding: 0.375rem;
}
.nx-site-search {
position: relative;
margin-bottom: 0.375rem;
}
.nx-site-search-ico {
position: absolute;
left: 0.625rem;
top: 50%;
transform: translateY(-50%);
color: var(--ink-3);
pointer-events: none;
}
.nx-site-search-input {
width: 100%;
padding: 0.375rem 0.5rem 0.375rem 2rem;
border-radius: var(--radius-sm);
font-size: 0.75rem;
outline: none;
transition: all 0.15s;
}
.nx-site-search-clear {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
padding: 0.125rem;
color: var(--ink-3);
cursor: pointer;
}
.nx-site-search-clear:hover {
color: var(--ink);
}
.nx-site-list {
max-height: 280px;
overflow-y: auto;
margin: 0 -4px;
padding: 0 4px;
}
.nx-site-option {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.375rem 0.5rem;
border-radius: var(--radius-sm);
font-size: 0.75rem;
color: var(--ink);
text-decoration: none;
transition: background-color 0.1s;
}
.nx-site-option.is-current {
font-weight: 600;
}
.nx-site-option .dot-status {
flex-shrink: 0;
}
.nx-site-option-avatar,
.nx-site-option-fallback {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
border-radius: 0.25rem;
}
.nx-site-option-avatar {
object-fit: contain;
}
.nx-site-option-fallback {
display: grid;
place-items: center;
color: var(--nx-white);
font-size: 0.59375rem;
font-weight: 600;
letter-spacing: -0.025em;
}
.nx-site-option-text {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 0%;
line-height: 1.25;
}
.nx-site-option-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nx-site-option-meta {
font-size: 0.625rem;
color: var(--ink-3);
}
.nx-site-option-check {
flex-shrink: 0;
color: var(--primary);
}
.nx-site-empty {
padding: 1.5rem 0.75rem;
text-align: center;
font-size: 0.75rem;
color: var(--ink-3);
}
.nx-site-empty-term {
font-weight: 500;
color: var(--ink-2);
}
.nx-site-sep {
height: 1px;
margin: 0.375rem 0.25rem;
}
.nx-site-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.5rem;
border-radius: var(--radius-sm);
font-size: 0.75rem;
color: var(--ink-2);
text-decoration: none;
cursor: pointer;
}
.nx-site-link:hover {
background: var(--hover);
}
/* Transition d'ouverture des popovers téléportés (remplace les classes
Tailwind passées à x-transition). */
.nx-pop-enter {
transition:
opacity 0.15s cubic-bezier(0, 0, 0.2, 1),
transform 0.15s cubic-bezier(0, 0, 0.2, 1);
}
.nx-pop-from {
opacity: 0;
transform: translateY(-0.25rem);
}
.nx-pop-to {
opacity: 1;
transform: translateY(0);
}
/* ───────────────────── footer utilisateur ─────────────────────
Même découpe que le sélecteur de workspace : la pilule est dans l'aside
(scopée), le popover-menu est téléporté dans (non scopé). */
.nexcalia-app .nx-footer {
position: relative;
margin-top: auto;
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem;
cursor: pointer;
}
.nexcalia-app .nx-footer-avatar-wrap {
position: relative;
}
.nexcalia-app .nx-footer-avatar {
width: 2rem;
height: 2rem;
border-radius: 9999px;
display: grid;
place-items: center;
color: var(--nx-white);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: -0.025em;
}
.nx-presence-dot {
position: absolute;
bottom: -0.125rem;
right: -0.125rem;
width: 0.625rem;
height: 0.625rem;
border-radius: 9999px;
background: var(--ok);
}
.nexcalia-app .nx-footer-text {
display: flex;
flex-direction: column;
line-height: 1.25;
min-width: 0;
flex: 1 1 0%;
}
.nexcalia-app .nx-footer-name {
font-size: 0.78125rem;
font-weight: 600;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nexcalia-app .nx-footer-meta {
margin-top: 0.125rem;
font-size: 0.65625rem;
color: var(--ink-3);
}
.nexcalia-app .nx-footer-help {
width: 1.5rem;
height: 1.5rem;
display: grid;
place-items: center;
border-radius: var(--radius-sm);
font-size: 0.75rem;
color: var(--ink-3);
transition: all 0.15s;
}
.nexcalia-app .nx-footer-help:hover {
background: var(--hover);
color: var(--ink);
}
/* ── popover-menu (téléporté) ── */
.nx-user-menu-avatar-wrap {
position: relative;
flex-shrink: 0;
}
.nx-user-menu-avatar {
width: 2.25rem;
height: 2.25rem;
border-radius: 9999px;
display: grid;
place-items: center;
color: var(--nx-white);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: -0.025em;
}
.nx-user-menu-ident {
display: flex;
flex-direction: column;
line-height: 1.25;
min-width: 0;
}
.nx-user-menu-name {
font-size: 0.8125rem;
font-weight: 600;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nx-user-menu-email {
font-size: 0.6875rem;
color: var(--ink-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nx-user-menu-role {
margin-top: 0.25rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.625rem;
font-weight: 500;
color: var(--primary);
}
.nx-user-menu-role-dot {
width: 0.375rem;
height: 0.375rem;
border-radius: 9999px;
background: var(--primary);
}
.nx-user-menu-item-text {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1 1 0%;
line-height: 1.25;
gap: 0.125rem;
}
.nx-user-menu-item-label {
font-size: 0.78125rem;
}
.nx-user-menu-item-sub {
font-size: 0.65625rem;
color: var(--ink-3);
}
/* ── interrupteur jour / nuit ── */
.nexcalia-app .nx-dark-toggle {
position: relative;
width: 3rem;
height: 1.5rem;
flex-shrink: 0;
border-radius: 9999px;
overflow: hidden;
transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.nexcalia-app .nx-dark-stars {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s;
}
.nexcalia-app .nx-dark-stars.is-on {
opacity: 1;
}
.nexcalia-app .nx-dark-star {
position: absolute;
border-radius: 9999px;
background: var(--nx-white);
}
.nexcalia-app .nx-dark-star:nth-child(1) {
top: 0.25rem;
left: 0.5rem;
width: 1px;
height: 1px;
box-shadow: 0 0 2px var(--nx-white);
}
.nexcalia-app .nx-dark-star:nth-child(2) {
top: 0.75rem;
left: 0.875rem;
width: 0.125rem;
height: 0.125rem;
opacity: 0.7;
}
.nexcalia-app .nx-dark-star:nth-child(3) {
top: 0.375rem;
left: 1.25rem;
width: 1px;
height: 1px;
opacity: 0.6;
}
.nexcalia-app .nx-dark-knob {
position: absolute;
top: 0.125rem;
left: 0.125rem;
width: 1.25rem;
height: 1.25rem;
border-radius: 9999px;
display: grid;
place-items: center;
transition: all 0.3s cubic-bezier(0.5, 1.5, 0.5, 1);
}
.nexcalia-app .nx-dark-knob.is-on {
left: 26px;
}
.nexcalia-app .nx-dark-glyph {
opacity: 0;
transition: opacity 0.2s;
}
.nexcalia-app .nx-dark-glyph.is-on {
opacity: 1;
}
/* Les deux derniers glyphes se superposent au premier dans la même cellule
de grille — ils étaient en `absolute` côté Tailwind. */
.nexcalia-app .nx-dark-glyph + .nx-dark-glyph {
position: absolute;
}
/* ───────────────────────── brand ───────────────────────── */
/* Volontairement non scopées `.nexcalia-app` : le docblock du composant
annonce un usage autonome (écran d'auth, modale « à propos »). */
.nx-brand {
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 1rem;
height: 3.5rem;
flex-shrink: 0;
overflow: hidden;
}
.nx-brand-logo {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.nx-brand-img {
display: block;
height: 30px;
width: auto;
}
.nx-brand-name {
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: -0.025em;
}
.nx-brand-mark {
margin-left: auto;
margin-right: auto;
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
display: grid;
place-items: center;
transition: transform 0.2s;
}
.nx-brand-mark:hover {
transform: scale(1.05);
}
.nx-brand-mark-img {
display: block;
height: 1.5rem;
width: auto;
}
/* ===== resource-row.css ===== */
/* ─────────────────────────────────────────────────────────────────────────
Resource-row — enrichissements applicatifs de la coquille de liste partagée
(poignée de tri intégrée, liseré d'accent, repli d'avatar, état atténué,
rangée de pastilles, bloc « trailing »). Le composant Blade override vit dans
resources/views/components/nexcalia/resource-row.blade.php. Ces classes sont
nouvelles (absentes du package) : elles s'appliquent depuis app.css sans
!important. À upstreamer dans nexcalia/ui (components.css) une fois validées.
───────────────────────────────────────────────────────────────────────── */
/* La vignette devient un contexte de positionnement pour empiler
image + repli + poignée. Le package ne pose pas `position` → additif. */
.nexcalia-app .nx-resource-marker {
position: relative;
}
.nexcalia-app .nx-resource-avatar-img {
position: absolute;
inset: 0;
z-index: 1;
}
/* Repli affiché quand l'image d'avatar échoue (onerror la retire) : icône
teintée ou initiales sur fond doux. */
.nexcalia-app .nx-resource-fallback {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.nexcalia-app .nx-resource-fallback-initials {
display: grid;
place-items: center;
border-radius: 50%;
background: var(--primary-soft);
color: var(--primary-deep);
font-weight: 600;
font-size: 0.8125rem;
letter-spacing: 0.01em;
}
/* Poignée de tri en overlay sur la vignette, révélée au survol de la ligne. */
.nexcalia-app .nx-resource-grip {
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
border-radius: inherit;
background: var(--surface);
border: 1px solid var(--line);
color: var(--ink-3);
cursor: grab;
opacity: 0;
transition:
opacity 0.15s ease-out,
color 0.15s;
}
.nexcalia-app .nx-resource-grip:active {
cursor: grabbing;
}
.nexcalia-app .nx-resource-row:hover .nx-resource-grip {
opacity: 1;
}
.nexcalia-app .nx-resource-grip:hover {
color: var(--ink);
}
/* Liseré d'accent (couleur de service) affleurant le bord gauche. Sélecteur
volontairement spécifique (> .nx-resource-accent) pour battre la règle
package `.nx-resource-row > * { position: relative }` chargée après app.css. */
.nexcalia-app .nx-resource-row > .nx-resource-accent {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
z-index: 1;
}
.nexcalia-app .nx-resource-row.has-accent {
padding-left: 18px;
}
/* Nom-lien : hérite de la couleur, se teinte en primaire au survol. */
.nexcalia-app .nx-resource-name-link {
color: inherit;
text-decoration: none;
transition: color 0.15s;
}
.nexcalia-app .nx-resource-name-link:hover {
color: var(--primary);
}
.nexcalia-app .nx-resource-name-suffix {
margin-left: 6px;
font-weight: 400;
font-size: 0.75rem;
color: var(--ink-3);
}
/* Rangée de pastilles sous le nom (services). */
.nexcalia-app .nx-resource-badges {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 6px;
}
/* Bloc intermédiaire avant les actions (canaux + toggles des services). */
.nexcalia-app .nx-resource-trailing {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
/* État atténué (service indisponible) : on grise vignette + contenu, restauré
au survol pour rester consultable. Les actions restent pleinement lisibles. */
.nexcalia-app .nx-resource-row.is-dimmed .nx-resource-marker,
.nexcalia-app .nx-resource-row.is-dimmed .nx-resource-info,
.nexcalia-app .nx-resource-row.is-dimmed .nx-resource-trailing,
.nexcalia-app .nx-resource-row.is-dimmed .nx-resource-accent {
opacity: 0.5;
filter: grayscale(1);
transition:
opacity 0.2s,
filter 0.2s;
}
.nexcalia-app .nx-resource-row.is-dimmed:hover .nx-resource-marker,
.nexcalia-app .nx-resource-row.is-dimmed:hover .nx-resource-info,
.nexcalia-app .nx-resource-row.is-dimmed:hover .nx-resource-trailing,
.nexcalia-app .nx-resource-row.is-dimmed:hover .nx-resource-accent {
opacity: 1;
filter: none;
}
/* ===== animations.css ===== */
/* Bibliothèque d'animations Nexcalia.
Vivait jusqu'en v2.21 dans un