webui: add dashboard-style theme polish

2026-06-08 09:35:46 -06:00
parent 8dfcc63688
commit c49361488d
2 changed files with 171 additions and 1 deletions
@@ -139,6 +139,163 @@ button.secondary,button[onclick^="toggle"],button[onclick^="connect"],button[onc
  #config-wifi .list{gap:10px}
 }

+
+/* UI theme v3 */
+:root{
+  --panel:#0b121b;
+  --panel2:#111b28;
+  --panel3:#162235;
+  --accent:#5f8fcf;
+  --save:#1f7a3d;
+  --save2:#14582b;
+  --danger:#843543;
+  --danger2:#5b202b;
+  --softline:rgba(255,255,255,.08);
+}
+.top{
+  background:linear-gradient(180deg,rgba(15,24,36,.96),rgba(9,14,21,.90));
+  border-bottom:1px solid var(--softline);
+  padding:16px 18px;
+  border-radius:0 0 22px 22px;
+  box-shadow:0 14px 36px rgba(0,0,0,.25);
+}
+.brand{
+  font-size:20px;
+  font-weight:950;
+  letter-spacing:-.03em;
+}
+.pill{
+  padding:8px 12px;
+  border-radius:999px;
+  border:1px solid var(--softline);
+  background:#0b131d;
+}
+.grid{gap:18px}
+.card{
+  border-radius:22px;
+  padding:20px;
+  background:
+    linear-gradient(180deg,rgba(23,34,50,.96),rgba(10,17,26,.98)),
+    radial-gradient(circle at top left,rgba(95,143,207,.18),transparent 38%);
+}
+.card .label{
+  display:flex;
+  align-items:center;
+  gap:8px;
+  margin-bottom:6px;
+}
+.card .label::before,
+.configGroupTitle::before{
+  content:"";
+  width:8px;
+  height:22px;
+  border-radius:999px;
+  background:linear-gradient(180deg,var(--accent),#2b4c75);
+  display:inline-block;
+  vertical-align:middle;
+  margin-right:8px;
+}
+.configGroupTitle{
+  display:flex;
+  align-items:center;
+}
+.subtabs{
+  position:sticky;
+  top:0;
+  z-index:5;
+  backdrop-filter:blur(10px);
+  box-shadow:0 10px 28px rgba(0,0,0,.25);
+}
+.subtabbtn{
+  flex:0 0 auto;
+  min-width:92px;
+  justify-content:center;
+}
+.configSubpage .grid{
+  animation:fadeIn .14s ease-out;
+}
+@keyframes fadeIn{
+  from{opacity:.65;transform:translateY(3px)}
+  to{opacity:1;transform:none}
+}
+input,select,textarea{
+  border-radius:14px;
+  padding:12px 13px;
+}
+button{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+}
+button.save,
+button[onclick^="save"]{
+  background:linear-gradient(180deg,var(--save),var(--save2));
+}
+button.danger,
+button[onclick^="reset"],
+button[onclick^="factory"]{
+  background:linear-gradient(180deg,var(--danger),var(--danger2));
+}
+button.secondary,
+button[onclick^="toggle"],
+button[onclick^="connect"],
+button[onclick^="scan"]{
+  background:linear-gradient(180deg,#315983,#1f3d61);
+}
+.btnrow{
+  gap:10px;
+}
+.list{
+  gap:10px;
+}
+.configWarning{
+  margin-top:8px;
+}
+.big{
+  letter-spacing:-.05em;
+}
+.kpi div{
+  background:linear-gradient(180deg,#111b28,#0c141f);
+  border-color:var(--softline);
+}
+@media(min-width:980px){
+  #configPage{
+    display:grid;
+    grid-template-columns:190px 1fr;
+    gap:18px;
+    align-items:start;
+  }
+  #configPage .subtabs{
+    display:flex;
+    flex-direction:column;
+    align-self:start;
+    top:14px;
+    padding:10px;
+    max-height:calc(100vh - 120px);
+  }
+  #configPage .subtabbtn{
+    width:100%;
+    justify-content:flex-start;
+    border-radius:14px;
+  }
+  #config-general,
+  #config-wifi,
+  #config-relays,
+  #config-temps,
+  #config-bms,
+  #config-maintenance{
+    grid-column:2;
+  }
+}
+@media(max-width:640px){
+  .card{padding:16px;border-radius:18px}
+  .top{padding:14px}
+  .brand{font-size:18px}
+  button{width:100%}
+  .inlineActions{grid-template-columns:1fr}
+}
+
 </style>
 </head>
 <body>