snorklerjoe/CubeServer

View on GitHub
src/CubeServer-app/cubeserver_app/static/style.css

Summary

Maintainability
Test Coverage
/*
 * Main stylesheet for all pages
 *
 */

@font-face {
    font-family: "Nunito";
        src: url('fonts/Nunito-Regular.ttf');
}

header.container {
    width: 75%;
}

html,body {
    min-height: 100%;
    width: 100%;
    padding-bottom: 2%;
    font-family: "ubuntu mono", monospace;
}

body {
    padding-bottom: 5%;
    background-color: var(--secondary);
}

/* Navbar! */
.nav-link {
    border-radius: 10%;
    transition: color 0.4s ease-out;
}

/*h1, h2, h3, h4, h5, .navbar-brand {
    font-family: monospace;
}*/

.nav-link:hover {
    color: var(--secondary) !important;
}

nav {
    margin-bottom: 5%;
    color: var(--secondary);
}

/* Blue on dark purple */
.container a:not(.btn) {
    color: var(--info);
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}

header h1,h2,h3,h4 {
    color: var(--light);
    text-shadow: 0 0 10px var(--light);
}

/* Alien glow for page headings */
.glow {
    text-shadow: 0 0 10px var(--light);
}

.content {
    min-height: 30%;
    height: fit-content;
}

.container {
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 2.5%;
    margin-right: 2.5%;
    padding-left: auto;
    padding-right: auto;
}

.jumbotron, .container-fluid {
    width: 95%;
}

.container h5 {  /* Center box headings */
    margin-left: auto;
    margin-right: auto;
}

pre {
    color: var(--light);
}

.banner {
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    min-width:70%;
    width: fit-content;
}


/* Input styling! */
.btn {
    background-color: var(--light);
    color: var(--dark);
    margin: 5px;
}

input[type=submit] {
    border-color: var(--danger);
}

input[type=submit]:hover {
    color: var(--warning) !important;
}

input, select, textarea {
    background-color: var(--secondary) !important;
    color: var(--light) !important;
}

input, select, textarea {
    background-color: var(--secondary) !important;
    color: var(--light) !important;
}

.selected {
    font-weight: bold;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.6);
}

.horizontal-scroll {
    overflow-x: auto;
}

.vertical-scroll {
    overflow-y: auto;
}

table.dataTable {
    border-collapse: collapse !important;
}

select {
    width: fit-content !important;
}

/* Dramatic switch-style checkboxes!! */