Template:Worldbox/styles.css: Difference between revisions
Appearance
Right-column infobox; collapses on Mobile (intended for Citizen skin, careful of skin change breakage) |
Set corners to straight sharp, adjust border lines to be further from text edges |
||
| Line 1: | Line 1: | ||
/* Right-column infobox for | /* Right-column infobox for Vector 2022; collapses on mobile */ | ||
.worldbox { | .worldbox { | ||
| Line 9: | Line 9: | ||
background: #f8f5e9; | background: #f8f5e9; | ||
color: #2b2414; | color: #2b2414; | ||
border-radius: | border-radius: 0; /* square corners */ | ||
box-shadow: 0 1px 3px rgba(0,0,0,.08); | box-shadow: 0 1px 3px rgba(0,0,0,.08); | ||
} | } | ||
/* Inherit global link colors (blue + mossy hover + redlinks) */ | |||
.worldbox a | /* .worldbox a styles removed on purpose */ | ||
.wb-wrap { padding: | .wb-wrap { padding: 14px 16px 10px 16px; } /* extra breathing room */ | ||
.wb-media { text-align: center; } | .wb-media { text-align: center; } | ||
.wb-cap { font-size: 80%; color: #7d6b38; text-align: center; margin-top: 4px; } | .wb-cap { font-size: 80%; color: #7d6b38; text-align: center; margin-top: 4px; } | ||
.wb-title { font-size: 140%; font-weight: 700; color: #5b4a22; line-height: 1. | .wb-title { font-size: 140%; font-weight: 700; color: #5b4a22; line-height: 1.25; } | ||
.wb-tag { font-size: 100%; color: #7d6b38; margin-top: 2px; } | .wb-tag { font-size: 100%; color: #7d6b38; margin-top: 2px; } | ||
.wb-fields { margin-top: | .wb-fields { margin-top: 12px; border-top: 1px solid #e4d9b0; padding-top: 10px; } | ||
/* Optional sticky sidebar */ | /* Optional sticky sidebar */ | ||
Revision as of 07:26, 30 October 2025
/* Right-column infobox for Vector 2022; collapses on mobile */
.worldbox {
float: right;
width: 340px; /* sidebar width */
max-width: 42%;
margin: 0 0 12px 18px; /* space from body text */
border: 1px solid #c6b480;
background: #f8f5e9;
color: #2b2414;
border-radius: 0; /* square corners */
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
/* Inherit global link colors (blue + mossy hover + redlinks) */
/* .worldbox a styles removed on purpose */
.wb-wrap { padding: 14px 16px 10px 16px; } /* extra breathing room */
.wb-media { text-align: center; }
.wb-cap { font-size: 80%; color: #7d6b38; text-align: center; margin-top: 4px; }
.wb-title { font-size: 140%; font-weight: 700; color: #5b4a22; line-height: 1.25; }
.wb-tag { font-size: 100%; color: #7d6b38; margin-top: 2px; }
.wb-fields { margin-top: 12px; border-top: 1px solid #e4d9b0; padding-top: 10px; }
/* Optional sticky sidebar */
.worldbox.sticky { position: sticky; top: 12px; }
/* Mobile / narrow screens: stop floating and go full-width */
@media (max-width: 900px) {
.worldbox {
float: none;
width: auto;
max-width: 720px;
margin: 8px auto;
}
}