MediaWiki:Common.css: Difference between revisions

/* CSS placed here will be applied to all skins */
/* Load Velthuryn fonts – free from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');


/******************************************************
 * 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;
}

table.smwtable-campaigns {
	vertical-align: top;
}
.smwtable-campaigns .row-even {
    background-color: #fff;
}
.smwtable-campaigns .row-odd {
    background-color: #cde6ea;
}