de l'application, parce que les jetons doivent aussi couvrir (fond de page, overscroll) et l'écran de connexion, qui vit dans son propre conteneur plein écran. Non repris du kit : typographie, rayons, espacements et classes de composants (.cp-btn, .cp-card…). Le design porté transporte ses propres valeurs en inline et n'a pas de classes à habiller. ============================================================================ */ /* --------------------------------------------------------------------------- 1. Glass sombre — verre sur nuit bleutée --------------------------------------------------------------------------- */ html[data-cp-theme="glass-sombre"] { color-scheme: dark; /* Scène (fond de page + halos qui donnent au verre quelque chose à flouter) */ --cp-canvas: #06091a; --cp-canvas-gradient: radial-gradient(1100px 700px at 8% -12%, rgba(56, 120, 255, .34), transparent 62%), radial-gradient(900px 760px at 96% 4%, rgba(150, 84, 255, .30), transparent 62%), radial-gradient(1100px 820px at 46% 118%, rgba(50, 180, 255, .22), transparent 60%), #06091a; --cp-orb-1: rgba(70, 140, 255, .55); --cp-orb-2: rgba(160, 90, 255, .50); /* Dégradé de fin de liste (barres d'actions collées en bas) : opaque, sinon les fiches défilent visiblement derrière les boutons. */ --cp-sticky-fade: #0a0e1f; /* Surfaces de verre, du plus discret au plus marqué */ --cp-glass-1: rgba(255, 255, 255, .045); --cp-glass-2: rgba(255, 255, 255, .055); --cp-glass-3: rgba(255, 255, 255, .07); --cp-glass-4: rgba(255, 255, 255, .10); --cp-glass-5: rgba(255, 255, 255, .12); --cp-glass-hover: rgba(255, 255, 255, .10); /* Creux : champs de saisie, rails segmentés, tuiles latérales. Le design pastel les fait plus SOMBRES que les panneaux ; en verre il faut donc creuser vers le noir, pas ajouter du blanc. */ --cp-sunken: rgba(2, 4, 14, .34); --cp-sunken-2: rgba(2, 4, 14, .50); /* Pistes : anneaux de score, interrupteurs éteints, rail alphabétique */ --cp-track: rgba(255, 255, 255, .15); /* Bordures */ --cp-border: rgba(255, 255, 255, .10); --cp-border-strong: rgba(255, 255, 255, .16); --cp-border-contrast: rgba(255, 255, 255, .30); /* Liseré interne des panneaux et cartes (voir isPlainSurface, helpers.js) : `none` suffit à le retirer partout. */ --cp-surface-ring: inset 0 0 0 1px rgba(255, 255, 255, .10); /* Texte — du plus contrasté au plus discret : fg-strong > fg > fg-faintest > fg-faint > fg-subtle > fg-muted > fg-muted-2 (nomenclature du kit : « faint » = peu de voile, donc BEAUCOUP de contraste) */ --cp-fg: #e8eeff; --cp-fg-strong: #f4f7ff; --cp-fg-faintest: #bac6e6; --cp-fg-faint: #a0aed2; --cp-fg-subtle: #98a6cc; --cp-fg-muted: #8f9dc4; --cp-fg-muted-2: #8797c0; --cp-placeholder: #6b7ba8; --cp-selection: rgba(140, 124, 255, .45); /* Accent violet */ --cp-accent: #ab99ff; /* texte, icônes */ --cp-accent-solid: #7a5ad0; /* aplat portant du texte blanc (4,9:1) */ --cp-grad-1: #5b8cff; /* dégradé du bouton principal */ --cp-grad-2: #9a6bff; --cp-accent-tint: rgba(140, 120, 255, .18); --cp-accent-tint-soft: rgba(140, 120, 255, .12); --cp-accent-tint-strong: rgba(140, 120, 255, .26); --cp-accent-border: rgba(150, 140, 255, .60); /* Statuts. Les `-solid` sont des aplats portant du texte blanc (pastilles, badges) : ils restent soutenus là où la version texte est éclaircie. */ --cp-success: #3fe0a8; --cp-success-solid: #2b9271; --cp-success-tint: rgba(63, 224, 168, .15); --cp-success-tint-soft: rgba(63, 224, 168, .07); --cp-success-border: rgba(63, 224, 168, .38); --cp-danger: #ff8d8d; --cp-danger-solid: #d84a3a; --cp-danger-tint: rgba(255, 141, 141, .14); --cp-danger-tint-soft: rgba(255, 141, 141, .07); --cp-danger-border: rgba(255, 141, 141, .34); --cp-warning: #ffc972; --cp-warning-tint: rgba(255, 201, 114, .15); --cp-warning-tint-soft: rgba(255, 201, 114, .07); --cp-warning-border: rgba(255, 201, 114, .36); --cp-info: #72b8ff; --cp-info-tint: rgba(114, 184, 255, .16); --cp-info-border: rgba(114, 184, 255, .40); --cp-pink: #ff95ba; --cp-pink-solid: #c25680; --cp-pink-tint: rgba(255, 146, 184, .16); --cp-lime: #c6e463; --cp-lime-tint: rgba(198, 228, 99, .15); --cp-gold: #e0b44a; /* favoris */ --cp-gold-tint: rgba(224, 180, 74, .16); --cp-scrollbar: rgba(255, 255, 255, .15); --cp-scrollbar-hover: rgba(255, 255, 255, .26); } /* --------------------------------------------------------------------------- 2. Glass clair — verre lumineux. Mêmes rôles, valeurs réelles (ce n'est pas un filtre de luminosité posé sur le thème sombre). --------------------------------------------------------------------------- */ html[data-cp-theme="glass-clair"] { color-scheme: light; --cp-canvas: #e9edfa; --cp-canvas-gradient: radial-gradient(1100px 700px at 8% -12%, rgba(120, 170, 255, .50), transparent 62%), radial-gradient(900px 760px at 96% 4%, rgba(180, 150, 255, .44), transparent 62%), radial-gradient(1100px 820px at 46% 118%, rgba(130, 215, 255, .40), transparent 60%), #e9edfa; --cp-orb-1: rgba(90, 150, 255, .50); --cp-orb-2: rgba(165, 120, 255, .45); --cp-sticky-fade: #eef1fa; --cp-glass-1: rgba(255, 255, 255, .56); --cp-glass-2: rgba(255, 255, 255, .66); --cp-glass-3: rgba(255, 255, 255, .78); --cp-glass-4: rgba(28, 40, 90, .09); --cp-glass-5: rgba(28, 40, 90, .11); --cp-glass-hover: rgba(255, 255, 255, .88); --cp-sunken: rgba(28, 40, 90, .05); --cp-sunken-2: rgba(28, 40, 90, .08); --cp-track: rgba(28, 40, 90, .13); --cp-border: rgba(28, 40, 90, .11); --cp-border-strong: rgba(28, 40, 90, .15); --cp-border-contrast: rgba(28, 40, 90, .30); --cp-surface-ring: inset 0 0 0 1px rgba(28, 40, 90, .09); --cp-fg: #1c2440; --cp-fg-strong: #111a33; --cp-fg-faintest: #414b66; --cp-fg-faint: #525d7a; --cp-fg-subtle: #586382; --cp-fg-muted: #5d6889; --cp-fg-muted-2: #606b8c; --cp-placeholder: #8790a8; --cp-selection: rgba(104, 80, 235, .28); --cp-accent: #5940c4; --cp-accent-solid: #6a52e0; /* texte blanc : 5,4:1 */ --cp-grad-1: #2f66d4; --cp-grad-2: #7a45dc; --cp-accent-tint: rgba(104, 80, 235, .16); --cp-accent-tint-soft: rgba(104, 80, 235, .10); --cp-accent-tint-strong: rgba(104, 80, 235, .24); --cp-accent-border: rgba(104, 80, 235, .60); --cp-success: #0b8f63; --cp-success-solid: #0b8f63; --cp-success-tint: rgba(12, 150, 105, .15); --cp-success-tint-soft: rgba(12, 150, 105, .07); --cp-success-border: rgba(12, 150, 105, .38); --cp-danger: #c22f40; --cp-danger-solid: #c22f40; --cp-danger-tint: rgba(200, 50, 60, .12); --cp-danger-tint-soft: rgba(200, 50, 60, .06); --cp-danger-border: rgba(200, 50, 60, .34); --cp-warning: #9d6b12; --cp-warning-tint: rgba(180, 120, 15, .15); --cp-warning-tint-soft: rgba(180, 120, 15, .07); --cp-warning-border: rgba(180, 120, 15, .36); --cp-info: #1f66cc; --cp-info-tint: rgba(28, 100, 210, .16); --cp-info-border: rgba(28, 100, 210, .40); --cp-pink: #c34372; --cp-pink-solid: #c34372; --cp-pink-tint: rgba(205, 65, 115, .16); --cp-lime: #5e7d14; --cp-lime-tint: rgba(105, 145, 20, .15); --cp-gold: #8a6a12; --cp-gold-tint: rgba(168, 134, 43, .18); --cp-scrollbar: rgba(30, 42, 90, .18); --cp-scrollbar-hover: rgba(30, 42, 90, .30); } /* --------------------------------------------------------------------------- 3. Scène Les deux couches plein écran de l'application (fond hors-app et fond d'app) sont rendues TRANSPARENTES par la table GLASS : le dégradé est peint une seule fois, par , et les halos passent donc sous toute l'interface. --------------------------------------------------------------------------- */ html[data-cp-theme^="glass-"] { background: var(--cp-canvas); } html[data-cp-theme^="glass-"] body { background: var(--cp-canvas-gradient); } /* Halos lumineux. Deux pseudo-éléments de : aucun nœud à ajouter au DOM, et ils sont peints AVANT #root (ordre du document, z-index auto) donc sous les surfaces vitrées translucides. Sans eux, les backdrop-filter du design (superpositions, barres collantes) n'auraient rien à flouter. */ html[data-cp-theme^="glass-"] body::before, html[data-cp-theme^="glass-"] body::after { content: ''; position: fixed; border-radius: 50%; pointer-events: none; } html[data-cp-theme^="glass-"] body::before { left: -8%; top: -14%; width: 46%; height: 52%; background: radial-gradient(circle, var(--cp-orb-1), transparent 68%); filter: blur(60px); } html[data-cp-theme^="glass-"] body::after { right: -6%; top: 6%; width: 38%; height: 46%; background: radial-gradient(circle, var(--cp-orb-2), transparent 68%); filter: blur(64px); } /* --------------------------------------------------------------------------- 4. Finitions hors de portée des styles inline --------------------------------------------------------------------------- */ html[data-cp-theme^="glass-"] ::selection { background: var(--cp-selection); } html[data-cp-theme^="glass-"] input::placeholder, html[data-cp-theme^="glass-"] textarea::placeholder { color: var(--cp-placeholder); } html[data-cp-theme^="glass-"] .scl::-webkit-scrollbar-thumb { background: var(--cp-scrollbar); border-radius: 8px; } html[data-cp-theme^="glass-"] .scl::-webkit-scrollbar-thumb:hover { background: var(--cp-scrollbar-hover); }