Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
Line 1: Line 1:
/* --- MASTER INFOBOX STYLE (Liquipedia Clone) --- */
/* --- HTML TABLE INFOBOX (The Fix) --- */
 
/* 1. The Box Itself */
table.infobox {
table.infobox {
     float: right;
     float: right;
Line 8: Line 6:
     background-color: var(--background-color-surface, #fff);
     background-color: var(--background-color-surface, #fff);
     border: 1px solid #a2a9b1;
     border: 1px solid #a2a9b1;
     border-collapse: collapse; /* Merges borders */
     border-collapse: collapse;
     margin-left: 1rem;
     margin-left: 1rem;
     margin-bottom: 1rem;
     margin-bottom: 1rem;
Line 15: Line 13:
}
}


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


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


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


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


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


/* --- DARK MODE AUTOMATION (Citizen Skin) --- */
/* Dark Mode */
html.skin-citizen-dark table.infobox caption {
html.skin-citizen-dark table.infobox caption { background-color: #3a6c8e; border-color: #4a4d50; }
    background-color: #3a6c8e; /* Muted Blue */
html.skin-citizen-dark table.infobox, html.skin-citizen-dark table.infobox th.infobox-header { background-color: #202124; border-color: #4a4d50; color: #eaecf0; }
    border-color: #4a4d50;
html.skin-citizen-dark table.infobox th { color: #c8ccd1; border-color: #4a4d50; }
}
html.skin-citizen-dark table.infobox td { border-color: #4a4d50; }
 
html.skin-citizen-dark table.infobox td.infobox-image { background-color: #202124; }
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;
}

Revision as of 02:16, 29 December 2025

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

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

/* Section Headers */
table.infobox th.infobox-header {
    background-color: #f0f2f5;
    color: #000;
    text-align: center;
    padding: 6px;
    border-bottom: 1px solid #a2a9b1;
    border-top: 1px solid #a2a9b1;
}

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

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

/* Images */
table.infobox td.infobox-image {
    text-align: center;
    padding: 10px;
    background-color: #fff;
}

/* Dark Mode */
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 th.infobox-header { background-color: #202124; border-color: #4a4d50; color: #eaecf0; }
html.skin-citizen-dark table.infobox th { color: #c8ccd1; border-color: #4a4d50; }
html.skin-citizen-dark table.infobox td { border-color: #4a4d50; }
html.skin-citizen-dark table.infobox td.infobox-image { background-color: #202124; }