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.

/* --- CITIZEN SKIN INFOBOX --- */

/* 1. Base Layout & Shape */
.infobox {
    float: right;
    clear: right;
    width: 300px;
    padding: 0;
    margin-left: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border-radius: var(--border-radius-base, 4px); /* Matches Citizen rounded corners */
    overflow: hidden;
    box-shadow: var(--box-shadow-card, 0 2px 8px rgba(0,0,0,0.1)); /* Uses Citizen shadow if available */
    
    /* Variable Fallbacks for seamless integration */
    background-color: var(--background-color-surface, #ffffff);
    border: 1px solid var(--border-color-base, #eaecf0);
    color: var(--color-base, #202122);
}

/* 2. Header (Liquipedia Blue) */
.infobox-header {
    text-align: center;
    font-weight: bold;
    padding: 12px;
    font-size: 1.1rem;
    
    /* Force Liquipedia Blue in Light Mode */
    background-color: #2b7bb9; 
    color: #ffffff;
}

/* 3. Image Area */
.infobox-image {
    text-align: center;
    padding: 15px 0;
    background-color: var(--background-color-base, #ffffff);
    border-bottom: 1px solid var(--border-color-subtle, #eaecf0);
}

/* 4. Rows & Text */
.infobox-row {
    display: flex;
    flex-direction: row;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color-subtle, #eaecf0);
    line-height: 1.5;
}

.infobox-label {
    width: 90px;
    min-width: 90px;
    padding-right: 12px;
    font-weight: 600;
    opacity: 0.8;
}

/* --- CITIZEN DARK MODE OVERRIDES --- */
/* Citizen uses this specific class on the HTML tag */
html.skin-citizen-dark .infobox-header {
    background-color: #3a6c8e; /* Muted Blue for Dark Mode */
    color: #ffffff;
    border-bottom: 1px solid var(--border-color-base);
}

/* Optional: Make the image background match the card in dark mode */
html.skin-citizen-dark .infobox-image {
    background-color: transparent;
}