/** * UI Modes — feature bridge convention. * * Each element bound to a feature carries `class="feat feat-"` (or * `feat-not-` for inverse logic). At boot, index-features.js injects * one rule per feature of the form * body.f- .feat- { display: flex !important; } * body:not(.f-) .feat-not- { display: flex !important; } * * Override the display per-element with the modifier classes feat-inline * (inline-flex), feat-block (block), or feat-inline-text (inline). * * → flex * … → inline-flex *

…

→ block * … * * The legacy ui-X-only / ui-standard-exclusive rails were removed once * every call site was migrated; the legacy applyUILevel() still adds * body.ui-{simple,standard,advanced} classes for back-compat consumers * (no CSS rules depend on them anymore). */ /* Default state — any feature-bound element is hidden until activated. */ .feat { display: none !important; } /* ========== Porte de NIVEAU POO²L (axe unique de l'éditeur) ========== Les surfaces POO²L de l'éditeur (onglet Structure, onglet Vérifier, menu de syntaxe) suivent le PLAFOND d'édition, pas un toggle de preset : une seule question — « jusqu'où en POO²L ? » — un seul contrôle. `data-pool-max` est posé sur par index-poolevel-settings.js (0…5). `.pool-gate` marque un élément gouverné ; `.pool-from-lN` le montre à partir du plafond N ; `.pool-below-lN` est la variante inverse (UI compacte tant que le plafond n'atteint pas N). Modifieurs de display alignés sur ceux des features : `pool-inline`, `pool-block`, `pool-inline-text`. */ .pool-gate { display: none !important; } body[data-pool-max="1"] .pool-from-l1, body[data-pool-max="2"] .pool-from-l1, body[data-pool-max="3"] .pool-from-l1, body[data-pool-max="4"] .pool-from-l1, body[data-pool-max="5"] .pool-from-l1, body[data-pool-max="2"] .pool-from-l2, body[data-pool-max="3"] .pool-from-l2, body[data-pool-max="4"] .pool-from-l2, body[data-pool-max="5"] .pool-from-l2, body[data-pool-max="3"] .pool-from-l3, body[data-pool-max="4"] .pool-from-l3, body[data-pool-max="5"] .pool-from-l3, body[data-pool-max="4"] .pool-from-l4, body[data-pool-max="5"] .pool-from-l4, body[data-pool-max="5"] .pool-from-l5, body[data-pool-max="0"] .pool-below-l1, body[data-pool-max="0"] .pool-below-l2, body[data-pool-max="1"] .pool-below-l2, body[data-pool-max="0"] .pool-below-l3, body[data-pool-max="1"] .pool-below-l3, body[data-pool-max="2"] .pool-below-l3 { display: flex !important; } body[data-pool-max="1"] .pool-from-l1.pool-inline, body[data-pool-max="2"] .pool-from-l1.pool-inline, body[data-pool-max="3"] .pool-from-l1.pool-inline, body[data-pool-max="4"] .pool-from-l1.pool-inline, body[data-pool-max="5"] .pool-from-l1.pool-inline, body[data-pool-max="0"] .pool-below-l1.pool-inline { display: inline-flex !important; } /* Plafond encore inconnu (avant que le réglage utilisateur n'ait été lu) : le défaut documenté est L5 (tout éditable), donc les surfaces POO²L sont visibles plutôt que de clignoter absentes le temps du premier chargement. */ body:not([data-pool-max]) .pool-from-l1, body:not([data-pool-max]) .pool-from-l2, body:not([data-pool-max]) .pool-from-l3, body:not([data-pool-max]) .pool-from-l4, body:not([data-pool-max]) .pool-from-l5 { display: flex !important; } body:not([data-pool-max]) .pool-from-l1.pool-inline { display: inline-flex !important; } /* ========== Hidden by setting (overrides any feature visibility) ========== */ /* When an element is explicitly hidden by a user setting, it must win over the feature bridge's display rules. The body-prefixed selector gives this rule specificity (0,2,1) which beats both the bridge's feature-on rules (0,2,1, won by source order) and feat default. */ body .hidden-by-setting { display: none !important; } /* ========== Legacy UI Level Selector Styles ========== */ /* Still used by the existing settings dropdown (settingsUiLevel). */ .ui-level-selector { display: flex; flex-direction: column; gap: var(--izi-space-md); margin-top: var(--izi-space-sm); } .ui-level-option { display: flex; align-items: flex-start; gap: var(--izi-space-md); padding: var(--izi-space-md); border-radius: 8px; cursor: pointer; transition: background-color 0.2s; border: 1px solid var(--border-color, #e0e0e0); } .ui-level-option:hover { background-color: var(--hover-bg, rgba(0, 0, 0, 0.05)); } .ui-level-option input[type="radio"] { margin-top: var(--izi-space-xs); cursor: pointer; } .ui-level-option-content { display: flex; flex-direction: column; gap: var(--izi-space-xs); } .ui-level-option-title { font-weight: 600; color: var(--text-color, #333); } .ui-level-option-desc { font-size: var(--izi-font-size-sm); color: var(--text-secondary, #666); } @media (prefers-color-scheme: dark) { body.theme-auto .ui-level-option { border-color: var(--border-color, #444); } body.theme-auto .ui-level-option:hover { background-color: var(--hover-bg, rgba(255, 255, 255, 0.05)); } } body.theme-dark .ui-level-option { border-color: var(--border-color, #444); } body.theme-dark .ui-level-option:hover { background-color: var(--hover-bg, rgba(255, 255, 255, 0.05)); }