|
|
| Line 2: |
Line 2: |
| /* Load Velthuryn fonts – free from Google Fonts */ | | /* 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'); | | @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;
| |
| }
| |
/* 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');
