MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* --- PREMIUM ESPORTS INFOBOX --- */

/* 1. DEFINE YOUR BRAND (Change this hex code to match your logo!) */
:root {
    --brand-color: #2b7bb9;       /* Default: Liquipedia Blue */
    --brand-dark: #1e5c8e;        /* A slightly darker version for borders */
    --header-bg: #f4f5f7;         /* Light grey for section headers */
}

/* 2. THE CARD (Container) */
table.infobox {
    float: right;
    clear: right;
    width: 300px;
    
    /* Modern Card Look */
    background-color: var(--background-color-surface, #fff);
    border: 1px solid #c8ccd1;
    border-top: 4px solid var(--brand-color); /* The "Brand Bar" at the top */
    border-radius: 4px; /* Soft corners */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Soft, expensive-looking shadow */
    
    border-collapse: separate; /* Allows border-radius to work */
    border-spacing: 0;
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    overflow: hidden;
}

/* 3. MAIN TITLE (The "BGIS 2026" part) */
table.infobox caption {
    background-color: transparent;
    color: var(--color-base, #202122);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 800; /* Extra Bold */
    font-size: 1.25rem; /* Larger Title */
    padding: 15px 10px;
    text-align: center;
    text-transform: uppercase; /* "Sports" look */
    letter-spacing: 0.5px;
}

/* 4. SECTION HEADERS (League Info, Settings) */
table.infobox th.infobox-header {
    background-color: var(--header-bg);
    color: #4a4a4a;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px;
    border-top: 1px solid #e1e3e6;
    border-bottom: 1px solid #e1e3e6;
}

/* 5. LABELS (Left Column) */
table.infobox th {
    text-align: right;
    width: 40%;
    padding: 10px 12px 10px 5px;
    font-weight: 600;
    color: #666; /* Softer text for labels */
    font-size: 0.85rem;
    border-bottom: 1px solid #f0f0f0;
}

/* 6. VALUES (Right Column) */
table.infobox td {
    text-align: left;
    padding: 10px 5px 10px 10px;
    font-weight: 500;
    color: var(--color-base, #222);
    border-bottom: 1px solid #f0f0f0;
    word-break: break-word;
}

/* 7. IMAGES */
table.infobox td.infobox-image {
    text-align: center;
    padding: 0 0 15px 0; /* Padding only at bottom */
    background-color: transparent;
    border-bottom: none;
}

/* --- DARK MODE (Citizen Skin Integration) --- */
html.skin-citizen-dark :root {
    --brand-color: #3a8ccf; /* Brighter blue for dark mode visibility */
    --header-bg: #2a2b2e;   /* Darker grey for headers */
}

html.skin-citizen-dark table.infobox {
    background-color: #202124;
    border-color: #444;
    border-top-color: var(--brand-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

html.skin-citizen-dark table.infobox caption {
    color: #ededed;
}

html.skin-citizen-dark table.infobox th.infobox-header {
    background-color: var(--header-bg);
    color: #ccc;
    border-color: #333;
}

html.skin-citizen-dark table.infobox th {
    color: #a0a0a0;
    border-color: #333;
}

html.skin-citizen-dark table.infobox td {
    color: #eee;
    border-color: #333;
}