/* * Continuum v2 — thème Arc (Anthony, 09/10 : « applique ce design à la place du v2 », bibliothèque uiarc.dev). * Chargé après design-v3*.css, seulement quand (DesignVersion : v2 = structure v3 + ce thème). * Reprend la fondation Arc (foundation.css) et les modules de ses composants, appliqués aux composants cn-* : * jetons oklch neutres, Inter -0,01em, graisses 400/500, pas de capitales, rayons concentriques (18 / 26 / 34 px), * boutons et champs de 36 à 44 px, onglets à surlignage glissant, menus qui naissent du déclencheur, * ombres seulement sur ce qui flotte, focus clavier seul, variante « mouvement réduit ». * Interactions (surlignage des onglets, bascule de thème en éclipse) : public/js/design-arc.js. */ /* ── 1. Fondation (jetons Arc, puis correspondance avec les jetons cn-*) ─────────────────────────────── */ :root[data-skin="arc"] { color-scheme: light; --arc-background: oklch(100% 0 0); --arc-surface: #fcfcfc; /* Anthony, 27/10 : surfaces en FCFCFC sur fond blanc */ --arc-surface-raised: oklch(100% 0 0); --arc-surface-muted: oklch(97.8% 0 0); --arc-foreground: oklch(15% 0 0); --arc-text-secondary: oklch(46% 0 0); --arc-text-muted: oklch(52% 0 0); /* 4,7:1 sur blanc (le 59 % d'Arc reste réservé aux icônes) */ --arc-border: oklch(93.5% 0 0); --arc-border-subtle: oklch(96.5% 0 0); --arc-border-strong: oklch(82% 0 0); --arc-accent: oklch(33% 0 0); --arc-accent-strong: oklch(24% 0 0); --arc-accent-subtle: oklch(33% 0 0 / .1); --arc-success: oklch(49% .19 150); --arc-warning: oklch(52% .16 75); --arc-danger: oklch(54% .21 25); --arc-shadow-resting: 0 1px 2px oklch(0% 0 0 / .035); --arc-shadow-raised: 0 6px 18px oklch(0% 0 0 / .065), 0 1px 3px oklch(0% 0 0 / .035); --arc-shadow-floating: 0 20px 48px oklch(0% 0 0 / .105), 0 3px 10px oklch(0% 0 0 / .045); --arc-radius-control: 1.125rem; --arc-radius-panel: 1.625rem; --arc-radius-surface: 2.125rem; --arc-control-sm: 2.25rem; --arc-control-md: 2.75rem; --arc-ease-enter: cubic-bezier(.16, 1, .3, 1); --arc-ease-standard: cubic-bezier(.22, 1, .36, 1); --arc-ease-spring: linear(0, 0.0258, 0.09, 0.1763, 0.2732, 0.3724, 0.4683, 0.5573, 0.6376, 0.7082, 0.7689, 0.8202, 0.8628, 0.8976, 0.9256, 0.9476, 0.9648, 0.9778, 0.9875, 0.9945, 0.9994, 1.0026, 1.0047, 1.0058, 1.0062, 1.0062, 1.0059, 1.0055, 1.0049, 1.0043, 1.0036, 1.0031, 1.0025, 1.002, 1.0016, 1.0013, 1); --arc-instant: 120ms; --arc-fast: 160ms; --arc-standard: 240ms; --arc-spring: 580ms; --canvas: var(--arc-background); --surface: var(--arc-surface); --surface-sunken: var(--arc-surface-muted); --line: var(--arc-border); --line-control: var(--arc-border-strong); --ink: var(--arc-foreground); --ink-2: var(--arc-text-secondary); --ink-3: var(--arc-text-muted); --neutral-soft: var(--arc-surface-muted); --brand: var(--arc-foreground); --brand-hover: var(--arc-accent-strong); --brand-soft: var(--arc-accent-subtle); --on-brand: var(--arc-background); --success: var(--arc-success); --warn: var(--arc-warning); --danger: var(--arc-danger); --success-soft: color-mix(in oklab, var(--arc-success) 10%, var(--arc-surface)); --warn-soft: color-mix(in oklab, var(--arc-warning) 11%, var(--arc-surface)); --danger-soft: color-mix(in oklab, var(--arc-danger) 10%, var(--arc-surface)); --focus: color-mix(in oklab, var(--arc-accent-strong) 72%, transparent); --selection: oklch(33% 0 0 / .14); --field-bg: var(--arc-surface); --tabs-bg: var(--arc-surface-muted); --radius-sm: 10px; --radius-md: var(--arc-radius-control); --radius-lg: var(--arc-radius-panel); --shadow-overlay: var(--arc-shadow-floating); --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Geist", "Inter", system-ui, sans-serif; } :root[data-skin="arc"][data-theme="dark"] { color-scheme: dark; --arc-background: oklch(19% 0 0); --arc-surface: oklch(21.5% 0 0); --arc-surface-raised: oklch(24% 0 0); --arc-surface-muted: oklch(26% 0 0); --arc-foreground: oklch(96% 0 0); --arc-text-secondary: oklch(77% 0 0); --arc-text-muted: oklch(66% 0 0); --arc-border: oklch(29% 0 0); --arc-border-subtle: oklch(25% 0 0); --arc-border-strong: oklch(40% 0 0); --arc-accent: oklch(80% 0 0); --arc-accent-strong: oklch(91% 0 0); --arc-accent-subtle: oklch(80% 0 0 / .13); --arc-success: oklch(78% .18 150); --arc-warning: oklch(83% .17 80); --arc-danger: oklch(76% .2 25); --arc-shadow-resting: 0 1px 2px oklch(0% 0 0 / .18); --arc-shadow-raised: 0 8px 22px oklch(0% 0 0 / .22); --arc-shadow-floating: 0 22px 55px oklch(0% 0 0 / .34); --selection: oklch(80% 0 0 / .22); } /* ── 2. Typographie : Inter -0,01em, graisses 400 et 500 seulement, pas de capitales ni d'interlettrage large ── */ [data-skin="arc"] body { background: var(--canvas); color: var(--ink); font-family: var(--font-sans); letter-spacing: -0.01em; } :root[data-skin="arc"] :is(h1, h2, h3, h4, strong, b, th, .font-semibold, .font-bold, .font-extrabold) { font-weight: 500; } :root[data-skin="arc"] :is(.uppercase, .cn-kpi__label, .cn-preview__section, .cn-side__label, .cn-table th, .cn-doc-lines th) { text-transform: none; letter-spacing: -0.01em; } :root[data-skin="arc"] :is(.tracking-wide, .tracking-wider, .tracking-widest) { letter-spacing: -0.01em; } :root[data-skin="arc"] .cn-pagehead__title { font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; } :root[data-skin="arc"] :is(.cn-ref, .font-mono) { font-family: var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } :root[data-skin="arc"] ::selection { background: var(--selection); } /* ── 3. Focus : rien au pointeur, contour discret au clavier (fondation Arc) ─────────────────────────── */ :root[data-skin="arc"] :focus:not(:focus-visible) { outline: none; } :root[data-skin="arc"] :focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px !important; box-shadow: none; } :root[data-skin="arc"] :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select):focus-visible { outline: none !important; } /* ── 4. Boutons (button.module.css) : 36 px, rayon 18 px, primaire plein, secondaire bordé, pression qui s'enfonce ── */ :root[data-skin="arc"] .cn-btn { min-height: var(--arc-control-sm); height: auto; padding: 0 var(--space-4, 16px); border-radius: var(--arc-radius-control); font-size: 14px; font-weight: 500; letter-spacing: -0.01em; box-shadow: none; border-color: var(--arc-border); background-color: var(--arc-surface); color: var(--arc-foreground); transition: color var(--arc-fast) var(--arc-ease-standard), background-color var(--arc-fast) var(--arc-ease-standard), border-color var(--arc-fast) var(--arc-ease-standard), opacity var(--arc-fast) var(--arc-ease-standard), box-shadow var(--arc-fast) var(--arc-ease-standard), transform var(--arc-spring) var(--arc-ease-spring); } :root[data-skin="arc"] .cn-btn--sm { min-height: 32px; padding: 0 12px; font-size: 13px; } :root[data-skin="arc"] .cn-btn--icon { width: var(--arc-control-sm); padding: 0; justify-content: center; } :root[data-skin="arc"] .cn-btn--sm.cn-btn--icon { width: 32px; } :root[data-skin="arc"] .cn-btn--primary { background-color: var(--arc-foreground); border-color: var(--arc-foreground); color: var(--arc-background); } :root[data-skin="arc"] .cn-btn--ghost { background-color: transparent; border-color: transparent; color: var(--arc-text-secondary); } :root[data-skin="arc"] :is(.cn-btn--danger, .cn-btn--danger-soft) { background-color: var(--arc-surface); border-color: var(--arc-border); color: var(--arc-danger); } :root[data-skin="arc"] .cn-btn--success { background-color: var(--arc-foreground); border-color: var(--arc-foreground); color: var(--arc-background); } @media (hover: hover) and (pointer: fine) { :root[data-skin="arc"] .cn-btn:hover:not(:disabled, [aria-disabled="true"]) { background-color: var(--arc-surface-muted); box-shadow: var(--arc-shadow-resting); color: var(--arc-foreground); } :root[data-skin="arc"] :is(.cn-btn--primary, .cn-btn--success):hover:not(:disabled) { background-color: var(--arc-foreground); color: var(--arc-background); opacity: .91; } :root[data-skin="arc"] .cn-btn--ghost:hover:not(:disabled) { box-shadow: none; } :root[data-skin="arc"] :is(.cn-btn--danger, .cn-btn--danger-soft):hover:not(:disabled) { border-color: var(--arc-danger); color: var(--arc-danger); } } :root[data-skin="arc"] .cn-btn:active:not(:disabled, [aria-haspopup], .cn-menu__trigger) { transform: scale(.97); transition-duration: var(--arc-fast), var(--arc-fast), var(--arc-fast), var(--arc-fast), var(--arc-fast), 90ms; } :root[data-skin="arc"] :is(.cn-btn--primary, .cn-btn--success):active:not(:disabled) { opacity: .84; } :root[data-skin="arc"] .cn-btn:is(:disabled, [aria-disabled="true"]) { opacity: 1; color: var(--arc-text-muted); background-color: var(--arc-surface-muted); border-color: var(--arc-border); cursor: not-allowed; } /* ── 5. Champs (input / select / search) : 36 px, rayon 18 px, bordure qui se fonce au survol et au focus ── */ :root[data-skin="arc"] :is(.cn-input, .cn-select, .cn-field input, .cn-field textarea, .cn-field select) { min-height: var(--arc-control-sm); border: 1px solid var(--arc-border-strong); border-radius: var(--arc-radius-control); background-color: var(--arc-surface); color: var(--arc-foreground); font-size: 14px; letter-spacing: -0.01em; box-shadow: none; transition: border-color var(--arc-fast) var(--arc-ease-standard), background-color var(--arc-fast) var(--arc-ease-standard); } :root[data-skin="arc"] .cn-field textarea { border-radius: 14px; padding-top: 10px; padding-bottom: 10px; } :root[data-skin="arc"] .cn-input { padding: 0 14px; } :root[data-skin="arc"] textarea.cn-input { padding-top: 10px; padding-bottom: 10px; border-radius: 14px; } :root[data-skin="arc"] .cn-select { padding: 0 34px 0 14px; border-color: var(--arc-border); line-height: calc(var(--arc-control-sm) - 2px); height: var(--arc-control-sm); background-position: right 14px center; } :root[data-skin="arc"] .cn-input--search { padding-left: 38px; background-position: 14px center; } :root[data-skin="arc"] :is(.cn-input, .cn-select, .cn-field input, .cn-field textarea, .cn-field select)::placeholder { color: var(--arc-text-muted); } @media (hover: hover) and (pointer: fine) { :root[data-skin="arc"] :is(.cn-input, .cn-field input, .cn-field textarea):hover:not(:disabled) { border-color: var(--arc-foreground); } :root[data-skin="arc"] :is(.cn-select, .cn-field select):hover:not(:disabled) { border-color: var(--arc-border-strong); background-color: var(--arc-surface-muted); } } :root[data-skin="arc"] :is(.cn-input, .cn-field input, .cn-field textarea):focus { border-color: var(--arc-foreground); } :root[data-skin="arc"] :is(.cn-select, .cn-field select):focus { border-color: var(--arc-border-strong); background-color: var(--arc-surface-muted); } :root[data-skin="arc"] .cn-toolbar :is(.cn-input, .cn-select) { background-color: var(--arc-surface); } :root[data-skin="arc"] .cn-toolbar .cn-input { border-color: var(--arc-border-strong); } :root[data-skin="arc"] .cn-toolbar .cn-select { border-color: var(--arc-border); } :root[data-skin="arc"] .cn-field--error :is(input, textarea, select) { border-color: var(--arc-danger); } :root[data-skin="arc"] .cn-check, :root[data-skin="arc"] input[type="checkbox"] { accent-color: var(--arc-foreground); } /* ── 6. Onglets et contrôles segmentés (tabs / segmented-control) : coque bordée, surlignage qui glisse ── */ :root[data-skin="arc"] :is(.cn-tabs, .cn-seg) { position: relative; isolation: isolate; gap: 4px; padding: 4px; border: 1px solid var(--arc-border); border-radius: var(--arc-radius-control); background: var(--arc-surface-muted); } :root[data-skin="arc"] .cn-listpage > .cn-tabs.cn-listpage__tabs { background: var(--arc-surface-muted); } :root[data-skin="arc"] .cn-tab { position: relative; z-index: 1; min-height: 32px; padding: 0 14px; border-radius: calc(var(--arc-radius-control) - 4px); background: transparent; color: var(--arc-text-muted); font-size: 14px; font-weight: 500; box-shadow: none; transition: color var(--arc-fast) var(--arc-ease-standard); display: inline-flex; align-items: center; gap: 8px; } @media (hover: hover) and (pointer: fine) { :root[data-skin="arc"] .cn-tab:hover { color: var(--arc-foreground); background: transparent; } } :root[data-skin="arc"] .cn-tab[aria-selected="true"] { color: var(--arc-foreground); font-weight: 500; background: var(--arc-surface); box-shadow: 0 0 0 1px var(--arc-border), var(--arc-shadow-resting); } /* Avec design-arc.js : un seul surlignage qui glisse d'un onglet à l'autre (la pastille de l'onglet actif s'efface). */ :root[data-skin="arc"] [data-arc-glide] > .cn-tab[aria-selected="true"] { background: transparent; box-shadow: none; } :root[data-skin="arc"] .arc-glide { position: absolute; z-index: 0; top: 0; left: 0; border-radius: calc(var(--arc-radius-control) - 4px); background: var(--arc-surface); box-shadow: 0 0 0 1px var(--arc-border), var(--arc-shadow-resting); pointer-events: none; transition: transform var(--arc-spring) var(--arc-ease-spring), width var(--arc-spring) var(--arc-ease-spring), height var(--arc-standard) var(--arc-ease-standard); } :root[data-skin="arc"] .arc-glide.is-instant { transition: none; } :root[data-skin="arc"] :is(.cn-tab__count, .cn-listpage__count, .cn-panel__count) { height: 20px; min-width: 20px; padding: 0 7px; border-radius: 999px; background: var(--arc-accent-subtle); color: var(--arc-text-secondary); font-size: 12px; font-weight: 500; } :root[data-skin="arc"] .cn-tab[aria-selected="true"] .cn-tab__count { background: var(--arc-foreground); color: var(--arc-background); } :root[data-skin="arc"] .cn-seg button { min-height: 30px; border-radius: calc(var(--arc-radius-control) - 4px); color: var(--arc-text-muted); font-weight: 500; } :root[data-skin="arc"] .cn-seg button[aria-pressed="true"] { background: var(--arc-surface); color: var(--arc-foreground); box-shadow: 0 0 0 1px var(--arc-border), var(--arc-shadow-resting); } /* ── 7. Badges (badge.module.css) : pilule bordée, teinte légère, libellé de la couleur du statut ── */ :root[data-skin="arc"] .cn-badge { min-height: 24px; height: auto; padding: 0 10px; border: 1px solid var(--arc-border); border-radius: 999px; background: var(--arc-surface-muted); color: var(--arc-text-secondary); font-size: 12px; font-weight: 500; letter-spacing: -0.01em; } :root[data-skin="arc"] .cn-badge--success { color: var(--arc-success); background: color-mix(in oklab, var(--arc-success) 10%, var(--arc-surface)); border-color: color-mix(in oklab, var(--arc-success) 25%, var(--arc-border)); } :root[data-skin="arc"] .cn-badge--warn { color: var(--arc-warning); background: color-mix(in oklab, var(--arc-warning) 11%, var(--arc-surface)); border-color: color-mix(in oklab, var(--arc-warning) 27%, var(--arc-border)); } :root[data-skin="arc"] .cn-badge--danger { color: var(--arc-danger); background: color-mix(in oklab, var(--arc-danger) 10%, var(--arc-surface)); border-color: color-mix(in oklab, var(--arc-danger) 26%, var(--arc-border)); } :root[data-skin="arc"] { --info: var(--arc-accent-strong); --info-soft: var(--arc-accent-subtle); } /* Télétravail (14/10) : violet, comme le calendrier des absences. */ :root[data-skin="arc"] { --remote: oklch(0.52 0.2 295); --remote-soft: color-mix(in oklab, oklch(0.62 0.19 295) 16%, transparent); } :root[data-skin="arc"] { --leave: oklch(0.55 0.17 250); --leave-soft: color-mix(in oklab, oklch(0.62 0.17 250) 16%, transparent); } :root[data-skin="arc"][data-theme="dark"] { --leave: oklch(0.8 0.11 250); --leave-soft: color-mix(in oklab, oklch(0.62 0.17 250) 26%, transparent); } :root[data-skin="arc"][data-theme="dark"] { --remote: oklch(0.8 0.12 295); --remote-soft: color-mix(in oklab, oklch(0.62 0.19 295) 24%, transparent); } :root[data-skin="arc"] .cn-badge--info { color: var(--arc-accent-strong); background: var(--arc-accent-subtle); border-color: color-mix(in oklab, var(--arc-accent) 24%, var(--arc-border)); } :root[data-skin="arc"] .cn-badge--plain { background: var(--arc-surface); } :root[data-skin="arc"] .cn-chip { border-radius: 999px; border-color: var(--arc-border); } /* ── 8. Surfaces : panneaux et cartes posés sur un filet, sans ombre ; rayons concentriques ── */ :root[data-skin="arc"] .cn-panel { border: 1px solid var(--arc-border); border-radius: var(--arc-radius-panel); background: var(--arc-surface); box-shadow: none; } :root[data-skin="arc"] .cn-panel__head { border-bottom-color: var(--arc-border-subtle); } :root[data-skin="arc"] .cn-panel__title { font-size: 16px; font-weight: 500; } :root[data-skin="arc"] .cn-kpis { gap: 16px; } :root[data-skin="arc"] .cn-kpi { border: 1px solid var(--arc-border); border-radius: var(--arc-radius-panel); background: var(--arc-surface); box-shadow: none; padding: 20px 24px; gap: 6px; } :root[data-skin="arc"] .cn-kpi__label { font-size: 14px; font-weight: 400; color: var(--arc-text-secondary); } :root[data-skin="arc"] .cn-kpi__value { font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } :root[data-skin="arc"] .cn-kpi__value.cn-kpi__value--empty { font-family: var(--font-sans); font-size: 15px; line-height: 33px; font-weight: 400; letter-spacing: -0.01em; color: var(--arc-text-muted); } :root[data-skin="arc"] .cn-kpi__value--success { color: var(--arc-success); } :root[data-skin="arc"] .cn-kpi__value--danger { color: var(--arc-danger); } :root[data-skin="arc"] .cn-kpi__sub { font-size: 13px; color: var(--arc-text-muted); } :root[data-skin="arc"] .cn-empty { border-radius: var(--arc-radius-panel); } :root[data-skin="arc"] .cn-flash { border-radius: var(--arc-radius-control); box-shadow: none; } :root[data-skin="arc"] .cn-progress__track { border-radius: 999px; background: var(--arc-surface-muted); } :root[data-skin="arc"] .cn-progress__bar { border-radius: 999px; background: var(--arc-foreground); transition: width var(--arc-spring) var(--arc-ease-spring); } :root[data-skin="arc"] .cn-avatar { background: var(--arc-surface-muted); color: var(--arc-text-secondary); } /* Pages pas encore portées (balisage Tailwind) : mêmes surfaces et rayons. */ /* ── 9. Tableaux : en-têtes en casse normale, lignes qui s'éclairent au survol ── */ :root[data-skin="arc"] .cn-table th { background: transparent; color: var(--arc-text-muted); font-size: 13px; font-weight: 500; border-bottom: 1px solid var(--arc-border); } :root[data-skin="arc"] .cn-table td { border-top-color: var(--arc-border-subtle); } /* Pied de tableau (15/10) : « Total » en th prenait le style des en-têtes (filet décalé sous la seule cellule, autre hauteur). */ :root[data-skin="arc"] .cn-table tfoot th { border-bottom: 0; border-top: 1px solid var(--arc-border-subtle); padding-top: 14px; padding-bottom: 14px; vertical-align: middle; } :root[data-skin="arc"] .cn-table tbody tr { transition: background-color var(--arc-instant) var(--arc-ease-standard); } @media (hover: hover) and (pointer: fine) { :root[data-skin="arc"] .cn-table tbody tr:hover { background: var(--arc-surface-muted); } } :root[data-skin="arc"] .cn-tablefoot { border-top-color: var(--arc-border-subtle); color: var(--arc-text-muted); } /* ── 10. Menus (dropdown-menu) : panneau flottant 26 px qui naît du déclencheur, éléments de 36 px ── */ :root[data-skin="arc"] :is(.cn-menu__pop, .cn-rowmenu__pop) { padding: 5px; border: 1px solid var(--arc-border); border-radius: var(--arc-radius-panel); background: var(--arc-surface-raised); box-shadow: var(--arc-shadow-floating); transform-origin: top right; animation: arc-menu-in var(--arc-standard) var(--arc-ease-enter) both; } :root[data-skin="arc"] :is(.cn-menu__item, .cn-rowmenu__pop a, .cn-rowmenu__pop button) { min-height: 36px; border-radius: calc(var(--arc-radius-panel) - 6px); padding: 0 11px; font-size: 14px; color: var(--arc-foreground); transition: background-color var(--arc-instant) var(--arc-ease-standard); } :root[data-skin="arc"] :is(.cn-menu__item, .cn-rowmenu__pop a, .cn-rowmenu__pop button):hover { background: var(--arc-surface-muted); } :root[data-skin="arc"] .cn-menu__item--danger { color: var(--arc-danger); } :root[data-skin="arc"] .cn-menu__item--danger:hover { background: color-mix(in oklab, var(--arc-danger) 8%, var(--arc-surface)); } :root[data-skin="arc"] .cn-menu__divider { background: var(--arc-border-subtle); } @keyframes arc-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.97); } } /* ── 11. Panneau latéral (sheet) et palette ⌘K (dialog) ── */ :root[data-skin="arc"] .cn-drawer { border-left-color: var(--arc-border); background: var(--arc-surface-raised); box-shadow: var(--arc-shadow-floating); border-radius: var(--arc-radius-surface) 0 0 var(--arc-radius-surface); overflow: hidden; } :root[data-skin="arc"] .cn-drawer__head { border-bottom-color: var(--arc-border-subtle); } :root[data-skin="arc"] .cn-drawer__title { font-weight: 500; } :root[data-skin="arc"] .cn-drawer-overlay { background: var(--cn-overlay-bg, rgba(0,0,0,.3)); backdrop-filter: var(--cn-overlay-blur, blur(4px)); -webkit-backdrop-filter: var(--cn-overlay-blur, blur(4px)); } :root[data-skin="arc"] .cn-cmdk { border: 1px solid var(--arc-border); border-radius: var(--arc-radius-surface); background: var(--arc-surface-raised); box-shadow: var(--arc-shadow-floating); overflow: hidden; animation: arc-dialog-in var(--arc-standard) var(--arc-ease-enter) both; } :root[data-skin="arc"] .cn-cmdk-bg { background: oklch(10% 0 0 / .46); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); } :root[data-skin="arc"] .cn-cmdk__item { border-radius: calc(var(--arc-radius-panel) - 6px); } @keyframes arc-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.97); } } /* ── 12. Barre latérale et barre du haut ── */ :root[data-skin="arc"] .cn-side, [data-skin="arc"][data-theme="dark"] .cn-side { --side-bg: var(--arc-background); --side-hover: var(--arc-surface-muted); --side-active: var(--arc-surface-muted); --side-tree: var(--arc-border); --ink: var(--arc-foreground); --ink-2: var(--arc-text-secondary); --ink-3: var(--arc-text-muted); --line: var(--arc-border); --line-control: var(--arc-border-strong); --surface: var(--arc-surface); --surface-sunken: var(--arc-surface-muted); --brand: var(--arc-foreground); --brand-soft: var(--arc-accent-subtle); --focus: color-mix(in oklab, var(--arc-accent-strong) 72%, transparent); --danger: var(--arc-danger); --danger-soft: color-mix(in oklab, var(--arc-danger) 12%, var(--arc-surface)); background: var(--side-bg); border-right: 1px solid var(--arc-border); } :root[data-skin="arc"] .cn-side__brand { color: var(--ink); text-transform: none; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; } :root[data-skin="arc"] .cn-side__mark { background: var(--ink); color: var(--side-bg); border-radius: 10px; } :root[data-skin="arc"] .cn-side__search, :root[data-skin="arc"] button.cn-side__search { height: var(--arc-control-sm); background-color: var(--arc-surface); border: 1px solid var(--arc-border); color: var(--arc-text-muted); border-radius: var(--arc-radius-control); padding: 0 14px; } :root[data-skin="arc"] .cn-side__search:hover, :root[data-skin="arc"] button.cn-side__search:hover { background-color: var(--arc-surface-muted); border-color: var(--arc-border-strong); color: var(--ink); } :root[data-skin="arc"] .cn-side__search kbd { font-family: var(--font-sans); background: var(--arc-surface-muted); border-color: var(--arc-border); color: var(--arc-text-muted); border-radius: 6px; } :root[data-skin="arc"] .cn-nav { min-height: 32px; border-radius: 10px; color: var(--ink-2); font-size: 14px; font-weight: 400; transition: background-color var(--arc-instant) var(--arc-ease-standard), color var(--arc-instant) var(--arc-ease-standard); } :root[data-skin="arc"] .cn-nav:hover { background: var(--side-hover); color: var(--ink); } :root[data-skin="arc"] .cn-nav[aria-current="page"] { background: var(--side-active); color: var(--ink); font-weight: 500; } :root[data-skin="arc"] .cn-nav__icon { color: var(--ink-3); } :root[data-skin="arc"] .cn-nav[aria-current="page"] .cn-nav__icon { color: var(--ink); } :root[data-skin="arc"] .cn-nav__count { background: var(--arc-accent-subtle); color: var(--ink-2); font-size: 12px; font-weight: 500; } :root[data-skin="arc"] .cn-nav__alert { background: var(--danger-soft); color: var(--danger); font-size: 12px; font-weight: 500; } :root[data-skin="arc"] .cn-tree__head { border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink); } :root[data-skin="arc"] .cn-tree__head:hover { background: var(--side-hover); } :root[data-skin="arc"] .cn-tree__chevron { transition: transform var(--arc-spring) var(--arc-ease-spring); } :root[data-skin="arc"] .cn-tree__items { border-left-color: var(--side-tree); } :root[data-skin="arc"] .cn-tree__items .cn-nav[aria-current="page"]::before { background: var(--ink); transition: top var(--arc-standard) var(--arc-ease-standard); } :root[data-skin="arc"] .cn-side__foot { border-top-color: var(--arc-border); } :root[data-skin="arc"] .cn-top { background: color-mix(in oklab, var(--canvas) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--arc-border); } :root[data-skin="arc"] .cn-top__crumb strong { font-weight: 500; } :root[data-skin="arc"] a.cn-ref, :root[data-skin="arc"] .cn-link { color: var(--ink); } /* ── 13. Bascule clair / sombre (Anthony, 09/10 : « un truc qui en jette ») : la nouvelle apparence jaillit du bouton en cercle, l'ancienne recule légèrement en se floutant et s'assombrit ; un halo lumineux borde le front du cercle. ── */ ::view-transition-group(root) { animation-duration: 900ms; } ::view-transition-old(root) { animation: arc-theme-recede 900ms cubic-bezier(.65, 0, .35, 1) both; mix-blend-mode: normal; transform-origin: var(--arc-eclipse-x, 100%) var(--arc-eclipse-y, 0%); } ::view-transition-new(root) { animation: arc-theme-reveal 900ms cubic-bezier(.65, 0, .35, 1) both; mix-blend-mode: normal; filter: drop-shadow(0 0 28px color-mix(in oklab, white 55%, transparent)); } @keyframes arc-theme-recede { to { transform: scale(.94); filter: blur(8px) brightness(.6); opacity: .4; } } @keyframes arc-theme-reveal { 0% { clip-path: circle(0 at var(--arc-eclipse-x, 100%) var(--arc-eclipse-y, 0%)); filter: drop-shadow(0 0 40px rgba(255, 255, 255, .7)) saturate(1.4); } 70% { filter: drop-shadow(0 0 22px rgba(255, 255, 255, .35)) saturate(1.15); } 100% { clip-path: circle(var(--arc-eclipse-r, 150vmax) at var(--arc-eclipse-x, 100%) var(--arc-eclipse-y, 0%)); filter: none; } } /* ── 14. Mouvement réduit : on garde l'état final et le retour, on retire les trajets ── */ @media (prefers-reduced-motion: reduce) { :root[data-skin="arc"] :is(.cn-btn, .cn-tab, .arc-glide, .cn-tree__chevron, .cn-progress__bar, .cn-table tbody tr) { transition-duration: .01ms !important; } :root[data-skin="arc"] .cn-btn:active { transform: none; } :root[data-skin="arc"] :is(.cn-menu__pop, .cn-rowmenu__pop, .cn-cmdk) { animation: arc-fade var(--arc-instant) linear both; } ::view-transition-old(root), ::view-transition-new(root) { animation: arc-fade 160ms linear both; } } @keyframes arc-fade { from { opacity: 0; } } /* ── 15. Entrée de page et chiffres en rouleaux (slot-text) — public/js/design-arc.js § 3 et 4 ── */ :root[data-skin="arc"] .arc-enter { animation: arc-enter 480ms var(--arc-ease-enter) backwards; animation-delay: calc(var(--arc-i, 0) * 35ms); } @keyframes arc-enter { from { opacity: 0; transform: translateY(10px); } } .arc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .arc-slot { display: inline-flex; align-items: baseline; } .arc-slot__char { white-space: pre; } /* séparateurs de milliers conservés pendant l'animation (15/10) */ .arc-reel { display: inline-block; height: 1.1em; line-height: 1.1em; overflow: hidden; vertical-align: bottom; } .arc-reel__strip { display: flex; flex-direction: column; line-height: 1.1em; transform: translateY(0); transition: transform 900ms cubic-bezier(.12, .9, .25, 1); } .arc-slot.is-landed .arc-reel__strip { transform: translateY(calc(var(--arc-target) * -1.1em)); animation: arc-reel-blur 900ms ease-out both; } @keyframes arc-reel-blur { 0% { filter: blur(0); } 20% { filter: blur(1.5px); } 70%, 100% { filter: blur(0); } } @media (prefers-reduced-motion: reduce) { .arc-reel__strip { transition: none; } .arc-slot.is-landed .arc-reel__strip { animation: none; } } .arc-reel__strip > span { display: block; height: 1.1em; text-align: center; } /* ── 16. Boutons des pages pas encore portées (balisage Tailwind) ramenés à la charte Arc (Anthony, 09/10 : « Terminer » vert hors charte) ── */ /* ── 17. Fiches (entreprise…) : méta d'en-tête et listes de champs à la manière d'Arc ── */ :root[data-skin="arc"] .cn-pagehead__meta { gap: 8px 16px; font-size: 14px; color: var(--arc-text-secondary); } :root[data-skin="arc"] .cn-pagehead__meta .cn-chip { height: auto; min-height: 28px; padding: 0; border: 0; background: none; gap: 6px; color: var(--arc-foreground); } :root[data-skin="arc"] .cn-pagehead__meta .cn-chip__label { color: var(--arc-text-muted); font-weight: 400; } :root[data-skin="arc"] .cn-pagehead__meta :is(.cn-chip--link, a.cn-chip) { min-height: 26px; padding: 0 10px; border: 1px solid var(--arc-border); border-radius: 999px; background: var(--arc-surface-muted); color: var(--arc-text-secondary); font-size: 12px; font-weight: 500; } :root[data-skin="arc"] .cn-pagehead__meta :is(.cn-chip--link, a.cn-chip):hover { color: var(--arc-foreground); border-color: var(--arc-border-strong); } :root[data-skin="arc"] .cn-fields { gap: 12px 16px; } :root[data-skin="arc"] .cn-fields dt { color: var(--arc-text-muted); font-size: 14px; } :root[data-skin="arc"] .cn-fields dd { font-weight: 400; color: var(--arc-foreground); } :root[data-skin="arc"] .cn-co-group__title { font-size: 13px; font-weight: 500; color: var(--arc-text-muted); text-transform: none; letter-spacing: -0.01em; } :root[data-skin="arc"] .cn-co-missing { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--arc-text-muted); font-size: 14px; } /* ── 18. Retouches (09/10) : menus qui ne débordent pas, panneaux qui laissent sortir leurs menus, étiquette d'en-tête discrète ── */ :root[data-skin="arc"] :is(.cn-menu__pop, .cn-rowmenu__pop) { box-sizing: border-box; overflow: hidden; } :root[data-skin="arc"] :is(.cn-menu__pop, .cn-rowmenu__pop) form { margin: 0; } :root[data-skin="arc"] :is(.cn-menu__item, .cn-rowmenu__pop a, .cn-rowmenu__pop button) { display: flex; align-items: center; width: 100%; box-sizing: border-box; border: 0; background: transparent; text-align: left; font: inherit; font-size: 14px; } :root[data-skin="arc"] .cn-panel { overflow: visible; } :root[data-skin="arc"] .cn-panel > .cn-table-scroll:last-child, :root[data-skin="arc"] .cn-panel > .cn-listpage__foot:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } :root[data-skin="arc"] .cn-pagehead__meta .cn-badge { min-height: 22px; padding: 0 8px; border: 0; background: var(--arc-accent-subtle); color: var(--arc-text-secondary); font-size: 12px; gap: 5px; } :root[data-skin="arc"] .cn-pagehead__meta .cn-badge i { font-size: 10px; } :root[data-skin="arc"] .cn-pagehead__meta .cn-chip__label { color: var(--arc-text-muted); } :root[data-skin="arc"] :is(.cn-menu__pop, .cn-rowmenu__pop) { z-index: 60; } /* ── 19. Pages pas encore portées (balisage Tailwind) : champs et badges de statut à la forme Arc (Anthony, 09/10) ── */ :root[data-skin="arc"] :is(.cn-main, .cn-drawer) :is(select, input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"]), textarea):not(.cn-input, .cn-select) { min-height: var(--arc-control-sm); border: 1px solid var(--arc-border-strong) !important; border-radius: var(--arc-radius-control) !important; background-color: var(--arc-surface) !important; color: var(--arc-foreground) !important; font-size: 14px; letter-spacing: -0.01em; box-shadow: none !important; transition: border-color var(--arc-fast) var(--arc-ease-standard); } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) select:not(.cn-select) { border-color: var(--arc-border) !important; padding-left: 14px; padding-right: 34px; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) input:not([type="checkbox"], [type="radio"]):not(.cn-input) { padding-left: 14px; padding-right: 14px; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) textarea:not(.cn-input) { border-radius: 14px !important; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) :is(select, input, textarea):not(.cn-input, .cn-select):hover { border-color: var(--arc-foreground) !important; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) :is(select, input, textarea):not(.cn-input, .cn-select):focus { border-color: var(--arc-foreground) !important; outline: none !important; --tw-ring-shadow: 0 0 #0000 !important; } /* ── 20. Créneaux du planning : rayon modéré et plus d'air (Anthony, 09/10 : « trop collé ») ── */ :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .planning-card { border-radius: 14px !important; padding: 10px 14px !important; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .planning-card > * + * { margin-top: 3px; } /* ── 21. Barres de défilement (scroll-area d'Arc) : piste invisible, pouce fin et arrondi, plus marqué au survol ── */ :root[data-skin="arc"] * { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--arc-foreground) 22%, transparent) transparent; } :root[data-skin="arc"] ::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; } :root[data-skin="arc"] ::-webkit-scrollbar-track { background: transparent; border: 0; } :root[data-skin="arc"] ::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background-clip: padding-box; background-color: color-mix(in oklab, var(--arc-foreground) 22%, transparent); } :root[data-skin="arc"] ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in oklab, var(--arc-foreground) 38%, transparent); } :root[data-skin="arc"] ::-webkit-scrollbar-corner { background: transparent; } /* ── 22. Un seul dessin de bouton partout (Anthony, 09/10 : « uniformise partout ») ── Boutons Tailwind des pages non portées : tout ce qui n'est ni primaire ni suppression devient le secondaire Arc (36 px, rayon 18 px, filet, surface) ; les boutons-icônes deviennent des carrés de 36 px au même rayon. */ /* Primaires et suppressions Tailwind à la même hauteur que le secondaire. */ /* Boutons cn-* : mêmes hauteurs que ci-dessus (la variante sm reste à 32 px dans les barres d'outils). */ :root[data-skin="arc"] .cn-pagehead .cn-btn, :root[data-skin="arc"] .cn-form-foot .cn-btn { min-height: var(--arc-control-sm); } /* ── 23. Air dans les cartes et en-têtes des pages non portées (Anthony, 09/10 : « trop collé ») ── */ :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .group\/plan { position: relative; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) [data-task-preview] { width: 24px; height: 24px; border-radius: 8px; } /* ── 24. Méta d'en-tête des fiches (Anthony, 09/10) : texte simple avec icône discrète, à la manière « Led by … · Target … » ; le statut garde sa couleur (accepté vert, refusé rouge…), seules les étiquettes neutres sont adoucies. ── */ :root[data-skin="arc"] .cn-pagehead__meta { gap: 6px 20px; } :root[data-skin="arc"] .cn-pagehead__meta :is(.cn-chip, .cn-chip--link, a.cn-chip) { min-height: 24px; padding: 0; border: 0 !important; background: none !important; border-radius: 0; gap: 6px; color: var(--arc-foreground); font-size: 14px; font-weight: 400; } :root[data-skin="arc"] .cn-pagehead__meta :is(.cn-chip, a.cn-chip) i { color: var(--arc-text-muted); font-size: 13px; } :root[data-skin="arc"] .cn-pagehead__meta a.cn-chip:hover, :root[data-skin="arc"] .cn-pagehead__meta .cn-chip--link:hover { color: var(--arc-foreground); text-decoration: underline; text-underline-offset: 3px; } :root[data-skin="arc"] .cn-pagehead__meta .cn-badge--success { color: var(--arc-success); background: color-mix(in oklab, var(--arc-success) 12%, var(--arc-surface)); } :root[data-skin="arc"] .cn-pagehead__meta .cn-badge--danger { color: var(--arc-danger); background: color-mix(in oklab, var(--arc-danger) 12%, var(--arc-surface)); } :root[data-skin="arc"] .cn-pagehead__meta .cn-badge--warn { color: var(--arc-warning); background: color-mix(in oklab, var(--arc-warning) 13%, var(--arc-surface)); } :root[data-skin="arc"] .cn-pagehead__meta .cn-badge--info { color: var(--arc-accent-strong); } /* ── 25. Aperçu des cartes du planning (Anthony, 09/10 : « décale tout ») : l'œil se pose à la place de la durée au survol, sans rien déplacer. ── */ :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .group\/plan:not(.planning-card) [data-task-preview] { position: absolute; top: 12px; right: 14px; opacity: 0; transition: opacity var(--arc-fast) var(--arc-ease-standard); } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .group\/plan:not(.planning-card) :is(span, div):has(> [data-task-preview]) > :not([data-task-preview], template) { transition: opacity var(--arc-fast) var(--arc-ease-standard); } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .group\/plan:not(.planning-card):is(:hover, :focus-within) [data-task-preview] { opacity: 1; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .group\/plan:not(.planning-card):is(:hover, :focus-within) :is(span, div):has(> [data-task-preview]) > :not([data-task-preview], template) { opacity: 0; } @media (hover: none) { :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .group\/plan:not(.planning-card) [data-task-preview] { position: static; opacity: 1; } } /* ── 26. Planning (Anthony, 09/10) : actions des cartes en icônes discrètes, champ de recherche avec icône, fin de liste marquée ── */ :root[data-skin="arc"] :is(.cn-main, .cn-drawer) :is(.planning-card, .group\/plan) :is(button, a):not(.planning-card):not(.cn-plan-decide__btn):not(.cn-plan-card__tools *) { min-height: 0 !important; width: 26px; height: 26px; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: var(--arc-text-muted) !important; box-shadow: none !important; display: inline-flex; align-items: center; justify-content: center; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) :is(.planning-card, .group\/plan) :is(button, a):not(.planning-card):not(.cn-plan-decide__btn):not(.cn-plan-card__tools *):hover { background: color-mix(in oklab, var(--arc-foreground) 8%, transparent) !important; color: var(--arc-foreground) !important; } /* ── 27. Menu de gauche : défilement sans barre visible ── */ :root[data-skin="arc"] .cn-side { scrollbar-width: none; } :root[data-skin="arc"] .cn-side::-webkit-scrollbar { display: none; width: 0; height: 0; } /* ── 28. Respiration (Anthony, 12/10 : « ajuste le padding partout ») ── */ /* Panneaux et listes cn-* */ :root[data-skin="arc"] .cn-panel__head { padding: 18px 24px; min-height: 60px; } :root[data-skin="arc"] .cn-panel__body { padding: 4px 24px 24px; } /* Panneau sans titre (29/10, « Mon compte ») : pas d'en-tête au-dessus, le corps reprend la même marge en haut. */ :root[data-skin="arc"] .cn-panel__body:first-child { padding-top: 24px; } :root[data-skin="arc"] .cn-panel__body--flush { padding: 0; } :root[data-skin="arc"] .cn-list > li { padding: 14px 24px; } :root[data-skin="arc"] .cn-table :is(th, td):first-child { padding-left: 24px; } :root[data-skin="arc"] .cn-table :is(th, td):last-child { padding-right: 24px; } :root[data-skin="arc"] .cn-table td { padding-top: 14px; padding-bottom: 14px; } :root[data-skin="arc"] :is(.cn-toolbar, .cn-listpage__toolbar) { padding: 16px 24px; } :root[data-skin="arc"] .cn-tablefoot { padding: 14px 24px; } :root[data-skin="arc"] .cn-taskgroup__head { padding: 14px 24px; } /* Pages non portées : blocs blancs bordés plus aérés */ /* Planning : en-tête de jour et contenu des colonnes */ :root[data-skin="arc"] .planning-day > div:first-child { padding: 14px 18px; background: transparent; border-bottom-color: var(--arc-border-subtle); } :root[data-skin="arc"] .planning-day > div:not(:first-child) { padding: 12px; } /* Jour actuel : plus de cadre coloré ; fond légèrement relevé et pastille « Aujourd'hui » */ :root[data-skin="arc"] .planning-day.is-today { background: color-mix(in oklab, var(--arc-foreground) 4%, var(--arc-surface)); border-color: var(--arc-border-strong) !important; } :root[data-skin="arc"] .planning-day.is-today .planning-day__date { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; margin-right: -9px; border-radius: 999px; background: var(--arc-foreground); color: var(--arc-background) !important; } :root[data-skin="arc"] .planning-day .planning-day__name { font-weight: 600; font-size: 14px; color: var(--arc-foreground); text-transform: none; } .planning-day__today { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; color: var(--ink-3); } /* Panneau latéral : contenu aéré */ :root[data-skin="arc"] .cn-drawer__head { padding: 0 20px 0 32px; min-height: 60px; } :root[data-skin="arc"] .cn-preview { padding: 28px 32px; } /* Textes d'aide des champs : gris discret du menu de gauche */ :root[data-skin="arc"] :is(input, textarea, select)::placeholder { color: var(--arc-text-muted) !important; opacity: .75; } /* Badges du jour dans le planning (12/10) : télétravail en violet, excès en orange, quel que soit le thème. */ :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .planning-pill { border-radius: 999px !important; min-height: 22px; padding: 0 9px !important; font-size: 11px; font-weight: 600; border: 0; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .planning-pill--remote { background: color-mix(in oklab, oklch(0.62 0.19 295) 18%, transparent) !important; color: oklch(0.52 0.2 295) !important; } :root[data-skin="arc"][data-theme="dark"] :is(.cn-main, .cn-drawer) .planning-pill--remote { color: oklch(0.8 0.12 295) !important; background: color-mix(in oklab, oklch(0.62 0.19 295) 24%, transparent) !important; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .planning-pill--excess { background: color-mix(in oklab, var(--arc-warning, oklch(0.75 0.15 70)) 18%, transparent) !important; color: oklch(0.55 0.13 60) !important; } :root[data-skin="arc"][data-theme="dark"] :is(.cn-main, .cn-drawer) .planning-pill--excess { color: oklch(0.82 0.13 75) !important; } /* Barres d'avancement : le ton (succès / attention / danger / info) l'emporte sur la couleur Arc par défaut (12/10). */ :root[data-skin="arc"] .cn-progress--success .cn-progress__bar { background: var(--success, oklch(0.68 0.16 150)); } :root[data-skin="arc"] .cn-progress--warn .cn-progress__bar { background: var(--warn, oklch(0.8 0.15 85)); } :root[data-skin="arc"] .cn-progress--danger .cn-progress__bar { background: var(--danger, oklch(0.63 0.2 25)); } :root[data-skin="arc"] .cn-progress--info .cn-progress__bar { background: oklch(0.62 0.17 250); } /* Anciennes fenêtres (classes Tailwind) : même fond noir léger + flou léger que les fenêtres maison (12/10). */ /* Type d'intervenant (Employés, 12/10) : SCOP en bleu, Salarié en vert. */ /* Planning (13/10) : boutons ✓ / ✕ de validation sur la carte — pastilles Arc bordées (vert / rouge sur le pictogramme seul), plus fortes que la remise à plat des boutons de carte ci-dessus. */ :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .planning-card .planning-decide button { background: var(--arc-surface) !important; border: 1px solid var(--arc-border) !important; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .planning-card .planning-decide button.planning-decide__ok { color: var(--arc-success) !important; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .planning-card .planning-decide button.planning-decide__no { color: var(--arc-danger) !important; } :root[data-skin="arc"] :is(.cn-main, .cn-drawer) .planning-card .planning-decide button:hover { background: var(--arc-surface-muted) !important; border-color: var(--arc-border-strong) !important; }