- .table-scroll : défile horizontalement + porte la bordure et les coins
arrondis. C'est le conteneur (overflow) qui rogne les coins de façon
cohérente sur TOUS les navigateurs ; overflow:hidden posé sur une
en border-collapse est ignoré par Firefox/Safari.
- .data-table : cellules unifiées + min-width (--table-min-width). Sous
ce seuil, le conteneur défile au lieu d'écraser les colonnes.
- th/td.col-actions : colonne épinglée à droite → les boutons d'action
restent visibles même quand le tableau défile (cause des boutons coupés).
============================================================ */
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
background: #fff;
}
.data-table {
width: 100%;
border-collapse: collapse;
min-width: var(--table-min-width, 640px);
}
.data-table thead th {
background: var(--bg-soft);
color: var(--primary-color);
font-weight: 600;
text-align: left;
padding: 12px 14px;
border-bottom: 2px solid var(--border-color);
white-space: nowrap;
}
.data-table tbody th,
.data-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid #dfe5ee;
vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
/* Lignes alternées (zebra) + survol : séparation nette des lignes.
Chaque ligne porte un fond opaque pour que la colonne épinglée
(background: inherit) reste lisible pendant le défilement. */
.data-table tbody tr { background: #fff; }
.data-table tbody tr:nth-child(even) { background: var(--bg-soft); }
.data-table tbody tr.row-clickable:hover { background: #e7f1fb; }
/* Modificateurs optionnels */
.data-table.table--center th,
.data-table.table--center td { text-align: center; }
.data-table.table--divided thead th + th,
.data-table.table--divided tbody th + th,
.data-table.table--divided tbody td + td { border-left: 1px solid #dfe5ee; }
/* Colonne d'actions épinglée à droite (boutons toujours accessibles).
background: inherit => suit la couleur de la ligne (zebra / survol). */
.data-table th.col-actions,
.data-table td.col-actions {
position: sticky;
right: 0;
z-index: 1;
background: inherit;
box-shadow: -6px 0 6px -6px rgba(0, 0, 0, .15);
}
.data-table thead th.col-actions { background: var(--bg-soft); z-index: 2; }
.data-table td[colspan] { position: static; box-shadow: none; }
@media (max-width: 768px) {
.data-table thead th,
.data-table tbody th,
.data-table tbody td { padding: 8px; }
}
/* ============================================================
Groupe d'actions en ligne (icônes d'un tableau)
============================================================ */
.row-actions {
display: inline-flex;
align-items: center;
gap: 12px;
white-space: nowrap;
}
.row-actions a,
.row-actions span.action-disabled {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: var(--radius-sm);
transition: background .15s ease;
}
.row-actions a:hover { background: #e8f1f9; }
.row-actions span.action-disabled { opacity: .38; cursor: not-allowed; }
/* Ligne de tableau cliquable */
tr.row-clickable { cursor: pointer; transition: background .12s ease; }
tr.row-clickable:hover { background: #f4f9ff; }
/* ============================================================
Navbar « T-life » des pages autonomes (slide, annotation,
comparaison, embeddings). Source unique — auparavant dupliquée
(et désynchronisée) dans chacune des 4 pages.
============================================================ */
.navbar-tlife {
background: var(--navbar-bg) !important;
border-bottom: 1px solid var(--border-color);
box-shadow: none !important;
border-radius: 0 !important;
}
.navbar, .navbar .container, .navbar .container-fluid { border-radius: 0 !important; }
.navbar-tlife .navbar-brand,
.navbar-tlife .nav-link,
.navbar-tlife .navbar-text { color: var(--primary-color) !important; }
.navbar-tlife .nav-link:hover,
.navbar-tlife .nav-link:focus { color: var(--secondary-color) !important; }
.navbar-tlife .nav-link.active,
.navbar-tlife .dropdown-toggle.show { color: var(--secondary-color) !important; position: relative; }
/* Underline accent only on plain nav-links — NOT on .dropdown-toggle, whose
::after is Bootstrap's caret triangle (overriding it would hide the caret). */
.navbar-tlife .nav-link.active:not(.dropdown-toggle)::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
height: 3px; background: var(--accent-color); border-radius: 2px;
}
.navbar-tlife .navbar-toggler { border-color: rgba(44, 62, 80, .25); }
.navbar-tlife .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(44,62,80,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Rangée d'actions de la navbar lame : passe proprement à la ligne au lieu
de comprimer les boutons (qui sinon affichent leur texte sur 2 lignes et
prennent des hauteurs inégales). Espacement horizontal via les marges
Bootstrap (me-*) des boutons, vertical via row-gap quand ça enroule. */
.navbar-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
row-gap: .5rem;
min-width: 0;
}
.navbar-actions .btn { white-space: nowrap; }
/* ============================================================
Navbar — barre d'outils GROUPÉE + icônes (slide / annotation)
--------------------------------------------------------------
Source unique pour les pages autonomes : au lieu d'une rangée
plate de boutons identiques, les contrôles sont regroupés en
clusters (View · Edit), les actions rares passent dans un menu
« More ▾ », et les actions primaires (Save / Affect) ressortent.
============================================================ */
/* Marque + fil d'Ariane à gauche */
.nav-brand-wrap { display: flex; align-items: center; gap: .85rem; min-width: 0; flex-wrap: wrap; }
.nav-brand-wrap .navbar-brand { display: inline-flex; align-items: center; padding: 0; }
/* Fil d'Ariane dans la navbar (slide / annotation) */
.navbar-breadcrumb { --bs-breadcrumb-divider: '›'; font-size: .95rem; margin-bottom: 0; }
.navbar-breadcrumb a { color: var(--secondary-color); text-decoration: none; }
.navbar-breadcrumb a:hover { text-decoration: underline; }
.navbar-breadcrumb .breadcrumb-item.active { color: var(--primary-color); font-weight: 600; }
/* Conteneur des actions (droite) : enroule au lieu de déborder */
.nav-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
/* Cluster segmenté : regroupe des toggles liés (fond doux + bord) */
.nav-group {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
background: var(--bg-soft);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
}
/* Boutons internes du cluster : pas de bord (segmenté) + teinte plus foncée
pour le contraste sur le fond doux du groupe. On cible aussi le toggle d'un
dropdown imbriqué directement, SANS toucher les boutons du menu déroulant
(Select all / Deselect all) qui restent normaux. */
.nav-group > .btn,
.nav-group > .dropdown > .btn {
--bs-btn-border-width: 0;
--bs-btn-color: var(--secondary-color-dark);
}
.nav-group-label {
font-size: .68rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--text-muted);
padding: 0 .15rem 0 .4rem;
user-select: none;
}
/* Séparateur vertical entre clusters */
.nav-divider {
align-self: stretch;
width: 1px;
min-height: 26px;
background: var(--border-color);
margin: 0 .2rem;
}
/* Bouton « icône + libellé » */
.btn-ico { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
/* État actif / enfoncé des toggles dans la navbar (vue, grille, labels…) */
.navbar-tlife .btn.active,
.navbar-tlife .btn[aria-pressed="true"] {
background: var(--secondary-color);
border-color: var(--secondary-color);
color: #fff;
}
/* Action primaire mise en avant : ombre légère => hiérarchie visible */
.navbar-tlife .btn-primary { box-shadow: 0 1px 2px rgba(15, 30, 60, .16); }
/* Menu « More ▾ » : items confortables, icônes alignées, état on/off */
.nav-more-menu {
min-width: 15rem;
padding: .35rem;
border: 0;
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
}
.nav-more-menu .dropdown-item {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .6rem;
border-radius: var(--radius-sm);
color: var(--text-color);
font-weight: 500;
}
.nav-more-menu .dropdown-item.active,
.nav-more-menu .dropdown-item:hover,
.nav-more-menu .dropdown-item:focus { background: var(--secondary-color); color: #fff; }
.nav-more-menu .dropdown-item.is-on { color: var(--secondary-color); font-weight: 600; }
.nav-more-menu .dropdown-item.is-on:hover,
.nav-more-menu .dropdown-item.is-on:focus { color: #fff; }
.nav-more-menu .dropdown-item .ico { color: var(--text-muted); }
.nav-more-menu .dropdown-item:hover .ico,
.nav-more-menu .dropdown-item:focus .ico,
.nav-more-menu .dropdown-item.active .ico { color: #fff; }
.nav-more-menu .dropdown-item.is-on .ico { color: var(--secondary-color); }
.nav-more-divider { margin: .35rem .2rem; border-top: 1px solid var(--border-color); }
.nav-more-status { padding: .3rem .6rem .15rem; font-size: .76rem; color: var(--text-muted); }
/* ============================================================
Jeu d'icônes partagé (mask + currentColor)
Usage : (hérite la couleur
du bouton : bleu au repos, blanc au survol/actif).
============================================================ */
.ico {
display: inline-block;
width: 16px;
height: 16px;
flex: none;
vertical-align: -2px;
background-color: currentColor;
-webkit-mask: var(--ico) no-repeat center / contain;
mask: var(--ico) no-repeat center / contain;
}
.ico-lg { width: 18px; height: 18px; }
.ico-grid { --ico: url("data:image/svg+xml,"); }
.ico-eye { --ico: url("data:image/svg+xml,"); }
.ico-pencil { --ico: url("data:image/svg+xml,"); }
.ico-plus { --ico: url("data:image/svg+xml,"); }
.ico-trash { --ico: url("data:image/svg+xml,"); }
.ico-save { --ico: url("data:image/svg+xml,"); }
.ico-check { --ico: url("data:image/svg+xml,"); }
.ico-list { --ico: url("data:image/svg+xml,"); }
.ico-filter { --ico: url("data:image/svg+xml,"); }
.ico-more { --ico: url("data:image/svg+xml,"); }
.ico-prev { --ico: url("data:image/svg+xml,"); }
.ico-next { --ico: url("data:image/svg+xml,"); }
.ico-refresh { --ico: url("data:image/svg+xml,"); }
.ico-sort { --ico: url("data:image/svg+xml,"); }
.ico-user { --ico: url("data:image/svg+xml,"); }
.ico-scatter { --ico: url("data:image/svg+xml,"); }
.ico-scan { --ico: url("data:image/svg+xml,"); }
.ico-help { --ico: url("data:image/svg+xml,"); }
.ico-download{ --ico: url("data:image/svg+xml,"); }