drive-health/static/style.css

@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;
    --bg3: #3e4248;
    --bg4: #1a1c1f;

    --fg0: #bbc0ca;
    --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%;
}

.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);
    border-radius: 4px;
}

.btn {
    font-size: 16px;

    padding: .5rem 1rem;

    border: 1px solid var(--fg1);
    border-radius: 6px;

    background-color: var(--bg4);
    color: var(--fg0);

    cursor: pointer;
}

.btn:hover {
    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%;
}

.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;

}