drive-health/static/style.css

188 lines
2.8 KiB
CSS
Raw Normal View History

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Roboto:wght@100;300;400&display=swap');
:root {
--bg0: #202327;
--bg1: #282d33;
--bg2: #31373f;
2024-01-21 19:12:40 +02:00
--bg3: #3e4248;
2024-01-21 22:44:50 +02:00
--bg4: #1a1c1f;
--fg0: #bbc0ca;
2024-01-21 19:12:40 +02:00
--fg1: #434c56;
--acc1: #2aa3f4;
--acc1BG0: #2aa3f450;
--acc1BG1: #2aa3f430;
--acc2: #2af488;
--acc2BG0: #2af48850;
--acc2BG1: #2af48830;
--acc3: #f4e02a;
--acc3BG0: #f4e02a50;
--acc3BG1: #f4e02a30;
}
:root {
color: var(--fg0);
font-family: "Noto Sans Mono", "Roboto", sans-serif;
}
html, body {
margin: 0;
padding: 0;
width: 100vw;
overflow: auto;
background-color: var(--bg0);
}
.container {
margin: 1rem auto;
max-width: 768px;
border-radius: 8px;
border: 1px solid var(--fg1);
background-color: var(--bg1);
overflow: hidden;
}
.container-titlebar {
width: 100%;
background-color: var(--bg2);
}
.container .pad {
padding: .5rem 1rem;
}
.container-titlebar h4 {
padding: 0;
margin: 0;
}
.badge {
font-size: 12px;
font-weight: bold;
padding: .1rem .4rem;
display: inline-block;
border-radius: 3px;
color: var(--acc1);
background-color: var(--acc1BG0);
border: 1px solid var(--acc1BG1);
}
.badge[type="HDD"] {
color: var(--acc2);
background-color: var(--acc2BG0);
border: 1px solid var(--acc2BG1);
}
.badge[type="NVMe"] {
color: var(--acc3);
background-color: var(--acc3BG0);
border: 1px solid var(--acc3BG1);
}
.grooved {
background-color: var(--bg0);
border: 1px solid var(--bg1);
font-size: 12px;
padding: .1rem .3rem;
border-radius: 4px;
}
/* Table */
table {
width: 100%;
border-collapse: collapse;
}
table thead tr {
border-bottom: 1px solid var(--bg2);
}
.graph-image {
max-width: 100%;
2024-01-21 19:12:40 +02:00
}
.disk-graph-entry {
background-color: var(--bg3);
border-radius: 8px;
padding: .3rem .5rem;
}
/* Controls */
input {
padding: .25rem .5rem;
font-size: 16px;
background-color: var(--bg3);
color: var(--fg0);
border: 1px solid var(--fg1);
2024-01-21 22:44:50 +02:00
border-radius: 4px;
}
.btn {
font-size: 16px;
padding: .5rem 1rem;
border: 1px solid var(--fg1);
border-radius: 6px;
2024-01-21 22:44:50 +02:00
background-color: var(--bg4);
color: var(--fg0);
cursor: pointer;
}
.btn:hover {
2024-01-21 22:44:50 +02:00
background-color: var(--bg3);
}
.input-grp {
display: flex;
flex-flow: column;
}
.input-grp label {
margin-bottom: .25rem;
font-weight: bold;
}
.graph-controls {
display: flex;
flex-flow: wrap;
width: 100%;
}
2024-01-21 22:44:50 +02:00
.graph-controls input:nth-child(0) {
margin-right: 1rem;
}
.controls-panel {
display: flex;
flex-flow: column;
padding: 1rem 0;
border-bottom: 1px solid var(--fg1);
margin-bottom: 1rem;
}