mnml/client/styles.css

/*
    GLOBAL
*/

html, body, main {
    /*width: 100%;*/
    margin: 0;

    background-color: #000000;
    font-family: 'Jura';
    color: whitesmoke;
    font-size: 16pt;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    /* this is the sweet nectar to keep it full page*/
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    /*padding: 0 20%;*/

    /* stops inspector going skitz*/
    overflow: hidden;
}

html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
  box-sizing: inherit;
}

h1 {
    font-size: 2em;
    margin: 0;
}

h2 {
    font-size: 1.5em;
    margin: 0;
}

figure {
    margin: 0;
}

main {
    padding: 0 2em;
    display: grid;
    grid-template-columns: repeat(10, 10%));
    grid-template-rows: min-content 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

    grid-template-areas:
      "hd  hd   hd   hd   hd   hd   hd   hd   hd   hd"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main";
}

nav {
    grid-area: nav;
    margin-right: 1em;
}

nav button {
    display: block;
    color: #888;
    flex: 1 1 100%;
    font-size: 16pt;
    padding: 0;
    margin: 0;
    border-width: 0px;
}

nav button.active {
    color: whitesmoke;
}

nav button[disabled], nav button[disabled]:hover {
    color: #333333;
    font-size: 14pt;
    text-decoration: line-through
}

nav button:hover {
    color: whitesmoke;
}

section {
    grid-area: main;
}

tr.right:focus, tr.right:hover {
    box-shadow: inset -0.5em 0 0 0 whitesmoke;
}

tr {
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0;
    transition-timing-function: ease;
}

button, input {
    font-family: 'Jura';
    color: whitesmoke;
    height: auto;
    border-width: 2px;
    border-color: whitesmoke;
    border-radius: 0;
    letter-spacing: 0.25em;
    box-sizing: border-box;

    /*the transitions */
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0;
    transition-timing-function: ease;
}

button:hover, button:focus {
    /*colour necesary to bash skellington*/
    color: whitesmoke;
    border-color: whitesmoke;
}

button.right[disabled]:hover, button.left[disabled]:hover {
    box-shadow: none;
}

button.top:hover, button.top:focus {
    box-shadow: inset 0 0.25em 0 0 whitesmoke;
}

button.right:hover, button.right:focus {
    box-shadow: inset -0.5em 0 0 0 whitesmoke;
}

button.left:hover, button.left:focus {
    box-shadow: inset 0.5em 0 0 0 whitesmoke;
}

button.action {
    animation: action 1s infinite ease-in-out alternate;
}

@keyframes action {
    0% {
        box-shadow: inset 0 0 0 0 whitesmoke;
    }
    100% {
        box-shadow: inset 0.5em 0 0 0 whitesmoke;
    }
}


svg {
    flex: 1;
    fill: none;
    stroke: whitesmoke;
    stroke-width: 0;
}

img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    pointer-events: none;
}

table {
    table-layout: fixed;
    width: 100%;
    margin-bottom: 2em;
}

table td {
    border: 1px solid whitesmoke;
    padding: 0.2em;
    text-align: center;
    height: 40px;
    text-transform: uppercase;
}

table td svg {
    stroke-width: 2px;
    height: 96%;
    vertical-align: text-bottom;
}

table .highlight {
    background: whitesmoke;
    color: black;
    font-weight: bold;
}

button[disabled] {
    color: #333;
    border-color: #333;
}

/*
    COLOURS
*/

.green {
    color: #1FF01F;
    stroke: #1FF01F;
}

.red {
    color: #a52a2a;
    stroke: #a52a2a;
}

.blue {
    color: #3498db;
    stroke: #3498db;
}

.yellow {
    color: #FFD123;
    stroke: #FFD123;
}

.purple {
    color: #A25AC1;
    stroke: #A25AC1;
}

.cyan {
    color: #6AD1BF;
    stroke: #6AD1BF;
}

.gray {
    color: #333;
    stroke: #333;
}

/*
    LOGIN
*/

.login {
    flex: 0 1 25%;
    display: flex;
    flex-flow: column;
}

.cryps input, .cryps select {
    border-color: #444;
    background-color: #333;
    border-radius: 0;
}

.cryps input:focus {
    border-color: whitesmoke;
}

/*
    HEADER
*/

header {
    display: flex;
    flex-flow: row;
    grid-area: hd;
    margin-bottom: 1.5em;
}

.header-title {
    flex: 1;
    letter-spacing: 0.05em;
}

.header-username {
    letter-spacing: 0.05em;
    display: inline;
}

.header-status {
    text-align: right;
}

.header-status svg {
    margin: 0.5em 0 0 1em;
    height: 1.5em;
    background-color: black;
    stroke: whitesmoke;
}

.ping-path {
    fill: none;
    stroke-width: 4px;
    stroke-dasharray: 121, 242;
    animation: saw 2s infinite linear;

    transition-property: stroke-color;
    transition-duration: 0.5s;
    transition-timing-function: ease;
}

.ping-text {
    margin-left: 1em;
    min-width: 3em;
    display: inline-block;
}

@keyframes saw {
    0% {
        stroke-dashoffset: 363;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/*
    MENU
*/

.menu-cryps {
    display: flex;
    flex-flow: row wrap;
    flex: 1;
    justify-content: space-between;
}

.menu-cryp-ctr {
    flex: 0 0 30%;
    flex-flow: column;

    text-align: center;
    display: flex;
    justify-content: center;
}

.spawn-btn .menu-cryp {
    border: 1px solid #333;
    color: #333;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: center;
}

.spawn-btn input {
    flex: 1 1 100%;
    width: 100%;
    margin: 1em;
}

.spawn-btn button {
    flex: 1;
    margin: 0.5em 2em;
    border-color: #333
}

.spawn-btn input[disabled], .spawn-btn button[disabled] {
    opacity: 0
}

.menu-cryp {
    height: 100%;
    margin: 0.5em;
    box-sizing: border-box;
    border: 1px solid black;

    transition-property: border;
    transition-duration: 0.5s;
    transition-delay: 0;
    transition-timing-function: ease;
}

.menu-instance-list {
    flex: 1;
    order: 99;
    flex-flow: row wrap;

    display: flex;
    align-content: flex-start;
}

.menu-instance-btn {
    flex: 1 1 100%;
    font-size: 1.2em;
}

.refresh-btn {
    border: 1px solid whitesmoke;
    float: right;
    font-size: 1.5em;
}

.create-form {
    flex: 1;

    display: flex;
    flex-flow: row wrap;
    border: 1px solid whitesmoke;
    padding: 1em;
    margin-bottom: 1.5em;
}

.create-form form {
    margin: 0;
    flex: 1 1 50%;
}

.create-form.disabled {
    border: 1px solid #333;
    color: #333;
}

/*.create-form select, .create-form input, .create-form label {
    margin: 0;
}
*/
.create-form button {
    flex: 0 1 25%;
    font-size: 1.5em;
}

.menu-btn, .nav-btn {
    flex: 1 0 25%;
}

/* nav hidden on desktop */
.nav-btn {
    display: none;
}

/*
    INFO
*/
.thresholds .spec-goals {
    display: flex;
    justify-content: space-around;
}

.info-spec {
    margin-top: 2em;
}

.spec-goals figure {
    margin: 1em 0;
}

.spec-goals figure svg {
    height: 1em;
}

.spec-goals .unmet {
    opacity: 0.5;
}

.info-cryp .skills {
    display: flex;
}

.info-cryp .skills button {
    border: 1px solid whitesmoke;
}

.info-cryp .stats, .info-cryp .specs {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.info-cryp .stats .speed {
    flex: 1 0 100%;
}

.info-cryp .stats figure {
    flex: 0 0 30%;
    border: 0;
    margin: 1em 0;
    text-align: center;
}

.info-cryp .stats .stat-icon {
    height: 2.5em;
}

.info-cryp .specs figure {
    border: 0;
    margin: 1em 0;
    text-align: center;
}


.stats figure {
    width: 100%;
    border: 0;
    padding: 0.5em 0 0 0;
    text-align: center;
}

.stats figcaption {
    font-size: 75%;
}

.resolving .skills button {
    display: none;
}

.instance-cryp button, .info-cryp button {
    flex: 1 1 100%;
    color: whitesmoke;
    font-size: 16pt;
    padding: 0;
    margin: 0;
    border-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 1px;
    border-right-width: 0px;
    border-top-width: 1px;
}

.instance-cryp button:first-child {
    border-top-width: 0;
}

figure.gray {
    color: #333;
    stroke-color: #333;
}

.stat-icon {
    height: 2em;
    stroke-width: 5px;
    fill: none;
}