ProxmoxAAS-Dashboard/css/style.css

148 lines
3.0 KiB
CSS
Raw Normal View History

:root {
2023-05-08 02:27:14 +00:00
--negative-color: #f00;
--positive-color: #0f0;
--highlight-color: yellow;
2023-05-08 02:27:14 +00:00
--lightbg-text-color: black;
2024-06-14 06:17:15 +00:00
}
@media screen and (prefers-color-scheme: dark) {
:root, :root.dark-theme {
--main-bg-color: #404040;
--main-text-color: white;
--main-card-bg-color: #202020;
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
--main-table-header-bg-color: black;
--main-input-bg-color: #404040;
}
:root.light-theme {
--main-bg-color: white;
--main-text-color: black;
--main-card-bg-color: white;
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
--main-table-header-bg-color: #808080;
--main-input-bg-color: white;
}
}
@media screen and (prefers-color-scheme: light) {
2024-06-14 06:17:15 +00:00
:root, :root.light-theme {
--main-bg-color: white;
--main-text-color: black;
--main-card-bg-color: white;
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 20%);
--main-table-header-bg-color: #808080;
--main-input-bg-color: white;
}
2024-06-14 06:17:15 +00:00
:root.dark-theme {
--main-bg-color: #404040;
--main-text-color: white;
--main-card-bg-color: #202020;
--main-card-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 80%), 0 2px 10px 0 rgb(0 0 0 / 80%);
--main-table-header-bg-color: black;
--main-input-bg-color: #404040;
}
}
2023-05-15 02:56:48 +00:00
html {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, p, a, label, button, input, select, td {
font-family: monospace;
}
body {
min-height: 100vh;
max-width: 100vw;
display: grid;
grid-template-rows: auto 1fr;
}
2023-05-07 04:35:44 +00:00
main, dialog {
max-width: 100vw;
2023-05-08 00:50:14 +00:00
background-color: var(--main-bg-color);
color: var(--main-text-color);
2023-05-08 00:02:47 +00:00
}
main {
2023-10-19 17:26:37 +00:00
padding: 0 16px 16px;
}
2023-05-07 04:15:22 +00:00
.w3-card {
2023-05-08 00:50:14 +00:00
background-color: var(--main-card-bg-color);
box-shadow: var(--main-card-box-shadow);
2023-05-07 04:15:22 +00:00
}
.w3-card + .w3-card {
margin-top: 16px;
}
2023-05-07 04:15:22 +00:00
th {
2023-05-08 00:50:14 +00:00
background-color: var(--main-table-header-bg-color);
2023-05-07 04:15:22 +00:00
}
td {
2023-05-08 00:50:14 +00:00
background-color: var(--main-card-bg-color);
2023-05-07 04:15:22 +00:00
}
input, select, textarea {
2023-05-08 00:50:14 +00:00
background-color: var(--main-input-bg-color);
color: var(--main-text-color);
}
img.clickable {
cursor: pointer;
}
img {
height: 1em;
width: 1em;
}
2023-05-15 02:56:48 +00:00
hr, * {
border-color: var(--main-text-color);
}
2023-04-21 22:58:15 +00:00
.flex {
display: flex;
2023-04-21 22:58:15 +00:00
}
.row {
flex-direction: row;
column-gap: 10px;
align-items: center;
2023-04-21 22:58:15 +00:00
}
.wrap {
flex-wrap: wrap;
row-gap: 10px;
}
.nowrap {
flex-wrap: nowrap;
}
.hidden {
visibility: hidden;
}
.none {
display: none;
2023-08-11 22:06:26 +00:00
}
.spacer {
min-height: 1em;
2024-06-05 22:11:53 +00:00
}
.w3-select, select {
padding: 8px;
2024-06-14 06:17:15 +00:00
appearance: none;
2024-06-05 22:11:53 +00:00
appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E:root%7Bcolor:%23fff%7D@media (prefers-color-scheme:light)%7B:root%7Bcolor:%23000%7D%7D%3C/style%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.707 14.707a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L12 12.586l4.293-4.293a1 1 0 111.414 1.414l-5 5z' fill='currentColor'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px top 50%;
background-size: 1em auto;
}