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.

/* CSS placed here will be applied to all skins */
/******************************************************
 * Velthuryn Infoboxes – Base Styles
 * Applies to: table.infobox and variants
 ******************************************************/

table.infobox {
    border-collapse: collapse;
    margin: 0 0 1em 1em;          /* space from text */
    float: right;
    width: 300px;
    font-size: 0.9em;
    background-color: #fafafa;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px rgba(0,0,0,0.08);
}

/* Make sure infobox doesn’t get trapped in content-table wrappers */
.mw-parser-output table.infobox {
    display: table;
}

/* Header cell (title row) */
table.infobox > tbody > tr:first-child > th,
table.infobox > tr:first-child > th {
    background: linear-gradient(to bottom, #f3f3f3, #e1e1e1);
    font-weight: bold;
    text-align: center;
    font-size: 1.15em;
    padding: 0.4em;
    border-bottom: 1px solid #ccc;
}

/* Row labels (left column) */
table.infobox th {
    text-align: left;
    vertical-align: top;
    padding: 0.25em 0.5em;
    width: 35%;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    font-weight: normal;
}

/* Row values (right column) */
table.infobox td {
    vertical-align: top;
    padding: 0.25em 0.5em;
    border-bottom: 1px solid #eee;
}

/* Remove bottom border on the last row */
table.infobox tr:last-child th,
table.infobox tr:last-child td {
    border-bottom: none;
}

/* Links and text inside infobox */
table.infobox a {
    text-decoration: none;
}

table.infobox a:hover {
    text-decoration: underline;
}

/******************************************************
 * Type-specific styling – color cues
 ******************************************************/

/* States: deep blue accent */
table.infobox.state > tbody > tr:first-child > th,
table.infobox.state > tr:first-child > th {
    background: linear-gradient(to bottom, #314b70, #253753);
    color: #fff;
}

/* Settlements: green accent */
table.infobox.settlement > tbody > tr:first-child > th,
table.infobox.settlement > tr:first-child > th {
    background: linear-gradient(to bottom, #3b6b4b, #264532);
    color: #fff;
}

/* Regions: purple accent */
table.infobox.region > tbody > tr:first-child > th,
table.infobox.region > tr:first-child > th {
    background: linear-gradient(to bottom, #5b3d76, #3d284f);
    color: #fff;
}

/* Features: amber accent */
table.infobox.feature > tbody > tr:first-child > th,
table.infobox.feature > tr:first-child > th {
    background: linear-gradient(to bottom, #b27a30, #7d541f);
    color: #fff;
}

/******************************************************
 * Responsive behavior
 ******************************************************/

/* On narrow screens, infobox should stack above text */
@media screen and (max-width: 800px) {
    table.infobox {
        float: none;
        margin: 0 auto 1em auto;
        width: 100%;
        max-width: 480px;
    }
}

/******************************************************
 * Optional: small caption or footer row
 ******************************************************/

table.infobox .infobox-caption {
    font-size: 0.8em;
    text-align: center;
    color: #666;
    padding: 0.25em 0.5em;
}