/********************************************************\ * * Extension Html pour le framework AKTONE * * Gestion des entités Html * et composants principaux pour la mise en page * * © april 2011 - 2024 / All rights reserved * NETLAB && Samuel Tronçon * \********************************************************/ /* Par défaut : aktone-bloc-corps est en row (existant) */ /* Empile en dessous de sm (576px) */ @media (max-width: 575.98px) { .aktone-bloc-corps.aktone-pile-sm > * { flex: 0 0 100%; } } /* Empile en dessous de md (768px) — le plus courant */ @media (max-width: 767.98px) { .aktone-bloc-corps.aktone-pile-md > * { flex: 0 0 100%; } } /* Empile en dessous de lg (992px) */ @media (max-width: 991.98px) { .aktone-bloc-corps.aktone-pile-lg > * { flex: 0 0 100%; } } /******************************************************************************/ /* TYPOGRAPHIE /******************************************************************************/ body { font-family: "ak-screen-texte", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--ak-font-base); font-weight: var(--ak-font-weight); line-height: var(--ak-line-height); color: var(--ak-body-color); background-color: var(--ak-body-bg); /* Bootstrap 5 — composants calés sur le font-size de body 1em = relatif à body → ils scalent quand aktone-font-base change Surchargé par autopublic.css pour les pages publiques */ --bs-body-font-size: var(--ak-font-base); --bs-btn-font-size: 1em; --bs-btn-font-size-sm: 0.875em; --bs-btn-font-size-lg: 1.125em; --bs-form-control-font-size: 1em; --bs-nav-link-font-size: 1em; --bs-navbar-brand-font-size: 1.125em; --bs-dropdown-font-size: 1em; /* Gouttière Bootstrap disponible globalement — colonnes fonctionnent avec ou sans .row parent (notamment dans aktone-bloc-corps) */ --bs-gutter-x: var(--ak-ecart-unite); --bs-gutter-y: 0; } h1, .h1 { font-size: var(--ak-h1); } h2, .h2 { font-size: var(--ak-h2); } h3, .h3 { font-size: var(--ak-h3); } h4, .h4 { font-size: var(--ak-h4); } h5, .h5 { font-size: var(--ak-h5); } h6, .h6 { font-size: var(--ak-h6); } .display-1 { font-size: var(--ak-display-1); } .display-2 { font-size: var(--ak-display-2); } .display-3 { font-size: var(--ak-display-3); } .display-4 { font-size: var(--ak-display-4); } .display-5 { font-size: var(--ak-display-5); } .display-6 { font-size: var(--ak-display-6); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: "ak-screen-titraille", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .btn { font-family: "ak-screen-actions", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--ak-font-base); } .nav { font-family: "ak-screen-actions", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .navbar { font-family: "ak-screen-actions", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } .panel-title { font-family: "ak-screen-actions", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; } /******************************************************************************/ /* COULEURS BOOTSTRAP 5 — mappées depuis cssvars.php /* /* Niveau body : variables sémantiques BS5 (utilities bg-*, text-*, border-*) /* Niveau composant : boutons, alertes, badges, nav-pills /* default → secondary BS5 + classe .btn-default custom /******************************************************************************/ /* --- Variables sémantiques BS5 sur body --- */ body { /* PRIMARY */ --bs-primary: var(--primary-base); --bs-primary-rgb: var(--primary-base-rgb); --bs-primary-bg-subtle: var(--primary-subtle); --bs-primary-border-subtle: var(--primary-hover); --bs-primary-text-emphasis: var(--primary-hover); /* WARNING */ --bs-warning: var(--warning-base); --bs-warning-rgb: var(--warning-base-rgb); --bs-warning-bg-subtle: var(--warning-subtle); --bs-warning-border-subtle: var(--warning-hover); --bs-warning-text-emphasis: var(--warning-hover); /* DANGER */ --bs-danger: var(--danger-base); --bs-danger-rgb: var(--danger-base-rgb); --bs-danger-bg-subtle: var(--danger-subtle); --bs-danger-border-subtle: var(--danger-hover); --bs-danger-text-emphasis: var(--danger-hover); /* SUCCESS */ --bs-success: var(--success-base); --bs-success-rgb: var(--success-base-rgb); --bs-success-bg-subtle: var(--success-subtle); --bs-success-border-subtle: var(--success-hover); --bs-success-text-emphasis: var(--success-hover); /* INFO */ --bs-info: var(--info-base); --bs-info-rgb: var(--info-base-rgb); --bs-info-bg-subtle: var(--info-subtle); --bs-info-border-subtle: var(--info-hover); --bs-info-text-emphasis: var(--info-hover); /* SECONDARY (= default aktone) */ --bs-secondary: var(--default-base); --bs-secondary-rgb: var(--default-base-rgb); --bs-secondary-bg-subtle: var(--default-subtle); --bs-secondary-border-subtle: var(--default-hover); --bs-secondary-text-emphasis: var(--default-texte); /* LINK */ --bs-link-color: var(--primary-base); --bs-link-hover-color: var(--primary-hover); /* BODY */ --bs-body-color: var(--ak-body-color); --bs-body-bg: var(--ak-body-bg); } /* --- BOUTONS PLEINS --- */ .btn-primary { --bs-btn-color: var(--primary-texte); --bs-btn-bg: var(--primary-base); --bs-btn-border-color: var(--primary-base); --bs-btn-hover-color: var(--primary-texte); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-focus-shadow-rgb: var(--primary-base-rgb); --bs-btn-active-color: var(--primary-texte); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color:var(--primary-hover); --bs-btn-disabled-bg: var(--primary-base); --bs-btn-disabled-border-color:var(--primary-base); } .btn-warning { --bs-btn-color: var(--warning-texte); --bs-btn-bg: var(--warning-base); --bs-btn-border-color: var(--warning-base); --bs-btn-hover-color: var(--warning-texte); --bs-btn-hover-bg: var(--warning-hover); --bs-btn-hover-border-color: var(--warning-hover); --bs-btn-focus-shadow-rgb: var(--warning-base-rgb); --bs-btn-active-color: var(--warning-texte); --bs-btn-active-bg: var(--warning-hover); --bs-btn-active-border-color:var(--warning-hover); } .btn-danger { --bs-btn-color: var(--danger-texte); --bs-btn-bg: var(--danger-base); --bs-btn-border-color: var(--danger-base); --bs-btn-hover-color: var(--danger-texte); --bs-btn-hover-bg: var(--danger-hover); --bs-btn-hover-border-color: var(--danger-hover); --bs-btn-focus-shadow-rgb: var(--danger-base-rgb); --bs-btn-active-color: var(--danger-texte); --bs-btn-active-bg: var(--danger-hover); --bs-btn-active-border-color:var(--danger-hover); } .btn-success { --bs-btn-color: var(--success-texte); --bs-btn-bg: var(--success-base); --bs-btn-border-color: var(--success-base); --bs-btn-hover-color: var(--success-texte); --bs-btn-hover-bg: var(--success-hover); --bs-btn-hover-border-color: var(--success-hover); --bs-btn-focus-shadow-rgb: var(--success-base-rgb); --bs-btn-active-color: var(--success-texte); --bs-btn-active-bg: var(--success-hover); --bs-btn-active-border-color:var(--success-hover); } .btn-info { --bs-btn-color: var(--info-texte); --bs-btn-bg: var(--info-base); --bs-btn-border-color: var(--info-base); --bs-btn-hover-color: var(--info-texte); --bs-btn-hover-bg: var(--info-hover); --bs-btn-hover-border-color: var(--info-hover); --bs-btn-focus-shadow-rgb: var(--info-base-rgb); --bs-btn-active-color: var(--info-texte); --bs-btn-active-bg: var(--info-hover); --bs-btn-active-border-color:var(--info-hover); } .btn-secondary { --bs-btn-color: var(--default-texte); --bs-btn-bg: var(--default-base); --bs-btn-border-color: var(--default-hover); --bs-btn-hover-color: var(--default-texte); --bs-btn-hover-bg: var(--default-hover); --bs-btn-hover-border-color: var(--default-hover); --bs-btn-focus-shadow-rgb: var(--default-base-rgb); --bs-btn-active-color: var(--default-texte); --bs-btn-active-bg: var(--default-hover); --bs-btn-active-border-color:var(--default-hover); } /* Classe historique BS3 — alias de secondary */ .btn-default { --bs-btn-color: var(--default-texte); --bs-btn-bg: var(--default-base); --bs-btn-border-color: var(--default-hover); --bs-btn-hover-color: var(--default-texte); --bs-btn-hover-bg: var(--default-hover); --bs-btn-hover-border-color: var(--default-hover); --bs-btn-active-color: var(--default-texte); --bs-btn-active-bg: var(--default-hover); --bs-btn-active-border-color:var(--default-hover); } /* --- BOUTONS OUTLINE --- */ .btn-outline-primary { --bs-btn-color: var(--primary-base); --bs-btn-border-color: var(--primary-base); --bs-btn-hover-color: var(--primary-texte); --bs-btn-hover-bg: var(--primary-base); --bs-btn-hover-border-color: var(--primary-base); --bs-btn-active-color: var(--primary-texte); --bs-btn-active-bg: var(--primary-base); --bs-btn-active-border-color:var(--primary-base); } .btn-outline-warning { --bs-btn-color: var(--warning-base); --bs-btn-border-color: var(--warning-base); --bs-btn-hover-color: var(--warning-texte); --bs-btn-hover-bg: var(--warning-base); --bs-btn-hover-border-color: var(--warning-base); --bs-btn-active-color: var(--warning-texte); --bs-btn-active-bg: var(--warning-base); --bs-btn-active-border-color:var(--warning-base); } .btn-outline-danger { --bs-btn-color: var(--danger-base); --bs-btn-border-color: var(--danger-base); --bs-btn-hover-color: var(--danger-texte); --bs-btn-hover-bg: var(--danger-base); --bs-btn-hover-border-color: var(--danger-base); --bs-btn-active-color: var(--danger-texte); --bs-btn-active-bg: var(--danger-base); --bs-btn-active-border-color:var(--danger-base); } .btn-outline-success { --bs-btn-color: var(--success-base); --bs-btn-border-color: var(--success-base); --bs-btn-hover-color: var(--success-texte); --bs-btn-hover-bg: var(--success-base); --bs-btn-hover-border-color: var(--success-base); --bs-btn-active-color: var(--success-texte); --bs-btn-active-bg: var(--success-base); --bs-btn-active-border-color:var(--success-base); } .btn-outline-info { --bs-btn-color: var(--info-base); --bs-btn-border-color: var(--info-base); --bs-btn-hover-color: var(--info-texte); --bs-btn-hover-bg: var(--info-base); --bs-btn-hover-border-color: var(--info-base); --bs-btn-active-color: var(--info-texte); --bs-btn-active-bg: var(--info-base); --bs-btn-active-border-color:var(--info-base); } /* --- ALERTES --- */ .alert-primary { --bs-alert-color: var(--primary-hover); --bs-alert-bg: var(--primary-subtle); --bs-alert-border-color: var(--primary-hover); } .alert-warning { --bs-alert-color: var(--warning-hover); --bs-alert-bg: var(--warning-subtle); --bs-alert-border-color: var(--warning-hover); } .alert-danger { --bs-alert-color: var(--danger-hover); --bs-alert-bg: var(--danger-subtle); --bs-alert-border-color: var(--danger-hover); } .alert-success { --bs-alert-color: var(--success-hover); --bs-alert-bg: var(--success-subtle); --bs-alert-border-color: var(--success-hover); } .alert-info { --bs-alert-color: var(--info-hover); --bs-alert-bg: var(--info-subtle); --bs-alert-border-color: var(--info-hover); } .alert-secondary{ --bs-alert-color: var(--default-texte); --bs-alert-bg: var(--default-subtle); --bs-alert-border-color: var(--default-hover); } /* --- BADGES --- */ .text-bg-primary { background-color: var(--primary-base) !important; color: var(--primary-texte) !important; } .text-bg-warning { background-color: var(--warning-base) !important; color: var(--warning-texte) !important; } .text-bg-danger { background-color: var(--danger-base) !important; color: var(--danger-texte) !important; } .text-bg-success { background-color: var(--success-base) !important; color: var(--success-texte) !important; } .text-bg-info { background-color: var(--info-base) !important; color: var(--info-texte) !important; } .text-bg-secondary{ background-color: var(--default-base) !important; color: var(--default-texte) !important; } /* --- NAV PILLS --- */ .nav-pills { --bs-nav-pills-link-active-color: var(--primary-texte); --bs-nav-pills-link-active-bg: var(--primary-base); } /* --- NAVBAR --- */ .navbar.bg-primary { background-color: var(--nav-base) !important; --bs-navbar-color: var(--nav-texte); --bs-navbar-hover-color: var(--nav-texte); --bs-navbar-active-color: var(--nav-texte); --bs-navbar-brand-color: var(--nav-texte); } .navbar.bg-dark { background-color: var(--nav-base-defaut) !important; --bs-navbar-color: var(--nav-texte); --bs-navbar-hover-color: var(--nav-texte); --bs-navbar-active-color: var(--nav-texte); --bs-navbar-brand-color: var(--nav-texte); } /******************************************************************************/ /* COMPOSANT MATRIX (html-intra) /* Grille interne flexible pour formulaires et tableaux imbriqués /******************************************************************************/ .html-intra { position: relative; width: 100%; max-width: 100%; height: 100%; min-height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; align-content: stretch; } .html-intra-t { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; align-content: stretch; } .html-intra-l { width: 100%; flex: 1 1 auto; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; align-content: stretch; } .html-intra-c, .html-intra-h { max-width: 100%; flex-grow: 1; flex-shrink: 0; flex-basis: auto; display: flex; flex-wrap: nowrap; align-items: stretch; align-content: stretch; padding-right: 5px; } .html-intra-c:last-child, .html-intra-h:last-child { padding-right: 0; } .html-intra-c .bs_form_groupe { width: 100%; } .html-intra-txt { flex-direction: column; } .html-intra-noflex { display: block; } /* Réserver en permanence l'espace de l'icône de validation Bootstrap : .is-valid/.is-invalid ajoutent un padding-right pour l'icône, ce qui décale la mise en page flex (pas de largeur fixe ici) entre une ligne tout juste validée et ses voisines. On fige ce padding pour que rien ne bouge quand la classe apparaît/disparaît. */ .html-intra-c .form-control, .html-intra-h .form-control { padding-right: calc(1.5em + 0.75rem); } .html-intra-c .form-select, .html-intra-h .form-select { padding-right: 4.125rem; } /* Actions alignées à droite dans la matrice */ .html-intra-x { flex: 1 1 auto; } .html-intra-x.html-intra-xd { display: flex; justify-content: flex-end; } .html-intra-x.html-intra-xd .btn, .html-intra-x.html-intra-xd .bs_btngrp { flex-shrink: 0; } /* DANS UNE VRAIE TABLE, LA CELLULE D'ACTIONS RESTE UNE CELLULE (H11) * * @warn `display: flex` SORT UNE CELLULE DE LA MISE EN PAGE DU TABLEAU. * * La règle ci-dessus est écrite pour la matrice — une grille flex, où les * cellules sont des div. Le même colonnage alimente aussi le rendu en * `` (cf. htmlTableau) : le `td` d'actions y recevait donc * `display: flex`, cessait d'être un `table-cell`, et ne partageait plus * la hauteur de sa ligne. Le décalage naissait sur la première ligne et * se propageait à toutes les suivantes. * * Il était masqué jusqu'ici par un défaut de rendu : `htmlMatrix` collait * la classe à la précédente (`colhtml-intra-xd`), donc ce sélecteur ne * trouvait jamais sa cible. Il est devenu visible quand cette classe a * cessé d'être collée. * * On rend la cellule à la table, et l'alignement à droite se fait par les * moyens du modèle tabulaire. */ td.html-intra-x.html-intra-xd, th.html-intra-x.html-intra-xd { display: table-cell; text-align: right; vertical-align: middle; white-space: nowrap; } /* Espacement identique table/matrice */ .html-intra-form .html-intra-c, .html-intra-form .html-intra-h, .html-intra-form .html-intra-x { padding: calc(var(--ak-ecart-unite) / 2); } .html-intra-form .html-intra-c:first-child, .html-intra-form .html-intra-h:first-child { padding-left: 0; } .html-intra-form .html-intra-c:last-child, .html-intra-form .html-intra-h:last-child { padding-right: 0; } /* HAUTEUR DE CONTRÔLE DANS LA MATRICE (H10) * * La matrice est une grille flex, pas une table : ses lignes n'ont pas de * hauteur propre et `align-items: stretch` ÉTIRE ce qu'elles contiennent — un * bouton y prend donc la hauteur de la cellule la plus haute. * * On lui applique la même hauteur de contrôle qu'aux tables. Aucune classe * n'est nécessaire : `tr`/`td`/`th` n'ont pas de mapping `taille` dans * config/styles.php, et `--ak-ctrl-h` arrive par héritage — de la densité du * bloc, ou de `:root` qui vaut `md`. */ .html-intra-l { min-height: calc(var(--ak-ctrl-h) + var(--ak-ecart-unite)); } /* Le bouton garde sa hauteur propre au lieu de s'étirer sur la ligne. */ .html-intra-c > .btn, .html-intra-h > .btn, .html-intra-x .btn { align-self: center; } /* Le bouton d'une fiche mono ne se comprime pas. Sans ça, un libellé un peu long se replie sur deux ou trois lignes dans une cellule qui avait pourtant la place : la cellule d'action du mono ne porte aucune classe de dimension (htmlMatrix : $cmp = NULL en monoXmult), le bouton est donc un enfant flex librement rétrécissable. Même règle que la variante `-xd` du multi. */ .html-intra-x.html-intra-mono .btn, .html-intra-x.html-intra-mono .bs_btngrp { flex-shrink: 0; } /* L'INTITULÉ SE CALE AU MILIEU DE SA LIGNE, PAS EN HAUT. La colonne de gauche d'une fiche mono porte des noms de champ d'une seule ligne, en face de valeurs qui peuvent en faire trois — ou d'un textarea de dix lignes. Accroché en haut, le nom ne désignait plus visuellement sa valeur. Deux règles pour une seule intention, parce que la matrice sort DEUX balises selon le contexte (htmlMatrix : $divXtab) : - un `div` flex quand elle compose une grille (formulaires), - une vraie cellule `th` de `
` en fiche mono d'affichage, qui est précisément le cas ici — et où `align-items` n'a aucun effet. */ .html-intra-h { align-items: center; } th.html-intra-th { vertical-align: middle; } /* Le champ prend la hauteur de contrôle — sauf le textarea, dont la hauteur est le nombre de lignes qu'on veut voir. */ .html-intra-c .form-control:not(textarea), .html-intra-h .form-control:not(textarea), .html-intra-c .form-select, .html-intra-h .form-select { height: var(--ak-ctrl-h); } /* Pas de bordure dans les cellules table */ td.html-intra-mono { border-width: 0 !important; padding: var(--ak-ecart-unite) 0 !important; } /* Version compacte */ .aktone-compact .html-intra-form .html-intra-c, .aktone-compact .html-intra-form .html-intra-h, .aktone-compact .html-intra-form .html-intra-x { padding: 0; } /******************************************************************************/ /* COMPOSANTS AKTONE /******************************************************************************/ /* UN SEUL CURSEUR POUR TOUT CE QUI DÉCLENCHE UNE ACTION. * * Bootstrap pose `cursor: pointer` sur `.btn`, et nulle part ailleurs : un * lien d'action, un item de nav ou un en-tête de tri gardaient donc le * curseur de texte, et rien ne permettait de changer le curseur d'action de * l'interface d'un seul endroit. Toutes ces surfaces passent maintenant par * --ak-curseur-action (extensions/aktone/config/cssvars.php) — un module qui * veut un autre curseur redéfinit la variable, pas huit règles. * * La valeur de repli `pointer` sert aux contextes qui ne montent pas les * variables aktone (impression, page publique minimale). */ .btn, .aktone-link, .aktone-trieur, .nav-link, .dropdown-item, .page-link, .accordion-button, summary { cursor: var(--ak-curseur-action, pointer); } /* EN-TÊTE DE COLONNE TRIABLE (Html/exec/controle.php) * * L'en-tête est un `` sans `.btn` : il ramassait donc le soulignement que * le reboot BS5 met sur tout lien, ce qui barrait la ligne de titres d'un * tableau d'un trait continu. Et comme un `th` est gras par nature, les * colonnes étaient TOUTES en gras — le gras ne disait plus rien. * * On rend donc les deux marques signifiantes : * - le survol dessine une pastille au lieu d'un soulignement, ce qui * montre la surface cliquable au lieu de décorer le texte ; * - le gras et la couleur d'accent sont réservés à la colonne qui porte * le tri courant (`.aktone-trieur-actif`, posée côté PHP). * * Les marges négatives compensent le padding : la pastille déborde de * l'intitulé au survol sans décaler la ligne de titres au repos. */ .aktone-trieur { color: inherit; font-weight: var(--ak-font-weight, 400); text-decoration: none; white-space: nowrap; padding: 0.1em 0.4em; margin: 0 -0.4em; border-radius: calc(var(--ak-radius, 12px) / 4); transition: background-color 0.12s ease, color 0.12s ease; /* L'INTITULÉ SE CALE SUR LES CONTRÔLES DU TABLEAU, PAS SUR LE TEXTE DE LA PAGE. * * Le lien de tri n'est pas un `.btn` : il ne recevait donc aucune des * tailles que la densité pose sur les boutons, et gardait la police * héritée du corps de page — plus grosse que les liens et boutons des * cellules, alors qu'il est un contrôle comme eux. * * `--ak-ctrl-font` est précisément « la police d'un contrôle dans le * contexte courant » : elle vient de la densité du bloc, et le tableau la * redéfinit lui-même via table-xs/sm/md/lg (cf. HAUTEUR DE CONTRÔLE plus * bas). L'en-tête suit donc la taille du tableau qui le porte, sans * facteur fixe à réajuster à chaque densité. */ font-size: var(--ak-ctrl-font, 1rem); } .aktone-trieur:hover, .aktone-trieur:focus-visible { color: var(--ak-back-link); background-color: var(--ak-back-more); text-decoration: none; } .aktone-trieur-actif, .aktone-trieur-actif:hover { color: var(--ak-back-link); font-weight: 600; } /* Le chevron ne s'affirme que sur la colonne qui trie ; ailleurs il reste une indication discrète de « cette colonne est triable ». */ .aktone-trieur i { opacity: 0.25; transition: opacity 0.12s ease; } .aktone-trieur:hover i { opacity: 0.6; } .aktone-trieur-actif i, .aktone-trieur-actif:hover i { opacity: 1; } /* Champ fichier */ .file_input { position: relative; display: flex; align-items: flex-start; width: 100%; gap: 8px; } .file_input input { visibility: hidden; display: none; } .file_input-actions { display: flex; flex-direction: column; flex-shrink: 0; gap: 2px; } /* Illustration (img) — aperçu à gauche, boutons à droite */ .file_input--img .thumbnail { flex: 1 1 auto; min-width: 0; } .file_input--img .thumbnail img { max-height: 160px; width: auto; max-width: 100%; object-fit: contain; display: block; } /* Glisser-déposer un fichier sur l'aperçu */ .file_input--dragover .thumbnail { outline: 2px dashed #008cba; outline-offset: 4px; border-radius: 4px; } /* Document joint (file) — ligne compacte sans aperçu */ .file_input--doc { align-items: center; } .file_input--doc .thumbnail { flex: 1 1 auto; min-width: 0; } .file_input--doc .file_input-actions { flex-direction: row; } .file_input-placeholder { font-size: .8em; font-style: italic; color: #999; } /* Zone de contrôle */ .akControle .bs_drop_toggle_btn, .akControle .bs_bouton, .akControle .bs_form_groupe { margin-bottom: 5px !important; } /* Spinner sur input */ .inputspin { position: relative; } .inputspin::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f110"; color: lightgrey; position: absolute; left: 8px; top: 4px; animation: spin 2000ms linear infinite; } .inputspin input[type="text"] { padding-left: 28px; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /******************************************************************************/ /* NAVBAR — ADAPTATIONS BOOTSTRAP /******************************************************************************/ /* Nav verticale — nouvelle structure */ body.ak-nav-verticale #aktone-page-nav .navbar { display: flex; flex-direction: column; align-items: flex-start; height: 100%; width: 100%; } body.ak-nav-verticale #aktone-page-nav .navbar-nav { flex-direction: column; width: 100%; } body.ak-nav-verticale #aktone-page-nav a.navbar-brand { margin-left: 0; margin-right: 0; width: 100%; padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x); } body.ak-nav-verticale #aktone-page-nav .bs_navbaritem, body.ak-nav-verticale #aktone-page-nav .bs_navbaritem_drop { width: 100%; } /* Nav verticale — ancienne structure (rétrocompat) */ #aktone-page-conteneur-nav .navbar { display: flex; flex-direction: column; align-items: flex-start; height: 100%; } #aktone-page-conteneur-nav .navbar-nav { flex-direction: column; width: 100%; } #aktone-page-conteneur-nav nav { height: 100%; } #aktone-page-conteneur-nav a.navbar-brand { margin-left: 0; margin-right: 0; width: 100%; padding-right: var(--bs-navbar-nav-link-padding-x); padding-left: var(--bs-navbar-nav-link-padding-x); } #aktone-page-conteneur-nav .bs_navbaritem, #aktone-page-conteneur-nav .bs_navbaritem_drop { width: 100%; } /* SEPARATEUR DE GROUPES DE NAV (htmlNavBarre) Marque la coupure entre deux groupes de routes (`index` différents). En barre horizontale : un trait vertical entre deux items. En colonne : un trait pleine largeur. */ .nav > .ak-nav-sep { align-self: center; border-left: 1px solid currentColor; height: 1.2em; margin: 0 calc(var(--ak-ecart-unite) / 2); opacity: 0.35; padding: 0; } .nav.flex-column > .ak-nav-sep, body.ak-nav-verticale #aktone-page-nav .nav > .ak-nav-sep { align-self: stretch; border-left: 0; border-top: 1px solid currentColor; height: 0; margin: calc(var(--ak-ecart-unite) / 2) 0; width: 100%; } #aktone-page-navbar { flex-shrink: 0; padding-bottom: var(--ak-ecart-unite); } #aktone-page-menu { flex-shrink: 3; padding-top: var(--ak-ecart-unite); } /* Alignement à gauche dans la nav verticale */ #aktone-page-conteneur-nav .float-end, body.ak-nav-verticale #aktone-page-nav .float-end { float: none; margin-left: 0; } body.ak-nav-verticale #aktone-page-navbar { padding-bottom: var(--ak-ecart-unite); } body.ak-nav-verticale #aktone-page-menu { padding-top: var(--ak-ecart-unite); } /*******************************************************/ /* Barre horizontale */ /*******************************************************/ #aktone-page-conteneur .navbar-expand-md .navbar-nav.float-start .nav-link { padding-left: 0; } #aktone-page-conteneur .navbar-expand-md .navbar-nav.float-end .nav-link { padding-right: 0; } #aktone-page-navbar.bs_navbar, #aktone-page-menu.bs_navbar { font-size: 0.8em; padding: 0 var(--ak-ecart-unite); min-height: var(--ak-navbar-height); } #aktone-page-conteneur a.navbar-brand { margin-left: var(--ak-ecart-unite); margin-right: var(--ak-ecart-unite); } a.navbar-brand { font-weight: bold; padding-top: 7px; padding-bottom: 7px; } a.navbar-brand img { height: var(--ak-navbrand-height); width: auto; } #aktone-page-navbar { flex-shrink: 0; } #aktone-page-menu { flex-shrink: 3; } /* Icônes dans la navbar */ #aktone-page-tete .navbar { z-index: var(--ak-zindex-nav); min-height: auto; width: 100%; } #aktone-page-tete nav { position: relative; z-index: var(--ak-zindex-nav); width: 100%; } #aktone-page-tete nav.navbar-app { z-index: var(--ak-zindex-nav-sub); } #aktone-page-tete nav i.fas::after { content: '\00a0 '; } #aktone-page-tete .navbar i.fas { padding-right: 0.3em; width: 22px; text-align: center; } #aktone-page-tete .navbar i.fas.float-end { padding-right: 0; padding-left: 0.3em; } #aktone-page-tete .navbar a, .navbar li { text-align: left; } #aktone-page-tete nav li a { padding-top: 7px; padding-bottom: 7px; } /******************************************************************************/ /* EXTENSIONS BOOTSTRAP — COMPOSANTS /******************************************************************************/ /* Labels/badges custom Aktone .label-* : nommage historique conservé (utilisé dans le PHP) .badge-* : aliases BS5 — même rendu, nouveaux noms */ .label, .badge { display: inline-block; padding: .25em .6em; font-size: 75%; font-weight: bold; line-height: 1; color: #ffffff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .35em; } .label:empty, .badge:empty { display: none; } .btn .label, .btn .badge { position: relative; top: -1px; } .label-default, .badge-default { background-color: var(--default-base); } .label-primary, .badge-primary { background-color: var(--primary-base); } .label-success, .badge-success { background-color: var(--success-base); } .label-info, .badge-info { background-color: var(--info-base); } .label-warning, .badge-warning { background-color: var(--warning-base); } .label-danger, .badge-danger { background-color: var(--danger-base); } .label-default[href]:hover, .badge-default[href]:hover { background-color: var(--default-hover); } .label-primary[href]:hover, .badge-primary[href]:hover { background-color: var(--primary-hover); } .label-success[href]:hover, .badge-success[href]:hover { background-color: var(--success-hover); } .label-info[href]:hover, .badge-info[href]:hover { background-color: var(--info-hover); } .label-warning[href]:hover, .badge-warning[href]:hover { background-color: var(--warning-hover); } .label-danger[href]:hover, .badge-danger[href]:hover { background-color: var(--danger-hover); } /* Card */ .card-title { padding: var(--ak-ecart-unite); } /* Tabs */ .tab-pane { display: block; width: 100%; background: var(--ak-div-bg); } /* Gouttière Bootstrap alignée sur l'unité d'espacement Aktone */ .row { --bs-gutter-x: var(--ak-ecart-unite); } /* Tables */ .table td { vertical-align: middle; } .table, .table-responsive, .list-group, .bs_form_label, .bs_panneau { width: 100%; } /* Tables dans un contexte flex — ne pas s'étirer en hauteur */ .aktone-bloc-corps > .table, .aktone-bloc-corps > .table-responsive { align-self: flex-start; width: 100%; } /* Colonnes 1/5 dans une .row Bootstrap */ .col-20, .col-sm-20, .col-md-20, .col-lg-20, .col-xl-20, .col-xxl-20 { flex: 0 0 20%; max-width: 20%; min-height: 1px; } /* Pagination */ .page-link { color: #000 !important; } .active > .page-link { background-color: #000 !important; border-color: #000 !important; color: #FFF !important; } /******************************************************************************/ /* EXTENSIONS BOOTSTRAP — FORMULAIRES /******************************************************************************/ /* Boutons radio et checkbox */ .radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-top: 0; margin-left: 0; } label.radio-inline { margin-right: 10px; } label.checkbox-inline { margin-left: 0; margin-right: 10px; } .radio-inline { margin-right: 10px; } .checkbox-inline { margin-left: 0; margin-right: 10px; } .checkbox-title { display: block; color: #CCC; } label.checkbox:first-child { margin-top: 0; } .html-coche-sub { padding-left: 45px; } /* Mises en page de formulaire */ form.form-inline { margin-bottom: 0; } form.form-inline > .form-group { width: auto; margin-bottom: 0; } form.form-vertical > .btn-group { padding-top: var(--ak-ecart-unite); } form.form-vertical > .form-group:first-child { padding-top: 0; } .list-group-media { padding-top: var(--ak-ecart-unite); } .dropdown-menu-right { right: 0; left: auto; } /******************************************************************************/ /* EXTENSIONS BOOTSTRAP — TAILLES DE BOUTONS ET INPUTS /******************************************************************************/ /* @warn UNE HAUTEUR EN DUR EXIGE UN CENTRAGE EXPLICITE. `height` fige la boîte, mais un bouton reste `inline-block` : son contenu se cale en haut et le padding vertical ne le redescend qu'à moitié. Le texte paraissait donc décalé (constaté le 2026-08-19 sur les `.btn-sm` en cellule). `inline-flex` + `align-items:center` centrent quelle que soit la hauteur. Le `gap` rétablit l'espace glyphe/texte, que le passage en flex supprime — en inline-block c'était l'espace blanc du HTML qui le fournissait. */ .btn-sm, .btn-group-sm > .btn { height: 30px; font-size: 0.875rem; line-height: 1.5; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; } .btn-xs, .btn-group-xs > .btn { height: 22px; padding: 1px 5px; font-size: 0.75rem; line-height: 1.5; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; } .btn-xs .badge { font-size: 0.75rem; padding: 2px 5px; } .input-xs { height: 22px; padding: 1px 5px; font-size: 0.75rem; line-height: 1.5; margin: 0 0 1px; } select.input-xs { height: 22px; line-height: 22px; } textarea.input-xs { height: auto; } .btn-group-sm i.fas { height: 17px; line-height: 17px; } .btn-group-xs i.fas { height: 22px; line-height: 22px; } /******************************************************************************/ /* VARIANTES DE DENSITÉ /* .aktone-moyen = Bootstrap normal (aucune règle nécessaire) /* Les autres redéfinissent --ak-ecart-unite et font-size en cascade. /******************************************************************************/ .aktone-mini { --ak-ecart-unite: 6px; font-size: 0.78rem; --bs-btn-padding-y: 0.1rem; --bs-btn-padding-x: 0.35rem; --bs-btn-font-size: 0.75rem; } .aktone-mini .btn { padding: 0.1rem 0.35rem; font-size: 0.75rem; } .aktone-mini .form-control, .aktone-mini .form-select { padding: 0.1rem 0.35rem; font-size: 0.75rem; } .aktone-mini .form-label { font-size: 0.75rem; margin-bottom: 0.1rem; } .aktone-mini .table td, .aktone-mini .table th { padding: 0.15rem 0.35rem; font-size: 0.78rem; } .aktone-mini .nav-link { padding: 0.2rem 0.4rem; font-size: 0.78rem; } .aktone-mini .card-body { padding: var(--ak-ecart-unite); } .aktone-petit { --ak-ecart-unite: 10px; font-size: 0.875rem; --bs-btn-padding-y: 0.22rem; --bs-btn-padding-x: 0.5rem; --bs-btn-font-size: 0.825rem; } .aktone-petit .btn { padding: 0.22rem 0.5rem; font-size: 0.825rem; } .aktone-petit .form-control, .aktone-petit .form-select { padding: 0.22rem 0.5rem; font-size: 0.85rem; } .aktone-petit .form-label { font-size: 0.85rem; margin-bottom: 0.2rem; } .aktone-petit .table td, .aktone-petit .table th { padding: 0.28rem 0.5rem; font-size: 0.875rem; } .aktone-petit .nav-link { padding: 0.28rem 0.55rem; font-size: 0.875rem; } .aktone-petit .card-body { padding: var(--ak-ecart-unite); } .aktone-grand { --ak-ecart-unite: 20px; font-size: 1.05rem; --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1.05rem; } .aktone-grand .btn { padding: 0.5rem 1rem; font-size: 1.05rem; } .aktone-grand .form-control, .aktone-grand .form-select { padding: 0.5rem 1rem; font-size: 1.05rem; } .aktone-grand .form-label { font-size: 1rem; margin-bottom: 0.4rem; } .aktone-grand .table td, .aktone-grand .table th { padding: 0.65rem 1rem; font-size: 1.05rem; } .aktone-grand .nav-link { padding: 0.5rem 1rem; font-size: 1.05rem; } .aktone-grand .card-body { padding: var(--ak-ecart-unite); } /******************************************************************************/ /* HAUTEUR DE CONTRÔLE — le tableau et ses boutons (H10) /* /* Un bouton posé dans une cellule rendait la ligne plus haute que les autres : /* un tableau changeait donc de dimensions selon qu'on y intégrait ou non des /* actions, et deux tableaux voisins ne s'alignaient plus. /* /* Les trois variantes de densité accordaient DÉJÀ le padding du bouton et /* celui de la cellule. La quatrième ne le faisait pas — « .aktone-moyen = /* Bootstrap normal (aucune règle nécessaire) » — et rien ne l'accordait hors /* d'un bloc htmlDiv*, où aucune classe de densité n'est posée. /* /* LE PRINCIPE : toutes les lignes prennent la hauteur qu'aurait une ligne /* portant un bouton. C'est le choix « hausser la cellule », arbitré le /* 2026-08-19 : les boutons gardent leur taille normale partout, au prix de /* tableaux plus aérés — et d'un texte long qui passe sur deux lignes. /* /* --ak-ctrl-h est la hauteur d'un contrôle dans le contexte courant. Elle est /* posée par la densité, et REDÉFINISSABLE PAR LE TABLEAU : .table-sm/md/lg /* commandent la taille des boutons qu'ils contiennent, ce que Bootstrap ne /* sait pas faire — il n'a ni .table-md, ni .btn-md. /******************************************************************************/ /* Hauteur, padding et police d'un contrôle — valeurs reprises des densités existantes, pour que rien ne bouge là où c'était déjà accordé. */ /* @warn `moyen` VAUT LA POLICE DE BASE DE L'INTERFACE, PAS 1rem. `--ak-font-base` vaut 15px et non 16px : figer la taille moyenne à `1rem` rendait tout contrôle de tableau un pixel plus gros que le texte qui l'entoure — visible sur les intitulés de colonne, qui dépassaient le corps du tableau. `:root` garde `1rem` : il est au-dessus de `body`, où `--ak-font-base` est posée, et ne sert que de repli hors interface (impression, page sans variables). */ :root { --ak-ctrl-h: 2.375rem; --ak-ctrl-pad-y: 0.375rem; --ak-ctrl-pad-x: 0.75rem; --ak-ctrl-font: 1rem; } .aktone-moyen { --ak-ctrl-h: 2.375rem; --ak-ctrl-pad-y: 0.375rem; --ak-ctrl-pad-x: 0.75rem; --ak-ctrl-font: var(--ak-font-base, 1rem); } .aktone-mini { --ak-ctrl-h: 1.5rem; --ak-ctrl-pad-y: 0.1rem; --ak-ctrl-pad-x: 0.35rem; --ak-ctrl-font: 0.75rem; } .aktone-petit { --ak-ctrl-h: 1.85rem; --ak-ctrl-pad-y: 0.22rem; --ak-ctrl-pad-x: 0.5rem; --ak-ctrl-font: 0.825rem; } .aktone-grand { --ak-ctrl-h: 2.75rem; --ak-ctrl-pad-y: 0.5rem; --ak-ctrl-pad-x: 1rem; --ak-ctrl-font: 1.05rem; } /* Le TABLEAU commande la taille de ses contrôles. * * Les quatre classes sont celles qu'émet DÉJÀ la config automatique — * `config/styles.php`, entrée `table` : mini→table-xs, petit→table-sm, * moyen→table-md, grand→table-lg, et `auto` → **table-md**. Rien à traduire * ici : on ne fait que donner un corps à des classes que le système pose seul. * * Les hauteurs sont celles des BOUTONS de même taille, relevées plus haut dans * ce fichier (btn-xs 22px, btn-sm 30px) ou calculées depuis Bootstrap (btn-md * 38px, btn-lg 48px). C'est ce qui rend un `table-sm` et son `btn-sm` * exactement synchrones — l'appariement que Bootstrap ne fait pas. */ .table-xs { --ak-ctrl-h: 22px; --ak-ctrl-pad-y: 1px; --ak-ctrl-pad-x: 5px; --ak-ctrl-font: 0.75rem; } .table-sm { --ak-ctrl-h: 30px; --ak-ctrl-pad-y: 0.22rem; --ak-ctrl-pad-x: 0.5rem; --ak-ctrl-font: 0.875rem; } .table-md { --ak-ctrl-h: 38px; --ak-ctrl-pad-y: 0.375rem; --ak-ctrl-pad-x: 0.75rem; --ak-ctrl-font: var(--ak-font-base, 1rem); } .table-lg { --ak-ctrl-h: 48px; --ak-ctrl-pad-y: 0.5rem; --ak-ctrl-pad-x: 1rem; --ak-ctrl-font: 1.25rem; } /* Toutes les lignes prennent la hauteur d'une ligne à bouton. `height` sur un agit comme un MINIMUM : une cellule dont le contenu déborde s'écrit sur deux lignes et grandit, ce qui est le comportement voulu. */ .table > :not(caption) > tr, .table tr { height: calc(var(--ak-ctrl-h) + 2 * var(--bs-table-cell-padding-y, 0.5rem)); } /* Le bouton en cellule suit la taille du tableau. Déclaré APRÈS les blocs de densité : à spécificité égale (0,2,0), c'est l'ordre qui tranche, et le tableau doit l'emporter sur la densité du bloc. Le centrage est explicite pour la même raison que sur `.btn-sm` : dès qu'une hauteur est imposée, un `inline-block` cale son contenu en haut. */ .table .btn { padding: var(--ak-ctrl-pad-y) var(--ak-ctrl-pad-x); font-size: var(--ak-ctrl-font); display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; } /* LES CHAMPS À LA HAUTEUR EXACTE DES BOUTONS * * C'est la condition pour aligner un input et son bouton dans une même cellule. * Les hauteurs sont celles des `.btn-*` correspondants : xs 22px, sm 30px, * md 38px, lg 48px. Bootstrap n'a ni `form-control-xs` ni `form-control-md`, * et ne garantit pas l'égalité avec les boutons — on la pose. * * `height` plutôt que du padding : un champ n'a pas de contenu qui déborde, * la hauteur peut être ferme. */ .form-control-xs, .form-select-xs { height: 22px; padding: 1px 5px; font-size: 0.75rem; line-height: 1.5; } .form-control-sm, .form-select-sm { height: 30px; padding: 0.22rem 0.5rem; font-size: 0.875rem; line-height: 1.5; } .form-control-md, .form-select-md { height: 38px; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; } .form-control-lg, .form-select-lg { height: 48px; padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.5; } /* Dans un tableau, le champ suit la taille de la table comme le bouton : même source, donc même hauteur. Déclaré après les densités, pour la même raison d'ordre que `.table .btn`. */ .table .form-control, .table .form-select { height: var(--ak-ctrl-h); padding: var(--ak-ctrl-pad-y) var(--ak-ctrl-pad-x); font-size: var(--ak-ctrl-font); } /* `.btn-md` n'existe pas chez Bootstrap. On le définit pour que la taille moyenne puisse être NOMMÉE — mais il n'a pas à être posé sur les boutons d'un tableau : `--ak-ctrl-*` s'y transmet par héritage. */ .btn-md, .btn-group-md > .btn { padding: var(--ak-ctrl-pad-y, 0.375rem) var(--ak-ctrl-pad-x, 0.75rem); font-size: var(--ak-ctrl-font, 1rem); display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; } /******************************************************************************/ /* LIBRAIRIE INSIGNA (composant de tags) /******************************************************************************/ input.nsg-input { outline: none; border-color: transparent !important; padding: 0 !important; margin: 4px; width: auto !important; min-width: 30px !important; display: inline-block; } .nsg-editor { padding: 0; cursor: text; } .nsg-tag { display: inline-block; background-color: var(--bs-secondary); color: var(--bs-white); padding: 2px 7px; margin: 4px; border-color: transparent; } .nsg-tag-remove::after { margin-left: 4px; padding: 0 4px; content: 'x'; cursor: pointer; background-color: transparent !important; } .nsg-invalid { border-color: #c00; } .nsg-input[placeholder] { min-width: 100%; } /******************************************************************************/ /* WYSIWYG QUILL /******************************************************************************/ .ql-container { height: auto !important; } .ql-editor { min-height: 150px; } /* @warn quill.snow.css impose `font-family:Helvetica,Arial,sans-serif` et `font-size:13px` sur .ql-container, et sa propre pile Helvetica sur la barre d'outils. L'auteur saisissait donc dans une fonte et une taille qui ne sont pas celles du module, et ne voyait pas ce qu'il allait publier. On rend la surface d'édition transparente : les fontes restent celles du module (ak-screen-texte, --ak-font-base). Rien à nettoyer dans le contenu déjà stocké — relevé le 2026-09-09, aucun des 204 champs WYSIWYG d'autopublic ne porte de font-family, de font-size ni de classe ql-font : la barre par défaut de Quill 2 (titres, gras, italique, souligné, lien, listes, clean) n'expose aucun sélecteur de fonte, l'éditeur ne peut donc pas en injecter dans le contenu. */ .ql-container, .ql-toolbar.ql-snow { font-family: inherit; } .ql-container { font-size: inherit; } /* @warn `bolder` est RELATIF au poids hérité, et le body est en 300 (--ak-font-weight) : il y calcule 400, soit la graisse normale — le gras du reboot Bootstrap était donc strictement invisible, dans l'éditeur comme à l'affichage. 700 en absolu, sur les seuls contenus WYSIWYG. */ .ql-editor strong, .ql-editor b, .ak-wysiwyg strong, .ak-wysiwyg b { font-weight: 700; } /******************************************************************************/ /* CONTENU WYSIWYG — rendu de la sortie Quill 2 HORS de l'éditeur /* /* @warn Quill 2 ne produit PAS de