use css vars for colors

This commit is contained in:
Arthur Lu 2023-05-08 00:50:14 +00:00
parent 512a78bd75
commit a601dde72b
4 changed files with 45 additions and 38 deletions

View File

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

View File

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

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 {
overflow: hidden;
color: white;
background-color: black;
background-color: var(--nav-bg-color);
color: var(--nav-text-color);
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 {
text-align: left;
padding: 8px 10px;
@ -17,13 +32,11 @@ nav a, nav h1, nav label {
@media screen and (min-width: 600px){
#hamitems a:hover, #hamitems a[aria-current="true"], #hamitems:hover a[aria-current="true"]:hover {
background-color: #303030;
color: white;
background-color: var(--nav-link-hover-color);
}
#hamitems:hover a[aria-current="true"] {
background-color: black;
color: white;
background-color: var(--nav-bg-color);
}
nav {

View File

@ -1,6 +1,12 @@
:root {
--fail-color: #f00;
--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 {
max-width: 100vw;
background-color: #303030;
color: white;
}
h1 {
font-size: 18px;
margin: 0px;
background-color: #0f0;
color: #000;
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
.w3-card {
background-color: #202020;
box-shadow: 0 2px 5px 0 black;
background-color: var(--main-card-bg-color);
box-shadow: 0 2px 5px 0 var(--main-card-shadow-color);
}
th {
background-color: #080808;
background-color: var(--main-table-header-bg-color);
}
td {
background-color: #202020;
background-color: var(--main-card-bg-color);
}
input, select, textarea {
background-color: #303030;
color: white;
background-color: var(--main-input-bg-color);
color: var(--main-text-color);
}
img.clickable {