/* OLIVE — thème Piwigo autonome (parent "default" en filet de sécurité
structurel seulement, load_parent_css=false : aucun CSS hérité).
CSS unique, chargé en lien direct (voir header.tpl), hors pipeline
Piwigo. Dernière section : habillage des blocs encore rendus par
"default" (formulaires, recherche, tags, à propos, calendrier...). */
/* ---------------------------------------------------------------------
1. Design tokens
--------------------------------------------------------------------- */
:root{
--olive-50:#F8F6EE;
--olive-100:#F1EDDE;
--olive-150:#EAE4CD;
--olive-200:#DED5B4;
--olive-300:#C3B98D;
--olive-400:#9FA070;
--olive-500:#7C8355;
--olive-600:#5B6544;
--olive-700:#454E34;
--olive-800:#333A27;
--olive-900:#22271A;
--olive-clay:#B0764C;
--olive-bg:var(--olive-50);
--olive-surface:#FFFFFF;
--olive-surface-2:var(--olive-100);
--olive-text:var(--olive-900);
--olive-text-muted:#6C7059;
--olive-border:rgba(34,39,26,.11);
--olive-border-strong:rgba(34,39,26,.2);
--olive-accent:var(--olive-600);
--olive-accent-strong:var(--olive-700);
--olive-accent-soft:var(--olive-150);
--olive-link:var(--olive-700);
--olive-focus:#1E5B8C;
--olive-danger:#A7402E;
--olive-shadow-sm:0 1px 3px rgba(34,39,26,.10);
--olive-shadow:0 8px 24px rgba(34,39,26,.12);
--olive-shadow-lg:0 18px 40px rgba(34,39,26,.16);
--olive-radius-lg:20px;
--olive-radius-md:14px;
--olive-radius-sm:10px;
--olive-radius-pill:999px;
--olive-font-display:'Fraunces', Georgia, 'Times New Roman', serif;
--olive-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--olive-topbar-h:64px;
--olive-sidebar-w:280px;
--olive-container:1440px;
}
/* ---------------------------------------------------------------------
2. Reset léger & typographie
--------------------------------------------------------------------- */
.olive-body,
.olive-body #content{
background:var(--olive-bg);
color:var(--olive-text);
}
.olive-body{
font-family:var(--olive-font-body);
line-height:1.5;
-webkit-font-smoothing:antialiased;
min-height:100vh;
display:flex;
flex-direction:column;
}
.olive-body *{ box-sizing:border-box; }
.olive-body h1,.olive-body h2,.olive-body h3,.olive-body h4{
font-family:var(--olive-font-display);
color:var(--olive-text);
font-weight:600;
line-height:1.2;
margin:0 0 .5em;
}
.olive-body a{ color:var(--olive-link); text-decoration:none; }
.olive-body a:hover{ text-decoration:underline; }
.olive-body p{ margin:0 0 1em; }
.olive-body ul,.olive-body dl,.olive-body dd{ margin:0; padding:0; list-style:none; }
.olive-body img{ max-width:100%; display:block; }
.olive-body button{ font:inherit; color:inherit; }
.olive-skip-link{
position:absolute; left:0; top:-48px;
background:var(--olive-accent-strong); color:#fff;
padding:.75rem 1.25rem; z-index:1000;
border-radius:0 0 8px 0;
transition:top .15s ease;
}
.olive-skip-link:focus{ top:0; }
.olive-body :focus-visible{
outline:3px solid var(--olive-focus);
outline-offset:2px;
border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
.olive-body,.olive-body *{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
}
.olive-icon{ display:inline-block; vertical-align:middle; flex-shrink:0; }
/* Boutons génériques réutilisés partout (topbar, actions, formulaires) */
.olive-btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5em;
font-family:var(--olive-font-body); font-size:.92rem; font-weight:600;
padding:.65em 1.2em; border-radius:var(--olive-radius-pill);
border:1px solid transparent; cursor:pointer;
background:var(--olive-surface-2); color:var(--olive-text);
transition:background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.olive-btn:hover{ background:var(--olive-200); text-decoration:none; }
.olive-btn--primary{ background:var(--olive-accent); color:#fff; }
.olive-btn--primary:hover{ background:var(--olive-accent-strong); }
.olive-btn--ghost{ background:transparent; border-color:var(--olive-border-strong); }
.olive-btn--block{ display:flex; width:100%; }
.olive-btn--icon{ padding:.5em .75em; }
/* ---------------------------------------------------------------------
3. Topbar
--------------------------------------------------------------------- */
.olive-topbar{
background:var(--olive-600);
color:#F5F3E8;
position:sticky; top:0; z-index:60;
box-shadow:var(--olive-shadow-sm);
}
.olive-topbar__inner{
max-width:var(--olive-container);
margin:0 auto;
height:var(--olive-topbar-h);
display:flex; align-items:center; gap:14px;
padding:0 20px;
}
.olive-topbar__icon-btn{
display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; border-radius:var(--olive-radius-pill);
background:transparent; border:none; color:inherit; cursor:pointer;
list-style:none;
}
.olive-topbar__icon-btn:hover{ background:rgba(255,255,255,.12); }
.olive-topbar__icon-btn::-webkit-details-marker{ display:none; }
.olive-topbar__toggle{ display:none; }
.olive-brand{
display:flex; align-items:center; gap:10px;
color:#fff; min-width:0;
}
.olive-brand:hover{ text-decoration:none; }
.olive-brand__mark{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:var(--olive-radius-pill);
background:rgba(255,255,255,.14); flex-shrink:0;
}
.olive-brand__text{ min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.olive-brand__title{
/* Couleur explicite (ne pas se reposer sur l'héritage de .olive-brand
color:#fff) : un blanc légèrement chaud (--olive-50, déjà utilisé
comme fond clair ailleurs dans la palette) plutôt qu'un blanc pur, et
graisse 700 (police chargée en 700 exprès, voir header.tpl) pour un
contraste net sur le fond vert olive de la topbar, sans toucher à
cette couleur de fond. */
font-family:var(--olive-font-display); font-weight:700; font-size:1.05rem;
text-transform:uppercase; letter-spacing:.03em;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
color:var(--olive-50);
}
.olive-brand__tagline{
font-size:.8rem; color:rgba(248,246,238,.85);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.olive-search{ margin-left:auto; position:relative; }
.olive-search > summary{ list-style:none; }
.olive-search[open] > summary{ background:rgba(255,255,255,.16); }
.olive-search__form{
position:absolute; right:0; top:calc(100% + 8px);
background:var(--olive-surface); color:var(--olive-text);
border-radius:var(--olive-radius-md); box-shadow:var(--olive-shadow-lg);
padding:8px; display:flex; gap:6px; width:min(320px, 80vw);
border:1px solid var(--olive-border);
}
.olive-search__form input[type=text]{
flex:1; border:1px solid var(--olive-border-strong); border-radius:var(--olive-radius-sm);
padding:.55em .8em; font:inherit; color:inherit; background:var(--olive-bg);
}
.olive-search__submit{
display:inline-flex; align-items:center; justify-content:center;
width:38px; border-radius:var(--olive-radius-sm); border:none;
background:var(--olive-accent); color:#fff; cursor:pointer;
}
/* ---------------------------------------------------------------------
4. Layout shell (topbar + sidebar + contenu)
--------------------------------------------------------------------- */
#olive-shell{
max-width:var(--olive-container);
margin:0 auto;
display:flex;
align-items:flex-start;
flex:1 0 auto;
width:100%;
}
.olive-body #content,
.olive-body #content.contentWithMenu{
flex:1 1 auto;
min-width:0;
padding:24px 24px 56px;
}
.olive-overlay{
display:none;
position:fixed; inset:0; background:rgba(20,22,14,.45);
z-index:70;
}
/* ---------------------------------------------------------------------
5. Sidebar
--------------------------------------------------------------------- */
.olive-sidebar{
flex:0 0 var(--olive-sidebar-w);
width:var(--olive-sidebar-w);
padding:24px 16px 40px 24px;
position:sticky;
top:var(--olive-topbar-h);
max-height:calc(100vh - var(--olive-topbar-h));
overflow-y:auto;
}
.olive-sidebar__inner{ display:flex; flex-direction:column; gap:16px; }
/* Barre de défilement fine, discrète (couleur olive douce), quasi invisible
au repos et plus visible au survol — plutôt que la barre grise épaisse
par défaut du navigateur. Firefox (scrollbar-width/-color) + navigateurs
Chromium (::-webkit-scrollbar*), dégrade proprement sur les autres. */
.olive-sidebar{
scrollbar-width:thin;
scrollbar-color:var(--olive-200) transparent;
}
.olive-sidebar::-webkit-scrollbar{ width:8px; }
.olive-sidebar::-webkit-scrollbar-track{ background:transparent; }
.olive-sidebar::-webkit-scrollbar-thumb{
background-color:var(--olive-200);
border-radius:var(--olive-radius-pill);
border:2px solid var(--olive-bg);
}
.olive-sidebar:hover::-webkit-scrollbar-thumb,
.olive-sidebar:hover{ scrollbar-color:var(--olive-300) transparent; }
.olive-sidebar::-webkit-scrollbar-thumb:hover{ background-color:var(--olive-300); }
/* Page photo : sidebar en tiroir (hamburger) même sur desktop — sur cette
page précise, une sidebar toujours visible prend trop de place à côté de
l'image et pollue visuellement, contrairement aux pages catégories où
elle reste utile en permanence (voir olive_flag_picture_page() dans
functions.inc.php pour la classe "olive-picture-page" sur ).
Reprend EXACTEMENT le mécanisme du tiroir mobile (voir plus bas,
@media max-width:900px : bouton, transform, recouvrement, classe
"olive-nav-open" posée par olive.js) — seulement sans le réserver à une
largeur d'écran ici, donc actif à toute taille sur cette page. Une fois
la sidebar retirée du flux (position:fixed), #olive-shell (flex row
sidebar+contenu) donne naturellement toute la largeur au contenu, sans
réglage supplémentaire. */
body.olive-picture-page .olive-topbar__toggle{ display:inline-flex; }
body.olive-picture-page .olive-sidebar{
position:fixed; top:0; left:0; height:100vh; max-height:none;
transform:translateX(-100%);
z-index:80; box-shadow:var(--olive-shadow-lg);
background:var(--olive-bg);
transition:transform .25s ease;
padding-top:calc(var(--olive-topbar-h) + 12px);
}
body.olive-picture-page.olive-nav-open .olive-sidebar{ transform:translateX(0); }
body.olive-picture-page.olive-nav-open .olive-overlay{ display:block; }
body.olive-picture-page.olive-nav-open{ overflow:hidden; }
.olive-panel{
background:var(--olive-surface);
border-radius:var(--olive-radius-md);
box-shadow:var(--olive-shadow-sm);
padding:16px;
}
.olive-panel__title{
font-family:var(--olive-font-body);
font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--olive-text-muted);
margin:0 0 12px;
padding-left:10px;
border-left:3px solid var(--olive-accent);
}
.olive-panel__all-link{
font-size:.85rem; font-weight:600; text-align:center; padding:2px 4px;
}
.olive-account{ display:flex; gap:10px; align-items:flex-start; }
.olive-account__avatar{
flex:0 0 auto; width:36px; height:36px; border-radius:var(--olive-radius-pill);
display:inline-flex; align-items:center; justify-content:center;
background:var(--olive-accent-soft); color:var(--olive-accent-strong);
}
.olive-account__hello{ font-weight:600; margin:0 0 6px; font-size:.92rem; }
.olive-account__links{ display:flex; flex-direction:column; gap:4px; }
.olive-account__links a{ font-size:.85rem; color:var(--olive-text-muted); }
.olive-account__links a:hover{ color:var(--olive-link); }
.olive-quickconnect{ margin-top:12px; padding-top:12px; border-top:1px solid var(--olive-border); }
.olive-quickconnect p{ margin:0 0 8px; }
.olive-quickconnect label{ display:block; font-size:.78rem; color:var(--olive-text-muted); margin-bottom:3px; }
.olive-quickconnect input[type=text],
.olive-quickconnect input[type=password]{
width:100%; padding:.5em .7em; border-radius:var(--olive-radius-sm);
border:1px solid var(--olive-border-strong); font:inherit; background:var(--olive-bg);
}
.olive-quickconnect__remember{ font-size:.8rem; display:flex; align-items:center; gap:6px; }
.olive-quickconnect__actions{ display:flex; }
.olive-quickconnect__forgot{ font-size:.78rem; }
/* Arbre des albums. Par défaut, seul le niveau racine se replie/déplie
(bouton +/- visible uniquement sur .olive-tree__node--root ci-dessous) :
les niveaux plus profonds n'ont alors aucun mécanisme d'ouverture propre
et restent invisibles (max-height:0 hérité de la règle de base). Avec le
réglage "repliage profond" (Configuration > Thèmes > Olive > Configurer),
classe "olive-deep-tree" posée sur par header.tpl, CHAQUE niveau
ayant des enfants reçoit son propre bouton +/- fonctionnel — voir les
règles "body.olive-deep-tree ..." plus bas, qui étendent ce mécanisme
sans rien changer au comportement par défaut. */
.olive-tree,.olive-tree__children{ display:flex; flex-direction:column; gap:0; }
.olive-tree__children{
max-height:0; overflow:hidden;
padding-left:12px; margin-top:0;
transition:max-height .25s ease;
/* flex:0 0 100% : .olive-tree__children est un troisième enfant flex de
.olive-tree__node (avec .olive-tree__link et .olive-tree__trailing,
voir plus bas), sur la même ligne "flex" par défaut — même replié
(max-height:0), il resterait sinon posé À CÔTÉ du lien au lieu
d'être dessous, grignotant la largeur disponible et décalant le
nombre vers la gauche (plus du tout "aligné à droite"). Une base flex
de 100% force son propre saut de ligne (avec flex-wrap:wrap sur
.olive-tree__node), sans dépendre de sa hauteur (nulle une fois
replié). */
flex:0 0 100%;
}
.olive-tree__node--root.olive-tree__node--open > .olive-tree__children{
max-height:1200px;
}
/* Repliage profond : n'importe quel nœud ouvert (pas seulement la racine)
déplie ses propres enfants directs. Cap plus généreux (6000px vs 1200px)
qu'au niveau racine seul : une fois plusieurs niveaux ouverts en même
temps (ex. "Randonnées" > "2024" > ses dizaines de sorties), la somme des
hauteurs peut largement dépasser 1200px — un cap trop bas couperait
silencieusement la fin de la liste. Plus spécifique que la règle
ci-dessus (préfixée par "body.olive-deep-tree") : l'emporte aussi pour la
racine quand ce réglage est actif. */
body.olive-deep-tree .olive-tree__node--open > .olive-tree__children{
max-height:6000px;
}
.olive-tree__node{ position:relative; }
.olive-tree__link{
display:flex; align-items:center; gap:8px;
padding:5px 6px; border-radius:var(--olive-radius-sm);
font-size:.84rem; line-height:1.25; color:var(--olive-text);
min-width:0;
/* flex-grow/shrink/basis définis plus bas par la règle plus spécifique
".olive-tree__node > .olive-tree__link" (base 0%, pas "auto" — voir
le commentaire à cet endroit, important pour l'alignement à droite
du nombre avec les noms longs sur 2 lignes). */
}
.olive-tree__link:hover{ background:var(--olive-100); text-decoration:none; }
/* padding-left réservé pour TOUTES les racines (avec ou sans chevron) afin
que les noms démarrent tous à la même position, que la racine ait des
enfants (donc un chevron, voir .olive-tree__toggle plus bas) ou non
(ex. "clota" sans sous-album) — sinon les noms seraient décalés les uns
par rapport aux autres selon la présence du bouton. 30px = largeur du
chevron (24px) + son décalage (left:2px) + un peu d'air. */
.olive-tree__node--root > .olive-tree__link{ font-weight:600; padding-left:30px; }
/* Même réservation d'espace, mais pour les niveaux plus profonds — utile
seulement avec le repliage profond actif (les autres niveaux n'ont alors
pas de bouton, voir .olive-tree__toggle plus bas, donc pas besoin de
place pour lui). */
body.olive-deep-tree .olive-tree__node[data-has-children="1"]:not(.olive-tree__node--root) > .olive-tree__link{
padding-left:30px;
}
.olive-tree__node--selected > .olive-tree__link{
background:var(--olive-accent-soft); color:var(--olive-accent-strong); font-weight:700;
}
/* flex-wrap:wrap sur .olive-tree__node sert UNIQUEMENT à faire passer
.olive-tree__children (troisième enfant flex, voir plus haut) sur sa
propre ligne, sous le lien — jamais à faire "sauter" .olive-tree__trailing
(rond "récent" + nombre) sur une ligne séparée quand un nom long occupe 2
lignes. Le lien porte flex:1 1 0% (base 0, pas "auto") précisément pour
ça : avec une base "auto", un nom long donne au lien une taille
hypothétique = sa largeur de contenu max (très large), ce qui suffit à
elle seule à remplir la ligne et fait passer .olive-tree__trailing sur la
ligne suivante lors du calcul de répartition en lignes — cassant
l'alignement à droite du nombre. Avec une base 0, le lien "part de rien"
pour ce calcul puis grandit via flex-grow pour occuper l'espace restant,
donc lien + trailing tiennent toujours sur la même ligne, quelle que soit
la longueur du nom (qui peut toujours s'enrouler sur 2 lignes À
L'INTÉRIEUR du lien, indépendamment de ce calcul). Le bouton +/- reste
hors de ces calculs (position:absolute, voir .olive-tree__toggle). */
.olive-tree__node{ display:flex; flex-wrap:wrap; align-items:center; }
.olive-tree__node > .olive-tree__link{ flex:1 1 0%; }
/* .olive-tree__trailing regroupe le rond "récent" et le nombre de photos :
un seul margin-left:auto sur ce conteneur les colle ensemble à droite.
Mettre ce margin-left:auto directement sur .olive-tree__recent ET
.olive-tree__badge séparément (au lieu du conteneur commun) les aurait
écartés l'un de l'autre : avec plusieurs marges "auto" sur la même ligne
flex, l'espace disponible est réparti à parts égales entre elles, donc
chacune se retrouve poussée indépendamment au lieu de former un groupe
compact. */
.olive-tree__trailing{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; flex-shrink:0; }
.olive-tree__badge{
font-size:.72rem; font-weight:600; color:var(--olive-text-muted);
background:var(--olive-100); border-radius:var(--olive-radius-pill);
padding:.15em .6em;
}
.olive-tree__node--selected .olive-tree__badge{ background:rgba(255,255,255,.55); }
.olive-tree__recent{ color:var(--olive-clay); font-size:.6rem; }
/* Le bouton +/- existe dans le HTML pour TOUT niveau ayant des enfants
(data-has-children="1", voir olive_tree.tpl), mais reste masqué au-delà
de la racine tant que le repliage profond n'est pas activé (ci-dessous) :
positionné en absolute (plutôt que simplement laissé dans le flux) pour
que le padding-left réservé ci-dessus reste identique, chevron affiché
ou non — les noms restent alignés verticalement à chaque niveau. */
.olive-tree__toggle{
position:absolute; left:2px; top:1px;
width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
background:none; border:none; cursor:pointer; color:var(--olive-text-muted);
border-radius:var(--olive-radius-pill);
transition:transform .2s ease;
}
.olive-tree__toggle:hover{ background:var(--olive-100); }
.olive-tree__node--root.olive-tree__node--open > .olive-tree__toggle{ transform:rotate(180deg); }
/* Masqué par défaut au-delà de la racine (un clic ne ferait rien tant que
le CSS de repliage profond, ci-dessous, n'est pas actif : voir aussi
initTreeToggles() dans olive.js, qui accepte déjà tout niveau — c'est ce
display:none qui empêche réellement l'interaction, pas le JS). */
.olive-tree__node:not(.olive-tree__node--root) > .olive-tree__toggle{ display:none; }
body.olive-deep-tree .olive-tree__node:not(.olive-tree__node--root) > .olive-tree__toggle{
display:inline-flex;
}
body.olive-deep-tree .olive-tree__node--open > .olive-tree__toggle{ transform:rotate(180deg); }
.olive-tree__children .olive-tree__link{ font-weight:400; font-size:.82rem; }
/* Blocs natifs restants (mots-clés, explorer, liens) : rendus via leur
propre gabarit "default" (dt/dd), simplement enveloppés pour hériter du
style .olive-panel — restylage générique, pas de duplication de gabarit. */
.olive-panel--native dt{
font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--olive-text-muted); margin-bottom:8px; padding-left:10px;
border-left:3px solid var(--olive-300);
}
.olive-panel--native dd ul{ display:flex; flex-direction:column; gap:2px; font-size:.85rem; }
.olive-panel--native dd ul ul{ padding-left:14px; margin-top:2px; }
.olive-panel--native dd li{ display:flex; flex-wrap:wrap; align-items:center; }
.olive-panel--native dd a{ display:block; flex:1 1 auto; padding:6px 8px; border-radius:var(--olive-radius-sm); font-size:.85rem; color:var(--olive-text); }
.olive-panel--native dd a:hover{ background:var(--olive-100); text-decoration:none; }
.olive-panel--native dd li.selected > a{ font-weight:600; color:var(--olive-accent-strong); background:var(--olive-100); }
.olive-panel--native #menuTagCloud{ display:flex; flex-wrap:wrap; gap:6px; }
.olive-panel--native #menuTagCloud a{ font-size:.78rem; padding:4px 10px; border-radius:var(--olive-radius-pill); background:var(--olive-100); }
/* Bloc "Menu" natif (mbMenu) : recherche rapide native + liste Tags/
Recherche/À propos/Notification — le formulaire hérite déjà du style
générique des (section 12), on ajuste juste l'espacement. */
.olive-panel--native form#quicksearch{ margin-bottom:10px; }
.olive-panel--native form#quicksearch p{ margin:0; }
.olive-panel--native form#quicksearch input{ width:100% !important; }
/* Badges de compteur (bloc "Albums" natif en repli, "Albums liés"...) :
mêmes proportions que .olive-tree__badge pour rester cohérent visuellement
même quand le gabarit natif brut est utilisé. */
.olive-panel--native .badge,
.olive-panel--native .menuInfoCat,
.olive-panel--native .menuInfoCatByChild{
display:inline-flex; align-items:center; justify-content:center;
min-width:1.6em; padding:.1em .5em; margin-left:6px;
border-radius:var(--olive-radius-pill); background:var(--olive-100);
color:var(--olive-text-muted); font-size:.72rem; font-weight:600;
flex:0 0 auto;
}
.olive-panel--native .totalImages{
display:flex; align-items:center; gap:8px; margin-top:10px; padding:4px 8px;
font-size:.82rem; color:var(--olive-text-muted);
}
.olive-panel--native dt .menubarFilter{
display:inline-flex; align-items:center; justify-content:center;
width:22px; height:22px; margin-right:6px; border-radius:50%;
color:var(--olive-text-muted); vertical-align:middle;
}
.olive-panel--native dt .menubarFilter:hover{ background:var(--olive-100); }
.olive-panel--native dt .menubarFilter .pwg-icon{ width:.85em; height:.85em; }
.olive-sidebar__total{
display:flex; align-items:center; gap:8px;
font-size:.82rem; color:var(--olive-text-muted);
padding:4px 10px;
}
/* ---------------------------------------------------------------------
6. Barre d'outils / fil d'ariane (index.tpl "default", restylé en CSS)
--------------------------------------------------------------------- */
.olive-body .titrePage{ margin-bottom:20px; }
.olive-body .titrePage .categoryActions{
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
margin:0 0 12px; float:none;
}
.olive-body .titrePage .categoryActions li{ display:inline-flex; list-style:none; }
.olive-body .titrePage .categoryActions .pwg-button{
display:inline-flex; align-items:center; gap:.4em;
padding:.5em .85em; border-radius:var(--olive-radius-pill);
background:var(--olive-surface); border:1px solid var(--olive-border);
font-size:.82rem; color:var(--olive-text); box-shadow:var(--olive-shadow-sm);
}
.olive-body .titrePage .categoryActions .pwg-button:hover{ background:var(--olive-100); text-decoration:none; }
.olive-body .titrePage .categoryActions .pwg-button-text{ white-space:nowrap; }
.olive-view-toggle{
display:inline-flex; background:var(--olive-surface); border:1px solid var(--olive-border);
border-radius:var(--olive-radius-pill); padding:3px; box-shadow:var(--olive-shadow-sm);
order:5; margin-left:auto;
}
.olive-view-btn{
display:inline-flex; align-items:center; justify-content:center;
width:32px; height:30px; border:none; background:none; border-radius:var(--olive-radius-pill);
color:var(--olive-text-muted); cursor:pointer;
}
.olive-view-btn[aria-pressed="true"]{ background:var(--olive-accent); color:#fff; }
#sortOrderLink{ order:6; }
/* Sélecteur natif "Tailles de photo" (page catégorie/miniatures,
index.tpl de "default", jamais dupliqué par Olive) : masqué par défaut —
Olive sert alors toujours le dérivé "Carré" pour les miniatures (voir
olive_square_thumb_derivative(), functions.inc.php), sans choix possible
côté visiteur. Réapparaît, restylé comme les autres boutons de la barre
d'outils (.pwg-button/.switchBox déjà génériques ci-dessus), dès que le
réglage admin "Autoriser les visiteurs à choisir la taille" est coché
(classe "olive-sizes-enabled" sur , voir header.tpl). */
body:not(.olive-sizes-enabled) #derivativeSwitchLink{ display:none; }
/* "Rechercher dans ce lot" apparaît deux fois dans index.tpl de "default",
contrôlé par DEUX variables indépendantes : $SEARCH_IN_SET_ACTION (le
bouton #cmdSearchInSet dans .categoryActions, la barre d'outils du haut —
celui qu'on garde) ET $SEARCH_IN_SET_BUTTON, plus bas dans le gabarit,
sous le titre/calendrier (.action-buttons .search-in-set-button) — les
deux peuvent être vraies en même temps selon le contexte (recherche/
filtre), d'où le doublon visuel. On masque le second, jamais dupliqué
par Olive lui-même (pas d'override d'index.tpl, restylage CSS seul). */
.olive-body .action-buttons .search-in-set-button{ display:none; }
#breadcrumb{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
#breadcrumb h2{
font-size:1.4rem; margin:0; display:flex; align-items:baseline; gap:8px;
}
#breadcrumb .badge{
font-size:.75rem; font-weight:600; color:var(--olive-text-muted);
background:var(--olive-100); border-radius:var(--olive-radius-pill); padding:.15em .65em;
}
/* ---------------------------------------------------------------------
Chronologie / calendrier (chronology.tpl + month_calendar.tpl de
"default", jamais surchargés par Olive — restylage CSS pur comme le
reste de la barre d'outils, section 6). Ces classes n'étaient couvertes
par aucune règle précédente : tout s'affichait en texte brut (numéros
de jours collés les uns aux autres, sans distinction jour avec/sans
photo). Les
précédent/suivant, posés en
inline par le gabarit natif, sont volontairement laissés tels quels
(pas de display:flex sur .calendarBar, qui les aurait cassés) — un
simple clearfix suffit. */
.calendarViews{
display:flex; align-items:center; gap:8px; flex-wrap:wrap;
margin:0 0 14px; font-size:.85rem; color:var(--olive-text-muted);
}
.calendarViews #calendarViewSwitchLink{ font-weight:600; color:var(--olive-accent-strong); cursor:pointer; }
.calendarViews #calendarViewSwitchLink:hover{ text-decoration:underline; }
.calendarTitle{
font-family:var(--olive-font-display); font-size:1.3rem; font-weight:600;
margin:0 0 14px;
}
.calendarTitle a{ color:var(--olive-text); }
.calendarTitle .calInHere{ color:var(--olive-accent-strong); }
.calendarBar{ margin:0 0 20px; line-height:2.6; }
.calendarBar::after{ content:""; display:table; clear:both; }
.calItem{
display:inline-flex; align-items:center; justify-content:center;
min-width:2em; height:2em; padding:0 .35em; margin:0 2px 4px 0;
border-radius:var(--olive-radius-pill); font-size:.82rem; font-weight:600; vertical-align:middle;
}
a.calItem{ background:var(--olive-surface); color:var(--olive-text); box-shadow:var(--olive-shadow-sm); }
a.calItem:hover{ background:var(--olive-accent); color:#fff; text-decoration:none; }
span.calItem{ color:var(--olive-text-muted); opacity:.5; }
.calendarCalBar{ margin:0 0 14px; font-size:.85rem; }
.calCalHead{ font-weight:700; display:block; margin-bottom:4px; }
.calCal,.calCalEmpty{ display:inline-block; margin:0 8px 4px 0; color:var(--olive-text-muted); }
.calCal a{ color:var(--olive-text); font-weight:600; }
.calMonth{ width:100%; border-collapse:separate; border-spacing:4px; margin-bottom:20px; }
.calMonth th{ font-size:.75rem; text-transform:uppercase; color:var(--olive-text-muted); padding:4px; }
.calMonth td{ vertical-align:top; border-radius:var(--olive-radius-sm); background:var(--olive-100); }
.calDayCellEmpty{ text-align:center; color:var(--olive-text-muted); font-size:.8rem; padding:8px 0; }
.calDayCellFull{ position:relative; padding:0; overflow:hidden; border-radius:var(--olive-radius-md); }
.calBackDate{ display:none; }
.calForeDate{
position:absolute; top:4px; left:6px; z-index:2;
font-size:.72rem; font-weight:700; color:#fff;
text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.calImg{ display:block; height:100%; }
.calImg a{ display:block; height:100%; }
.calImg img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Plugin tiers piwigo-openstreetmap : son CSS inline pose "width: autopx"
(typo du plugin, ignorée par le navigateur) — on force une largeur
pleine et un habillage cohérent avec le reste du contenu. */
#osmmap{ margin:20px 0; }
.olive-body #map{ width:100% !important; border-radius:var(--olive-radius-md); overflow:hidden; box-shadow:var(--olive-shadow-sm); }
/* IMPORTANT : ces boîtes sont ouvertes/fermées par le script natif
"default" themes/default/js/switchbox.js (chargé via {combine_script}
dans index.tpl, indépendamment de load_parent_css), qui utilise
jQuery .toggle()/.hide() sur left/top calculés en JS. Sans CSS de
"default" (load_parent_css=false), rien ne les masque par défaut : un
est display:block au chargement, donc la boîte reste dépliée
dans le flux normal tant qu'on n'a pas interagi une première fois. Il
faut donc explicitement fournir l'état fermé (display:none) ET le
positionnement flottant (position:absolute) que "default" fournissait. */
.switchBox{
display:none;
position:absolute;
min-width:200px; max-width:280px;
background:var(--olive-surface); border:1px solid var(--olive-border);
border-radius:var(--olive-radius-md); box-shadow:var(--olive-shadow-lg);
padding:12px 14px; font-size:.85rem; z-index:50; line-height:1.9;
}
.switchBoxTitle{ font-weight:700; margin-bottom:8px; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--olive-text-muted); }
.switchBox a{ color:var(--olive-text); }
.switchBox a:hover{ color:var(--olive-accent-strong); }
/* ---------------------------------------------------------------------
7. Grille d'albums (page catégorie)
--------------------------------------------------------------------- */
/* minmax(280px,...) plutôt que 250px : le conteneur de contenu fait au
maximum ~1112px (#olive-shell plafonne à --olive-container:1440px, moins
la sidebar 280px et le padding de #content) — avec 250px la grille
passait à 4 colonnes sur les écrans larges (1112px permet 4×250px+3×16px
de marge), alors que la demande est 3 colonnes "confortables" sans les
multiplier. Vérifié empiriquement (Playwright) : 280px donne bien 3
colonnes de ~360px sur un écran large, 2 sur un écran plus étroit, jamais
4 — voir aussi le point 6 (responsive). */
.olive-albums{
display:grid;
/* minmax(X, X) plutôt que minmax(X, 1fr) : une carte ne doit jamais être
plus large que sa vignette (X = --olive-album-thumb-size, posée en
style inline par mainpage_categories.tpl = résolution réelle du
dérivé, 250px ou 120px — voir .olive-album-card__media plus bas, même
variable). Avec "1fr" en borne haute, une carte pouvait s'étirer
au-delà de sa vignette sur un écran large avec peu d'albums,
laissant un bord vide autour de l'image (signalé par le client) ;
avec deux bornes identiques, l'espace en trop reste en simple marge
après la dernière carte de chaque ligne, jamais à l'intérieur d'une
carte. min(X, 100%) : repli sur la largeur disponible si elle est
plus étroite que X (mobile) plutôt qu'un débordement horizontal. 280px
: repli si la variable est absente (voir .olive-album-card__media). */
grid-template-columns:repeat(auto-fill, minmax(min(var(--olive-album-thumb-size, 280px), 100%), min(var(--olive-album-thumb-size, 280px), 100%)));
gap:16px;
}
/* .olive-album-card (le