Revision as of 05:18, 5 September 2026 by The CodeGhost (talk | contribs) (Add --ia-accent/--ia-bg custom-property support and multi-image tabbed gallery styles)
Welcome to Super-Shiritori!
Please remember:
- No vandalism – Do not add nonsense, false info, spam, or blank pages.
- Respect others – Be polite and assume good faith.
- Use reliable information – Make sure edits are accurate and IMPORTANT.
- Stay constructive – Help us grow the wiki with content, especially with the Word compendium.
⚠️ Repeated vandalism or rule-breaking may result in warnings or blocks. If you see vandalism, please revert it and notify an admin.
/* Colors come from --ia-accent / --ia-bg custom properties set inline by the
template (see Template:Infobox_application `color=` / `bg=` params) so each
page can theme its own infobox around its own images. The var() fallbacks
below are what you get if a page doesn't set them -- the original orange/
dark-brown look. */
.infobox-application {
float: right;
clear: right;
width: 300px;
margin: 0 0 1em 1em;
background-color: var(--ia-bg, #2a0f00);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
font-size: 88%;
line-height: 1.4;
}
.infobox-application__title {
background-color: #1a0a00;
color: var(--ia-accent, #F19000);
font-size: 120%;
font-weight: bold;
text-align: center;
padding: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px 4px 0 0;
}
.infobox-application__image {
text-align: center;
padding: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.infobox-application__image img {
max-width: 100%;
}
.infobox-application__caption {
font-style: italic;
color: #D5D4D4;
font-size: 90%;
text-align: center;
padding: 4px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.infobox-application__row {
display: flex;
padding: 4px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.infobox-application__row:last-child {
border-bottom: none;
}
.infobox-application__label {
color: var(--ia-accent, #F19000);
font-weight: bold;
width: 40%;
flex-shrink: 0;
padding-right: 6px;
}
.infobox-application__value {
color: #D5D4D4;
width: 60%;
}
/* --- Multi-image tabbed gallery (image1/caption1, image2/caption2, ...) --- */
.infobox-application__gallery-tabs {
display: flex;
overflow-x: auto;
background-color: var(--ia-accent, #F19000);
}
.infobox-application__gallery-tab {
flex: 0 0 auto;
color: #1a0a00;
font-weight: bold;
font-size: 90%;
padding: 8px 10px;
cursor: pointer;
white-space: nowrap;
border-bottom: 3px solid transparent;
user-select: none;
}
.infobox-application__gallery-tab.is-active {
background-color: rgba(0, 0, 0, 0.2);
border-bottom-color: #1a0a00;
}
.infobox-application__gallery-tab:hover {
background-color: rgba(0, 0, 0, 0.12);
}
.infobox-application__gallery-slide {
text-align: center;
padding: 8px;
}
.infobox-application__gallery-slide[hidden] {
display: none;
}
.infobox-application__gallery-slide img {
max-width: 100%;
}
.infobox-application__gallery-caption {
font-style: italic;
color: #D5D4D4;
font-size: 90%;
text-align: center;
padding: 0 8px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Below this, a 300px fixed-width float leaves almost no room for the
article text beside it (down to a single-character-wide column on a
phone) -- drop the float and let the box take the full column width. */
@media screen and (max-width: 550px) {
.infobox-application {
float: none;
clear: both;
width: auto;
margin: 0 0 1em 0;
}
}