/* Supervision maison - feuille de style. Remplace le style d'origine de Serverstats (2006). L'ancien est conserve sous style.css.bak. Compatible clair / sombre, lisible sur telephone. */ :root { --bg: #f4f6f8; --surface: #ffffff; --border: #e3e7ec; --text: #1b1f24; --muted: #6a7280; --accent: #2563eb; --radius: 12px; --shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 16px rgba(16,24,40,.06); } @media (prefers-color-scheme: dark) { :root { --bg: #101315; --surface: #191d21; --border: #2a3036; --text: #e6e9ec; --muted: #9aa3ad; --accent: #6ea8fe; --shadow: 0 1px 2px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.35); } } * { box-sizing: border-box; } body { margin: 0; /* padding lateral porte par body pour que les anciennes pages custom, qui n'ont aucun conteneur, restent lisibles sans etre reecrites */ padding: 0 20px 48px; background: var(--bg); color: var(--text); font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { border: 0; max-width: 100%; height: auto; display: block; } /* ---------------------------------------------------------------- barre de nav */ #menu { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--border); margin: 0 -20px; /* pleine largeur malgre le padding de body */ padding: 0 20px; overflow-x: auto; } #menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; } #menu li { display: block; white-space: nowrap; } #menu li a { display: block; padding: 13px 12px; color: var(--muted); font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; } #menu li a:hover { color: var(--text); text-decoration: none; } #menu li.index a { color: var(--text); font-weight: 600; } /* ---------------------------------------------------------------- structure */ .wrap { max-width: 1380px; margin: 0 auto; padding: 28px 0 8px; } /* anciennes pages custom : contenu directement dans , sans .wrap */ body > h1 { margin-top: 26px; } body > h2 { margin-top: 30px; } h1 { font-size: 25px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 4px; } .page-head { margin-bottom: 26px; } .page-head .sub { color: var(--muted); font-size: 14px; margin: 0; } h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; } /* ---------------------------------------------------------------- cartes */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 18px; } .cards.wide { grid-template-columns: 1fr; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 16px 14px; /* sans min-width:0 un element de grille refuse de descendre sous la largeur intrinseque de son image, et la page deborde sur telephone */ min-width: 0; transition: transform .15s ease, box-shadow .15s ease; } a.card { display: block; color: inherit; } a.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16,24,40,.07), 0 12px 24px rgba(16,24,40,.10); } .card h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .card .hint { font-size: 12px; font-weight: 400; color: var(--muted); } /* les PNG rrdtool ont un fond clair en dur : on le garde blanc dans les 2 themes */ .card img { background: #fff; border-radius: 8px; width: 100%; } /* ---------------------------------------------------------------- bandeau Tempo */ .tempo-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; } .badge { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); background: var(--surface); } .badge .k { font-weight: 500; opacity: .72; } .badge.bleu { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } .badge.blanc { background: #f3f4f6; border-color: #d6dae0; color: #14171a; } .badge.rouge { background: #dc2626; border-color: #dc2626; color: #fff; } .stat { font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- pages detail */ body.detail .wrap > h2, .stack > h2 { margin-top: 26px; } .note { color: var(--muted); font-size: 13px; border-left: 3px solid var(--border); padding: 2px 0 2px 12px; margin: 22px 0 0; } /* ---------------------------------------------------------------- telephone */ @media (max-width: 560px) { body { padding: 0 14px 36px; } #menu { margin: 0 -14px; padding: 0 14px; } .wrap { padding: 20px 0 8px; } .cards { grid-template-columns: 1fr; gap: 14px; } h1 { font-size: 21px; } #menu { padding: 0 12px; } } /* ---------------------------------------------------------------- page live */ .kpis { display: grid; gap: 14px; margin-bottom: 20px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 12px; min-width: 0; } .kpi .k { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .kpi .val { font-size: 32px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 4px; } .kpi .val .u { font-size: 16px; font-weight: 500; color: var(--muted); margin-left: 3px; } .kpi .sub { font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; } .kpi.grand .val { font-size: 44px; } .live-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 18px; } .pastille { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .pastille::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); } .pastille.vieux::before { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); } .pastille.mort::before { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); } .bascule { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); } .bascule button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 600 12px/1 inherit; padding: 8px 14px; } .bascule button.on { background: var(--accent); color: #fff; } .chart-card { margin-bottom: 16px; } .chart-card svg { display: block; width: 100%; height: auto; } .axe { fill: var(--muted); font-size: 11px; font-family: inherit; } .grille { stroke: var(--border); stroke-width: 1; } .trace { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .aire { fill: var(--accent); opacity: .13; } .pic { fill: #ef4444; } .pic-txt { fill: #ef4444; font-size: 11px; font-weight: 600; font-family: inherit; } .kpi.plat { background: transparent; border: 0; box-shadow: none; padding: 0; } .kpi.plat .val { font-size: 26px; } .card .kpis { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 0; } /* --- decomposition solaire (page live) ------------------------------------ production / consommation / flux reseau. Le flux n'a pas de courbe propre : c'est la bande entre les deux autres, verte quand on injecte, rose quand on soutire. Une seule lecture donne les trois grandeurs. */ :root { --prod: #d97706; --conso: #2563eb; --sout: #e11d48; --inj: #059669; --tic: #7c3aed; } @media (prefers-color-scheme: dark) { :root { --prod: #fbbf24; --conso: #6ea8fe; --sout: #fb7185; --inj: #34d399; --tic: #a78bfa; } } .trace-prod { fill: none; stroke: var(--prod); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .trace-conso { fill: none; stroke: var(--conso); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .trace-prod.estime { stroke-dasharray: 3 3; opacity: .75; } /* Mesures DIRECTES du compteur Linky (TIC standard, depuis le 18/09/2026). Tracees en pointille pour bien les distinguer des courbes deduites de la pince : celles-ci sont constatees, pas inferees. */ .trace-tinj { fill: none; stroke: var(--inj); stroke-width: 1.8; stroke-dasharray: 5 3; stroke-linejoin: round; } .trace-tsout { fill: none; stroke: var(--tic); stroke-width: 1.3; stroke-dasharray: 2 3; opacity: .85; } .aire-prod { fill: var(--prod); opacity: .10; } .bande-sout { fill: var(--sout); opacity: .16; } .bande-inj { fill: var(--inj); opacity: .20; } .zero { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; } .legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin: 2px 0 10px; } .legende span { display: inline-flex; align-items: center; gap: 6px; } .legende i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; } .legende i.bloc { height: 10px; width: 10px; border-radius: 3px; } .val.sout { color: var(--sout); } .val.inj { color: var(--inj); } .val.prod { color: var(--prod); } .kpi .tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .kpi .tag.doute { color: var(--prod); }