deux colonnes
-- Retoucher l'apparence ---------------------------------------------------
Tout passe par les variables --eman-card-* definies ci-dessous. Pour ne
changer que les cartes d'une vue, on les redefinit sur un ancetre au lieu de
reecrire une regle d'ici :
.transcription-item { --eman-card-pad-y: 1em; --eman-card-shadow: none; }
========================================================================== */
:root {
/* Fond de la carte. Blanc plein : le fond texture du site, que ce blanc
laissait autrefois transparaitre, n'est plus utilise. */
--eman-card-surface: #ffffff;
/* Filet du contour. */
--eman-card-border: transparent;
/* Arrondi des angles. */
--eman-card-radius: 2px;
/* Ombre portee. */
--eman-card-shadow: rgba(0, 0, 0, 0.185) 1px 1px 2px;
/* Rembourrage interieur. Deux variables et non une seule : l'en-tete et le
pied divisent la valeur verticale par `calc()`, qui ne sait pas diviser
une valeur a deux composantes. */
--eman-card-pad-y: 0.75em;
--eman-card-pad-x: 16px;
/* Espace sous une carte, et gouttiere de .eman-cards. Par defaut la
gouttiere des pages (--eman-gap, page.css) : un seul ecart entre blocs
pour tout le site. Une vue qui veut le sien redefinit cette variable. */
--eman-card-gap: var(--eman-gap, 0.85em);
/* Filet de tete de .eman-card--accent. */
--eman-card-accent: var(--eman-ombre, #6a655d);
}
/* !---------- La carte ------------------------------------------------------ */
.eman-card {
box-sizing: border-box;
margin: 0 0 var(--eman-card-gap);
padding: var(--eman-card-pad-y) var(--eman-card-pad-x);
background-color: var(--eman-card-surface);
border: 0 solid var(--eman-card-border);
border-radius: var(--eman-card-radius);
box-shadow: var(--eman-card-shadow);
}
/* Premier et dernier enfant : leur marge propre ne s'ajoute pas au
rembourrage de la carte. */
.eman-card > *:first-child {
margin-top: 0;
}
.eman-card > *:last-child {
margin-bottom: 0;
}
/* !---------- En-tete, corps, pied ------------------------------------------- */
/* .eman-card__header : titre a gauche, commandes a droite. */
.eman-card__header {
display: flex;
align-items: center;
gap: 0.75em;
flex-wrap: wrap;
margin-bottom: var(--eman-card-pad-y);
padding-bottom: calc(var(--eman-card-pad-y) / 2);
border-bottom: 1px solid var(--eman-filet, #d7d3cb);
}
/* .eman-card__title : occupe la place libre, ce qui pousse .eman-card__actions
au bord droit. */
.eman-card__title {
flex: 1;
min-width: 0;
margin: 0;
padding: 0;
font-size: 1.15em;
font-weight: 500;
line-height: 1.3;
}
.eman-card__actions {
display: flex;
align-items: center;
gap: 4px;
flex: none;
}
.eman-card__body > *:first-child {
margin-top: 0;
}
.eman-card__body > *:last-child {
margin-bottom: 0;
}
.eman-card__footer {
display: flex;
align-items: center;
gap: 0.75em;
flex-wrap: wrap;
margin-top: var(--eman-card-pad-y);
padding-top: calc(var(--eman-card-pad-y) / 2);
border-top: 1px solid var(--eman-filet, #d7d3cb);
}
/* !---------- Variantes ------------------------------------------------------ */
/* .eman-card--accent : carte qui ouvre une section. */
.eman-card--accent {
border-top-width: 10px;
border-top-color: var(--eman-card-accent);
}
/* .eman-card--quiet : ilot discret. */
.eman-card--quiet {
box-shadow: none;
}
/* .eman-card--plain : conteneur qui porte d'autres cartes et ne doit pas les
encadrer une seconde fois. Ne garde que la marge basse. */
.eman-card--plain {
background: none;
box-shadow: none;
padding: 0;
}
/* .eman-card--flush : le corps touche les bords lateraux ; l'en-tete et le
pied gardent leur rembourrage. */
.eman-card--flush {
padding-left: 0;
padding-right: 0;
}
.eman-card--flush > .eman-card__header,
.eman-card--flush > .eman-card__footer {
padding-left: var(--eman-card-pad-x);
padding-right: var(--eman-card-pad-x);
}
/* .eman-card--np : aucun rembourrage. La carte n'est plus qu'une surface ; ce
qu'elle contient se rembourre lui-meme. C'est ce qu'il faut des qu'un
element doit toucher les quatre bords — un bandeau de titre en couleur, une
image — sans avoir a annuler le rembourrage par des marges negatives.
.eman-card__body reprend alors le rembourrage pour le texte. */
.eman-card--np {
padding: 0;
}
.eman-card--np > .eman-card__body {
padding: var(--eman-card-pad-y) var(--eman-card-pad-x);
}
/* !---------- Carte de tete -------------------------------------------------- */
/* .eman-card--head : la carte qui nomme la page, la meme partout. Une ligne
qui se lit comme un champ — intitule, valeur, intitule, valeur — et se
replie quand elle ne tient pas. Elle porte l'aplat des bandeaux et une
ombre plus marquee que les autres cartes : c'est elle qu'on lit d'abord.
Angles droits.
Les selecteurs doublent .eman-card : les intitules doivent l'emporter sur
la grille des champs (page.css), chargee apres. */
.eman-card.eman-card--head {
--eman-card-pad-y: 18px;
--eman-card-pad-x: 22px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25em 0.6em;
background-color: var(--eman-titre-fond);
color: var(--eman-titre-texte);
border-radius: 0;
box-shadow: rgba(0, 0, 0, 0.22) 1px 2px 5px;
}
/* Le theme donne au h1 de #content sa taille, sa graisse et de l'air dessous,
et le fait flotter sur les pages .browse (style.css) : le titre ne serait
plus centre dans la carte. `#content h1` nomme un id : le selecteur le
nomme aussi pour l'emporter. La taille du template (--eman-title-size, posee
par la vue d'une fiche) ne sert que de plancher : elle vaut souvent 16px,
la taille du texte courant, ce qui ne distinguerait rien. */
#content .eman-card.eman-card--head .doc-title {
float: none;
width: auto;
margin: 0;
padding: 0;
border: 0;
font-size: max(1.4em, var(--eman-title-size, 1.4em));
font-weight: 500;
line-height: 1.3;
color: var(--eman-titre-texte);
}
/* Les intitules suivent le corps qu'ils annoncent, sans quoi les capitales
paraitraient perdues sous un titre deux fois plus gros. ui-templates.css
les fait flotter et leur ajoute un « : » : on remet a plat. */
.eman-card.eman-card--head .field-uitemplates-title {
float: none;
font-size: 0.78em;
font-weight: 500;
letter-spacing: 0.04em;
line-height: 1.6;
text-transform: uppercase;
color: var(--eman-titre-label);
}
.eman-card.eman-card--head .field-uitemplates-title::after {
content: none;
}
/* L'intitule qui suit le titre ouvre un second couple : plus d'air devant lui
que la gouttiere qui le separe de sa valeur. */
.eman-card.eman-card--head .doc-title + .field-uitemplates-title {
margin-left: 1.1em;
}
/* La valeur d'un couple (l'auteur d'une fiche) : sur la ligne, a la taille du
template si elle est plus grande. */
.eman-card.eman-card--head .uit-field {
display: inline;
margin: 0;
padding: 0;
font-size: max(1.05em, var(--eman-author-size, 1.05em));
line-height: 1.35;
}
.eman-card.eman-card--head .uit-field,
.eman-card.eman-card--head a {
color: var(--eman-titre-texte);
}
.eman-card.eman-card--head a {
text-decoration: underline;
}
/* !---------- Bloc a bandeau ------------------------------------------------- */
/* .eman-card--section : un bloc de page. Il respire plus que la carte
courante : une fiche est faite pour etre lue, pas parcourue. En pixels, et
non en em : le bandeau reprend ces valeurs alors qu'il est ecrit plus gros. */
.eman-card--section {
--eman-card-pad-y: 18px;
--eman-card-pad-x: 22px;
min-width: 0;
}
/* Le titre du bloc en occupe le haut : un bandeau qui touche ses trois bords
(la carte est en .eman-card--np). Le theme donne a un h2 de #content un
filet, une largeur et des marges : on les reprend. */
.eman-card--section > h2 {
width: auto;
margin: 0;
padding: var(--eman-bandeau-pad);
background-color: var(--eman-titre-fond);
border: 0;
font-size: var(--eman-bandeau-taille);
text-wrap: balance;
font-weight: 500;
line-height: 1.3;
color: var(--eman-titre-texte);
}
.eman-card--section > h2 a {
color: var(--eman-titre-texte);
}
/* Sous un bandeau, le rembourrage vertical ferait un trou : le bandeau tient
deja lieu de separation. On le reduit de moitie, en haut comme en bas, pour
que le contenu soit centre entre le bandeau et le bord de la carte.
Seulement quand il y a un bandeau. */
.eman-card--section > h2 + .eman-card__body {
padding-top: 9px;
padding-bottom: 9px;
}
/* .eman-card--band : un bloc qui n'est que son bandeau. Le bandeau porte un
lien (