Revision as of 04:11, 5 September 2026 by The CodeGhost (talk | contribs) (Use !important on the notification flyout max-height -- OOUI sets its own inline max-height that otherwise wins)
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.
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ==========================================================================
SocialProfile dark-theme fixes
--------------------------------------------------------------------------
SocialProfile's bundled CSS (UserProfile.css, ProfileTabs.css,
SpecialUpdateProfile.css) was written for a white-background wiki: it sets
dark-gray text with NO background of its own (relying on the page being
white) and hardcodes a green/orange brand palette from Wikia's old look.
On this wiki's dark #401901 page background that produces near-invisible
text and off-brand green tabs/buttons. This overrides just those rules --
layout/spacing from the original files is untouched.
========================================================================== */
/* --- Profile tabs (View profile / Edit profile bar) --- */
.profile-tab {
background-color: rgba(241, 144, 0, 0.12);
border: 1px solid #F19000;
}
.profile-tab-on {
background-color: #F19000;
border: 1px solid #F19000;
}
.profile-tab a {
color: #F19000 !important;
}
.profile-tab a:hover {
color: #ffffff !important;
}
.profile-tab-on a,
.profile-tab-on a:visited {
color: #2a0f00 !important;
}
/* --- Save/update button on Special:UpdateProfile --- */
.profile-update-button {
background-color: #F19000;
border: 1px solid #F19000;
color: #2a0f00;
font-weight: 700;
}
/* --- Section headings that relied on a white page background --- */
#user-page-left h2,
#user-page-right h2,
.profile-update-title {
color: #F19000;
border-bottom-color: rgba(255, 255, 255, 0.2);
}
/* --- Body text that relied on a white page background --- */
.item-small,
.item,
.vote-text,
.profile-update-unit-left,
.profile-update-unit-small,
.profile-update-row,
.profile-board-message-type,
table.avatar-success-page td.title-cell,
.user-board-message-time,
.profile-info-container b,
.profile-info-container div {
color: #D5D4D4;
}
/* --- Cards that set their own pale/white background (looked like leftover
white boxes on the dark page) -- keep them as cards, just re-themed --- */
.no-info-container,
.no-pictures-container,
.user-board-message-from {
background-color: rgba(255, 255, 255, 0.06);
color: #D5D4D4;
}
/* --- Dividers that were near-invisible pale-gray-on-dark-brown --- */
#user-page-left h2,
#user-page-right h2,
.user-section-heading,
#profile-top,
.user-board-message,
.activity-item,
.casual-game-container p,
.article-item {
border-color: rgba(255, 255, 255, 0.15);
}
/* --- "Add points"-style badge on the toggle button: brand orange stays,
just make sure the text stays legible --- */
#profile-toggle-button {
background-color: #F19000;
}
#profile-toggle-button a {
color: #2a0f00 !important;
}
/* ==========================================================================
Mobile / tablet fixes
--------------------------------------------------------------------------
Reported by a wiki editor via Discord: on a tablet, the notifications
(bell/envelope) flyout "takes up nearly half my screen". Root cause: Echo's
popup has no max-height or scroll of its own -- it just grows one row per
notification forever. Capping it and giving the list its own scrollbar
fixes that regardless of how many notifications pile up.
========================================================================== */
/* !important is required here: OOUI's JS computes its own clipping and sets
max-height as an INLINE style on this element, which otherwise beats any
plain rule in an external stylesheet regardless of selector specificity. */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body {
max-height: 60vh !important;
overflow-y: auto !important;
}
@media screen and (max-width: 900px) {
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body {
max-height: 45vh !important;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
max-width: 92vw;
}
}