MediaWiki:Common.css: Difference between revisions

Revision as of 02:12, 29 December 2025

/* --- MASTER INFOBOX STYLE (Liquipedia Clone) --- */

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

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

/* 3. Section Headers (e.g. "League Information") */
table.infobox .infobox-header {
    background-color: #f0f2f5; /* Light Grey Divider */
    color: #000;
    text-align: center;
    font-weight: bold;
    padding: 6px;
    border-bottom: 1px solid #a2a9b1;
    border-top: 1px solid #a2a9b1;
}

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

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

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

/* --- DARK MODE AUTOMATION (Citizen Skin) --- */
html.skin-citizen-dark table.infobox caption {
    background-color: #3a6c8e; /* Muted Blue */
    border-color: #4a4d50;
}

html.skin-citizen-dark table.infobox, 
html.skin-citizen-dark table.infobox .infobox-header {
    background-color: #202124; /* Dark Grey */
    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;
}

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