/* Sélecteur de missions — composant partagé (voir ADR-0026). * * Ces règles vivaient dans adelie_preview.css, au service du seul panneau * « Indexer ce document » de la boîte de réception. Elles servent désormais * aussi à la modale de document de la fiche mission, d'où l'extraction. * * Les couleurs passaient par les jetons `--pv-*`, propres à la page d'aperçu : * les réutiliser ailleurs aurait obligé à trimballer sa palette entière. Elles * sont donc reposées sur les jetons d'Unfold, via un jeu de `--sm-*` défini * ici — le composant est ainsi autonome et suit la palette de l'admin. * * ⚠️ Mode sombre = `html.dark`, JAMAIS `@media (prefers-color-scheme)` : * Unfold a trois états (clair / sombre / auto) pilotés par une classe sur * . Un garde-fou dans adhoc/tests/test_css.py le vérifie. * * ⚠️ Couleurs = `var(--color-base-200)`, JAMAIS `rgb(var(--color-base-200))` : * les jetons d'Unfold sont des couleurs complètes en oklch. * * Chargé par UNFOLD["STYLES"] : aucune de ces classes n'entre en conflit avec * Unfold, la feuille n'a donc pas de cascade à gagner et n'a rien à faire dans * le bloc `extrastyle`. */ :root { --sm-fond: var(--color-white); --sm-fond-alt: var(--color-base-50); --sm-bordure: var(--color-base-200); --sm-bordure-forte: var(--color-base-400); --sm-texte: var(--color-font-important-light); --sm-texte-2: var(--color-font-default-light); --sm-attenue: var(--color-font-subtle-light); --sm-accent: var(--color-primary-600); --sm-accent-fond: var(--color-primary-50); --sm-accent-fond2: var(--color-primary-100); --sm-accent-bordure: var(--color-primary-200); --sm-sur-accent: var(--color-white); --sm-rouge: var(--color-red-700); --sm-rouge-fond: var(--color-red-50); --sm-rouge-bordure: var(--color-red-200); --sm-vert: var(--color-green-700); --sm-vert-fond: var(--color-green-50); --sm-vert-bordure: var(--color-green-200); --sm-violet: var(--color-purple-700); --sm-violet-fond: var(--color-purple-100); --sm-violet-bordure: var(--color-purple-300); /* Millésime clôturé : neutre, pour ne pas concurrencer les badges de type. */ --sm-neutre: var(--color-base-600); --sm-neutre-fond: var(--color-base-100); --sm-neutre-bordure: var(--color-base-300); } html.dark { --sm-fond: var(--color-base-900); --sm-fond-alt: var(--color-base-800); --sm-bordure: var(--color-base-700); --sm-bordure-forte: var(--color-base-600); --sm-texte: var(--color-font-important-dark); --sm-texte-2: var(--color-font-default-dark); --sm-attenue: var(--color-font-subtle-dark); --sm-accent: var(--color-primary-400); --sm-accent-fond: var(--color-primary-950); --sm-accent-fond2: var(--color-primary-900); --sm-accent-bordure: var(--color-primary-800); --sm-rouge: var(--color-red-400); --sm-rouge-fond: var(--color-red-900); --sm-rouge-bordure: var(--color-red-800); --sm-vert: var(--color-green-400); --sm-vert-fond: var(--color-green-900); --sm-vert-bordure: var(--color-green-800); --sm-violet: var(--color-purple-400); --sm-violet-fond: var(--color-purple-900); --sm-violet-bordure: var(--color-purple-700); --sm-neutre: var(--color-base-400); --sm-neutre-fond: var(--color-base-800); --sm-neutre-bordure: var(--color-base-600); } /* ── Racine du composant ─────────────────────────────────────────────────── */ /* `position: relative` porté par le champ, pas par la racine : la liste de suggestions se cale sur la largeur du champ de recherche. */ .idx-champ { position: relative; } /* ── Tags des missions cochées ───────────────────────────────────────────── */ .idx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .idx-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--sm-accent-fond); color: var(--sm-accent); border: 1px solid var(--sm-accent-bordure); } .idx-tag-label { overflow: hidden; text-overflow: ellipsis; } .idx-tag-remove { cursor: pointer; opacity: .55; font-size: 14px; line-height: 1; flex-shrink: 0; } .idx-tag-remove:hover { opacity: 1; } /* ── Filtres par type de mission ─────────────────────────────────────────── */ /* Grille 2×2 : en flex, les 4 puces retombaient en 3 + 1 sur 380px. */ .idx-filters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-bottom: 6px; } .idx-filter-chip { padding: 3px 9px; border: 1px solid var(--sm-bordure); border-radius: 999px; background: var(--sm-fond); color: var(--sm-texte-2); font-size: 12px; line-height: 1.4; cursor: pointer; } .idx-filter-chip:hover { background: var(--sm-fond-alt); } .idx-filter-chip.active { background: var(--sm-accent); border-color: var(--sm-accent); color: var(--sm-sur-accent); font-weight: 500; } /* ── Champ de recherche ──────────────────────────────────────────────────── */ /* La page d'aperçu habille ses `input` via `.sidebar-field input` ; la modale, elle, n'a rien. On pose donc ici l'habillage minimal du champ, sans quoi il arrive nu dans la modale. */ .idx-search { width: 100%; padding: 6px 10px; border: 1px solid var(--sm-bordure); border-radius: 4px; background: var(--sm-fond); color: var(--sm-texte); font-size: 13px; } .idx-search:focus { outline: none; border-color: var(--sm-accent); } /* ── Liste de suggestions ────────────────────────────────────────────────── */ .idx-suggest-box { position: absolute; z-index: 50; left: 0; right: 0; max-height: 360px; overflow-y: auto; background: var(--sm-fond); border: 1px solid var(--sm-bordure-forte); border-radius: 4px; margin-top: 2px; } .idx-suggest-item { padding: 7px 10px; border-bottom: 1px solid var(--sm-bordure); cursor: pointer; } .idx-suggest-item:last-child { border-bottom: none; } /* Une ligne cochée reste dans la liste : fond d'accent très clair, accordé à la palette des tags. Le survol et la ligne active (clavier) doivent rester lisibles par-dessus, d'où leur déclaration après. */ .idx-suggest-item.selected { background: var(--sm-accent-fond); } .idx-suggest-item:hover, .idx-suggest-item.active { background: var(--sm-fond-alt); } .idx-suggest-item.selected:hover, .idx-suggest-item.selected.active { background: var(--sm-accent-fond2); } /* Toujours présente pour réserver sa place : cocher ne décale rien. */ .idx-check { flex-shrink: 0; width: 12px; color: var(--sm-accent); font-size: 12px; font-weight: 700; visibility: hidden; } .idx-suggest-item.selected .idx-check { visibility: visible; } /* coche + numéro à gauche, badges repoussés à droite */ .idx-item-head { display: flex; align-items: center; gap: 8px; } .idx-item-num { font-size: 13px; font-weight: 600; color: var(--sm-texte); font-variant-numeric: tabular-nums; } .idx-item-child { margin-top: 2px; padding-left: 20px; /* largeur de la coche + gap : aligné sous le numéro */ font-size: 12px; color: var(--sm-attenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Badges ──────────────────────────────────────────────────────────────── */ /* Les badges sont groupés : `margin-left: auto` porté par le groupe, sinon chacun pousse le suivant et statut et type se séparent aux deux bouts. */ .idx-item-badges { display: flex; align-items: center; gap: 4px; margin-left: auto; } .idx-badge { flex-shrink: 0; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; border: 1px solid; } .idx-badge-penal { background: var(--sm-rouge-fond); color: var(--sm-rouge); border-color: var(--sm-rouge-bordure); } .idx-badge-ae { background: var(--sm-vert-fond); color: var(--sm-vert); border-color: var(--sm-vert-bordure); } .idx-badge-civil { background: var(--sm-accent-fond); color: var(--sm-accent); border-color: var(--sm-accent-bordure); } .idx-badge-ceseda { background: var(--sm-violet-fond); color: var(--sm-violet); border-color: var(--sm-violet-bordure); } /* Statut, pour les missions qui ne sont plus en cours : on peut y rattacher un document (correction d'un classement passé), il faut juste le voir. */ .idx-badge-statut { background: var(--sm-neutre-fond); color: var(--sm-neutre); border-color: var(--sm-neutre-bordure); text-transform: none; } .idx-empty { padding: 10px; font-size: 12px; color: var(--sm-attenue); font-style: italic; } .idx-aide { display: block; font-size: 12px; color: var(--sm-attenue); margin-top: 4px; }