From d41162ebae9394628332854358a8099e77aeba95 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Sat, 25 Mar 2023 23:38:15 +0000 Subject: [PATCH] major changes to styling: move nav bar to left side and implement hover animations, generalize color scheme using css variables, move button and btn-group related styles to buttons.css, consolidate form input and select styles in form.css Signed-off-by: Arthur Lu --- css/buttons.css | 29 +++++++++ css/dialog.css | 4 +- css/form.css | 38 ++++-------- css/instance.css | 4 +- css/style.css | 139 ++++++++++++++++++++++++++------------------ index.html | 8 ++- login.html | 51 +++++++++------- scripts/dialog.js | 5 +- scripts/index.js | 11 ---- scripts/instance.js | 9 +-- 10 files changed, 169 insertions(+), 129 deletions(-) create mode 100644 css/buttons.css diff --git a/css/buttons.css b/css/buttons.css new file mode 100644 index 0000000..82c28d0 --- /dev/null +++ b/css/buttons.css @@ -0,0 +1,29 @@ +.btn-group { + display: flex; + justify-content: center; + flex-direction: row; + flex-wrap: wrap; + gap: 10px; +} + +.btn-group button { + padding: 10px; /* Some padding */ + cursor: pointer; /* Pointer/hand icon */ + border: none; +} + +.btn-group button:hover { + filter: brightness(85%); +} + +.btn-group button.accept { + background-color: var(--button-accept); +} + +.btn-group button.cancel { + background-color: var(--button-cancel); +} + +img.clickable { + cursor: pointer; +} \ No newline at end of file diff --git a/css/dialog.css b/css/dialog.css index b5fd25e..7d5a2a0 100644 --- a/css/dialog.css +++ b/css/dialog.css @@ -1,6 +1,6 @@ dialog { - background-color: #000000; - border: 1px solid white; + background-color: var(--content-bkg-color); + border: 1px solid var(--content-txt-color); border-radius: 5px; padding: 10px; } diff --git a/css/form.css b/css/form.css index 522ac76..5579743 100644 --- a/css/form.css +++ b/css/form.css @@ -1,50 +1,34 @@ +form { + width: fit-content; +} + p { text-align: left; margin: 0px; } fieldset { - border: solid white 1px; - border-radius: 5px; + border: solid var(--content-txt-color) 1px; padding: 10px; margin: 10px; } -form > fieldset:first-of-type { - margin-top: 0px; -} - input, label, legend { font-family: monospace; - color: white; font-size: 14px; - background-color: black; } -input { - border: solid white 1px; +input, select { + border: solid var(--content-txt-color) 1px; min-width: fit-content; - width: 100%; } -input:focus { +input:focus, select:focus { outline: none; } -input:disabled { - background-color: #606060; -} - -select { - border: solid white 1px; - background-color: black; - color: white; - min-width: fit-content; - width: 100%; -} - -select:disabled { - background-color: #606060; +input:disabled, select:disabled { + background-color: var(--form-disabled-color); } button { @@ -71,7 +55,7 @@ form img { hr { width: 100%; border: none; - border-top: solid white 1px; + border-top: solid var(--content-txt-color) 1px; } .last-item { diff --git a/css/instance.css b/css/instance.css index ebabef0..cf5ebe0 100644 --- a/css/instance.css +++ b/css/instance.css @@ -1,5 +1,5 @@ article { - border: solid white 1px; + border: solid var(--content-txt-color) 1px; border-radius: 5px; padding: 0px 1em 0px 1em; margin: 20px 0px 20px 0px; @@ -27,7 +27,7 @@ article > div > div > img { hr { border: none; - border-top: solid white 1px; + border-top: solid var(--content-txt-color) 1px; margin: 0px; } diff --git a/css/style.css b/css/style.css index aa2f576..bcd63c5 100644 --- a/css/style.css +++ b/css/style.css @@ -1,30 +1,104 @@ +:root { + --accent-bkg-color: black; + --accent-txt-color: white; + --content-bkg-color: white; + --content-txt-color: black; + --form-disabled-color: #606060; + --button-accept: #0F0; + --button-cancel: #F00; +} + +* { + font-family: monospace; + font-size: large; +} + body { - background-color:black; - min-width: fit-content; + display: grid; + min-height: 100vh; + grid-template-rows: 1fr auto; + grid-template-columns: auto 1fr; + grid-template-areas: + "header main" + "footer main" + ; + margin: 0px; +} + +header, footer { + background-color: var(--accent-bkg-color); + color: var(--accent-txt-color); + padding: 20px; + width: 15vw; + min-width: max-content; + max-width: 25ch; +} + +main { + background-color: var(--content-bkg-color); + color: var(--content-txt-color); + padding: 20px; +} + +footer p { + text-align: center; +} + +nav { + display: flex; + flex-direction: column; + row-gap: 20px; +} + +nav a { + color: var(--accent-txt-color); + font-size: xx-large; + text-decoration: none; + position: relative; + padding: 10px; + padding-left: 20px; +} + +nav a:before { + position: absolute; + width: 0px; + height: 100%; + left: 0px; + top: 0px; + content: ''; + background: var(--accent-txt-color); + opacity: 0.3; + transition: all 0.3s; +} + +nav a[aria-current="true"]:before { + width: 10px; +} + +nav a:hover:before { + width: 100%; } h1, h2, h3, p { font-family: monospace; - color: white; } h1 { - font-size: 72px; + font-size: xx-large; text-align: center; } h2 { - font-size: 32px; + font-size: x-large; text-align: center; } h3 { - font-size: 24px; + font-size: larger; text-align: center; } p { - font-size: 14px; text-align: left; } @@ -45,59 +119,10 @@ p { } } -.btn-group { - display: flex; - justify-content: center; - flex-direction: row; - flex-wrap: wrap; - gap: 10px; -} - -.btn-group button { - background-color: #00ff00; /* Green background */ - color: black; /* White text */ - padding: 10px; /* Some padding */ - cursor: pointer; /* Pointer/hand icon */ - border: none; -} - -.btn-group button:hover { - background-color: #008800; -} - -.btn-group button.active { - background-color: black; - color: white; - border: solid white 1px; -} - -nav { - margin: 20px 0px 20px 0px; -} - -.btn-group img:hover { - cursor: pointer; -} - -img.clickable { - cursor: pointer; -} - .hidden { visibility: hidden; } .none { display: none; -} - -.visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } \ No newline at end of file +} \ No newline at end of file diff --git a/index.html b/index.html index a978aaf..72939c3 100644 --- a/index.html +++ b/index.html @@ -7,14 +7,15 @@ +
-
@@ -24,5 +25,6 @@ Create New Instance
+

© tronnet

\ No newline at end of file diff --git a/login.html b/login.html index 8c8b989..adc6272 100644 --- a/login.html +++ b/login.html @@ -7,29 +7,38 @@ + -
-
-
- Proxmox VE Login -
- - - - - - -
-
-
-
- -
-
-
-

-
+
+ +
+
+
+
+
+ Proxmox VE Login +
+ + + + + + +
+
+
+
+ +
+
+
+

+
+
+

© tronnet

\ No newline at end of file diff --git a/scripts/dialog.js b/scripts/dialog.js index 5a02160..7f1366a 100644 --- a/scripts/dialog.js +++ b/scripts/dialog.js @@ -7,6 +7,7 @@ export class Dialog extends HTMLElement { +

@@ -14,8 +15,8 @@ export class Dialog extends HTMLElement {
- - + +
`; diff --git a/scripts/index.js b/scripts/index.js index ee69b69..377dc4d 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -6,17 +6,6 @@ window.addEventListener("DOMContentLoaded", init); async function init () { await populateInstances(); - let instances = document.querySelector("nav #instances"); - instances.addEventListener("click", () => { - goToPage("index.html"); - }); - - let logout = document.querySelector("nav #logout"); - logout.addEventListener("click", () => { - deleteAllCookies(); - goToPage("login.html"); - }); - let addInstanceBtn = document.querySelector("#instance-add"); addInstanceBtn.addEventListener("click", handleInstanceAdd); } diff --git a/scripts/instance.js b/scripts/instance.js index fc17178..890f408 100644 --- a/scripts/instance.js +++ b/scripts/instance.js @@ -9,6 +9,7 @@ export class Instance extends HTMLElement { shadowRoot.innerHTML = ` +
@@ -23,10 +24,10 @@ export class Instance extends HTMLElement {
- - - - + + + +
`;