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

.gf-infobox {
    float: right;
    clear: right;
    width: 280px;
    margin: 0 0 1em 1em;
    padding: 1px;
    border: 1px solid var(--border-color-base, #e0e0e0);
    background-color: var(--background-color-base, #ffffff);
    font-size: 90%;
    line-height: 1.5;
    box-sizing: border-box;
    display: block; 
    overflow: visible;
}

.gf-infobox .gf-title {
    padding: 8px;
    font-size: 120%;
    font-weight: bold;
    text-align: center;
    background-color: var(--background-color-neutral, #f8f9fa);
    border-bottom: 1px solid var(--border-color-base, #e0e0e0);
}

.gf-infobox .gf-section {
    padding: 4px;
    text-align: center;
    font-weight: bold;
    background-color: var(--background-color-neutral, #f8f9fa);
    border-bottom: 1px solid var(--border-color-base, #e0e0e0);
    border-top: 1px solid var(--border-color-base, #e0e0e0);
}

.gf-infobox .gf-image-container {
    text-align: center;
    padding: 5px 0;
}

.gf-infobox .infobox-image img {
    max-width: 270px;
    height: auto;
}

.gf-infobox .gf-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.gf-infobox .gf-row {
    display: table-row;
}

.gf-infobox .gf-label, 
.gf-infobox .gf-value {
    display: table-cell;
    padding: 4px 6px;
    border-bottom: 1px solid var(--border-color-base, #f0f0f0);
    vertical-align: middle;
}

.gf-infobox .gf-label {
    width: 70px;
    font-weight: bold;
    text-align: center;
    background-color: var(--background-color-neutral, #fafafa);
    border-right: 1px solid var(--border-color-base, #e0e0e0);
    white-space: nowrap;
}

.gf-infobox .gf-related {
    padding: 8px;
    word-break: break-all;
}