forked from FroSteel/Planification
v2026.5.33 — Vue horizontale : interactions différenciées (hover/clic) [code interpolé]
This commit is contained in:
Quentin Rouiller
+475
-29
@@ -9,8 +9,8 @@
|
||||
--border: #e2e4e8;
|
||||
--border-strong: #cfd3da;
|
||||
--text: #1a1f2b;
|
||||
--text-muted: #5b6573;
|
||||
--text-faint: #8892a0;
|
||||
--text-muted: #2e3642; /* v2026.5.29 : +contraste (était #4a5260) */
|
||||
--text-faint: #50596a; /* v2026.5.29 : +contraste (était #6c7583) */
|
||||
--accent: #0f4f8b;
|
||||
--accent-soft: #e1ecf7;
|
||||
--danger: #b03030;
|
||||
@@ -59,8 +59,8 @@
|
||||
--border: #2e333c;
|
||||
--border-strong: #414754;
|
||||
--text: #e6e8ec;
|
||||
--text-muted: #9ba2ad;
|
||||
--text-faint: #6a727e;
|
||||
--text-muted: #d0d5de; /* v2026.5.29 : +contraste (était #b8c0cc) — quasi blanc */
|
||||
--text-faint: #a8b0bc; /* v2026.5.29 : +contraste (était #8b93a0) */
|
||||
--accent: #5ea8e8;
|
||||
--accent-soft: #223348;
|
||||
--danger: #e87878;
|
||||
@@ -842,6 +842,17 @@ html, body {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
/* v2026.5.29 : highlight visible sur les rows .intervention-v2 quand on
|
||||
survole le segment timeline correspondant (ou que l'user survole la row) */
|
||||
.intervention-v2.highlight {
|
||||
background: var(--accent-soft);
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: -2px;
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Interventions — layout v2 (heures verticales)
|
||||
========================================================================== */
|
||||
@@ -1832,22 +1843,28 @@ body.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* v4.2.9 : pied de page discret en bas à droite — affiche auteur + date + version */
|
||||
/* v4.2.9 : pied de page discret en bas à droite — affiche auteur + date + version
|
||||
v2026.5.29 : agrandi + plus contrasté */
|
||||
.app-footer {
|
||||
position: fixed;
|
||||
right: 8px;
|
||||
bottom: 4px;
|
||||
font-size: 10px;
|
||||
color: var(--text-faint, #8892a0);
|
||||
opacity: 0.55;
|
||||
pointer-events: none; /* ne capture pas les clics */
|
||||
right: 10px;
|
||||
bottom: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
opacity: 0.85;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: 0.2px;
|
||||
z-index: 1; /* sous les modals (qui sont à 10000) */
|
||||
letter-spacing: 0.3px;
|
||||
z-index: 1;
|
||||
padding: 3px 8px;
|
||||
background: var(--bg-muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.app-footer:hover {
|
||||
opacity: 0.85;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
@@ -1992,18 +2009,18 @@ body.modal-open {
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
v5.0.0 : horloge au milieu de la topbar (HH:MM, pas de secondes)
|
||||
───────────────────────────────────────────────────────────────────────── */
|
||||
/* v2026.5.16 : app-clock contient maintenant 2 lignes empilées :
|
||||
- app-clock-date : "Mardi 21 avril 2026" (petit)
|
||||
- app-clock-time : "12:34" (grand) */
|
||||
/* v2026.5.27 : app-clock sur UNE seule ligne : "Jeudi 23.04.26 • 21:55"
|
||||
Même taille pour la date et l'heure, gros point au milieu. */
|
||||
.app-clock {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
line-height: 1.1;
|
||||
color: var(--text);
|
||||
pointer-events: none;
|
||||
@@ -2011,11 +2028,19 @@ body.modal-open {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.app-clock-date {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
letter-spacing: 0.5px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.app-clock-date::after {
|
||||
content: "•";
|
||||
margin-left: 12px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.3px;
|
||||
text-transform: capitalize;
|
||||
font-size: 26px;
|
||||
line-height: 0.8;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.app-clock-time {
|
||||
font-size: 22px;
|
||||
@@ -2487,11 +2512,12 @@ header.topbar::before {
|
||||
|
||||
/* Breakpoint medium : entre 1000 et 1300px, on compacte un peu */
|
||||
@media (max-width: 1300px) {
|
||||
.app-clock-date { font-size: 11px; }
|
||||
.app-clock-time { font-size: 20px; }
|
||||
.app-clock-date { font-size: 18px; }
|
||||
.app-clock-time { font-size: 18px; }
|
||||
.app-clock-date::after { font-size: 20px; }
|
||||
.topbar-right .btn-action .btn-action-label,
|
||||
.topbar-right .btn-refresh .btn-refresh-label {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2499,10 +2525,10 @@ header.topbar::before {
|
||||
et on réduit encore l'horloge. Les icônes restent, titres restent. */
|
||||
@media (max-width: 1000px) {
|
||||
.topbar { padding: 8px 14px; gap: 8px; }
|
||||
.topbar h1 { font-size: 16px; }
|
||||
.app-clock { font-size: smaller; }
|
||||
.app-clock-date { font-size: 10px; }
|
||||
.app-clock-time { font-size: 18px; }
|
||||
.topbar h1 { font-size: 18px; }
|
||||
.app-clock-date { font-size: 16px; }
|
||||
.app-clock-time { font-size: 16px; }
|
||||
.app-clock-date::after { font-size: 18px; }
|
||||
.btn-action .btn-action-label,
|
||||
.btn-refresh .btn-refresh-label {
|
||||
display: none;
|
||||
@@ -3129,3 +3155,423 @@ body.popup-dragging .pinned-popup {
|
||||
.user-badge.user-badge-unknown:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.27 : agrandir +20% les textes topbar + stats bar pour la lisibilité
|
||||
========================================================================== */
|
||||
/* Labels boutons topbar */
|
||||
.btn-action-label,
|
||||
.btn-refresh-label {
|
||||
font-size: 14px !important; /* +20% depuis 12px */
|
||||
}
|
||||
.btn-today {
|
||||
font-size: 14px !important;
|
||||
padding: 7px 12px !important;
|
||||
}
|
||||
.btn-subtle {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.capture-info {
|
||||
font-size: 14px !important; /* +20% depuis 12px */
|
||||
}
|
||||
.topbar h1 {
|
||||
font-size: 21px !important; /* +20% depuis 18px */
|
||||
}
|
||||
/* Date-custom label (Vendredi 24.04.2026) */
|
||||
#date-custom-label {
|
||||
font-size: 14px !important; /* +20% depuis 12px */
|
||||
}
|
||||
.date-custom {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
/* Stats bar */
|
||||
.stats-bar,
|
||||
.stats-bar * {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.stats-bar strong {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
/* v2026.5.27 : icône thème plus contrastée avec bordure + fond visible */
|
||||
#theme-toggle {
|
||||
border: 1.5px solid var(--border-strong, rgba(128,128,128,0.5)) !important;
|
||||
background: var(--bg-muted) !important;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
padding: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
#theme-toggle:hover {
|
||||
background: var(--accent-soft, rgba(59, 130, 246, 0.15)) !important;
|
||||
border-color: var(--accent, #3b82f6) !important;
|
||||
}
|
||||
#theme-icon {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.27 : classification visuelle des absences (Maladie, Congé, Pompier)
|
||||
========================================================================== */
|
||||
|
||||
/* Variables de couleurs pour les catégories d'absence */
|
||||
:root {
|
||||
--c-maladie: #4338ca; /* Indigo foncé */
|
||||
--c-maladie-soft: #e0e7ff; /* Indigo très clair */
|
||||
--c-conge: #06b6d4; /* Cyan */
|
||||
--c-conge-soft: #cffafe; /* Cyan très clair */
|
||||
}
|
||||
html.theme-dark {
|
||||
--c-maladie: #818cf8; /* Indigo plus clair pour dark mode */
|
||||
--c-maladie-soft: #2a1e66; /* Indigo foncé pour fonds */
|
||||
--c-conge: #67e8f9; /* Cyan plus clair pour dark mode */
|
||||
--c-conge-soft: #0e3e4a; /* Cyan foncé pour fonds */
|
||||
}
|
||||
|
||||
/* Badge "Maladie" à côté du nom */
|
||||
.badge-maladie {
|
||||
background: var(--c-maladie-soft);
|
||||
color: var(--c-maladie);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Badge "Congé" / "Congés" à côté du nom */
|
||||
.badge-conge {
|
||||
background: var(--c-conge-soft);
|
||||
color: var(--c-conge);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Carte entière : couleur de fond + barre gauche épaisse pour absence */
|
||||
.card.absence-cat-maladie {
|
||||
border-left: 4px solid var(--c-maladie);
|
||||
background: linear-gradient(to bottom, var(--c-maladie-soft) 0%, var(--bg-elevated) 40%);
|
||||
}
|
||||
html.theme-dark .card.absence-cat-maladie {
|
||||
background: linear-gradient(to bottom, rgba(67, 56, 202, 0.12) 0%, var(--bg-elevated) 40%);
|
||||
}
|
||||
|
||||
.card.absence-cat-conge {
|
||||
border-left: 4px solid var(--c-conge);
|
||||
background: linear-gradient(to bottom, var(--c-conge-soft) 0%, var(--bg-elevated) 40%);
|
||||
}
|
||||
html.theme-dark .card.absence-cat-conge {
|
||||
background: linear-gradient(to bottom, rgba(6, 182, 212, 0.12) 0%, var(--bg-elevated) 40%);
|
||||
}
|
||||
|
||||
/* Pompier — on reprend le style existant mais on accentue le border-left */
|
||||
.card.absence-cat-pompier {
|
||||
border-left: 4px solid var(--danger);
|
||||
}
|
||||
|
||||
/* Pastille ronde à côté du nom */
|
||||
.tech-name-dot {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tech-name-dot.absence-dot-maladie { background: var(--c-maladie); }
|
||||
.tech-name-dot.absence-dot-conge { background: var(--c-conge); }
|
||||
.tech-name-dot.absence-dot-pompier { background: var(--danger); }
|
||||
|
||||
/* Note statut (banner texte sur la zone interventions) */
|
||||
.card-status-note {
|
||||
padding: 14px 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
margin: 10px;
|
||||
}
|
||||
.card-status-note.absent-maladie {
|
||||
background: var(--c-maladie-soft);
|
||||
color: var(--c-maladie);
|
||||
}
|
||||
.card-status-note.absent-conge {
|
||||
background: var(--c-conge-soft);
|
||||
color: var(--c-conge);
|
||||
}
|
||||
.card-status-note.pompier {
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.28 : popups épinglés gardent une taille standard au resize de la
|
||||
fenêtre. Le max-width 620px du tooltip de base les contraignait quand on
|
||||
réduisait la largeur depuis le côté droit — désormais ils restent à leur
|
||||
taille créée et sont simplement repositionnés dans la safe area.
|
||||
========================================================================== */
|
||||
.pinned-popup:not(.pinned-popup-minimized):not(.pinned-popup-reduced) {
|
||||
max-width: none !important;
|
||||
width: 520px !important; /* largeur standard fixe */
|
||||
min-width: 380px;
|
||||
}
|
||||
/* Sur les très petits écrans (< 600px), on laisse le clamp naturel */
|
||||
@media (max-width: 600px) {
|
||||
.pinned-popup:not(.pinned-popup-minimized):not(.pinned-popup-reduced) {
|
||||
width: calc(100vw - 20px) !important;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.30 : absences récurrentes (Pillonel vendredi) en cyan
|
||||
(même couleur que Congé mais texte distinct "Absent le vendredi")
|
||||
========================================================================== */
|
||||
|
||||
/* Badge "Absent" cyan pour récurrent */
|
||||
.badge-recurring {
|
||||
background: var(--c-conge-soft);
|
||||
color: var(--c-conge);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Carte entière : bordure gauche cyan + fond dégradé */
|
||||
.card.absence-cat-recurring {
|
||||
border-left: 4px solid var(--c-conge);
|
||||
background: linear-gradient(to bottom, var(--c-conge-soft) 0%, var(--bg-elevated) 40%);
|
||||
}
|
||||
html.theme-dark .card.absence-cat-recurring {
|
||||
background: linear-gradient(to bottom, rgba(6, 182, 212, 0.12) 0%, var(--bg-elevated) 40%);
|
||||
}
|
||||
|
||||
/* Message "Absent le vendredi" (ou autre récurrence) en cyan */
|
||||
.tech-absence-recurring {
|
||||
padding: 14px 12px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
color: var(--c-conge);
|
||||
background: var(--c-conge-soft);
|
||||
border-radius: 6px;
|
||||
margin: 10px;
|
||||
}
|
||||
html.theme-dark .tech-absence-recurring {
|
||||
background: rgba(6, 182, 212, 0.12);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.30 : mode compact pour écrans 24" Full HD (1920×1080) ou plus petits
|
||||
Objectif : réduire les paddings et tailles sans casser la lisibilité.
|
||||
========================================================================== */
|
||||
@media (max-width: 1920px) {
|
||||
/* Topbar légèrement compactée */
|
||||
.topbar {
|
||||
padding: 8px 14px !important;
|
||||
gap: 10px;
|
||||
}
|
||||
.topbar h1 {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
.app-clock-date,
|
||||
.app-clock-time {
|
||||
font-size: 19px !important;
|
||||
}
|
||||
.app-clock-date::after {
|
||||
font-size: 22px !important;
|
||||
}
|
||||
|
||||
/* Stats bar plus dense */
|
||||
.stats-bar {
|
||||
padding: 6px 12px !important;
|
||||
}
|
||||
.stats-bar,
|
||||
.stats-bar * {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.stats-bar strong {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
/* Cartes : padding réduit */
|
||||
.card-header {
|
||||
padding: 8px 12px !important;
|
||||
}
|
||||
.card-tech-name {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
.card-tech-badge {
|
||||
font-size: 10px !important;
|
||||
padding: 2px 6px !important;
|
||||
}
|
||||
|
||||
/* Interventions : padding vertical réduit */
|
||||
.intervention-v2 {
|
||||
padding: 7px 10px 9px 6px !important;
|
||||
}
|
||||
|
||||
/* Timeline plus fine */
|
||||
.timeline {
|
||||
padding: 10px 12px 6px 12px !important;
|
||||
}
|
||||
.timeline-bar {
|
||||
height: 18px !important;
|
||||
}
|
||||
.timeline-label {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
/* Boutons topbar un peu plus compacts */
|
||||
.btn-action,
|
||||
.btn-refresh {
|
||||
padding: 6px 10px !important;
|
||||
}
|
||||
.btn-action-label,
|
||||
.btn-refresh-label {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.btn-today {
|
||||
padding: 6px 10px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.btn-subtle {
|
||||
padding: 6px 10px !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* Grid cartes : colonnes légèrement plus étroites pour en caser 1-2 de + */
|
||||
.main-grid {
|
||||
gap: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Breakpoint encore plus étroit (tablette / laptop 13-14") */
|
||||
@media (max-width: 1400px) {
|
||||
.topbar {
|
||||
padding: 6px 10px !important;
|
||||
}
|
||||
.topbar h1 {
|
||||
font-size: 17px !important;
|
||||
}
|
||||
.app-clock-date,
|
||||
.app-clock-time {
|
||||
font-size: 17px !important;
|
||||
}
|
||||
.intervention-v2 {
|
||||
padding: 6px 8px 7px 5px !important;
|
||||
}
|
||||
.card-header {
|
||||
padding: 7px 10px !important;
|
||||
}
|
||||
.stats-bar,
|
||||
.stats-bar * {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
v2026.5.32 : Vue horizontale — chaque tech = 1 ligne fine empilée
|
||||
Active seulement quand <html class="view-horizontal">.
|
||||
But : voir les 8 techs d'un coup sur un 24" Full HD.
|
||||
========================================================================== */
|
||||
|
||||
/* Mode horizontal : la grille devient un simple stack vertical */
|
||||
html.view-horizontal .cards {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 6px !important;
|
||||
padding: 8px 12px 24px 12px !important;
|
||||
}
|
||||
|
||||
/* Chaque carte devient une ligne horizontale compacte */
|
||||
html.view-horizontal .card {
|
||||
flex-direction: row !important;
|
||||
align-items: stretch !important;
|
||||
height: auto !important;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* Header devient une barre latérale gauche fixe */
|
||||
html.view-horizontal .card-header {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
justify-content: center !important;
|
||||
min-width: 200px !important;
|
||||
max-width: 200px !important;
|
||||
border-bottom: none !important;
|
||||
border-right: 1px solid var(--border) !important;
|
||||
padding: 8px 12px !important;
|
||||
gap: 4px !important;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
html.view-horizontal .card-tech-name {
|
||||
font-size: 14px !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
html.view-horizontal .card-tech-badge {
|
||||
font-size: 10px !important;
|
||||
padding: 2px 6px !important;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Le body prend le reste de la ligne, scroll horizontal si trop d'interv */
|
||||
html.view-horizontal .card-body {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Timeline visible, un peu plus fine */
|
||||
html.view-horizontal .timeline {
|
||||
padding: 6px 10px 4px 10px !important;
|
||||
background: transparent !important;
|
||||
border-bottom: none !important;
|
||||
}
|
||||
html.view-horizontal .timeline-bar {
|
||||
height: 22px !important;
|
||||
}
|
||||
|
||||
/* Liste interventions en mode "chips" (défilement horizontal) */
|
||||
html.view-horizontal .card-body > .intervention-v2,
|
||||
html.view-horizontal .card-body > .intervention {
|
||||
display: none !important; /* masquer la liste détaillée en vue horiz */
|
||||
}
|
||||
|
||||
/* Messages "Pas d'intervention planifiée" / "Absent" tiennent sur la ligne */
|
||||
html.view-horizontal .card-empty,
|
||||
html.view-horizontal .card-status-note,
|
||||
html.view-horizontal .tech-absence-recurring {
|
||||
padding: 8px 12px !important;
|
||||
font-size: 13px !important;
|
||||
margin: 4px 8px !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
/* Stats quick pour chaque tech (nb interv etc.) affichées dans le header */
|
||||
html.view-horizontal .card-header::after {
|
||||
content: "";
|
||||
}
|
||||
html.view-horizontal .tech-row-stats {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
html.view-horizontal .tech-row-stats .stat-pill {
|
||||
padding: 1px 6px;
|
||||
background: var(--bg-muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 3px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* En vue classique, on cache les éléments spécifiques horizontal */
|
||||
html.view-classic .tech-row-stats {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user