ObsiGate 2.83.1 : barre v0.2.0, onglet ShaarIt + garde data-theme (frontend/draco-barre.css)
This commit is contained in:
@@ -12,9 +12,18 @@
|
|||||||
Alertes icône seule.
|
Alertes icône seule.
|
||||||
v0.1.11 : marque = étoile Spark monochrome (blanche barre foncée,
|
v0.1.11 : marque = étoile Spark monochrome (blanche barre foncée,
|
||||||
noire barre claire) ; anneau rouge #c00000 autour de l'avatar flottant.
|
noire barre claire) ; anneau rouge #c00000 autour de l'avatar flottant.
|
||||||
|
v0.2.0 : nouvel onglet « ShaarIt » (data-app="shaarit", --app émeraude
|
||||||
|
#059669, logo logos/shaarit.svg via {{LOGO_SHAARIT}}) avant l'onglet
|
||||||
|
agent ; GARDE data-theme : les blocs prefers-color-scheme ne
|
||||||
|
s'appliquent que si <html> n'a AUCUN attribut data-theme
|
||||||
|
(html:not([data-theme])) — avant ce correctif, un hôte ayant choisi
|
||||||
|
le clair via data-theme="light" héritait quand même du sombre
|
||||||
|
système (piège constaté dans les copies vendangées de
|
||||||
|
Kanbante/Flowdeck ; les re-vendanges de la v0.2.0 le corrigent).
|
||||||
Jetons repris du prototype validé Console v7.2.
|
Jetons repris du prototype validé Console v7.2.
|
||||||
Thème : clair par défaut, sombre via [data-theme="dark"] sur <html>
|
Thème : clair par défaut, sombre via [data-theme="dark"] sur <html>
|
||||||
ou prefers-color-scheme si l'app intégratrice ne force rien. */
|
ou prefers-color-scheme si l'app intégratrice ne force rien
|
||||||
|
(aucun attribut data-theme sur <html>). */
|
||||||
|
|
||||||
.draco-bar {
|
.draco-bar {
|
||||||
--bg: #f2f2f0; --surface: #ffffff; --surface-2: #e9eae6; --surface-3: #f6f6f3;
|
--bg: #f2f2f0; --surface: #ffffff; --surface-2: #e9eae6; --surface-3: #f6f6f3;
|
||||||
@@ -27,8 +36,12 @@
|
|||||||
background: var(--surface); border-bottom: 1px solid var(--line);
|
background: var(--surface); border-bottom: 1px solid var(--line);
|
||||||
font: 500 14px/1.3 system-ui, "Segoe UI", sans-serif; color: var(--ink);
|
font: 500 14px/1.3 system-ui, "Segoe UI", sans-serif; color: var(--ink);
|
||||||
}
|
}
|
||||||
|
/* Garde data-theme (v0.2.0) : le sombre système ne s'applique QUE si
|
||||||
|
* l'hôte n'a posé aucun data-theme sur <html>. Sans cette garde, un
|
||||||
|
* hôte en data-theme="light" sur un système sombre affichait la barre
|
||||||
|
* sombre malgré son choix explicite. */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.draco-bar { --bg:#101211; --surface:#1a1c1a; --surface-2:#242624; --surface-3:#20221f;
|
html:not([data-theme]) .draco-bar { --bg:#101211; --surface:#1a1c1a; --surface-2:#242624; --surface-3:#20221f;
|
||||||
--ink:#eceee9; --ink-2:#a6aba2; --ink-3:#8b9089; --line:#2e302c; }
|
--ink:#eceee9; --ink-2:#a6aba2; --ink-3:#8b9089; --line:#2e302c; }
|
||||||
}
|
}
|
||||||
[data-theme="dark"] .draco-bar { --bg:#101211; --surface:#1a1c1a; --surface-2:#242624; --surface-3:#20221f;
|
[data-theme="dark"] .draco-bar { --bg:#101211; --surface:#1a1c1a; --surface-2:#242624; --surface-3:#20221f;
|
||||||
@@ -48,7 +61,7 @@
|
|||||||
barre foncée (filtre annulé par les règles thème ci-dessous). */
|
barre foncée (filtre annulé par les règles thème ci-dessous). */
|
||||||
.draco-brand-mark img { width: 26px; height: 26px; object-fit: cover; display: block; filter: brightness(0); }
|
.draco-brand-mark img { width: 26px; height: 26px; object-fit: cover; display: block; filter: brightness(0); }
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.draco-bar .draco-brand-mark img { filter: none; }
|
html:not([data-theme]) .draco-bar .draco-brand-mark img { filter: none; }
|
||||||
}
|
}
|
||||||
[data-theme="dark"] .draco-bar .draco-brand-mark img { filter: none; }
|
[data-theme="dark"] .draco-bar .draco-brand-mark img { filter: none; }
|
||||||
|
|
||||||
@@ -218,6 +231,9 @@
|
|||||||
.draco-bar[data-current="flowdeck"] .draco-apptab[data-app="flowdeck"],
|
.draco-bar[data-current="flowdeck"] .draco-apptab[data-app="flowdeck"],
|
||||||
.draco-bar[data-current="tiktak"] .draco-apptab[data-app="tiktak"],
|
.draco-bar[data-current="tiktak"] .draco-apptab[data-app="tiktak"],
|
||||||
.draco-bar[data-current="kanbante"] .draco-apptab[data-app="kanbante"],
|
.draco-bar[data-current="kanbante"] .draco-apptab[data-app="kanbante"],
|
||||||
|
/* v0.2.0 : sur ShaarIt elle-même (data-current="shaarit"), c'est
|
||||||
|
l'onglet ShaarIt qui reste visible en mobile. */
|
||||||
|
.draco-bar[data-current="shaarit"] .draco-apptab[data-app="shaarit"],
|
||||||
/* Chantier 5 : sur la console elle-même (data-current="agent",
|
/* Chantier 5 : sur la console elle-même (data-current="agent",
|
||||||
programme console #71), c'est l'onglet Console Spark qui reste
|
programme console #71), c'est l'onglet Console Spark qui reste
|
||||||
visible en mobile — les 4 hôtes gardent leur propre courant. */
|
visible en mobile — les 4 hôtes gardent leur propre courant. */
|
||||||
|
|||||||
Reference in New Issue
Block a user