226 lines
12 KiB
CSS
226 lines
12 KiB
CSS
/* Barre d'apps commune dracodev — v0.1.0 (bloc 0, ACC-0.2) ;
|
|
v0.1.2 : palier mobile resserré selon la spec (voir @media 700px) ;
|
|
v0.1.3 : la marque ✦ (plus grande) ouvre le menu des applications —
|
|
c'est LE changement d'app en mobile (choix de Bruno, 2026-10-21) ;
|
|
v0.1.4 : palier mobile élargi de 700 à 900 px (zone morte comblée) ;
|
|
v0.1.6 : menu compte (construit par le JS, mêmes jetons que le
|
|
menu des applications) ; l'avatar est un vrai <button>.
|
|
Correctif fusion #70 (SANS bump) : bouton trois points et menu par
|
|
défaut supprimés ; le menu de la marque gagne « Console Spark ».
|
|
v0.1.10 : rose --agent → rouge Spark #c00000 ; marque = logo Spark ;
|
|
bouton Spark supprimé (remplacé par l'avatar flottant bas-centre) ;
|
|
Alertes icône seule.
|
|
v0.1.11 : marque = étoile Spark monochrome (blanche barre foncée,
|
|
noire barre claire) ; anneau rouge #c00000 autour de l'avatar flottant.
|
|
Jetons repris du prototype validé Console v7.2.
|
|
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. */
|
|
|
|
.draco-bar {
|
|
--bg: #f2f2f0; --surface: #ffffff; --surface-2: #e9eae6; --surface-3: #f6f6f3;
|
|
--ink: #1b1d1a; --ink-2: #5c615a; --ink-3: #787d75; --line: #dedfd9;
|
|
--agent: #c00000; --danger: #cf4444;
|
|
position: relative;
|
|
height: 60px; box-sizing: border-box;
|
|
display: grid; grid-template-columns: auto minmax(200px, 520px) auto;
|
|
align-items: center; gap: 16px; padding: 0 12px;
|
|
background: var(--surface); border-bottom: 1px solid var(--line);
|
|
font: 500 14px/1.3 system-ui, "Segoe UI", sans-serif; color: var(--ink);
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.draco-bar { --bg:#101211; --surface:#1a1c1a; --surface-2:#242624; --surface-3:#20221f;
|
|
--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;
|
|
--ink:#eceee9; --ink-2:#a6aba2; --ink-3:#8b9089; --line:#2e302c; }
|
|
|
|
.draco-bar-zone { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
.draco-bar-centre { justify-content: center; }
|
|
.draco-bar-droite { justify-content: flex-end; }
|
|
|
|
/* Marque — bouton du menu des applications (v0.1.3) */
|
|
.draco-brand { display: flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-weight: 800; cursor: pointer; border-radius: 10px; padding: 4px 6px; margin: -4px -6px; }
|
|
.draco-brand:hover { background: var(--surface-2); }
|
|
.draco-brand:focus-visible { outline: 2px solid var(--agent); outline-offset: 2px; }
|
|
.draco-brand-mark { line-height: 0; }
|
|
/* Marque monochrome v0.1.11 : étoile blanche extraite du logo rouge,
|
|
fond transparent — noire sur barre claire (filtre), blanche sur
|
|
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); }
|
|
@media (prefers-color-scheme: dark) {
|
|
.draco-bar .draco-brand-mark img { filter: none; }
|
|
}
|
|
[data-theme="dark"] .draco-bar .draco-brand-mark img { filter: none; }
|
|
|
|
/* Menu des applications — construit par le JS depuis les onglets */
|
|
.draco-apps-menu {
|
|
position: absolute; top: calc(100% + 6px); left: 10px; z-index: 400;
|
|
min-width: 248px; padding: 6px;
|
|
background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
|
|
box-shadow: 0 16px 44px rgb(0 0 0 / .28);
|
|
}
|
|
.draco-apps-menu[hidden] { display: none; }
|
|
|
|
/* Menu compte (v0.1.6) — même boîte que le menu des apps, ancré à
|
|
* droite ; ses items réutilisent .draco-apps-item. */
|
|
.draco-compte-menu {
|
|
position: absolute; top: calc(100% + 6px); right: 10px; z-index: 400;
|
|
min-width: 248px; padding: 6px;
|
|
background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
|
|
box-shadow: 0 16px 44px rgb(0 0 0 / .28);
|
|
}
|
|
.draco-compte-menu[hidden] { display: none; }
|
|
.draco-menu-item {
|
|
display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
|
|
padding: 8px 10px; border: 0; border-radius: 10px;
|
|
background: transparent; color: var(--ink); font: inherit; text-align: left;
|
|
text-decoration: none; cursor: pointer;
|
|
}
|
|
.draco-menu-item:hover, .draco-menu-item:focus-visible { background: var(--surface-2); }
|
|
.draco-menu-sep { height: 1px; margin: 6px 10px; background: var(--line); }
|
|
.draco-compte-nom {
|
|
padding: 8px 10px 10px; font-weight: 700; font-size: 14px;
|
|
border-bottom: 1px solid var(--line); margin-bottom: 6px;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.draco-apps-item {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 8px 10px; border-radius: 10px;
|
|
color: var(--ink); text-decoration: none;
|
|
}
|
|
.draco-apps-item:hover, .draco-apps-item:focus-visible { background: var(--surface-2); }
|
|
.draco-apps-item[data-active="true"] { background: var(--surface-3); box-shadow: inset 2px 0 0 var(--agent); }
|
|
.draco-apps-item-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
|
|
.draco-apps-item-nom { font-weight: 700; font-size: 14px; }
|
|
.draco-apps-item-role { font-size: 12px; color: var(--ink-2); }
|
|
|
|
/* Onglets d'apps — accordéon : seule l'app courante est déployée */
|
|
.draco-apptabs { display: flex; gap: 6px; }
|
|
.draco-apptab {
|
|
position: relative; display: flex; align-items: center; gap: 8px;
|
|
height: 44px; padding: 0 9px; border-radius: 12px;
|
|
color: var(--ink); text-decoration: none; background: transparent;
|
|
transition: background .18s ease;
|
|
}
|
|
.draco-apptab:hover { background: var(--surface-2); }
|
|
.draco-apptab-ico {
|
|
width: 30px; height: 30px; flex: none; display: grid; place-items: center;
|
|
border-radius: 9px; background: var(--app); color: #fff; font-size: 15px;
|
|
}
|
|
/* Icônes logos (2026-10-29, corrigé le même jour) : l'image du logo
|
|
* fourni, telle quelle, remplit la tuile 30 px — jamais de glyphe
|
|
* texte, jamais de redessin. Le fond de la tuile est transparent :
|
|
* les logos PNG portent déjà leur fond (dégradé), le SVG TikTak
|
|
* reste sur le fond de la barre. */
|
|
.draco-apptab-ico { background: transparent; }
|
|
.draco-apptab-ico img { width: 30px; height: 30px; display: block; border-radius: 9px; object-fit: cover; }
|
|
.draco-apptab-txt { display: none; flex-direction: column; line-height: 1.15; }
|
|
.draco-apptab-txt strong { font-size: 14px; font-weight: 700; }
|
|
.draco-apptab-txt small { font-size: 11.5px; color: var(--ink-2); }
|
|
.draco-apptab[data-active="true"] { background: var(--surface-3); box-shadow: inset 0 -2px 0 var(--app, var(--agent)); }
|
|
.draco-apptab[data-active="true"] .draco-apptab-txt { display: flex; }
|
|
|
|
/* Pastilles compteurs — petites, rouges, coin bas-droit (standard v7.1) */
|
|
.draco-badge {
|
|
position: absolute; right: -4px; bottom: -4px; min-width: 17px; height: 17px;
|
|
padding: 0 4px; border-radius: 9px; box-sizing: border-box;
|
|
background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 700;
|
|
display: grid; place-items: center; border: 2px solid var(--surface);
|
|
}
|
|
.draco-badge[hidden] { display: none; }
|
|
|
|
/* Recherche */
|
|
.draco-search {
|
|
display: flex; align-items: center; gap: 8px; width: 100%; height: 38px;
|
|
padding: 0 12px; border-radius: 10px; border: 1px solid var(--line);
|
|
background: var(--surface-3); color: var(--ink-3); cursor: pointer; font: inherit;
|
|
}
|
|
.draco-search kbd {
|
|
margin-left: auto; font: 600 11px system-ui; color: var(--ink-2);
|
|
border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
|
|
}
|
|
|
|
/* Domaines — contrôle segmenté */
|
|
.draco-domaines { display: flex; align-items: center; gap: 2px; background: var(--surface-3); border-radius: 10px; padding: 3px; }
|
|
.draco-domaines-lbl { font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); padding: 0 6px; text-transform: uppercase; }
|
|
.draco-domaines button {
|
|
border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px;
|
|
height: 30px; padding: 0 10px; border-radius: 8px; cursor: pointer;
|
|
}
|
|
.draco-domaines button[data-on="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 3px rgb(0 0 0 / .18); }
|
|
|
|
/* Alertes — la cloche ne disparaît JAMAIS (correctif v7.2) */
|
|
.draco-alertes {
|
|
position: relative; display: flex; align-items: center; height: 38px;
|
|
padding: 0 9px; border-radius: 10px; border: 1px solid var(--line);
|
|
background: transparent; color: var(--ink); font: inherit; cursor: pointer;
|
|
}
|
|
|
|
/* Bouton avatar Spark flottant — bas-centre, ouvre le panneau Spark
|
|
de l'hôte via data-act="spark" (délégation globale existante).
|
|
La console Spark ne l'inclut pas : son fragment est propre. */
|
|
.draco-spark-flottant {
|
|
position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
|
|
z-index: 65; width: 64px; height: 64px; padding: 0; border: 0;
|
|
border-radius: 50%; background: transparent; cursor: pointer;
|
|
box-shadow: 0 8px 28px rgb(0 0 0 / .45);
|
|
}
|
|
.draco-spark-flottant img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; box-sizing: border-box; border: 3px solid var(--agent); }
|
|
.draco-spark-flottant:hover { transform: translateX(-50%) scale(1.05); }
|
|
.draco-spark-flottant:focus-visible { outline: 2px solid var(--agent); outline-offset: 3px; }
|
|
|
|
.draco-icon-btn {
|
|
width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent;
|
|
background: transparent; color: var(--ink-2); font: inherit; cursor: pointer;
|
|
}
|
|
.draco-icon-btn:hover { background: var(--surface-2); }
|
|
.draco-avatar {
|
|
width: 34px; height: 34px; border: 0; padding: 0; border-radius: 50%;
|
|
display: grid; place-items: center; flex: none;
|
|
background: #2f6fed; color: #fff; font: inherit; font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Rappel de l'en-tête masqué — onglet ancré au bord supérieur (v6) */
|
|
.draco-bar-rappel {
|
|
position: fixed; top: 0; left: 16px; z-index: 60; cursor: pointer;
|
|
background: var(--surface, #1a1c1a); border: 1px solid var(--line, #2e302c); border-top: 0;
|
|
border-radius: 0 0 10px 10px; padding: 5px 12px; font: 600 12px system-ui; color: var(--ink-2, #a6aba2);
|
|
}
|
|
|
|
/* Paliers — les zones latérales cèdent, la barre ne casse jamais */
|
|
@media (max-width: 1440px) {
|
|
.draco-brand-name, .draco-domaines-lbl { display: none; }
|
|
.draco-bar { grid-template-columns: auto minmax(200px, 440px) auto; }
|
|
}
|
|
@media (max-width: 1200px) {
|
|
.draco-search-txt, .draco-search kbd { display: none; }
|
|
.draco-search { width: 38px; padding: 0; justify-content: center; }
|
|
.draco-bar { grid-template-columns: auto auto 1fr; }
|
|
.draco-bar-droite { justify-content: flex-end; }
|
|
}
|
|
@media (max-width: 900px) {
|
|
/* Mobile (spec des barres, § Mobile) : la barre se resserre sur
|
|
l'essentiel — marque, onglet de l'app courante, alertes, Spark,
|
|
avatar. Le rail, la recherche et les domaines disparaissent :
|
|
chaque app garde ses contrôles natifs (barre
|
|
basse, en-tête) — un seul hamburger visible, celui de l'app.
|
|
Le changement d'app passe par le menu du ✦ (v0.1.3).
|
|
(v0.1.2 — avant, les onglets entiers et les pastilles domaines
|
|
restaient affichés et la barre débordait sur téléphone.
|
|
v0.1.4 — palier élargi de 700 à 900 px : entre les deux, la
|
|
barre complète ne tenait pas (fenêtres réduites, tablettes,
|
|
webviews) alors que les apps sont déjà en mise en page mobile.) */
|
|
.draco-bar { height: 52px; grid-template-columns: auto 1fr auto; }
|
|
.draco-bar-centre, .draco-domaines, .draco-bar .draco-icon-btn { display: none; }
|
|
.draco-apptab { display: none; }
|
|
.draco-bar[data-current="obsigate"] .draco-apptab[data-app="obsigate"],
|
|
.draco-bar[data-current="flowdeck"] .draco-apptab[data-app="flowdeck"],
|
|
.draco-bar[data-current="tiktak"] .draco-apptab[data-app="tiktak"],
|
|
.draco-bar[data-current="kanbante"] .draco-apptab[data-app="kanbante"],
|
|
/* Chantier 5 : sur la console elle-même (data-current="agent",
|
|
programme console #71), c'est l'onglet Console Spark qui reste
|
|
visible en mobile — les 4 hôtes gardent leur propre courant. */
|
|
.draco-bar[data-current="agent"] .draco-apptab[data-app="agent"] { display: flex; }
|
|
}
|