/* * app.css — Plateforme Kiosques * CSS custom : accents par espace, overrides Vivo, composants plateforme * * Ordre d'application : * bootstrap.min.css → animate.css → main.min.css → app.css * * Accents par espace via classe sur : * body.space-superadmin → violet #6f42c1 * body.space-admin → bleu #435eef (couleur native Vivo) * body.space-content → vert #149865 * * Structure : * 1. Variables CSS globales * 2. Space-badge (indicateur d'espace dans la sidebar) * 3. Accents par espace (sidebar, active states) * 4. Contexte org (topbar superadmin) * 5. Flash messages (ajustements) * 6. Overrides Vivo * 7. Utilitaires responsive */ /* ============================================================ 1. VARIABLES GLOBALES ============================================================ */ :root { --kiosk-accent-superadmin: #6f42c1; --kiosk-accent-admin: #435eef; --kiosk-accent-content: #149865; --kiosk-accent-superadmin-light: #ede5f8; --kiosk-accent-admin-light: #eaedfc; --kiosk-accent-content-light: #d0eae0; --kiosk-space-badge-height: 28px; --kiosk-sidebar-width: 210px; --kiosk-topbar-height: 64px; } /* ============================================================ 2. SPACE-BADGE Indicateur d'espace affiché sous le logo dans la sidebar. Remplace la différenciation dark/light des sidebars. ============================================================ */ .space-badge { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 12px 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #6c7788; } .space-badge i { font-size: 0.8rem; } /* Couleur du badge selon l'espace */ body.space-superadmin .space-badge { color: var(--kiosk-accent-superadmin); } body.space-admin .space-badge { color: var(--kiosk-accent-admin); } body.space-content .space-badge { color: var(--kiosk-accent-content); } /* ============================================================ 3. ACCENTS PAR ESPACE Surcharge les couleurs actives de Vivo selon l'espace courant. Cible uniquement les éléments de navigation sidebar. ============================================================ */ /* --- Espace superadmin : violet --- */ body.space-superadmin .sidebar-wrapper .sidebar-menu ul li.active > a, body.space-superadmin .sidebar-wrapper .sidebar-menu ul li.active > a:hover { color: var(--kiosk-accent-superadmin); } body.space-superadmin .sidebar-wrapper .sidebar-menu ul li.active a.current-page, body.space-superadmin .sidebar-wrapper .sidebar-menu ul li a.current-page { color: var(--kiosk-accent-superadmin); } body.space-superadmin .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a::after { color: var(--kiosk-accent-superadmin); } /* --- Espace admin : bleu (couleur native Vivo — pas de surcharge nécessaire) --- */ /* Les états actifs Vivo (#435eef) correspondent déjà à l'accent admin. On conserve uniquement la variable pour cohérence. */ /* --- Espace content : vert --- */ body.space-content .sidebar-wrapper .sidebar-menu ul li.active > a, body.space-content .sidebar-wrapper .sidebar-menu ul li.active > a:hover { color: var(--kiosk-accent-content); } body.space-content .sidebar-wrapper .sidebar-menu ul li.active a.current-page, body.space-content .sidebar-wrapper .sidebar-menu ul li a.current-page { color: var(--kiosk-accent-content); } body.space-content .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a::after { color: var(--kiosk-accent-content); } /* ============================================================ 4. CONTEXTE ORG — TOPBAR SUPERADMIN Bandeau affiché quand le superadmin est dans un contexte org. ============================================================ */ .org-context-badge { background-color: #fff8e1; border: 1px solid #ffe082; border-radius: 6px; padding: 4px 10px; font-size: 0.8rem; color: #7a5800; white-space: nowrap; } .org-context-badge i { font-size: 0.85rem; color: #f0a500; } .org-context-badge .btn-outline-warning { font-size: 0.7rem; padding: 1px 5px; line-height: 1.4; border-color: #ffe082; color: #7a5800; } .org-context-badge .btn-outline-warning:hover { background-color: #ffe082; color: #5a4000; } /* ============================================================ 5. FLASH MESSAGES — AJUSTEMENTS ============================================================ */ .flash-messages { position: relative; z-index: 10; } .flash-messages .alert { border-radius: 8px; font-size: 0.875rem; border-left-width: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } /* Icônes alignées avec le texte */ .flash-messages .alert i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; } /* ============================================================ 6. OVERRIDES VIVO Ajustements ciblés sur la template sans la réécrire. ============================================================ */ /* Dropdown user — menu profil plus aéré */ .header-profile-actions a { display: flex; align-items: center; padding: 8px 16px; font-size: 0.875rem; color: #41464b; text-decoration: none; transition: background 0.15s; gap: 4px; } .header-profile-actions a:hover { background-color: #f3f2f7; color: #435eef; } /* Breadcrumb — taille cohérente */ .breadcrumb { font-size: 0.8125rem; margin-bottom: 0; } .breadcrumb-item + .breadcrumb-item::before { color: #a7afb9; } .breadcrumb-item.breadcrumb-active { color: #41464b; font-weight: 500; } /* Cards — cohérence header */ .card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .card-title { font-weight: 600; font-size: 0.9375rem; margin: 0; color: #13181e; } /* Boutons d'action dans card-header */ .card-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Tables — alignement vertical */ .table td, .table th { vertical-align: middle; } /* Badges statut borne */ .badge-status { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; padding: 3px 8px; border-radius: 50px; font-weight: 500; } .badge-status::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; } .badge-status.online { background: #d0eae0; color: #0a5c37; } .badge-status.offline { background: #f3f2f7; color: #6c7788; } .badge-status.error { background: #fbd6d6; color: #991b1b; } .badge-status.maintenance { background: #fff8e1; color: #7a5800; } /* ============================================================ 7. RESPONSIVE — AJUSTEMENTS UTILITAIRES ============================================================ */ /* Sur mobile : masquer le nom d'utilisateur dans la topbar (Vivo le fait déjà avec d-none d-md-block, on s'assure juste que l'avatar reste visible) */ @media (max-width: 767.98px) { .org-context-badge { display: none !important; } .header-actions-container { gap: 8px; } .flash-messages .alert { font-size: 0.8125rem; } } /* Sur tablette : ajustements sidebar */ @media (min-width: 768px) and (max-width: 991.98px) { .card-header { flex-direction: column; align-items: flex-start; } .card-header-actions { width: 100%; } }