mathieuandClaude Opus 5
4e372ab694
Première relation entre livres du projet. Une série contient des séries (un cycle EST une série de séries) et des PLACES dans l'ordre de lecture — pas des livres : une place sans livre est le trou qu'on vient voir. L'ordre est stocké, jamais déduit d'une année : une préquelle se lit avant le livre paru dix ans plus tôt. Les tomes non possédés se saisissent à la main, aucune source ne donnant l'ordre de lecture d'une saga. Le titre de la place survit à la suppression du livre (SetNull, pas de cascade), sans quoi perdre un exemplaire effacerait le tome 3 de la série. Les séries sont communes au foyer. Seule exception : la mise en envies d'un tome manquant, qui écrit dans une liste personnelle — c'est le seul point où les deux portées se rencontrent. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
110 lines
2.8 KiB
CSS
110 lines
2.8 KiB
CSS
.bandeau {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
background: #1b3a5c;
|
|
color: #fff;
|
|
}
|
|
|
|
.marque {
|
|
color: #fff;
|
|
font-size: 1.15rem;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.utilisateur {
|
|
font-size: 0.8rem;
|
|
opacity: 0.85;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 55%;
|
|
}
|
|
|
|
/* L'état du réseau change ce que l'application permet : il se voit dans le bandeau, en
|
|
permanence, et pas seulement au moment où une action échoue. */
|
|
.pastille-hors-ligne {
|
|
flex: 0 0 auto;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 999px;
|
|
background: #f5d76e;
|
|
color: #4a3800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Dire d'où viennent les données affichées, et de quand elles datent : sans cette phrase, un
|
|
catalogue hors-ligne est indiscernable d'un catalogue à jour. */
|
|
.bandeau-reseau {
|
|
max-width: 46rem;
|
|
margin: 0 auto;
|
|
padding: 0.6rem 1rem;
|
|
background: #fff8e1;
|
|
border-bottom: 1px solid #e6d28a;
|
|
color: #6b5200;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.contenu {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 46rem;
|
|
margin: 0 auto;
|
|
/* Marge basse généreuse : ni les onglets ni les actions flottantes ne doivent masquer
|
|
le dernier livre de la liste. */
|
|
padding: 1rem 1rem 9rem;
|
|
}
|
|
|
|
/* --- Onglets de navigation --- */
|
|
|
|
.onglets {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 20;
|
|
display: flex;
|
|
background: #fff;
|
|
border-top: 1px solid var(--mb-bord);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
/* Hauteur figée et partagée : .actions-flottantes s'en sert pour se poser juste au-dessus. */
|
|
height: calc(var(--mb-onglets-hauteur) + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.onglet {
|
|
flex: 1 1 0;
|
|
padding: 0.4rem 0.25rem;
|
|
line-height: 1.4;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
color: var(--mb-texte-doux);
|
|
|
|
/* Le trait actif est posé en haut de l'onglet, du côté du contenu qu'il désigne. */
|
|
border-top: 3px solid transparent;
|
|
|
|
/* Le libellé ne doit jamais passer sur deux lignes. Cinq onglets tiennent sur 320 px à
|
|
cette taille ; c'est la raison du 0.8rem plutôt que du 0.85rem d'avant « Séries ». */
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* NavLink pose « active » tout seul ; « Catalogue » utilise NavLinkMatch.All, sans quoi
|
|
il resterait allumé sur toutes les pages — son href est la racine. */
|
|
.onglet.active {
|
|
color: var(--mb-accent);
|
|
font-weight: 600;
|
|
border-top-color: var(--mb-accent);
|
|
background: var(--mb-fond-doux);
|
|
}
|