Template:Worldbox/styles.css: Difference between revisions
Created page |
Right-column infobox; collapses on Mobile (intended for Citizen skin, careful of skin change breakage) |
||
| Line 1: | Line 1: | ||
/* Right-column infobox for Citizen; collapses on mobile */ | |||
.worldbox { | .worldbox { | ||
width: | float: right; | ||
max-width: | width: 340px; /* sidebar width */ | ||
margin: | max-width: 42%; | ||
border:1px solid #c6b480; | margin: 0 0 12px 18px; /* space from body text */ | ||
background:#f8f5e9; | border: 1px solid #c6b480; | ||
color:#2b2414; | background: #f8f5e9; | ||
border-radius:10px; | color: #2b2414; | ||
box-shadow:0 1px 3px rgba(0,0,0,.08); | border-radius: 10px; | ||
box-shadow: 0 1px 3px rgba(0,0,0,.08); | |||
} | } | ||
. | .worldbox a, .worldbox a:visited { color: #8b6d00; } | ||
.wb-media { | .worldbox a:hover { color: #c09e2b; text-decoration: underline; } | ||
.wb-cap { font-size:80%; color:#7d6b38; text-align:center; margin-top:4px; } | |||
.wb-wrap { padding: 12px 14px 8px 14px; } | |||
.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.2; } | |||
.wb-tag { font-size: 100%; color: #7d6b38; margin-top: 2px; } | |||
.wb-fields { margin-top: 10px; border-top: 1px solid #e4d9b0; padding-top: 8px; } | |||
/* 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; | |||
} | |||
} | |||
Revision as of 06:41, 30 October 2025
/* Right-column infobox for Citizen; 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: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.worldbox a, .worldbox a:visited { color: #8b6d00; }
.worldbox a:hover { color: #c09e2b; text-decoration: underline; }
.wb-wrap { padding: 12px 14px 8px 14px; }
.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.2; }
.wb-tag { font-size: 100%; color: #7d6b38; margin-top: 2px; }
.wb-fields { margin-top: 10px; border-top: 1px solid #e4d9b0; padding-top: 8px; }
/* 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;
}
}