html {
min-height: 100%; height: 100%;
}
html:root { --dp-style: off; --dp-userchoice: 1; }
html:root .dp-mode {
--dp-bg: #f3f5f8;
--dp-surface: #ffffff;
--dp-surface-2: #f8fafc;
--dp-border: #e2e7ee;
--dp-line: #d8dee6;
--dp-text: #1d2733;
--dp-muted: #677587;
--dp-primary: #2463d1;
--dp-primary-hover: #1c52b0;
--dp-primary-soft: #e8f0fd;
--dp-ok: #1e9e61;
--dp-ok-soft: #e3f6ec;
--dp-warn: #c98a0a;
--dp-warn-soft: #fdf3dc;
--dp-crit: #d23c3c;
--dp-crit-soft: #fbe7e7;
--dp-nav: #16202e;
--dp-nav-text: #aab6c6;
--dp-nav-hover: rgba(255, 255, 255, .07);
--dp-radius: 10px;
--dp-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
--dp-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
}
/* Copyright (C) 2026 LEOUEB Informatique - Thème DoliProd : boutons « Style » et « Ambiance ».
* Propriété de LEOUEB Informatique, utilisation soumise à licence.
*
* Chargé quand l'utilisateur peut choisir, thème activé ou non (le bouton « Style » sert à le réactiver) ; thème
* désactivé, css/doliprod.css.php pose les couleurs du thème sur les seuls boutons.
*/
/* ---------- Bouton « Ambiance » (ajouté par js/doliprod_layout.js si l'utilisateur peut choisir) ---------- */
html:root .dp-mode { position: relative; display: inline-flex; align-items: center; vertical-align: middle; margin: 0 6px 0 0; }
html:root .dp-mode-btn {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
margin: 0;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--dp-nav-text);
cursor: pointer;
box-shadow: none;
}
html:root .dp-mode-btn:hover, html:root .dp-mode.is-open .dp-mode-btn { background: var(--dp-nav-hover); color: #fff; }
html.dp-side #dp-topbar .dp-mode-btn { width: 36px; height: 36px; border-color: var(--dp-border); color: var(--dp-muted); }
html.dp-side #dp-topbar .dp-mode-btn:hover, html.dp-side #dp-topbar .dp-mode.is-open .dp-mode-btn { background: var(--dp-surface-2); color: var(--dp-primary); }
html:root .dp-mode .dp-mode-menu, html.dp-side #dp-topbar .dp-mode .dp-mode-menu {
display: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
left: auto;
z-index: 200;
min-width: 250px;
max-width: none;
padding: 6px;
background: var(--dp-surface);
border: 1px solid var(--dp-border);
border-radius: var(--dp-radius);
box-shadow: 0 10px 30px rgba(16, 24, 40, .16);
text-align: left;
}
html:root .dp-mode.is-open .dp-mode-menu, html.dp-side #dp-topbar .dp-mode.is-open .dp-mode-menu { display: block; }
html:root .dp-mode-head {
padding: 7px 10px 8px;
margin: 0 0 4px;
border-bottom: 1px solid var(--dp-border);
color: var(--dp-text);
font: 600 13px var(--dp-font);
}
html:root .dp-mode-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 7px 10px;
margin: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--dp-text);
font: 500 13.5px var(--dp-font);
text-align: left;
cursor: pointer;
box-shadow: none;
}
html:root .dp-mode-item:hover { background: var(--dp-primary-soft); color: var(--dp-primary); }
html:root .dp-mode-item.is-current { color: var(--dp-primary); font-weight: 600; }
html:root .dp-mode-item.is-current::after { content: "\2713"; margin-left: auto; }
html:root .dp-mode-item.is-busy { opacity: .5; cursor: progress; }
html:root .dp-mode-swatch { flex: none; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
html:root .dp-mode-swatch-light { background: linear-gradient(90deg, #16202e 0 35%, #f3f5f8 35%); }
html:root .dp-mode-swatch-soft { background: linear-gradient(90deg, #1f2a38 0 35%, #e4e8ee 35%); }
html:root .dp-mode-swatch-dim { background: linear-gradient(90deg, #1a2029 0 35%, #2c3541 35%); }
html:root .dp-mode-swatch-dark { background: linear-gradient(90deg, #0b1119 0 35%, #172030 35%); }
html:root .dp-mode-swatch-auto { background: linear-gradient(135deg, #f3f5f8 50%, #0f151e 50%); }
html:root .dp-mode-swatch-custom { background: linear-gradient(135deg, #e4e8ee 50%, #2c3541 50%); }
html:root .dp-mode-custom {
margin: 4px 0 0;
padding: 8px 10px 6px;
border-top: 1px solid var(--dp-border);
font: 500 13px var(--dp-font);
color: var(--dp-text);
}
html:root .dp-mode-custom[hidden] { display: none; }
html:root .dp-mode-slot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
html:root .dp-mode-slot select { min-width: 120px; padding: 3px 6px; }
html:root .dp-mode-apply {
width: 100%;
margin: 2px 0 6px;
padding: 6px 10px;
border: 0;
border-radius: 7px;
background: var(--dp-primary);
color: #fff;
font: 600 13px var(--dp-font);
cursor: pointer;
}
html:root .dp-mode-apply:hover { background: var(--dp-primary-hover); }
html:root .dp-mode-note { color: var(--dp-muted); font-size: 11.5px; font-weight: 400; }
/* ---------- Bouton « Style » : pictogrammes des dispositions ---------- */
html:root .dp-style-swatch { position: relative; background: #f3f5f8; overflow: hidden; }
html:root .dp-style-swatch::before, html:root .dp-style-swatch::after { content: ""; position: absolute; background: #16202e; }
html:root .dp-style-swatch-side::before { left: 0; top: 0; bottom: 0; width: 6px; }
html:root .dp-style-swatch-side::after { left: 6px; right: 0; top: 0; height: 4px; background: #fff; box-shadow: 0 1px 0 #d2d8e0; }
html:root .dp-style-swatch-top::before { left: 0; right: 0; top: 0; height: 5px; }
html:root .dp-style-swatch-top::after { left: 0; top: 5px; bottom: 0; width: 6px; background: #fff; box-shadow: 1px 0 0 #d2d8e0; }
html:root .dp-style-swatch-off { background: repeating-linear-gradient(135deg, #f3f5f8 0 4px, #dfe4ea 4px 8px); }
html:root .dp-style-swatch-off::before { left: 0; right: 0; top: 0; height: 5px; background: #6c7a89; }
/* ---------- Bulle « Essayez notre nouveau thème » (sous le bouton « Style ») ---------- */
html:root .dp-promo {
position: absolute;
top: calc(100% + 12px);
right: -8px;
z-index: 210;
width: 270px;
padding: 14px 16px 12px;
border-radius: 12px;
background: #2463d1;
color: #fff;
text-align: left;
font: 400 13px/1.45 var(--dp-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
box-shadow: 0 12px 32px rgba(16, 24, 40, .28);
white-space: normal;
animation: dp-promo-in .35s ease-out;
}
html:root .dp-promo::before {
content: "";
position: absolute;
top: -6px;
right: 20px;
width: 12px;
height: 12px;
background: #2463d1;
transform: rotate(45deg);
}
html:root .dp-promo-close {
position: absolute;
top: 6px;
right: 8px;
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: rgba(255, 255, 255, .8);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
html:root .dp-promo-close:hover { background: rgba(255, 255, 255, .15); color: #fff; }
html:root .dp-promo-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
html:root .dp-promo-text { margin: 0 18px 12px 0; color: rgba(255, 255, 255, .92); }
html:root .dp-promo-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html:root .dp-promo-try {
padding: 6px 14px;
border: 0;
border-radius: 8px;
background: #fff;
color: #2463d1;
font: 600 13px var(--dp-font, system-ui, sans-serif);
cursor: pointer;
}
html:root .dp-promo-try:hover { background: #e8f0fd; }
html:root a.dp-promo-hide, html:root a.dp-promo-hide:visited { color: rgba(255, 255, 255, .85) !important; font-size: 12px; text-decoration: underline; }
html:root a.dp-promo-hide:hover { color: #fff !important; }
/* Pastille sur le bouton tant que la bulle est affichée */
html:root .dp-has-promo .dp-mode-btn { position: relative; }
html:root .dp-has-promo:has(.dp-promo) .dp-mode-btn::after {
content: "";
position: absolute;
top: 4px;
right: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 0 2px #fff;
}
@keyframes dp-promo-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
html:root .dp-promo { position: fixed; top: 64px; right: 10px; left: 10px; width: auto; }
html:root .dp-promo::before { display: none; }
}
/* Thème désactivé : bouton dans la barre du haut d'eldy, à sa couleur de texte */
html:root .dp-style-only .dp-mode-btn { color: var(--colortextbackhmenu, #fff); }
html:root .dp-style-only .dp-mode-btn:hover, html:root .dp-style-only.is-open .dp-mode-btn { background: rgba(255, 255, 255, .12); color: var(--colortextbackhmenu, #fff); }