MediaWiki:Common.css: Difference between revisions

Revision as of 02:11, 29 December 2025

/* --- TABLE-BASED INFOBOX (Bulletproof) --- */

table.infobox {
    float: right;
    clear: right;
    width: 300px;
    background-color: var(--background-color-surface, #fff);
    border: 1px solid #a2a9b1;
    border-collapse: collapse; /* Merges borders so no "double lines" */
    margin-left: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* The Main Title (Caption) */
table.infobox caption {
    background-color: #2b7bb9; /* Liquipedia Blue */
    color: #fff;
    font-weight: bold;
    padding: 10px;
    font-size: 1.1rem;
    border: 1px solid #a2a9b1;
    border-bottom: none; /* Connects to the table */
}

/* Sub-Headers (League Info, Game Settings) */
table.infobox .infobox-header {
    background-color: #f0f2f5; /* Light Grey to separate sections */
    color: #000;
    text-align: center;
    font-weight: bold;
    padding: 6px;
    border-bottom: 1px solid #a2a9b1;
    border-top: 1px solid #a2a9b1;
}

/* The Labels (Left Column) */
table.infobox th {
    text-align: right;
    vertical-align: top;
    width: 40%; /* Fixed width for labels */
    padding: 8px 10px 8px 5px;
    font-weight: bold;
    color: #54595d;
    background-color: transparent;
    border-bottom: 1px solid #eaecf0;
}

/* The Values (Right Column) */
table.infobox td {
    text-align: left;
    vertical-align: top;
    padding: 8px 5px 8px 10px;
    border-bottom: 1px solid #eaecf0;
    word-break: break-word;
}

/* Image Cell */
table.infobox .infobox-image {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #eaecf0;
    background-color: #fff;
}

/* --- DARK MODE ADJUSTMENTS --- */
html.skin-citizen-dark table.infobox caption {
    background-color: #3a6c8e;
    border-color: #4a4d50;
}

html.skin-citizen-dark table.infobox, 
html.skin-citizen-dark table.infobox .infobox-header {
    background-color: #202124;
    border-color: #4a4d50;
    color: #eaecf0;
}

html.skin-citizen-dark table.infobox th {
    color: #c8ccd1;
    border-bottom: 1px solid #4a4d50;
}

html.skin-citizen-dark table.infobox td {
    border-bottom: 1px solid #4a4d50;
}