diff --git a/dashboard/css/app.css b/dashboard/css/app.css index 6ebbf87..a6e0e95 100644 --- a/dashboard/css/app.css +++ b/dashboard/css/app.css @@ -1,3 +1,10 @@ +/* Variables globales (indépendantes du thème) */ +:root { + --font-ui:'Inter',system-ui,sans-serif; + --font-mono:'JetBrains Mono',monospace; + --font-terminal:'Share Tech Mono',monospace; +} + /* Polices locales */ @font-face { font-family: 'Inter'; @@ -28,9 +35,7 @@ --tile-3d:0 1px 0 rgba(255,255,255,.08) inset,0 -1px 0 rgba(0,0,0,.3) inset,0 6px 20px rgba(0,0,0,.5); --tile-press:inset 0 2px 8px rgba(0,0,0,.5),inset 0 1px 3px rgba(0,0,0,.4); --hover-glow:0 0 0 1px var(--accent-soft),0 0 24px var(--accent-glow),0 6px 20px rgba(0,0,0,.5); - --font-ui:'Inter',system-ui,sans-serif; - --font-mono:'JetBrains Mono',monospace; - --font-terminal:'Share Tech Mono',monospace; + --warn-glow:rgba(250,189,47,.22);--err-glow:rgba(251,73,52,.25); } :root[data-theme="light"] { --accent:#af3a03;--accent-soft:#d65d0e;--accent-glow:rgba(175,58,3,.18);--accent-tint:rgba(175,58,3,.08); @@ -41,9 +46,7 @@ --tile-3d:0 1px 0 rgba(255,255,255,.55) inset,0 -1px 0 rgba(0,0,0,.08) inset,0 4px 14px rgba(0,0,0,.13); --tile-press:inset 0 2px 6px rgba(0,0,0,.2); --hover-glow:0 0 0 1px var(--accent-soft),0 0 18px var(--accent-glow),0 4px 14px rgba(0,0,0,.13); - --font-ui:'Inter',system-ui,sans-serif; - --font-mono:'JetBrains Mono',monospace; - --font-terminal:'Share Tech Mono',monospace; + --warn-glow:rgba(181,118,20,.22);--err-glow:rgba(157,0,6,.25); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} @@ -89,9 +92,9 @@ body{background:var(--bg-1);color:var(--ink-1);font-family:var(--font-ui);font-s .tile:hover{box-shadow:var(--hover-glow);border-color:var(--accent-soft)} .tile:active{transform:translateY(2px) scale(.99);box-shadow:var(--tile-press)} .tile.t-warn{border-color:rgba(250,189,47,.3)} -.tile.t-warn:hover{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn),0 0 22px rgba(250,189,47,.22),0 6px 20px rgba(0,0,0,.5)} +.tile.t-warn:hover{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn),0 0 22px var(--warn-glow),0 6px 20px rgba(0,0,0,.5)} .tile.t-err{border-color:rgba(251,73,52,.35)} -.tile.t-err:hover{border-color:var(--err);box-shadow:0 0 0 1px var(--err),0 0 22px rgba(251,73,52,.25),0 6px 20px rgba(0,0,0,.5)} +.tile.t-err:hover{border-color:var(--err);box-shadow:0 0 0 1px var(--err),0 0 22px var(--err-glow),0 6px 20px rgba(0,0,0,.5)} .tile.t-off{opacity:.5;cursor:default}.tile.t-off:hover,.tile.t-off:active{box-shadow:var(--tile-3d);border-color:var(--border-1);transform:none} .tile-head{display:flex;align-items:center;gap:8px;user-select:none} .t-icon{width:28px;height:28px;border-radius:7px;background:var(--bg-4);display:flex;align-items:center; @@ -225,7 +228,7 @@ body{background:var(--bg-1);color:var(--ink-1);font-family:var(--font-ui);font-s .cbox.mqtt-on{background:rgba(200,130,200,.18);border-color:var(--purple);color:var(--purple)} /* Config serveur */ -.scfg-body{padding:18px;display:flex;flex-direction:column;gap:14px;overflow-y:auto} +.scfg-body{padding:18px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;flex:1;min-height:0} .scfg-sec-title{font-size:9px;color:var(--ink-4);font-family:var(--font-terminal); letter-spacing:.08em;padding-bottom:6px;border-bottom:1px solid var(--border-1)} .scfg-row{display:flex;align-items:center;gap:10px}