tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use css vars for colors

Browse Source
This commit is contained in:
Arthur Lu 2023-05-08 00:50:14 +00:00
parent e2b74b1c5d
commit af3b6c1143
4 changed files with 45 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
config.html
View File

@ -28,11 +28,11 @@
<section class="w3-container"> <section class="w3-container">
<h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2> <h2 id="name"><a href="index.html">Instances</a> / %{vmname}</h2>
<form> <form>
<fieldset> <fieldset class="w3-card w3-padding">
<legend>Resources</legend> <legend>Resources</legend>
<div class="input-grid" id="resources" style="grid-template-columns: repeat(3, auto) 1fr;"></div> <div class="input-grid" id="resources" style="grid-template-columns: repeat(3, auto) 1fr;"></div>
</fieldset> </fieldset>
<fieldset style="margin-top: 16px;"> <fieldset class="w3-card w3-padding" style="margin-top: 16px;">
<legend>Disks</legend> <legend>Disks</legend>
<div class="input-grid" id="disks" style="grid-template-columns: auto auto auto 1fr;"></div> <div class="input-grid" id="disks" style="grid-template-columns: auto auto auto 1fr;"></div>
<div class="w3-container w3-center"> <div class="w3-container w3-center">

25
css/form.css
View File

@ -15,23 +15,18 @@
} }
legend { legend {
display: table; display: table;
float: left; float: left;
margin: 8px 0; margin: 8px 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
+ * { + * {
clear: both; clear: both;
} }
} }
fieldset { fieldset {
border: 0; border: 0;
padding: 8px 16px;
margin: 0;
min-width: 0;
background-color: #202020;
box-shadow: 0 2px 5px 0px black;
} }
fieldset > *:last-child { fieldset > *:last-child {
@ -39,5 +34,5 @@ fieldset > *:last-child {
} }
body:not(:-moz-handler-blocked) fieldset { body:not(:-moz-handler-blocked) fieldset {
display: table-cell; display: table-cell;
} }

25
css/nav.css
View File

@ -1,10 +1,25 @@
:root {
--nav-bg-color: black;
--nav-text-color: white;
--nav-header-bg-color: #0f0;
--nav-header-text-color: black;
--nav-link-hover-color: var(--main-bg-color, #404040);
}
nav { nav {
overflow: hidden; overflow: hidden;
color: white; background-color: var(--nav-bg-color);
background-color: black; color: var(--nav-text-color);
font-size: larger; font-size: larger;
} }
nav h1 {
font-size: 18px;
margin: 0px;
background-color: var(--nav-header-bg-color);
color: var(--nav-header-text-color);
}
nav a, nav h1, nav label { nav a, nav h1, nav label {
text-align: left; text-align: left;
padding: 8px 10px; padding: 8px 10px;
@ -17,13 +32,11 @@ nav a, nav h1, nav label {
@media screen and (min-width: 600px){ @media screen and (min-width: 600px){
#hamitems a:hover, #hamitems a[aria-current="true"], #hamitems:hover a[aria-current="true"]:hover { #hamitems a:hover, #hamitems a[aria-current="true"], #hamitems:hover a[aria-current="true"]:hover {
background-color: #303030; background-color: var(--nav-link-hover-color);
color: white;
} }
#hamitems:hover a[aria-current="true"] { #hamitems:hover a[aria-current="true"] {
background-color: black; background-color: var(--nav-bg-color);
color: white;
} }
nav { nav {

29
css/style.css
View File

@ -1,6 +1,12 @@
:root { :root {
--fail-color: #f00; --fail-color: #f00;
--success-color: #0f0; --success-color: #0f0;
--main-bg-color: #404040;
--main-text-color: white;
--main-card-bg-color: #202020;
--main-card-shadow-color: black;
--main-table-header-bg-color: black;
--main-input-bg-color: #404040;
} }
* { * {
@ -20,33 +26,26 @@ body {
main, dialog { main, dialog {
max-width: 100vw; max-width: 100vw;
background-color: #303030; background-color: var(--main-bg-color);
color: white; color: var(--main-text-color);
}
h1 {
font-size: 18px;
margin: 0px;
background-color: #0f0;
color: #000;
} }
.w3-card { .w3-card {
background-color: #202020; background-color: var(--main-card-bg-color);
box-shadow: 0 2px 5px 0 black; box-shadow: 0 2px 5px 0 var(--main-card-shadow-color);
} }
th { th {
background-color: #080808; background-color: var(--main-table-header-bg-color);
} }
td { td {
background-color: #202020; background-color: var(--main-card-bg-color);
} }
input, select, textarea { input, select, textarea {
background-color: #303030; background-color: var(--main-input-bg-color);
color: white; color: var(--main-text-color);
} }
img.clickable { img.clickable {