/* ============================================================================
Documentation Resthome — thème « docs Odoo » aux couleurs LPLG.
Base : Material for MkDocs. Couleurs ADAPTATIVES clair + sombre.
bleu #0F43FF · fond clair #FBFCFF · titres Roboto Slab · corps Inter
============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto+Slab:wght@500;600;700&display=swap");
/* ---------- Palette & polices ---------- */
:root {
--md-primary-fg-color: #0F43FF;
--md-primary-fg-color--light: #4f74ff;
--md-primary-fg-color--dark: #0a34cc;
--md-primary-bg-color: #ffffff;
--md-primary-bg-color--light: #ffffffcc;
--md-accent-fg-color: #0F43FF;
--md-accent-fg-color--transparent: #0f43ff1a;
--md-typeset-a-color: #0F43FF;
--md-text-font: "Inter";
--md-heading-font: "Inter";
--lplg-slab-font: "Roboto Slab";
--lplg-blue: #0F43FF;
--lplg-blue-2: #d8dffd;
--lplg-border: #e6e9f2;
}
[data-md-color-scheme="default"] { --md-default-bg-color: #FBFCFF; }
/* Mode sombre : bleus plus clairs + bordures sombres. */
[data-md-color-scheme="slate"] {
--md-primary-fg-color: #4f74ff;
--md-accent-fg-color: #6f8dff;
--md-accent-fg-color--transparent: #6f8dff26;
--md-typeset-a-color: #8aa2ff;
--lplg-border: #2b3a4a;
}
/* ---------- Typographie ---------- */
.md-typeset { font-size: 0.78rem; line-height: 1.65; }
.md-typeset p { margin: 0.7em 0 0.9em; }
/* Titres en Roboto Slab (comme Odoo) — couleur héritée du thème (clair/sombre). */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
font-family: var(--lplg-slab-font), Georgia, "Times New Roman", serif;
}
.md-typeset h1 {
color: var(--md-default-fg-color);
font-weight: 700;
letter-spacing: -0.005em;
margin-bottom: 0.7em;
}
.md-typeset h2 {
color: var(--md-default-fg-color);
font-weight: 600;
padding-bottom: 0.28em;
border-bottom: 1px solid var(--lplg-border);
margin-top: 2.2em;
}
.md-typeset h3 { color: var(--md-default-fg-color); font-weight: 700; margin-top: 1.6em; }
/* ---------- Encadrés (admonitions) façon Odoo ---------- */
.md-typeset .admonition,
.md-typeset details {
border: 1px solid var(--lplg-border);
border-left-width: 4px;
border-radius: 6px;
box-shadow: none;
font-size: 0.75rem;
}
.md-typeset .admonition-title,
.md-typeset summary { font-weight: 700; background-color: transparent; }
.md-typeset .admonition.note,
.md-typeset details.note { border-left-color: var(--lplg-blue); background: #f2f5ff; }
.md-typeset .note > .admonition-title::before { background-color: var(--lplg-blue); }
.md-typeset .admonition.tip,
.md-typeset details.tip { border-left-color: #00a67d; background: #eefaf5; }
.md-typeset .tip > .admonition-title::before { background-color: #00a67d; }
.md-typeset .admonition.warning,
.md-typeset details.warning { border-left-color: #e8871e; background: #fff6ea; }
.md-typeset .warning > .admonition-title::before { background-color: #e8871e; }
/* Fonds d'encadrés en mode sombre. */
[data-md-color-scheme="slate"] .md-typeset .admonition.note,
[data-md-color-scheme="slate"] .md-typeset details.note { background: #16203a; }
[data-md-color-scheme="slate"] .md-typeset .admonition.tip,
[data-md-color-scheme="slate"] .md-typeset details.tip { background: #10261f; }
[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
[data-md-color-scheme="slate"] .md-typeset details.warning { background: #2a2113; }
/* ---------- Images / captures encadrées ---------- */
.md-typeset img:not(.twemoji):not(.emojione):not([src$=".svg"]) {
max-width: 100%;
border: 1px solid var(--lplg-border);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(27, 39, 51, 0.08);
margin: 0.6em 0;
}
.md-typeset figure > figcaption { font-size: 0.72rem; opacity: 0.75; margin-top: 0.4em; }
/* ---------- Tableaux ---------- */
.md-typeset table:not([class]) {
border: 1px solid var(--lplg-border);
border-radius: 8px;
overflow: hidden;
font-size: 0.74rem;
}
.md-typeset table:not([class]) th {
background: var(--md-accent-fg-color--transparent);
font-weight: 700;
}
/* ---------- En-tête façon docs Odoo (LPLG) ---------- */
.md-header {
background: linear-gradient(90deg, #0F43FF 0%, #0a34cc 100%);
box-shadow: 0 2px 6px rgba(15, 67, 255, 0.18);
color: #fff;
}
/* Logo LPLG = « bulle » ronde CLIQUABLE à droite → ramène au site lplg.eu. */
.md-header__button.md-logo {
margin: 0 0.1rem 0 0.45rem;
padding: 0;
width: 1.8rem;
height: 1.8rem;
background: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg { width: 1.1rem; height: 1.1rem; }
.md-header__title {
margin-left: 0.4rem;
font-size: 1rem;
color: #fff;
}
/* Groupe des contrôles de droite (mode sombre, langue, GitHub, bulle LPLG). */
.md-header__end {
display: flex;
align-items: center;
gap: 0.25rem;
}
.md-header__topic .md-ellipsis { font-weight: 700; letter-spacing: -0.01em; }
.md-grid { max-width: 100%; }
.md-content { max-width: 52rem; }
.md-header__inner { position: relative; gap: 0.35rem; }
/* Recherche VRAIMENT centrée sur écran large (le champ visible remplit le
conteneur centré, sinon Material l'aligne à droite). */
/* Recherche NATIVE (overlay + fermeture au clic conservés), centrée par les
marges auto sur écran large ; les contrôles sont poussés à droite via l'ordre. */
@media screen and (min-width: 76.25em) {
/* Titre (gauche) et groupe de contrôles (droite) grandissent à parts égales
→ la recherche, item central non extensible, se retrouve pile au milieu.
La recherche reste NATIVE : overlay et fermeture au clic intacts. */
.md-header__title { flex: 1 1 0; min-width: 0; }
.md-search { flex: 0 0 auto; width: 26rem; }
/* Le champ visible remplit le conteneur centré (au lieu de flotter à droite).
En flux natif, l'overlay et la fermeture restent intacts. */
.md-search__inner { float: none; width: 100%; }
.md-header__end { flex: 1 1 0; justify-content: flex-end; }
}
.md-search__form { border-radius: 8px; background-color: #fff; }
.md-search__form:hover { background-color: #fff; }
.md-search__input { color: #1b2733; }
.md-search__input::placeholder { color: #6b7280; }
.md-search__icon { color: #6b7280; }
/* Icônes de l'en-tête (mode sombre) : blanches. */
.md-header [data-md-component="palette"] .md-icon svg,
.md-header__option .md-icon svg { fill: #fff; }
.md-header__button.md-icon { color: #fff; opacity: 0.9; }
.md-header__button.md-icon:hover { opacity: 1; }
/* Bouton langue : afficher « FR » / « NL » au lieu de l'icône globe. */
.md-select > .md-header__button > svg { display: none; }
.md-select > .md-header__button {
width: auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.md-select > .md-header__button::after {
content: "FR";
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.02em;
color: #fff;
padding: 0 0.15rem;
}
html[lang="nl"] .md-select > .md-header__button::after { content: "NL"; }
/* Page active : supprimer le doublon « Accueil » — Material intègre la TOC de la
page active dans la nav de gauche (label + lien + TOC) alors qu'elle est déjà
à droite. On masque le libellé-toggle en double et la TOC intégrée. */
.md-nav--primary .md-nav__item--active:not(.md-nav__item--nested) > label.md-nav__link { display: none !important; }
.md-nav--primary .md-nav__item--active > nav.md-nav--secondary { display: none; }
/* GitHub : uniquement l'icône (contribution). */
.md-header__source { max-width: 2.4rem; margin-left: 0.2rem; }
.md-source__repository, .md-source__facts { display: none; }
.md-header__source .md-icon svg { fill: #fff; }
.md-header .md-select > .md-header__button { border-radius: 6px; font-weight: 600; }
/* ---------- Barre latérale façon docs Odoo ---------- */
.md-sidebar--primary { border-right: 1px solid var(--lplg-border); }
/* Item actif : couleur + fond teintés (adaptatifs clair/sombre). */
.md-nav__item .md-nav__link--active {
color: var(--md-primary-fg-color);
font-weight: 700;
background: var(--md-accent-fg-color--transparent);
border-radius: 4px;
}
.md-nav__list .md-nav__item > .md-nav__link--active {
border-left: 3px solid var(--md-primary-fg-color);
padding-left: 0.5rem;
margin-left: -0.65rem;
}
.md-nav__item--nested > .md-nav__link,
.md-nav__item--section > .md-nav__link { font-weight: 600; }
.md-nav--primary > .md-nav__title { font-weight: 700; font-size: 0.8rem; }
/* Icônes devant chaque section de 1er niveau (couleur = texte, donc adaptative). */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link { display: flex; align-items: center; }
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link::before {
content: "";
width: 1rem; height: 1rem;
margin-right: 0.5rem;
flex: 0 0 auto;
background-color: currentColor;
opacity: 0.72;
-webkit-mask: var(--si) center / contain no-repeat;
mask: var(--si) center / contain no-repeat;
}
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link--active::before { opacity: 1; }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(1) > .md-nav__link { --si: url("data:image/svg+xml,"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(2) > .md-nav__link { --si: url("data:image/svg+xml,"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(3) > .md-nav__link { --si: url("data:image/svg+xml,"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(4) > .md-nav__link { --si: url("data:image/svg+xml,"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(5) > .md-nav__link { --si: url("data:image/svg+xml,"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(6) > .md-nav__link { --si: url("data:image/svg+xml,"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(7) > .md-nav__link { --si: url("data:image/svg+xml,"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(8) > .md-nav__link { --si: url("data:image/svg+xml,"); }
.md-nav--primary > .md-nav__list > .md-nav__item:nth-child(9) > .md-nav__link { --si: url("data:image/svg+xml,"); }
/* ---------- Cartes de la page d'accueil ---------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
border: 1px solid var(--lplg-border);
border-radius: 0.7rem;
transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
border-color: var(--md-primary-fg-color);
box-shadow: 0 0.3rem 0.9rem rgba(15, 67, 255, 0.14);
transform: translateY(-2px);
}
.md-typeset .grid.cards .twemoji svg,
.md-typeset .grid.cards .lg svg { fill: var(--md-primary-fg-color); }
.md-content__button { color: var(--md-primary-fg-color); }