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:
parent
42e8d729d6
commit
d41162ebae
29
css/buttons.css
Normal file
29
css/buttons.css
Normal 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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
|
||||
38
css/form.css
38
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 {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
139
css/style.css
139
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;
|
||||
}
|
||||
}
|
||||
@ -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>© tronnet</p></footer>
|
||||
</body>
|
||||
</html>
|
||||
51
login.html
51
login.html
@ -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>© tronnet</p></footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user