mnml/client/assets/styles/instance.css

/*
    INSTANCE
*/

.instance {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content min-content min-content 1fr;

    grid-template-areas:
        "top    top     info"
        "vbox   vbox    info"
        "equip  equip   info"
        "cryps  cryps   info";
}

@media (max-width: 1920px) {
    .instance {
        grid-template-columns: 2fr 2fr 1fr;
    }

    .instance .info table td svg {
        height: 50%;
    }

    .instance svg {
        height: 1.5em;
    }
}

.instance .top {
    grid-area: top;
}

.instance .scoreboard {
    grid-area: cryps;
}

.instance-ui-btn {
    font-size: 100%;
    padding: 0;
    margin: 0;
}

.instance .info {
    /*font-size: 75%;*/
    margin-left: 1em;
    grid-area: info;
    display: flex;
    flex-flow: column;
    justify-content: center;
    white-space: pre-wrap;
}

.instance .info h2 {
    text-transform: uppercase;
}

.instance .info .combos {
    margin-top: 1.5em;
}

.instance .cryps {
    grid-area: cryps;
}

.instance .equip {
    grid-area: equip;
}

/* VBOX */
.vbox {
    grid-area: vbox;
    display: grid;
    grid-template-rows: min-content min-content;
    grid-template-areas:
        "vbox combiner"
        "vbox inventory";
}

.vbox-box {
    grid-area: vbox;
}

.vbox-inventory {
    grid-area: inventory;
    margin-left: 1em;
}

.vbox-combiner {
    margin-left: 1em;
    grid-area: combiner;
}


.vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus {
    color: white;
}

.vbox-btn.reclaiming, .vbox-btn.reclaim.reclaiming:hover {
    background: #a52a2a;
    color: black;
    box-shadow: inset 0.5em 0 0 0 #a52a2a;
}

.vbox-btn.reclaim:hover {
    color: #a52a2a;
}

.vbox-hdr {
    display: flex;
    align-items: flex-end;

    flex: 1 0 100%;
}

.vbox-hdr h3 {
    flex: 1;
}

.vbox-hdr .bits {
    font-size: 2em;
    line-height: 1em;
    animation: bits 1s ease-out;
}

@keyframes action {
    0% {
        color: palegoldenrod;
    }
    100% {
        color: whitesmoke;
    }
}

.vbox button {
    width: 100%;
    margin: 0;
    background-color: #333;
    border-width: 0;
}

.vbox-table td {
    transition-property: color, background, border;
    transition-duration: 0.5s;
    transition-delay: 0;
    transition-timing-function: ease;
    cursor: pointer;
}

/* CRYP LIST */

.cryp-list {
    grid-area: cryps;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.instance-cryp, .instance-cryp-active {
    display: grid;
    grid-template-rows: min-content min-content min-content 1fr min-content;
    grid-template-areas:
        "name   "
        "skills "
        "specs  "
        "avatar "
        "stats  ";

    /*margin: 0 2em;*/
    padding: 0.5em;
    border: 2px solid #222;
    border-left-width: 0;
/*    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0;
    transition-timing-function: ease;
*/}

.instance-cryp:first-child {
    margin-left: 0;
    border-left-width: 1px;
}

.cryp-list .name {
    grid-area: name;
    margin-bottom: 0.5em;
}

.cryp-list .avatar {
    grid-area: avatar;
    object-fit: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.cryp-list .name {
    text-align: center;
}

.cryp-list .avatar figure {
    margin: 0;
    height: 80%;
    text-align: center;
    box-sizing: border-box;
}

.cryp-list .avatar figcaption {
    font-size: 90%;
}

.cryp-list .skills {
    grid-area: skills;
    display: flex;
    border-width: 0px;
}

.cryp-list .skills button {
    flex: 1;
    border-width: 0px;
}


/*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;
    }
}
*/
.cryp-list .specs {
    margin-top: 1em;
    grid-area: specs;
    display: flex;
    flex: 1;
    justify-content: center;
    border-width: 0px;
}

.cryp-list .specs figure {
    flex: 1;
    border: 0;
    align-items: center;
    text-align: center;
}

.cryp-list .specs figcaption {
    font-size: 75%;
}

.cryp-list .stats {
    grid-area: stats;
    display: grid;
    grid-template-rows: 1fr 3fr;
    grid-template-columns: 3fr 1fr 3fr;
    grid-template-areas:
        "dl sl ll"
        "st st st";
    border-width: 0px;
}

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

.cryp-list .stats .icons {
    grid-area: st;
    display: flex;
    flex-flow: row;
    flex: 1;
    justify-content: center;
}

.icons figure:nth-child(4n) {
    margin: 0 1em;
}

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

.cryp-list .stat-icon {
    width: 100%;
}

.cryp-list .stats .damage-label {
    grid-area: dl;
    display: flex;
    justify-content: center;
    color: #666;
}

.cryp-list .stats .speed-label {
    grid-area: sl;
    display: flex;
    justify-content: center;
    color: #666;
}

.cryp-list .stats .life-label {
    grid-area: ll;
    display: flex;
    justify-content: center;
    color: #666;
}

/* Equipment */
.equip {
    display: flex;
    margin: 1.5em 0;
    text-align: center;
}

.equip h3 {
    margin-bottom: 0.5em;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.equip .specs {
    flex: 1;
    border: 2px solid #222;
}

.equip .items {
    display: flex;
    flex: 1 0 100%;
    justify-content: space-around;
}

.label {
    flex: 1 0 100%;
}

.equip .skills {
    flex: 1;
    border: 2px solid #222;
}

.equip .highlight {
    animation: equip-bg 1s infinite ease-in-out alternate;
}

@keyframes equip-bg {
    0% {
        background-color: black;
    }

    100% {
        background-color: #181818;
    }
}

.equip .skills button {
    color: whitesmoke;
    font-size: 1em;
    padding: 0.2em;
    border-width: 0px;
    margin-bottom: 0.5em;
}

button.equipping {
    animation: equip-skill 1s infinite ease-in-out alternate;
}

@keyframes equip-skill {
    0% {
        background-color: black;
        box-shadow: inset 0 0 0 0 whitesmoke;
    }

    100% {
        background-color: #181818;
        box-shadow: inset 0.5em 0 0 0 whitesmoke;
    }
}

.equip .specs figure {
    border: 0;
    text-align: center;
}

.equip-spec {
    animation: equip-spec 1s infinite ease-in-out alternate;
}

@keyframes equip-spec {
    0% {
        color: #333;
        stroke: #333;
    }

    100% {
        color:  #7a7a7a;
        stroke:  #7a7a7a;
    }
}


.equip .specs figcaption {
    font-size: 75%;
}

.thresholds {
    display: flex;
    flex-flow: row-wrap;
    /*align-items: center;*/
    justify-content: space-around;
}

.spec-goals {
}

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

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

/* Mobile Nav*/
#toggle-vbox { display: none; }
#toggle-vbox-label { display: none; }