v0.25.0

src/admin/web/style.css

@@ -4548,6 +4548,95 @@ dialog .window-heading {
     margin: 14px 0
 }
 
+.traffic-chart-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 12px;
+    margin: 14px 0
+}
+
+.traffic-chart-card {
+    min-width: 0
+}
+
+.traffic-donut-layout {
+    display: grid;
+    grid-template-columns: 148px minmax(0, 1fr);
+    gap: 14px;
+    align-items: center
+}
+
+.traffic-donut {
+    position: relative;
+    width: 148px;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(--panel2);
+    box-shadow: inset 0 0 0 1px var(--line)
+}
+
+.traffic-donut::before {
+    content: "";
+    position: absolute;
+    inset: 23%;
+    border-radius: 50%;
+    background: var(--panel);
+    box-shadow: 0 0 0 1px var(--line)
+}
+
+.traffic-donut>span {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    font: 700 16px var(--mono)
+}
+
+.traffic-chart-legend {
+    display: grid;
+    gap: 6px;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    min-width: 0
+}
+
+.traffic-chart-legend li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    min-width: 0;
+    font-size: 11px
+}
+
+.traffic-chart-legend li>span {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    min-width: 0
+}
+
+.traffic-chart-swatch {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    flex: 0 0 auto
+}
+
+.traffic-chart-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap
+}
+
+.traffic-chart-legend b {
+    font: 700 10px var(--mono);
+    flex: 0 0 auto
+}
+
 .logging-grid label {
     min-width: 0
 }
@@ -4557,12 +4646,40 @@ dialog .window-heading {
     max-width: none
 }
 
-#vhost-list {
+.logging-settings-subform {
+    margin: 0;
+    min-width: 0
+}
+
+@media(max-width:1100px) {
+    .traffic-chart-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr))
+    }
+}
+
+@media(max-width:720px) {
+    .traffic-chart-grid,
+    .logging-grid {
+        grid-template-columns: 1fr
+    }
+
+    .traffic-donut-layout {
+        grid-template-columns: 120px minmax(0, 1fr)
+    }
+
+    .traffic-donut {
+        width: 120px
+    }
+}
+
+#vhost-list,
+#web-service-list {
     display: grid;
     gap: 10px
 }
 
-#panel-vhosts .card-heading {
+#panel-vhosts .card-heading,
+#panel-web-server .card-heading {
     flex-wrap: wrap
 }
 
@@ -4573,7 +4690,8 @@ dialog .window-heading {
     margin-left: auto
 }
 
-#vhost-search {
+#vhost-search,
+#web-service-search {
     width: min(260px, 32vw);
     min-width: 180px
 }
@@ -7426,3 +7544,16 @@ body[data-density="compact"] .page-footer {
 .cache-io-key {
     color: var(--transform-chart);
 }
+
+/* Web Service editor mirrors the vhost tabbed configuration layout. */
+.web-service-pages {
+    min-width: 0;
+}
+
+.web-service-page[hidden] {
+    display: none !important;
+}
+
+#web-service-dialog .web-service-page {
+    padding-top: 2px;
+}