god-skins.less

* {border:0; margin:0; padding:0; text-decoration:none;}
html {padding:8px 8px 16px; font-size:100%; line-height:1.3em;}
h1 {font-size:1.6em; line-height:1.6em; margin:2px 4px;}
h2 {font-size:1.4em; line-height:1.4em; }

input[type=text] { border:1px solid #dddddd; }
table, tr, th, td {border:1px solid #cccccc; vertical-align:top;}
table {border-collapse:collapse;}
th, td {padding:2px;}
thead th {vertical-align:bottom;}
tbody th {text-align:center;}
ul, li {list-style-type:none; display:inline-block;}
hr {border-top:1px solid #ccc;margin:4px 8px 0;}

@import "less/relatedpages.less";
@import "less/footer.less";

.actionbutton {
    cursor: pointer;
}
#filters {
    margin: 2px 4px 8px;
    label {
        white-space: nowrap;
    }
    .filter-checkbox {
        border: 2px solid #aeaeff;
        background-color: #aeaeff;
        border-radius: 2px;
        padding: 0 2px;
        cursor: pointer;
    }
    .filter-clear {
        cursor: pointer;
    }
}
#overall-skin-count {
    margin-left: 6px;
}
/* IE Fix */
details {
    display: block;
    summary {
        display: list-item;
    }
}
.god {
    margin: 2px 4px;
    border: 1px solid #ccc;
    background-color: #eee;

    h2 {
        display: inline-block;
    }

    &.hidden {
        display: none;
    }

    .godname {
        margin: 2px 4px;
        white-space: nowrap;
        line-height: 32px;
        font-size: 32px;
    }
    .godicon {
        margin: 2px 4px;
        width: 32px;
        height: 32px;
        vertical-align: top;
    }
    .skins {
        display: flex;
        flex-wrap: wrap;

        .skin {
            margin: 2px 4px;
            border: 1px solid #aaa;
            background-color: #ccc;
            padding: 2px 4px;
            display: grid;
            grid-template: "name name" auto
            "obtainability obtainability" auto
            "card card" 200px
            "favor gems" 1fr;

            &.hidden {
                display: none;
            }

            .skinname {
                grid-area: name;
                white-space: nowrap;
                max-width: 150px;
                overflow: auto;
            }
            /* card full size: 750x1000 */
            a.skincard {
                display: block;
                width: 150px;
            }
            .skincard {
                grid-area: card;
                max-height: 200px;
                max-width: 150px;
                &.skincard-missing {
                    font-style: italic;
                    width: 150px;
                }
            }
            .price-favor {
                grid-area: favor;
            }
            .price-gems {
                grid-area: gems;
            }
        }
    }
}