167 lines
8.5 KiB
CSS
167 lines
8.5 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).
|
|
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: #c2437e; --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-mark { color: var(--agent); font-size: 24px; line-height: 1; }
|
|
|
|
/* 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; }
|
|
.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;
|
|
}
|
|
.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; gap: 7px; height: 38px;
|
|
padding: 0 11px; border-radius: 10px; border: 1px solid var(--line);
|
|
background: transparent; color: var(--ink); font: inherit; cursor: pointer;
|
|
}
|
|
|
|
/* Spark */
|
|
.draco-spark {
|
|
position: relative; display: flex; align-items: center; gap: 7px; height: 38px;
|
|
padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer;
|
|
background: var(--agent); color: #fff; font: inherit; font-weight: 700;
|
|
}
|
|
.draco-spark .draco-badge { border-color: var(--agent); }
|
|
|
|
.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-radius: 50%; display: grid; place-items: center;
|
|
background: #2f6fed; color: #fff; font-weight: 700;
|
|
}
|
|
|
|
/* 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, .draco-alertes-txt, .draco-spark-txt { 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, les domaines et le menu « ••• »
|
|
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"] { display: flex; }
|
|
}
|