/* === mobiGlas theme — drop-in override === Actif avec (ou body[data-theme="mg"]) S’empile par-dessus base.css/app.css */ body.mg, body[data-theme="mg"]{ --mg-bg: #0b1420; --mg-panel: rgba(16, 29, 45, .72); --mg-border: rgba(93, 225, 255, .25); --mg-border-strong: rgba(93, 225, 255, .55); --mg-text: #e6f3ff; --mg-text-dim: #9fb6c6; --mg-accent: #2bd9ff; --mg-accent-2: #00e7ff; --mg-danger: #ff5964; color: var(--mg-text); background: radial-gradient(1200px 600px at 20% 0%, rgba(6,18,30,.9), transparent 60%), radial-gradient(900px 700px at 100% 100%, rgba(0,40,60,.85), transparent 60%), var(--mg-bg) !important; /* plus fort que base/app */ } /* header & nav */ body.mg .site-header{ background: linear-gradient(180deg, rgba(14,26,40,.88), rgba(14,26,40,.62)) !important; border-bottom: 1px solid var(--mg-border); backdrop-filter: blur(8px) saturate(120%); } body.mg .nav a{ color: var(--mg-text-dim) !important; border: 1px solid transparent; border-radius: .6rem; padding: .45rem .6rem; } body.mg .nav a:hover{ border-color: var(--mg-border); background: rgba(22, 40, 62, .55); } body.mg .nav a.active{ color:#00212a !important; background: var(--mg-accent) !important; box-shadow: 0 0 16px rgba(43,217,255,.25), inset 0 0 0 1px #00a8cc; } /* conteneurs/panels */ body.mg .panel, body.mg .table-wrap, body.mg .badge, body.mg .controls > *:where(input,select,button){ background: var(--mg-panel) !important; border: 1px solid var(--mg-border) !important; border-radius: .8rem; backdrop-filter: blur(8px) saturate(120%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.35); } /* boutons */ body.mg .btn{ color: var(--mg-text) !important; background: linear-gradient(180deg, rgba(22,40,62,.9), rgba(16,29,45,.8)) !important; border: 1px solid var(--mg-border) !important; border-radius: .8rem; } body.mg .btn:hover{ border-color: var(--mg-border-strong) } body.mg .btn.primary{ background: linear-gradient(180deg, #1ec6eb, #0da6cc) !important; color: #00212a !important; border-color: rgba(0, 231, 255, .9) !important; box-shadow: 0 0 20px rgba(43,217,255,.35); } /* champs */ body.mg input, body.mg select, body.mg textarea{ color: var(--mg-text) !important; background: rgba(14,26,40,.75) !important; border: 1px solid var(--mg-border) !important; border-radius: .6rem !important; outline: none; } body.mg input::placeholder{ color: #85a3b6 } body.mg input:focus, body.mg select:focus, body.mg textarea:focus{ border-color: var(--mg-border-strong) !important; box-shadow: 0 0 0 3px rgba(43,217,255,.18); } /* badges */ body.mg .badge{ padding:.35rem .6rem; color: var(--mg-text-dim); } /* tableaux */ body.mg table{ border-collapse: separate; border-spacing:0; width:100%; color: var(--mg-text); } body.mg td, body.mg th{ border: 0; padding: .55rem .7rem; } body.mg thead th{ position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg, rgba(25,48,70,.95), rgba(18,36,55,.92)) !important; color: #bfefff; text-transform: uppercase; letter-spacing:.04em; font-weight:600; border-bottom: 1px solid var(--mg-border); } body.mg tbody tr{ background: rgba(10,20,32,.55); border-bottom: 1px solid rgba(255,255,255,.03); } body.mg tbody tr:nth-child(even){ background: rgba(12,24,38,.55) } body.mg tbody tr:hover{ background: rgba(24,60,80,.55); box-shadow: inset 0 0 0 1px rgba(43,217,255,.12); } body.mg .num{ text-align:right } body.mg td.strong{ color:#dff9ff; text-shadow: 0 0 8px rgba(43,217,255,.35); } body.mg td.heat{ --pct: 0%; background: linear-gradient(90deg, rgba(32,178,204,.25) var(--pct), transparent 0), rgba(10,20,32,.35); } /* séparateurs & footer */ body.mg hr{ border:0; height:1px; background:linear-gradient(90deg, transparent, var(--mg-border), transparent) } body.mg .site-footer{ border-top: 1px solid var(--mg-border); color: var(--mg-text-dim); background: linear-gradient(180deg, rgba(14,26,40,.62), rgba(14,26,40,.2)); } /* scanlines optionnelles */ body.mg::before{ content:""; position:fixed; inset:-2px; pointer-events:none; z-index:-1; background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px); } /* === mobiGlas styling for the custom multi-select === */ body.mg .ms { display:inline-block; } body.mg .ms-btn{ color: var(--mg-text) !important; background: linear-gradient(180deg, rgba(22,40,62,.9), rgba(16,29,45,.8)) !important; border: 1px solid var(--mg-border) !important; border-radius: .8rem !important; padding: .45rem .6rem !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.35); } body.mg .ms-btn:hover{ border-color: var(--mg-border-strong) !important; background: rgba(22, 40, 62, .85) !important; } body.mg .ms-btn:focus-visible{ outline: none; border-color: var(--mg-border-strong) !important; box-shadow: 0 0 0 3px rgba(43,217,255,.18); } body.mg .ms-btn[aria-expanded="true"], body.mg .ms-btn.active{ color:#00212a !important; background: var(--mg-accent) !important; border-color: rgba(0, 231, 255, .9) !important; box-shadow: 0 0 20px rgba(43,217,255,.35); } /* dropdown panel */ body.mg .ms-panel{ background: var(--mg-panel) !important; border: 1px solid var(--mg-border) !important; border-radius: .8rem !important; backdrop-filter: blur(8px) saturate(120%); box-shadow: 0 14px 30px rgba(0,0,0,.45); } /* rows inside the panel */ body.mg .ms-panel label{ color: var(--mg-text-dim); border-radius: .45rem; } body.mg .ms-panel label:hover{ background: rgba(24,60,80,.35); color: var(--mg-text); } /* checkbox accent to match theme */ body.mg .ms-panel input[type="checkbox"]{ accent-color: var(--mg-accent); } /* footer actions inside panel (ex: Tout / Aucun) */ body.mg .ms-actions .btn{ color: var(--mg-text) !important; background: rgba(14,26,40,.75) !important; border: 1px solid var(--mg-border) !important; } body.mg .ms-actions .btn:hover{ border-color: var(--mg-border-strong) !important; }