MadJax
77cb5b87a7
Sur grand écran, la pleine largeur rendait une ligne du tableau peu lisible (le mois et le bouton d'export étaient trop éloignés). L'écran Synthèse Kms adopte désormais une largeur maximale de 1100 px centrée, comme Specs. Trajets et Carnet d'adresses restent en pleine largeur. Specs (requirements 12.27, design-requirements 12.5, design) mises à jour en cohérence.
149 lines
2.5 KiB
SCSS
149 lines
2.5 KiB
SCSS
.synthese-kms {
|
|
padding: 1.5rem;
|
|
// Largeur de lecture bornée et centrée : sur un très grand écran, le tableau
|
|
// ne s'étale pas sur toute la largeur, ce qui garde une ligne lisible
|
|
// (le mois à gauche reste proche des actions à droite).
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.4rem;
|
|
margin: 0;
|
|
color: var(--couleur-anthracite);
|
|
}
|
|
|
|
/* En-tête : titre à gauche, zone de critères à droite (comme le carnet d'adresses). */
|
|
.synthese-kms__entete {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.selection {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.champ {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.champ label {
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.champ select {
|
|
padding: 0.5rem;
|
|
border: 1px solid #bbb;
|
|
border-radius: 6px;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.btn-principal {
|
|
padding: 0.55rem 1.25rem;
|
|
background: var(--couleur-bleu);
|
|
color: #fff;
|
|
border: 1px solid var(--couleur-bleu);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
|
|
&:hover:not(:disabled) {
|
|
background: var(--couleur-orange);
|
|
border-color: var(--couleur-orange);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.btn-secondaire {
|
|
padding: 0.4rem 0.9rem;
|
|
background: #fff;
|
|
color: #1565c0;
|
|
border: 1px solid #1565c0;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
|
|
&:hover:not(:disabled) {
|
|
background: var(--couleur-orange);
|
|
border-color: var(--couleur-orange);
|
|
color: #fff;
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.bareme {
|
|
margin: 0.5rem 0 1rem;
|
|
color: #333;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
table.synthese {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 0.92rem;
|
|
|
|
th,
|
|
td {
|
|
padding: 0.5rem 0.6rem;
|
|
border-bottom: 1px solid #eee;
|
|
text-align: left;
|
|
}
|
|
|
|
th.num,
|
|
td.num {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
thead th {
|
|
background: #f5f5f5;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
td input {
|
|
width: 7rem;
|
|
padding: 0.35rem 0.4rem;
|
|
border: 1px solid #bbb;
|
|
border-radius: 4px;
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
tfoot .total {
|
|
font-weight: 700;
|
|
|
|
td {
|
|
border-top: 2px solid #ccc;
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vide {
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|