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 <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-03-25 23:38:15 +00:00
parent 42e8d729d6
commit d41162ebae
10 changed files with 169 additions and 129 deletions

29
css/buttons.css Normal file
View File

@ -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;
}

View File

@ -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;
}

View File

@ -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 {

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -7,14 +7,15 @@
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/form.css" type="text/css">
<link rel="stylesheet" href="css/buttons.css" type="text/css">
<script src="scripts/index.js" type="module"></script>
<script src="scripts/instance.js" type="module"></script>
</head>
<body>
<header>
<nav class="btn-group">
<button id="instances" class="active">INSTANCES</button>
<button id="logout">LOGOUT</button>
<nav>
<a href="index.html" aria-current="true">INSTANCES</a>
<a href="login.html">LOGOUT</a>
</nav>
</header>
<main>
@ -24,5 +25,6 @@
<img id="instance-add" src="images/actions/instance/add-instance.svg" class="clickable" alt="Create New Instance" title="Create New Instance">
</div>
</main>
<footer><p>&copy; tronnet</p></footer>
</body>
</html>

View File

@ -7,29 +7,38 @@
<link rel="icon" href="images/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/form.css" type="text/css">
<link rel="stylesheet" href="css/buttons.css" type="text/css">
<script src="scripts/login.js" type="module"></script>
</head>
<body>
<div class="center-div">
<form style="margin-top: 20px; min-width: min-content; margin-left: auto; margin-right: auto;">
<fieldset>
<legend>Proxmox VE Login</legend>
<div class="input-grid" style="grid-template-columns: repeat(2, auto);">
<label for="username">Username</label>
<input type="text" id="username" name="username">
<label for="password">Password</label>
<input type="password" id="password" name="password">
<label for="realm">Realm</label>
<select id="realm" name="realm"></select>
</div>
</fieldset>
<fieldset class="fieldset-no-border">
<div class="btn-group">
<button id="submit">LOGIN</button>
</div>
</fieldset>
</form>
<p id="status"></p>
</div>
<header>
<nav>
<a href="login.html" aria-current="true">LOGIN</a>
</nav>
</header>
<main>
<div class="center-div">
<form style="margin-left: auto; margin-right: auto;">
<fieldset>
<legend>Proxmox VE Login</legend>
<div class="input-grid" style="grid-template-columns: repeat(2, auto);">
<label for="username">Username</label>
<input type="text" id="username" name="username">
<label for="password">Password</label>
<input type="password" id="password" name="password">
<label for="realm">Realm</label>
<select id="realm" name="realm"></select>
</div>
</fieldset>
<fieldset class="fieldset-no-border">
<div class="btn-group">
<button id="submit">LOGIN</button>
</div>
</fieldset>
</form>
<p id="status"></p>
</div>
</main>
<footer><p>&copy; tronnet</p></footer>
</body>
</html>

View File

@ -7,6 +7,7 @@ export class Dialog extends HTMLElement {
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/form.css" type="text/css">
<link rel="stylesheet" href="css/dialog.css" type="text/css">
<link rel="stylesheet" href="css/buttons.css" type="text/css">
<dialog>
<p id="prompt"></p>
<hr>
@ -14,8 +15,8 @@ export class Dialog extends HTMLElement {
</form>
<hr>
<div class="btn-group">
<button value="cancel" form="form" class="active" formnovalidate>CANCEL</button>
<button value="confirm" form="form">CONFIRM</button>
<button value="cancel" form="form" class="cancel" formnovalidate>CANCEL</button>
<button value="confirm" form="form" class="accept">CONFIRM</button>
</div>
</dialog>
`;

View File

@ -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);
}

View File

@ -9,6 +9,7 @@ export class Instance extends HTMLElement {
shadowRoot.innerHTML = `
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/instance.css" type="text/css">
<link rel="stylesheet" href="css/buttons.css" type="text/css">
<article>
<div>
<div>
@ -23,10 +24,10 @@ export class Instance extends HTMLElement {
</div>
<hr>
<div class="btn-group">
<img id="power-btn">
<img id="console-btn">
<img id="configure-btn">
<img id="delete-btn">
<img id="power-btn" class="clickable">
<img id="console-btn" class="clickable">
<img id="configure-btn" class="clickable">
<img id="delete-btn" class="clickable">
</div>
</article>
`;