/* ============================================================ EMindTek eKanban — Brand colors Primary orange : #e98a25 Hover orange : #c9721a Body background: #f4f4f4 ============================================================ */ body { box-sizing: border-box; margin: 0; padding: 0; overflow: hidden; font-family: sans-serif; background-color: #f4f4f4; } #menu { display: flex; align-items: center; background-color: #e98a25; color: white; height: 50px; padding: 0 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.18); } #nav { display: flex; align-items: center; flex: 1; } #content { height: calc(100vh - 50px); padding: 0; overflow-y: auto; box-sizing: border-box; background-color: #f4f4f4; } /* ── Spinner de chargement initial ─────────────────────────────────────────── Toujours présent (opacity:1 au départ), fade-out quand main.js ajoute .app-ready sur . Même si l'app charge en <50ms, le fade de 400ms reste visible. `:not()` ne permettait pas de transition — on utilise body::before / body.app-ready::before à la place. */ @keyframes _spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Overlay gris */ body::before { content: ''; position: fixed; inset: 0; background: rgba(100, 100, 100, 0.52); z-index: 9998; opacity: 1; pointer-events: all; transition: opacity 0.4s ease; } body.app-ready::before { opacity: 0; pointer-events: none; } /* Spinner tournant */ body::after { content: ''; position: fixed; top: 50%; left: 50%; width: 64px; height: 64px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.35); border-top-color: #e98a25; animation: _spin 0.85s linear infinite; z-index: 9999; opacity: 1; transition: opacity 0.3s ease; } body.app-ready::after { opacity: 0; } /* Page transition — fade-in on content change */ @keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .page-enter { animation: pageIn 0.18s ease-out both; } .logo { display: flex; align-items: center; margin-right: 20px; text-decoration: none; } .logo-img { height: 30px; } .title { margin-top: 20px; margin-bottom: 10px; font-size: 20px; text-transform: uppercase; color: #707070; } /* flexbox helpers */ .d-flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-around { justify-content: space-around; } .ml-auto { margin-left: auto !important; } .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .p-10 { padding: 10px; } .p-15 { padding: 15px; } .px-10 { padding-left: 10px; padding-right: 10px; } .py-5 { padding-top: 5px; padding-bottom: 5px; } .px-5 { padding-left: 5px; padding-right: 5px; } .pt-10 { padding-top: 10px; } .pb-5 { padding-bottom: 5px; } .pb-10 { padding-bottom: 10px; } .gap-10 > * { margin-right: 10px; } .relative { position: relative; } .h-full { height: 100%; } .w-full { width: 100%; } .overflow-y-auto { overflow-y: auto; } .bg-white { background-color: white; } /* card */ .card-10 { border: 1px solid #dee2e6; border-radius: 6px; background: white; } /* ── DevExtreme menu — barre de navigation orange ──────────────────────────── On force texte blanc + fond semi-transparent sur tous les états DX (hover, active, expanded) pour éviter que dx.light.css impose fond blanc sur l'item parent quand un sous-menu est ouvert. */ #menu .dx-menu-base { background-color: transparent; color: white; } /* Texte toujours blanc dans la barre, tous états confondus */ #menu .dx-menu-item-content, #menu .dx-menu-item-content * { color: white !important; } /* Fond hover/active/expanded : sombre semi-transparent (jamais blanc) */ #menu .dx-menu-item.dx-state-hover, #menu .dx-menu-item.dx-state-active, #menu .dx-menu-item.dx-menu-item-expanded { background-color: rgba(0, 0, 0, 0.15) !important; border-radius: 3px; } /* Item actif (page courante) */ #menu .menuSelected .dx-menu-item-content { font-weight: bold; border-bottom: 2px solid white; } .menu_upper .dx-menu-item { color: white; } /* ── Sous-menus déroulants — fond blanc, texte sombre ──────────────────────── DevExtreme rend les sous-menus dans .dx-context-menu (hors #menu). Le cssClass "menu_upper" est hérité → sans override, texte blanc sur blanc. */ .dx-context-menu .dx-menu-item-content, .dx-context-menu .dx-menu-item-content * { color: #333 !important; } .dx-context-menu .dx-menu-item.dx-state-hover .dx-menu-item-content, .dx-context-menu .dx-menu-item.dx-state-hover .dx-menu-item-content *, .dx-context-menu .dx-menu-item.dx-state-focused .dx-menu-item-content, .dx-context-menu .dx-menu-item.dx-state-focused .dx-menu-item-content * { color: #111 !important; } /* Dark gray primary buttons with orange hover transition */ .dx-button-mode-contained.dx-button-default { background-color: #464649; border-color: #464649; transition: background-color 0.25s ease, border-color 0.25s ease; } .dx-button-mode-contained.dx-button-default:hover, .dx-button-mode-contained.dx-button-default.dx-state-hover { background-color: #e98a25; border-color: #e98a25; } /* Orange accent on links and column links in grids */ .dx-datagrid .dx-link { color: #e98a25; } /* Hide language switcher — app is French only */ #language-switcher { display: none !important; } /* User menu in navbar */ #user-menu { margin-top: 0 !important; } #nav-right { display: flex; align-items: center; } #user-menu .dx-menu-item-content { color: white; } #user-menu .dx-menu-base { background-color: transparent; } .no-print { /* reserved for print media */ } /* responsive grid helpers (flexboxgrid supplement) */ .row { display: flex; flex-wrap: wrap; margin: 0 -10px; } .col-xs-12 { width: 100%; padding: 0 10px; box-sizing: border-box; } @media (min-width: 576px) { .col-sm-6 { width: 50%; padding: 0 10px; box-sizing: border-box; } } /* Reader status indicators */ .reader-status { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); vertical-align: middle; } .reader-status-lg { width: 18px; height: 18px; } .reader-status-connected { background-color: #27ae60; } .reader-status-disconnected { background-color: #e74c3c; } .reader-status-unknown { background-color: #bdc3c7; } /* Reader detail popup layout */ .reader-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; } .reader-detail-field { display: flex; flex-direction: column; } .reader-detail-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; } .reader-detail-value { font-size: 14px; color: #2c3e50; } /* Utility */ .mt-15 { margin-top: 15px; } .mb-15 { margin-bottom: 15px; } .m-0 { margin: 0; } .text-muted { color: #888; } /* Reader popup layout */ .reader-popup-wrap { padding: 5px 10px 10px; } .reader-popup-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .reader-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: #888; border-bottom: 1px solid #e0e0e0; padding-bottom: 4px; margin-bottom: 10px; } .reader-field-row { margin-bottom: 10px; } .reader-field-label { display: block; font-size: 11px; color: #666; margin-bottom: 3px; } .assets-filter-label { font-size: 13px; font-weight: 600; color: #000; margin-bottom: 5px; } /* Read-only info panel */ .reader-info-row { display: flex; flex-direction: column; margin-bottom: 9px; } .reader-info-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; } .reader-info-value { font-size: 13px; color: #2c3e50; font-weight: 500; } .reader-info-highlight { color: #27ae60; } /* ── Dashboard ───────────────────────────────────────────────────────────── */ #dashboard-page { padding: 18px 20px; height: calc(100vh - 50px); overflow-y: auto; box-sizing: border-box; } .db-toolbar { display: flex; align-items: center; margin-bottom: 20px; gap: 20px; flex-wrap: wrap; } .db-title { font-size: 20px; font-weight: 600; color: #464649; text-transform: uppercase; letter-spacing: 0.5px; } .db-filter-wrap { display: flex; align-items: center; gap: 8px; margin-left: auto; } .db-filter-label { font-size: 13px; color: #666; white-space: nowrap; } /* KPI cards */ .db-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } @media (max-width: 900px) { .db-kpi-row { grid-template-columns: repeat(2, 1fr); } } .db-kpi-card { background: #fff; border-radius: 8px; padding: 18px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; align-items: center; gap: 16px; transition: box-shadow 0.2s ease; } .db-kpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.13); } .db-kpi-icon { font-size: 28px; width: 44px; text-align: center; opacity: 0.85; flex-shrink: 0; } .db-kpi-right { min-width: 0; } .db-kpi-value { font-size: 28px; font-weight: 700; color: #2c3e50; line-height: 1.1; } .db-kpi-label { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 3px; white-space: nowrap; } /* Charts 2×2 grid */ .db-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .db-chart-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 16px 16px 10px; min-width: 0; /* empêche l'overflow dans la grille */ } .db-chart-card-title { font-size: 12px; font-weight: 600; color: #464649; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .db-chart-div { width: 100%; } /* ── Station edit — form-horizontal (label gauche, input droite) ── */ .station-edit-form .dx-field-label { width: 340px !important; white-space: normal; text-align: right; padding-right: 16px; font-weight: 500; line-height: 1.4; } .station-edit-form .dx-field-value { width: calc(100% - 340px) !important; } .station-edit-form .dx-item.dx-form-item { margin-bottom: 14px; } /* Switch aligné verticalement au centre de son label */ .station-edit-form .dx-switch { margin-top: 2px; } /* ── dxSwitch — état ON en orange (couleur de marque) ─────────────────────── DevExtreme ajoute .dx-switch-on-value sur le widget quand value === true. */ .dx-switch-on-value .dx-switch-container { background-color: #e98a25 !important; border-color: #e98a25 !important; } .dx-switch-on-value .dx-switch-handle::before { background-color: #fff !important; } /* ── Login Microsoft (MSAL) ───────────────────────────────────────────────── #msal-container : plein écran, colonne, fond blanc #msal-button-hint : texte pleine largeur + séparateur (comme Ville de Laval) #msal-button-wrapper : carte centrée contenant le bouton logo #msal-button : carré 200×200, logo orange + "Se connecter" .absolute / .bottom-0 / .right-0 / .z-2000 : helpers pour "Connexion standard" --------------------------------------------------------------------------- */ #msal-container { background-color: #ffffff; position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding-bottom: 80px; } #msal-button-hint { font-size: 16px; font-family: sans-serif; color: #333; padding-bottom: 15px; margin-bottom: 28px; border-bottom: 1px solid rgba(0, 0, 0, 0.15); text-align: center; } #msal-button-wrapper { display: flex; justify-content: center; align-items: flex-start; } #msal-button .dx-button-content { position: relative !important; margin: 0; height: 200px !important; width: 200px !important; box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); padding: 0 !important; } .msal-btn-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .msal-logo-area { position: absolute; top: 0; left: 0; right: 0; bottom: 64px; display: flex; align-items: center; justify-content: center; } .msal-logo-circle { width: 110px; height: 110px; background-color: #F07C12; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .msal-logo-img { width: 68px; height: 68px; object-fit: contain; } .msal-btn-label { position: absolute; bottom: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; line-height: 1.35; padding: 0 10px; font-weight: bold; font-family: sans-serif; font-size: 13px; color: #333; } .z-2000 .dx-button-text { font-size: 16px; } /* Helpers de positionnement pour le bouton "Connexion standard" */ .relative { position: relative; } .absolute { position: absolute; } .top-0 { top: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .z-2000 { z-index: 2000; }