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. */
--eman-card-gap: 1.125em;
/* 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: 2px 10px;
background-color: var(--eman-titre-fond);
border: 0;
font-size: 1em;
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 haut fait un trou : le bandeau tient deja
lieu de separation. On le reduit de moitie, seulement quand il y a un
bandeau. */
.eman-card--section > h2 + .eman-card__body {
padding-top: 9px;
}
/* .eman-card--band : un bloc qui n'est que son bandeau. Le bandeau porte un
lien (