Template:少女前线信息/styles.css

.gf-infobox {
    float: right;
    clear: right;
    margin: 1em 0 1em 1em;
    border: 1px solid #D0D0D0;
    width: 280px;
    padding: 1px 4px;
    background-color: #FAFAFA;
    color: #222222;
    font-size: 90%;
}

.gf-infobox .gf-title {
    margin: 3px 0;
    padding: 0.5em;
    background-color: #000;
    color: #fff;
    font-size: 120%;
    font-weight: bold;
    text-align: center;
}

.gf-infobox .gf-image-container {
    margin: 3px 0;
    text-align: center;
    color: #888;
    padding: 0;
}

.gf-infobox .gf-image-container img {
    max-width: 100%;
    height: auto;
}

.gf-infobox .gf-section {
    margin: 3px 0;
    padding: 0.2em;
    background-color: #303030;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.gf-infobox .gf-row {
    display: flex;
    margin: 3px 0;
}

.gf-infobox .gf-label {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 5em;
    padding: 2px 5px;
    background-color: #454545;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.gf-infobox .gf-value {
    padding: 2px 2px 2px 7px;
    flex: 1;
}

.gf-infobox .gf-single {
    margin: 3px 0;
    padding: 0 2px 0 7px;
}

.gf-infobox .gf-bottom {
    text-align: center;
    font-size: 90%;
}

.gf-rarity-2 { color: #777; }
.gf-rarity-3 { color: #33566f; }
.gf-rarity-4 { color: #7b813f; }
.gf-rarity-5 { color: #a7753b; }
.gf-rarity-6 { color: #ad4229; }