/* Habillage de #template-organize-modal (js/template-organize-modal.js). Voile, cadre et trois zones viennent de la base commune des fenêtres (css/modal-base.css, js/modal-base.js). Les lignes de la liste réutilisent telles quelles .tts-row, .tts-icon, .tts-pin-btn, .tts-folder-caret, .tts-section-label et .tts-group de css/template-tree-select.css ; seul ce qui est nouveau (recherche, « Déplacer vers… », indice de dossier des épinglés) a sa règle ici. */ /* Polices, tailles, marges et bouton de fermeture alignés sur les fenêtres de gabarit proche (#macro-editor-modal, #template-gallery-modal, css/toolbar-v2.css) : sans cela, tout hériterait des défauts du navigateur. */ /* Tient dans la fenêtre quelle que soit sa hauteur : le cadre est plafonné à la hauteur du panneau moins 12 px de chaque côté (css/modal-base.css) ; titre, explication et recherche forment l'en-tête fixe, « Fermer » reste en bas, et seule la liste rétrécit et défile (zone de contenu). Écarts : 10 px entre les blocs de l'en-tête et avant la liste, 24 px avant « Fermer ». */ .template-organize-modal-content { --pp-modal-title-gap: 10px; --pp-modal-actions-gap: 24px; } .template-organize-modal-content .pp-modal-header { display: flex; flex-direction: column; gap: 10px; } .template-organize-modal-content .pp-modal-header h3 { margin-bottom: 12px; } .template-organize-intro { margin: 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.4; } .template-organize-search { display: flex; gap: 6px; } .template-organize-search input { flex: 1; height: 30px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 10px; font-family: var(--font-ui); font-size: 12.5px; background: var(--surface); color: var(--text); } .tom-new-folder-btn { flex: none; height: 30px; padding: 0 10px; font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; } .tom-new-folder-btn:hover { background: var(--surface-sunken); } .template-organize-list { max-height: 360px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } /* Deux classes : la zone de contenu de la base (`.pp-modal-body`, css/modal-base.css, chargée après ce fichier) pose `min-height: 0` et `padding: 0 20px`, qu'une seule classe ne battrait pas. */ .template-organize-modal-content .template-organize-list { min-height: 72px; margin: 0 20px; padding: 4px; } .template-organize-modal-content .modal-actions button { font-family: var(--font-ui); font-weight: 600; font-size: 13px; height: 30px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; } .template-organize-modal-content .modal-actions button:hover { background: var(--surface-sunken); } /* Ces lignes ne sélectionnent rien au clic (contrairement à .tts-popup) : seul un dossier réagit (dépliage), d'où l'absence du curseur « pointer » hérité de .tts-row, fausse affordance. « grab » : les lignes sont draggable (js/template-organize-modal.js:makeLeafRow). */ #template-organize-list .tts-row-leaf { cursor: grab; } .tom-folder-hint { flex: none; font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; } .tom-move-btn { flex: none; border: none; background: transparent; color: var(--text-faint); font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 6px; border-radius: var(--radius-sm); cursor: pointer; opacity: 0; } .tts-row:hover .tom-move-btn, .tts-row:focus-within .tom-move-btn { opacity: 1; } @media not (hover: hover) { /* Sur tactile, ce bouton reste visible plutôt que de dépendre d'un :hover qui ne se déclenchera jamais. */ .tom-move-btn { opacity: 1; } } .tom-move-btn:hover { background: var(--surface-sunken); color: var(--text); } .tom-empty { padding: 16px 8px; text-align: center; font-size: 12.5px; color: var(--text-faint); } /* Glisser-déposer et boutons « + » : voir pendingFolder dans l'en-tête de js/template-organize-modal.js. */ .tom-dragging { opacity: 0.4; } /* accent-soft (pas surface-sunken) : les lignes dossier ont elles-mêmes un fond surface-sunken, la cible du glisser-déposer doit s'en détacher. */ .tom-drop-target { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; } .tom-add-subfolder-btn { flex: none; border: none; background: transparent; color: var(--text-faint); font: inherit; font-size: 13px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: var(--radius-sm); cursor: pointer; opacity: 0; } .tts-row-folder:hover .tom-add-subfolder-btn, .tts-row-folder:focus-within .tom-add-subfolder-btn { opacity: 1; } @media not (hover: hover) { .tom-add-subfolder-btn { opacity: 1; } } .tom-add-subfolder-btn:hover { background: var(--surface); color: var(--text); } .tom-place-here-btn { flex: none; border: 1px solid var(--accent); background: transparent; color: var(--accent); font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 6px; border-radius: var(--radius-sm); cursor: pointer; } .tom-place-here-btn:hover { background: var(--accent); color: var(--surface); } .tom-pending-folder { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-style: italic; color: var(--text-faint); background: transparent; } /* Pas de vrai caret ici (rien à replier tant que le dossier n'existe pas) : masqué plutôt que retiré, pour garder l'alignement avec les lignes dossier réelles. */ .tom-pending-folder .tts-folder-caret { visibility: hidden; } .tom-pending-folder .tts-row-label { font-style: italic; font-weight: 600; } .tom-pending-hint { flex: 1; min-width: 0; font-size: 11px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tom-cancel-pending-btn { flex: none; border: none; background: transparent; color: var(--text-faint); font: inherit; font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: var(--radius-sm); cursor: pointer; } .tom-cancel-pending-btn:hover { background: var(--surface-sunken); color: var(--text); } /* Interrupteur « ce dossier s'ouvre déplié ou replié dans la liste déroulante » : une icône par ligne dossier (réelle ou en attente), deux tracés qui montrent l'état (déplié : contenu sous l'en-tête ; replié : en-tête seul et trois points, accent). Ni la punaise, ni l'étoile, ni un chevron. Toujours visible, contrairement à l'épingle : c'est un état à lire d'un coup d'œil. padding: 0 : le padding natif d'un