god-skin-themes.less

/* IE Fix */
details {
    display: block;
    summary {
        display: list-item;
    }
}

* {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";

.skinthemename {
    display: inline;
}

.skins {
    grid-area: skins;
    display: flex;
    flex-wrap: wrap;

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

        &.hidden {
            display: none;
        }

        .godlabel {
            grid-area: godlabel;
            white-space: nowrap;
            max-width: 150px;
            overflow: auto;
            .godicon {
                height: 24px;
                vertical-align: middle;
                margin-right: 4px;
            }
        }
        .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;
        }
    }
}

ul.uncategorized {
    display: block;
    li {
        display: list-item;
    }
}