From 8f72aaf25545b6d4473b55b6cb8010e0bd062ecf Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Tue, 9 Jun 2026 23:33:27 +0000 Subject: [PATCH] reduce inline css usage, fix additional font inconsistencies, fix px unit used with 0 values --- web/css/form.css | 34 ++++++--- web/css/nav.css | 5 +- web/css/style.css | 25 +++++-- web/html/account.html | 6 +- web/html/config.html | 2 +- web/html/index.html | 6 +- web/html/settings.html | 11 +-- web/scripts/dialog.js | 8 +- web/templates/backups.go.tmpl | 28 +++---- web/templates/config.go.tmpl | 107 ++++++++++++++------------- web/templates/instance-card.go.tmpl | 20 ++--- web/templates/resource-chart.go.tmpl | 5 +- 12 files changed, 144 insertions(+), 113 deletions(-) diff --git a/web/css/form.css b/web/css/form.css index 95a5e1b..ef4a9f5 100644 --- a/web/css/form.css +++ b/web/css/form.css @@ -5,7 +5,7 @@ input, select, textarea { .input-grid { display: grid; - gap: 5px 10px; + gap: 0.5em 1em; align-items: center; width: 100%; } @@ -13,12 +13,12 @@ input, select, textarea { .input-grid * { margin-top: 0; margin-bottom: 0; - padding-top: 8px; - padding-bottom: 8px; + padding-top: 0.5em; + padding-bottom: 0.5em; } .input-grid input { - padding: 8px; + padding: 0.5em; } .input-grid img { @@ -34,9 +34,8 @@ legend { width: 100%; margin: 0; padding: 0; - line-height: 1.5em; - margin-top: 0.25lh; - margin-bottom: 0.25lh; + margin-top: 0.25em; + margin-bottom: 0.25em; } fieldset { @@ -45,7 +44,7 @@ fieldset { } fieldset > *:last-child { - margin-bottom: 8px; + margin-bottom: 0.5em; } fieldset > .input-grid { @@ -67,7 +66,7 @@ input[type="radio"] { } .w3-select, select { - padding: 8px; + padding: 0.5em; } .w3-check { @@ -78,10 +77,25 @@ input[type="radio"] { :not(.input-grid) .input-grid + * { display: inline-block; width: 100%; - margin-top: 5px; + margin-top: 0.5em; } dialog { + margin: auto; max-width: calc(min(100% - 16px, 80ch)); color: var(--main-text-color); +} + +dialog #prompt { + margin-top: 1em; + margin-bottom: 1em; + text-align: center; +} + +dialog button[value="confirm"] { + background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black); +} + +dialog button[value="cancel"] { + background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black); } \ No newline at end of file diff --git a/web/css/nav.css b/web/css/nav.css index 7ffe358..038a8ef 100644 --- a/web/css/nav.css +++ b/web/css/nav.css @@ -53,6 +53,7 @@ header { } header h1 { + font-size: var(--small-font-size); margin: 0; background-color: var(--nav-header-bg-color); color: var(--nav-header-text-color); @@ -67,8 +68,8 @@ nav { nav a, header h1, label[for="navtoggle"] { text-align: left; - padding-left: 8px; - padding-right: 8px; + padding-left: 0.5em; + padding-right: 0.5em; text-decoration: none; vertical-align: middle; height: 2em; diff --git a/web/css/style.css b/web/css/style.css index 0420bf2..be1b5d8 100644 --- a/web/css/style.css +++ b/web/css/style.css @@ -44,22 +44,35 @@ } } -*, h1, h2, h3, p { +*, h1, h2, h3, h4, h5, h6, p { box-sizing: border-box; font-family: monospace; - -} - -h1, p { - font-size: var(--small-font-size); + line-height: normal; + margin: 0; + padding: 0; } h2 { font-size: var(--large-font-size); + margin-top: 0.5em; + margin-bottom: 0.5em; } h3 { font-size: var(--medium-font-size); + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +h4, legend { + font-size: var(--small-font-size); + text-decoration: underline; + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +p { + font-size: var(--small-font-size); } html { diff --git a/web/html/account.html b/web/html/account.html index 0674a8e..5121d9f 100644 --- a/web/html/account.html +++ b/web/html/account.html @@ -52,7 +52,7 @@ -

+

Change Password

@@ -64,8 +64,8 @@
- - + +
diff --git a/web/html/config.html b/web/html/config.html index b627317..557fc67 100644 --- a/web/html/config.html +++ b/web/html/config.html @@ -22,7 +22,7 @@ {{template "header" .}}
-

Instances / {{.config.Name}} / Config

+

Instances/{{.config.Name}}/Config

Resources diff --git a/web/html/index.html b/web/html/index.html index 3374632..af363b0 100644 --- a/web/html/index.html +++ b/web/html/index.html @@ -82,7 +82,7 @@ diff --git a/web/html/settings.html b/web/html/settings.html index ecbebdf..3640b98 100644 --- a/web/html/settings.html +++ b/web/html/settings.html @@ -5,23 +5,20 @@ diff --git a/web/scripts/dialog.js b/web/scripts/dialog.js index 5d3cc60..09c3907 100644 --- a/web/scripts/dialog.js +++ b/web/scripts/dialog.js @@ -48,7 +48,7 @@ export function alert (message) { dialog.id = "alert-dialog"; dialog.innerHTML = ` -

${message}

+

${message}

@@ -82,18 +82,18 @@ class ErrorDialog extends HTMLElement { -

Error

+

Error

diff --git a/web/templates/backups.go.tmpl b/web/templates/backups.go.tmpl index a2418ec..ca8eb58 100644 --- a/web/templates/backups.go.tmpl +++ b/web/templates/backups.go.tmpl @@ -10,8 +10,8 @@ a { height: 1em; width: 1em; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; }
@@ -29,7 +29,7 @@ -

+

Edit Backup

@@ -39,8 +39,8 @@
- - + +
@@ -49,7 +49,7 @@ -

+

Delete Backup

@@ -60,8 +60,8 @@
- - + +
@@ -70,7 +70,7 @@ -

+

Restore From Backup?

@@ -84,8 +84,8 @@
- - + +
@@ -103,7 +103,7 @@ -

+

Create Backup

@@ -113,8 +113,8 @@
- - + +
diff --git a/web/templates/config.go.tmpl b/web/templates/config.go.tmpl index df94b1a..9dd56ed 100644 --- a/web/templates/config.go.tmpl +++ b/web/templates/config.go.tmpl @@ -50,7 +50,7 @@ @@ -79,7 +79,7 @@ @@ -163,7 +163,7 @@ Move {{.Name}} @@ -198,7 +198,7 @@ Resize {{.Name}} @@ -233,7 +233,7 @@ Delete {{.Name}} @@ -267,7 +267,7 @@ Attach {{.Name}} @@ -300,7 +300,7 @@ Detach {{.Name}} @@ -340,7 +340,7 @@ @@ -371,7 +371,7 @@ Configure Net {{.Net_ID}} @@ -393,7 +393,7 @@ Delete Net {{.Net_ID}} @@ -425,7 +425,7 @@ @@ -454,7 +454,7 @@ Configure Device {{.Device_ID}} @@ -476,7 +476,7 @@ Delete Device {{.Device_ID}} @@ -516,10 +516,17 @@ div.draggable-item { cursor: grab; } - div.draggable-item svg { + div.draggable-item img { height: 1em; width: 1em; } + div.draggable-item p { + margin: 0; + } + div.draggable-item p.volume-file { + overflow: hidden; + white-space: nowrap; + } #wrapper { padding-bottom: 1em; } @@ -536,18 +543,18 @@ {{define "boot-target"}} {{if .volume_id}} -
- Drag - Volume -

{{.volume_id}}

-

{{.file}}

+
+ Drag + Volume +

{{.volume_id}}

+

{{.file}}

{{else if .net_id}} -
- Drag - Net -

{{.net_id}}

-

{{.value}}

+
+ Drag + Net +

{{.net_id}}

+

{{.value}}

{{else}} {{end}} diff --git a/web/templates/instance-card.go.tmpl b/web/templates/instance-card.go.tmpl index dcf1a84..0f3912b 100644 --- a/web/templates/instance-card.go.tmpl +++ b/web/templates/instance-card.go.tmpl @@ -13,8 +13,8 @@ line-height: 1em; height: 1em; width: 1em; - margin: 0px; - padding: 0px; + margin: 0; + padding: 0; } a img { vertical-align: unset; @@ -30,7 +30,7 @@ } .row { /* needed for some reason to avoid a flickering issue on chrome ONLY */ flex-direction: row; - column-gap: 10px; + column-gap: 0.5em; align-items: center; } .nowrap { /* needed for some reason to avoid a flickering issue on chrome ONLY */ @@ -82,7 +82,7 @@ {{end}}

{{.NodeStatus}}

-
+
{{if and (eq .NodeStatus "online") (eq .Status "running")}} shutdown instance @@ -115,7 +115,7 @@ -

+

{{if eq .Status "running"}} Stop {{.VMID}} {{else if eq .Status "stopped"}} @@ -134,8 +134,8 @@

- - + +
@@ -144,7 +144,7 @@ -

+

Delete {{.VMID}}

@@ -153,8 +153,8 @@
- - + +
diff --git a/web/templates/resource-chart.go.tmpl b/web/templates/resource-chart.go.tmpl index 0b96147..d5f8add 100644 --- a/web/templates/resource-chart.go.tmpl +++ b/web/templates/resource-chart.go.tmpl @@ -8,8 +8,7 @@ margin: 0; width: 100%; height: fit-content; - padding: 10px; - border-radius: 5px; + padding: 0.5em; } progress { width: 100%; @@ -19,7 +18,7 @@ } #caption { text-align: center; - margin-top: 10px; + margin-top: 0.5em; display: flex; flex-direction: column; }