From 09bf0ebbe9d93d5dc99e860d839846bea469c1aa Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Thu, 6 Apr 2023 03:46:39 +0000 Subject: [PATCH] simplify styling --- account.html | 11 ++---- config.html | 15 +++----- css/style.css | 92 +++++++++++------------------------------------ index.html | 13 +++---- login.html | 17 +++------ scripts/config.js | 2 +- 6 files changed, 38 insertions(+), 112 deletions(-) diff --git a/account.html b/account.html index de1680a..b277ae4 100644 --- a/account.html +++ b/account.html @@ -11,21 +11,16 @@
- -
-
+

tronnet

+
-
-

Account

-
+

Account

diff --git a/config.html b/config.html index 0015cfa..46615cf 100644 --- a/config.html +++ b/config.html @@ -12,23 +12,16 @@
- -
-

Instances

-

/

-

-
-
-
+

tronnet

+
+
+

Instances / %{vmname}

diff --git a/css/style.css b/css/style.css index ffe8033..580bb3a 100644 --- a/css/style.css +++ b/css/style.css @@ -12,98 +12,38 @@ * { font-family: monospace; - font-size: large; } body { display: grid; min-height: 100vh; - grid-template-rows: auto auto 1fr auto; + grid-template-rows: 1fr auto; grid-template-columns: auto 1fr; grid-template-areas: - "logo title" - "hr1 hr2" - "nav main" + "bar main" "footer main" ; margin: 0px; } header { - display: contents; -} - -#logo { - grid-area: logo; - padding: 20px; - padding-bottom: 0px; -} - -#hr1 { - grid-area: hr1; - margin: 0px; - padding: 0px; - padding-left: 20px; - padding-right: 20px; - background-color: var(--accent-bkg-color); - color: var(--accent-txt-color); -} - -#hr1 hr { - height: 1px; -} - -#hr2 { - grid-area: hr2; - margin: 0px; - padding: 0px; - padding-left: 20px; - padding-right: 20px; - background-color: var(--content-bkg-color); - color: var(--content-txt-color); -} - -#hr2 hr { - height: 1px; -} - -#nav { - grid-area: nav; - padding: 20px; -} - -#title { - grid-area: title; - padding: 20px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: end; -} - -#title * { - margin: 0px; -} - -#logo, #nav, #hr1, footer { - background-color: var(--accent-bkg-color); - color: var(--accent-txt-color); + grid-area: bar; } main { + padding: 20px; grid-area: main; - background-color: var(--content-bkg-color); - color: var(--content-txt-color); - padding-left: 20px; - padding-right: 20px; } footer { grid-area: footer; + text-align: center; } -footer p { - text-align: center; +header, footer { + background-color: var(--accent-bkg-color); + color: var(--accent-txt-color); + padding: 20px; } nav { @@ -139,11 +79,14 @@ nav a:hover:before { } h1 { - font-size: xxx-large; + font-size: xx-large; + margin: 0px; + text-align: center; } h2 { - font-size: xxx-large; + font-size: xx-large; + margin: 0px; } h3 { @@ -160,4 +103,11 @@ p { .none { display: none; +} + +hr { + margin-top: 20px; + margin-bottom: 20px; + border: 1px solid; + border-color: inherit; } \ No newline at end of file diff --git a/index.html b/index.html index 67257a5..3201a02 100644 --- a/index.html +++ b/index.html @@ -26,21 +26,16 @@
- -
-

Instances

-
-
-
+

tronnet

+
+
+

Instances

diff --git a/login.html b/login.html index 5d390c9..bf040b2 100644 --- a/login.html +++ b/login.html @@ -12,21 +12,14 @@
- -
-

Instances

-

/

-

-
-
-
+

tronnet

+
+ Login +
+

Login

Proxmox VE Login diff --git a/scripts/config.js b/scripts/config.js index fe7868e..4f857e1 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -35,7 +35,7 @@ async function getConfig () { function populateResources () { let name = type === "qemu" ? "name" : "hostname"; - document.querySelector("#name").innerText = config.data[name]; + document.querySelector("#name").innerText = document.querySelector("#name").innerText.replace("%{vmname}", config.data[name]); addResourceLine("resources", "images/resources/cpu.svg", "Cores", {type: "number", value: config.data.cores, min: 1, max: 8192}, "Threads"); // TODO add max from quota API addResourceLine("resources", "images/resources/ram.svg", "Memory", {type: "number", value: config.data.memory, min: 16, step: 1}, "MiB"); // TODO add max from quota API