mnml/client/instance.css

/*
    INSTANCE
*/

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

    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 .top {
    grid-area: top;
}

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

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

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

.vbox-table table td:active {
    background-color: #333;
}

/* CRYP LIST */

.cryp-list {
    grid-area: cryps;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.instance-cryp {
    display: grid;
    grid-template-rows: min-content min-content min-content 250px min-content;
    grid-template-areas:
        "name   "
        "skills "
        "specs  "
        "avatar "
        "stats  ";

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

.instance-cryp:first-child {
    margin-left: 0;
}

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

.instance-cryp .avatar {
    grid-area: avatar;
    display: flex;
    flex: 1 1 auto;
}

.instance-cryp img {
    justify-self: center;
    grid-area: avatar;
    min-width: 150px;
}

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

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

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

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

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

.instance-cryp .specs figure {
    flex: 1;
    border: 0;
    align-items: center;
    padding: 0.5em 0 0 0;
    text-align: center;
}

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

.instance-cryp .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;
}

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

.instance-cryp .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;
}

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

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

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

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



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

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

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

.equip .items {
    display: flex;
    flex-flow: row;
}

.label {
    flex: 1 0 100%;
}

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

.equip .skills button {
    flex: 1;
    color: whitesmoke;
    font-size: 16pt;
    padding: 5px;
    border-width: 0px;
    height: 100%;

}

button.equip {
    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 {
    flex: 1;
    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%;
}