CacheSim/static/scss/style.scss

@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
$primary-color: lighten(#26c176, 30%);

body {
    font-family: Raleway, serif;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 5px;
    margin-top: 5px;
}

.hidden {
    display: none;
}

.input-group {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 5px;

    span {
        margin-right: 10px;
    }

    input {
        flex-grow: 1;
    }
}

input[type="text"] {
    padding: 5px;
    border-radius: 5px;
    border: none;
    background-color: #efefef;

    &:active, &:focus {
        background-color: $primary-color;
        transition: .25s;
    }
}

.error {
    box-sizing: border-box;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
    border: 2px solid tomato;
    color: tomato;
}

.note {
    box-sizing: border-box;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
}

span.success {
    margin-left: 10px;
    color: green;
}

span.failure {
    margin-left: 10px;
    color: tomato;
}

button, input[type="button"] {
    box-sizing: border-box;
    border: none;
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;

    &:hover, &:focus {
        background-color: $primary-color;
        transition: .25s;

        &:disabled {
            background-color: lightgrey;
        }
    }

}

.cache-model-levels {
    display: flex;
    flex-wrap: wrap;
}

.cache-model {
    max-width: 600px;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid lightgrey;
    margin: 5px;
}

.cache, .cache-model {
    padding: 10px;
    border-radius: 5px;
    border: 2px solid lightgrey;
    margin: 5px;
}

.cache-model-hierarchy, .cache-hierarchy, .access-input {
    margin-bottom: 10px;
}

table {
    width: 100%;
}

tr {
    &:nth-child(1), &:nth-child(3) {
        background-color: $primary-color;
    }
}

td {
    text-align: center;
    padding: 3px;
}