v0.25.7

src/admin/web/style.css

@@ -50,6 +50,9 @@
     --shadow-mid: #0006;
     --shadow-strong: #0009;
     --neutral-soft: rgba(127, 127, 127, .05);
+    --scrollbar-track: #151a16;
+    --scrollbar-thumb: #4f5d50;
+    --scrollbar-thumb-hover: #6b7b69;
     --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
     --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
 }
@@ -97,11 +100,39 @@ html[data-theme="light"] {
     --transform-chart: #7d4fa3;
     --shadow-mid: rgb(31 39 33 / .16);
     --shadow-strong: rgb(31 39 33 / .26);
-    --neutral-soft: rgba(70, 78, 72, .05)
+    --neutral-soft: rgba(70, 78, 72, .05);
+    --scrollbar-track: #e7ece4;
+    --scrollbar-thumb: #a9b5a6;
+    --scrollbar-thumb-hover: #879684
 }
 
 * {
-    box-sizing: border-box
+    box-sizing: border-box;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    scrollbar-width: thin
+}
+
+*::-webkit-scrollbar {
+    width: 10px;
+    height: 10px
+}
+
+*::-webkit-scrollbar-track {
+    background: var(--scrollbar-track)
+}
+
+*::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border: 2px solid var(--scrollbar-track);
+    border-radius: 999px
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover)
+}
+
+*::-webkit-scrollbar-corner {
+    background: var(--scrollbar-track)
 }
 
 html.app-loading {
@@ -2463,6 +2494,63 @@ td {
     flex: 0 0 auto
 }
 
+.vh-enable-control {
+    display: grid !important;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto auto;
+    align-items: center;
+    gap: 2px 10px;
+    margin-top: 5px !important;
+    padding: 11px 12px;
+    border: 1px solid var(--pill-live-line);
+    background: var(--panel2);
+    box-shadow: inset 3px 0 0 var(--green)
+}
+
+.vh-enable-control>input {
+    grid-column: 1;
+    grid-row: 1/3;
+    width: 18px;
+    height: 18px;
+    accent-color: var(--green)
+}
+
+.vh-enable-control>span {
+    grid-column: 2;
+    grid-row: 1;
+    color: var(--text);
+    font-size: 12px;
+    font-weight: 700
+}
+
+.vh-enable-hint {
+    grid-column: 2;
+    grid-row: 2;
+    color: var(--muted);
+    font-size: 10px
+}
+
+.vh-enable-state {
+    grid-column: 3;
+    grid-row: 1/3;
+    padding: 3px 7px;
+    border: 1px solid var(--pill-live-line);
+    color: var(--green);
+    font: 600 10px var(--mono);
+    text-transform: uppercase;
+    letter-spacing: .04em
+}
+
+.vh-enable-control.is-disabled {
+    border-color: var(--danger-line-strong);
+    box-shadow: inset 3px 0 0 var(--red)
+}
+
+.vh-enable-control.is-disabled .vh-enable-state {
+    border-color: var(--danger-line);
+    color: var(--red)
+}
+
 .vh-wide {
     grid-column: 1/-1;
     min-width: 0
@@ -2524,6 +2612,78 @@ td {
     margin-bottom: 12px
 }
 
+.backend-card-heading {
+    align-items: flex-start;
+    gap: 10px
+}
+
+.backend-table-tools {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 7px;
+    margin-left: auto
+}
+
+#pool-search {
+    width: min(250px, 30vw);
+    min-width: 170px
+}
+
+.backend-sort-control {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--muted);
+    font-size: 11px
+}
+
+.backend-sort-control select {
+    width: auto;
+    min-width: 120px
+}
+
+.backend-sort-direction {
+    min-width: 48px
+}
+
+.backend-column-picker {
+    position: relative
+}
+
+.backend-column-picker>summary {
+    list-style: none;
+    cursor: pointer;
+    user-select: none
+}
+
+.backend-column-picker>summary::-webkit-details-marker {
+    display: none
+}
+
+.backend-column-options {
+    position: absolute;
+    z-index: 20;
+    top: calc(100% + 6px);
+    right: 0;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(145px, 1fr));
+    gap: 1px 12px;
+    min-width: 330px;
+    max-height: 330px;
+    overflow: auto;
+    padding: 10px 12px 12px;
+    border: 1px solid var(--line);
+    background: var(--panel);
+    box-shadow: 0 12px 28px var(--shadow-strong)
+}
+
+.backend-column-options .check {
+    margin-top: 4px !important;
+    font-size: 11px
+}
+
 .pool-card .fine {
     margin: 0 0 8px
 }
@@ -4861,6 +5021,16 @@ dialog .window-heading {
     margin-top: 8px
 }
 
+.vhost-quick-toggle.is-enable {
+    border-color: var(--pill-live-line);
+    color: var(--green)
+}
+
+.vhost-quick-toggle.is-disable {
+    border-color: var(--danger-line);
+    color: var(--red)
+}
+
 @media(max-width:980px) {
     .logging-grid {
         grid-template-columns: 1fr
@@ -4896,6 +5066,30 @@ dialog .window-heading {
         min-width: 0
     }
 
+    .backend-card-heading {
+        align-items: stretch;
+        flex-direction: column
+    }
+
+    .backend-table-tools {
+        width: 100%;
+        justify-content: flex-start;
+        margin-left: 0
+    }
+
+    #pool-search {
+        flex: 1 1 100%;
+        width: 100%;
+        min-width: 0
+    }
+
+    .backend-column-options {
+        right: auto;
+        left: 0;
+        grid-template-columns: 1fr;
+        min-width: min(290px, 82vw)
+    }
+
     .vhost-card-head .entity-actions {
         width: 100%;
         justify-content: flex-start