MediaWiki:Common.css
Jump to navigation
Jump to search
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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
.class { }/* needed for some reason for the @imports to work */
/* Imports caching */
/*@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Colors.css");*/
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Module:Documentation.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Documentation.css");
/*@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Infobox.css");*/
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Tables.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:MessageBox.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:CustomTabs.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Navbox.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Icons.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Dialogue.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Cards.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Tabbers.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Mobile.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Recipe.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Modal.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:AceEditor.css");
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:CodeMirror.css");
:root { /* Universal Base Styles */
--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
--font-family-headings: 'Segoe UI', system-ui, -apple-system,
'Helvetica Neue', Arial, sans-serif;
--font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono',
Menlo, Courier, monospace;
--font-size: 16px; /* Slightly larger base */
--font-size-small: 14px;
--font-size-large: 18px;
--font-size-xlarge: 20px;
--font-size-h1: 32px;
--font-size-h2: 26px;
--font-size-h3: 22px;
--font-size-h4: 18px;
--line-height: 1.6; /* More breathing room */
--line-height-headings: 1.3;
--line-height-tight: 1.25;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* ===== SPACING ===== */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
/* ===== SHADOWS & DEPTH ===== */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
/* ===== BORDERS & RADIUS ===== */
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 12px;
--border-radius-full: 9999px;
--border-width: 1px;
--border-width-thick: 2px;
--border-width-xthick: 3px;
/* ===== TRANSITIONS ===== */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
/* ===== Z-INDEX LAYERS ===== */
--z-index-dropdown: 1000;
--z-index-sticky: 1020;
--z-index-fixed: 1030;
--z-index-modal-backdrop: 1040;
--z-index-modal: 1050;
--z-index-popover: 1060;
--z-index-tooltip: 1070;
/* ===== FOCUS STATES ===== */
--focus-ring-color: rgba(79, 209, 199, 0.6);
--focus-ring-color-dark: rgba(79, 209, 199, 0.8);
--focus-ring-width: 3px;
--focus-ring-offset: 2px;
/* ===== GRAY SCALE (Optimized) ===== */
--gray-950: #0f1419;
--gray-900: #1a202c;
--gray-800: #2d3748;
--gray-700: #4a5568;
--gray-600: #718096;
--gray-500: #a0aec0;
--gray-400: #cbd5e0;
--gray-300: #e2e8f0;
--gray-200: #edf2f7;
--gray-100: #f7fafc;
--gray-050: #ffffff;
/* ===== TEAL/BLUE SCALE ===== */
--teal-900: #1d4044;
--teal-800: #234e52;
--teal-700: #285e61;
--teal-600: #2c7a7b;
--teal-500: #319795;
--teal-400: #38b2ac;
--teal-300: #4fd1c7;
--teal-200: #81e6d9;
--teal-100: #b2f5ea;
--teal-050: #e6fffa;
/* ===== OTHER COLORS ===== */
--light-blue: #90cdf4;
--gold: #d69e2e;
--purple: #9f7aea;
/* ===== ANIMATIONS ===== */
--animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--animation-spin: spin 1s linear infinite;
--animation-bounce: bounce 1s infinite;
/* Universal border */
--border-color: var(--theme-border-color);
}
/* Light Theme */
:root body:not(.skin-vector-dark) {
/* ===== BASE COLORS ===== */
--theme-page-text-color: #1a2a2a; /* Darker for 17:1 contrast */
--theme-page-text-color--inverse: #ffffff;
--theme-page-background-color: #f5fdfb; /* Slightly darker for less glare */
--theme-page-background-color--rgb: 245, 253, 251;
--theme-page-background-color--secondary: #e8f5f3; /* Better contrast: 13:1 */
--theme-page-background-color--secondary--rgb: 232, 245, 243;
/* ===== LINKS ===== */
--theme-link-color: #007d7a; /* Darker for 7:1 contrast */
--theme-link-color--rgb: 0, 125, 122;
--theme-link-color--hover: #005652; /* Even darker on hover */
--theme-link-color--visited: #4a5568; /* Distinct visited state */
--theme-link-label-color: #00474A;
--mw-head-link-color: #007d7a;
--new-link-color: #00a3a3; /* For "red links" - actually teal */
/* ===== ACCENTS ===== */
--theme-accent-color: #38b2ac; /* More vibrant */
--theme-accent-color--rgb: 56, 178, 172;
--theme-accent-color--hover: #2c9c96; /* Darker hover */
--theme-accent-label-color: #ffffff;
/* ===== BORDERS ===== */
--theme-border-color: #a1e9dc; /* More visible */
--theme-border-color--rgb: 161, 233, 220;
--theme-border-color--subtle: #d1f5ee; /* For subtle separators */
/* ===== STATUS COLORS (Enhanced for visibility) ===== */
--theme-alert-color: #d53f3f; /* More vibrant red - 7:1 contrast */
--theme-alert-color--rgb: 213, 63, 63;
--theme-alert-color--hover: #b03030;
--theme-alert-color--secondary: #ffeaea; /* Softer background */
--theme-alert-label: #ffffff;
--theme-warning-color: #c05621; /* Warmer orange - 6.5:1 contrast */
--theme-warning-color--rgb: 192, 86, 33;
--theme-warning-color--secondary: #fff4e6;
--theme-warning-label: #1a2a2a; /* Dark text on light background */
--theme-success-color: #2e8b57; /* More distinct green - 7:1 contrast */
--theme-success-color--rgb: 46, 139, 87;
--theme-success-color--secondary: #e6f7ed;
--theme-success-label: #1a2a2a; /* Dark text on light background */
--theme-message-color: #6b46c1; /* More vibrant purple */
--theme-message-color--rgb: 107, 70, 193;
--theme-message-color--secondary: #f3f0ff;
--theme-message-label: #ffffff;
--theme-info-color: #3182ce; /* Added info color */
--theme-info-color--secondary: #ebf8ff;
--theme-info-label: #1a2a2a;
/* ===== ALERT HIGHLIGHT ===== */
--theme-alert-highlight: #c53030;
--theme-alert-highlight--rgb: 197, 48, 48;
--theme-alert-highlight--hover: #e53e3e;
/* ===== CUSTOM VARIABLES ===== */
--theme-alt-text: #ffffff;
--theme-accent-bg: #e6fffa;
--theme-infobox-bg: #f0faf9; /* Less harsh than pure white */
--theme-card-shadow: var(--shadow-sm);
--theme-card-shadow-hover: var(--shadow-md);
/* ===== YOUR CUSTOM COLORS ===== */
--color-player: #60d9c5; /* More readable than #74f4e0 */
--color-accent: #38b2ac;
--color-npc: #9f7aea;
--color-npc-secondary: #d6bcfa;
/* ===== CARD BACKGROUNDS ===== */
--card-bg-main: #ffffff;
--card-bg-sub: #e6fffa;
--card-bg-elevated: #ffffff;
--card-border-color: var(--theme-border-color);
/* ===== LETTER BACKGROUND ===== */
--letter-bg: #f0fff4;
--letter-border: #c6f6d5;
/* ===== USER HIGHLIGHTS ===== */
--custom-admin-highlight: #c05621;
--custom-contentmoderator-highlight: #6b46c1;
--custom-bot-color: #718096;
--custom-bot-font-style: italic;
/* ===== NAMED ACCENTS ===== */
--accent: var(--theme-accent-color);
--player: var(--color-player);
--npc: var(--color-npc);
/* ===== INPUTS ===== */
--input-bg: #ffffff;
--input-border: #cbd5e0;
--input-border-focus: var(--theme-accent-color);
--input-text: var(--theme-page-text-color);
--input-placeholder: #a0aec0;
/* ===== CODE & PRE ===== */
--code-bg: #f7fafc;
--code-border: #e2e8f0;
--code-text: var(--theme-page-text-color);
--pre-bg: #1a202c;
--pre-text: #e2e8f0;
/* ===== TABLE STYLES ===== */
--table-header-bg: #e6fffa;
--table-header-text: var(--theme-page-text-color);
--table-row-even: #f7fafc;
--table-row-odd: #ffffff;
--table-border: var(--theme-border-color);
}
/* Dark Theme */
:root .skin-vector-dark {
/* ===== BASE COLORS ===== */
--theme-page-text-color: #e6f7f5; /* Warmer light color */
--theme-page-text-color--inverse: #1a202c;
--theme-page-background-color: rgba(22, 28, 36, 0.98); /* Softer dark */
--theme-page-background-color--rgb: 22, 28, 36;
--theme-page-background-color--secondary: #2a363d; /* Warmer, better contrast */
--theme-page-background-color--secondary--rgb: 42, 54, 61;
/* ===== LINKS ===== */
--theme-link-color: #5fd9cf; /* Brighter for visibility */
--theme-link-color--rgb: 95, 217, 207;
--theme-link-color--hover: #81e6d9;
--theme-link-color--visited: #a0aec0;
--theme-link-label-color: #e6f7f5;
--mw-head-link-color: #5fd9cf;
--new-link-color: #4fd1c7; /* For "red links" */
/* ===== ACCENTS ===== */
--theme-accent-color: #5fd9cf;
--theme-accent-color--rgb: 95, 217, 207;
--theme-accent-color--hover: #81e6d9;
--theme-accent-label-color: #1a202c;
/* ===== BORDERS ===== */
--theme-border-color: #4d6872; /* More visible */
--theme-border-color--rgb: 77, 104, 114;
--theme-border-color--subtle: #3a5059;
/* ===== STATUS COLORS ===== */
--theme-alert-color: #fc8181;
--theme-alert-color--rgb: 252, 129, 129;
--theme-alert-color--hover: #feb2b2;
--theme-alert-color--secondary: #4a2626; /* Darker background */
--theme-alert-label: #1a202c; /* Dark text on light red */
--theme-warning-color: #f6ad55;
--theme-warning-color--rgb: 246, 173, 85;
--theme-warning-color--secondary: #4a3a20;
--theme-warning-label: #1a202c;
--theme-success-color: #68d391;
--theme-success-color--rgb: 104, 211, 145;
--theme-success-color--secondary: #22543d;
--theme-success-label: #1a202c;
--theme-message-color: #b794f4;
--theme-message-color--rgb: 183, 148, 244;
--theme-message-color--secondary: #3a3664;
--theme-message-label: #1a202c;
--theme-info-color: #63b3ed;
--theme-info-color--secondary: #2c5282;
--theme-info-label: #1a202c;
/* ===== CUSTOM VARIABLES ===== */
--theme-alt-text: #2d3748;
--theme-accent-bg: #2d3748;
--theme-infobox-bg: #2a363d;
--theme-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
--theme-card-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.4);
/* ===== YOUR CUSTOM COLORS ===== */
--color-player: #48b8aa; /* More vibrant */
--color-accent: #5fd9cf;
--color-npc: #b794f4;
--color-npc-secondary: #d6bcfa;
/* ===== CARD BACKGROUNDS ===== */
--card-bg-main: #2a363d;
--card-bg-sub: #3a464d;
--card-bg-elevated: #34444d;
--card-border-color: var(--theme-border-color);
/* ===== LETTER BACKGROUND ===== */
--letter-bg: #1a272b;
--letter-border: #2d4a3c;
/* ===== USER HIGHLIGHTS ===== */
--custom-admin-highlight: #f6ad55;
--custom-contentmoderator-highlight: #b794f4;
--custom-bot-color: #a0aec0;
--custom-bot-font-style: italic;
/* ===== ALERT HIGHLIGHT ===== */
--theme-alert-highlight: #e53e3e;
--theme-alert-highlight--rgb: 229, 62, 62;
--theme-alert-highlight--hover: #fc8181;
/* ===== NAMED ACCENTS ===== */
--accent: var(--theme-accent-color);
--player: var(--color-player);
--npc: var(--color-npc);
/* ===== INPUTS ===== */
--input-bg: #2d3748;
--input-border: #4a5568;
--input-border-focus: var(--theme-accent-color);
--input-text: var(--theme-page-text-color);
--input-placeholder: #718096;
/* ===== CODE & PRE ===== */
--code-bg: #2d3748;
--code-border: #4a5568;
--code-text: var(--theme-page-text-color);
--pre-bg: #1a202c;
--pre-text: #e2e8f0;
/* ===== TABLE STYLES ===== */
--table-header-bg: #2d4a4d;
--table-header-text: var(--theme-page-text-color);
--table-row-even: #2a363d;
--table-row-odd: #34444d;
--table-border: var(--theme-border-color);
}
/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* ===== LINK STYLING ===== */
.mw-body a,
.mw-body-content a {
text-decoration: none;
transition: color var(--transition-fast) ease,
background-color var(--transition-fast) ease,
border-color var(--transition-fast) ease;
}
.mw-body a:not(.new):hover,
.mw-body-content a:not(.new):hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 2px;
}
.mw-body a.new,
.mw-body a.new:visited,
.mw-body-content a.new {
color: var(--new-link-color) !important;
font-weight: var(--font-weight-semibold) !important;
border-bottom: 1px dashed rgba(0, 163, 163, 0.4) !important;
background-color: rgba(0, 163, 163, 0.08) !important;
padding: 1px 3px !important;
border-radius: var(--border-radius-sm) !important;
transition: all var(--transition-base) ease !important;
}
.mw-body a.new:hover,
.mw-body-content a.new:hover {
background-color: rgba(0, 163, 163, 0.15) !important;
border-bottom-style: solid !important;
text-decoration: none !important;
box-shadow: 0 1px 2px rgba(0, 163, 163, 0.2) !important;
}
/* Dark theme new links */
.skin-vector-dark .mw-body a.new,
.skin-vector-dark .mw-body a.new:visited,
.skin-vector-dark .mw-body-content a.new {
color: var(--new-link-color) !important;
background-color: rgba(79, 209, 199, 0.1) !important;
border-bottom-color: rgba(79, 209, 199, 0.5) !important;
}
/* ===== FOCUS STYLES ===== */
*:focus {
outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
outline-offset: var(--focus-ring-offset) !important;
border-radius: var(--border-radius-sm) !important;
}
*:focus:not(:focus-visible) {
outline: none !important;
}
*:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color) !important;
outline-offset: var(--focus-ring-offset) !important;
border-radius: var(--border-radius-sm) !important;
}
/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
:root {
--transition-fast: 0ms;
--transition-base: 0ms;
--transition-slow: 0ms;
}
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:root body:not(.skin-vector-dark) {
--theme-link-color: #005652;
--theme-border-color: #1a2a2a;
--new-link-color: #007d7a;
}
:root .skin-vector-dark {
--theme-link-color: #81e6d9;
--theme-border-color: #718096;
--new-link-color: #4fd1c7;
}
.mw-body a.new,
.mw-body-content a.new {
border-bottom-width: 2px !important;
background-color: transparent !important;
}
}
/* ===== PRINT STYLES ===== */
@media print {
:root {
--theme-page-text-color: #000000;
--theme-page-background-color: #ffffff;
--theme-link-color: #000000;
}
a {
color: #000000 !important;
text-decoration: underline !important;
}
a.new::after {
content: " [new]";
font-size: smaller;
color: #666;
}
}
/* ===== UTILITY CLASSES (Optional but helpful) ===== */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-balance {
text-wrap: balance;
}
.shadow-subtle {
box-shadow: var(--shadow-sm);
}
.shadow-elevated {
box-shadow: var(--shadow-md);
}
.card {
background-color: var(--card-bg-main);
border-radius: var(--border-radius-md);
border: 1px solid var(--card-border-color);
box-shadow: var(--theme-card-shadow);
transition: all var(--transition-base) ease;
}
.card:hover {
box-shadow: var(--theme-card-shadow-hover);
transform: translateY(-2px);
}
.status-alert {
background-color: var(--theme-alert-color--secondary);
color: var(--theme-alert-color);
border-left: 4px solid var(--theme-alert-color);
}
.status-warning {
background-color: var(--theme-warning-color--secondary);
color: var(--theme-warning-color);
border-left: 4px solid var(--theme-warning-color);
}
.status-success {
background-color: var(--theme-success-color--secondary);
color: var(--theme-success-color);
border-left: 4px solid var(--theme-success-color);
}
.status-info {
background-color: var(--theme-info-color--secondary);
color: var(--theme-info-color);
border-left: 4px solid var(--theme-info-color);
}
/* ===== MW HEAD NAVIGATION ENHANCEMENTS ===== */
/* Personal tools menu */
#p-personal {
margin-right: var(--spacing-md);
}
#p-personal .vector-menu-heading {
display: none; /* Hide "Personal tools" label */
}
#p-personal .vector-menu-content {
background: transparent;
border: none;
box-shadow: none;
}
#p-personal .vector-menu-content-list {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
#p-personal li {
margin: 0 !important;
}
#p-personal a {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: var(--border-radius-md);
color: var(--theme-page-text-color) !important;
background: transparent;
font-weight: var(--font-weight-medium);
transition: all var(--transition-fast) ease;
text-decoration: none !important;
border: 1px solid transparent;
}
#p-personal a:hover {
background: var(--theme-page-background-color--secondary);
color: var(--theme-link-color) !important;
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
border-color: var(--theme-border-color--subtle);
}
/* Theme toggle button */
#pt-theme a {
background: var(--theme-accent-bg);
color: var(--theme-accent-color) !important;
border: 1px solid var(--theme-border-color);
}
#pt-theme a:hover {
background: var(--theme-accent-color);
color: var(--theme-accent-label-color) !important;
border-color: var(--theme-accent-color);
}
#pt-theme svg {
width: 16px;
height: 16px;
fill: currentColor;
}
/* User links with special styling */
#pt-userpage a,
#pt-mytalk a {
background: rgba(var(--theme-accent-color--rgb), 0.1);
color: var(--theme-accent-color) !important;
border: 1px solid rgba(var(--theme-accent-color--rgb), 0.2);
}
#pt-userpage a:hover,
#pt-mytalk a:hover {
background: var(--theme-accent-color);
color: var(--theme-accent-label-color) !important;
}
/* Logout button */
#pt-logout a {
background: rgba(var(--theme-alert-color--rgb), 0.1);
color: var(--theme-alert-color) !important;
border: 1px solid rgba(var(--theme-alert-color--rgb), 0.2);
}
#pt-logout a:hover {
background: var(--theme-alert-color);
color: var(--theme-alert-label) !important;
}
/* Namespaces and Views tabs */
#left-navigation,
#right-navigation {
display: flex;
gap: var(--spacing-sm);
}
.vector-menu-tabs {
background: transparent;
border: none;
}
.vector-menu-tabs .vector-menu-heading {
display: none;
}
.vector-menu-tabs .vector-menu-content {
background: transparent;
border: none;
box-shadow: none;
}
.vector-menu-tabs .vector-menu-content-list {
display: flex;
gap: 2px;
background: var(--theme-page-background-color--secondary);
padding: 4px;
border-radius: var(--border-radius-md);
border: 1px solid var(--theme-border-color);
}
.vector-menu-tabs li {
margin: 0 !important;
}
.vector-menu-tabs a {
display: block;
padding: 8px 16px;
border-radius: var(--border-radius-sm);
color: var(--theme-page-text-color) !important;
font-weight: var(--font-weight-medium);
text-decoration: none !important;
transition: all var(--transition-fast) ease;
border: 1px solid transparent;
}
.vector-menu-tabs a:hover {
background: var(--theme-page-background-color);
color: var(--theme-link-color) !important;
border-color: var(--theme-border-color);
transform: translateY(-1px);
}
.vector-menu-tabs li.selected a {
background: var(--theme-accent-color);
color: var(--theme-accent-label-color) !important;
font-weight: var(--font-weight-semibold);
box-shadow: var(--shadow-sm);
border-color: var(--theme-accent-color);
}
.vector-menu-tabs li.selected a:hover {
background: var(--theme-accent-color--hover);
border-color: var(--theme-accent-color--hover);
}
/* New/discussion links in tabs */
.vector-menu-tabs li.new a {
background: rgba(var(--theme-accent-color--rgb), 0.1);
color: var(--new-link-color) !important;
border: 1px dashed rgba(var(--theme-accent-color--rgb), 0.3);
}
.vector-menu-tabs li.new a:hover {
background: rgba(var(--theme-accent-color--rgb), 0.2);
border-style: solid;
color: var(--theme-accent-color) !important;
}
/* Dropdown menus (More options, etc.) */
.vector-menu-dropdown {
position: relative;
}
.vector-menu-dropdown .vector-menu-heading {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: var(--theme-page-background-color--secondary);
border: 1px solid var(--theme-border-color);
border-radius: var(--border-radius-md);
color: var(--theme-page-text-color);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: all var(--transition-fast) ease;
}
.vector-menu-dropdown .vector-menu-heading:hover {
background: var(--theme-page-background-color);
border-color: var(--theme-accent-color);
color: var(--theme-link-color);
box-shadow: var(--shadow-sm);
}
.vector-menu-dropdown .vector-menu-checkbox:checked + .vector-menu-heading {
background: var(--theme-accent-color);
color: var(--theme-accent-label-color);
border-color: var(--theme-accent-color);
}
.vector-menu-dropdown .vector-menu-content {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
min-width: 200px;
background: var(--card-bg-main);
border: 1px solid var(--theme-border-color);
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-lg);
z-index: var(--z-index-dropdown);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--transition-fast) ease;
}
.vector-menu-dropdown .vector-menu-checkbox:checked ~ .vector-menu-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.vector-menu-dropdown .vector-menu-content-list {
padding: var(--spacing-sm) 0;
}
.vector-menu-dropdown li {
margin: 0 !important;
}
.vector-menu-dropdown a {
display: block;
padding: 8px 16px;
color: var(--theme-page-text-color) !important;
text-decoration: none !important;
transition: all var(--transition-fast) ease;
}
.vector-menu-dropdown a:hover {
background: var(--theme-page-background-color--secondary);
color: var(--theme-link-color) !important;
padding-left: 20px;
}
/* Search box */
#p-search {
flex: 1;
max-width: 400px;
}
#p-search h3 {
display: none;
}
#simpleSearch {
display: flex;
gap: 4px;
background: var(--card-bg-main);
border: 1px solid var(--theme-border-color);
border-radius: var(--border-radius-md);
padding: 4px;
transition: all var(--transition-fast) ease;
box-shadow: var(--shadow-sm);
}
#simpleSearch:focus-within {
border-color: var(--theme-accent-color);
box-shadow: 0 0 0 3px var(--focus-ring-color);
transform: translateY(-1px);
}
#searchInput {
flex: 1;
padding: 10px 16px;
background: transparent;
border: none;
color: var(--theme-page-text-color);
font-size: var(--font-size);
border-radius: var(--border-radius-sm);
}
#searchInput::placeholder {
color: var(--input-placeholder);
}
#searchInput:focus {
outline: none;
background: var(--theme-page-background-color--secondary);
}
.searchButton {
padding: 10px 20px;
background: var(--theme-page-background-color--secondary);
border: 1px solid var(--theme-border-color);
color: var(--theme-page-text-color);
font-weight: var(--font-weight-medium);
border-radius: var(--border-radius-sm);
cursor: pointer;
transition: all var(--transition-fast) ease;
}
.searchButton:hover {
background: var(--theme-accent-color);
color: var(--theme-accent-label-color);
border-color: var(--theme-accent-color);
transform: translateY(-1px);
}
#searchButton {
background: var(--theme-accent-color);
color: var(--theme-accent-label-color);
border-color: var(--theme-accent-color);
}
#searchButton:hover {
background: var(--theme-accent-color--hover);
border-color: var(--theme-accent-color--hover);
}
/* Watch/Unwatch button */
#ca-unwatch a {
display: flex;
align-items: center;
gap: 6px;
background: rgba(var(--theme-warning-color--rgb), 0.1);
color: var(--theme-warning-color) !important;
border: 1px solid rgba(var(--theme-warning-color--rgb), 0.2);
}
#ca-unwatch a:hover {
background: var(--theme-warning-color);
color: var(--theme-warning-label) !important;
}
/* Delete/Move/Protect actions (in dropdown) */
#ca-delete a {
color: var(--theme-alert-color) !important;
}
#ca-delete a:hover {
background: rgba(var(--theme-alert-color--rgb), 0.1);
}
/* Responsive adjustments */
@media (max-width: 768px) {
#mw-head {
flex-wrap: wrap;
gap: var(--spacing-sm);
}
#p-personal .vector-menu-content-list {
gap: 4px;
}
#p-personal a {
padding: 4px 8px;
font-size: var(--font-size-small);
}
.vector-menu-tabs .vector-menu-content-list {
flex-wrap: wrap;
}
.vector-menu-tabs a {
padding: 6px 12px;
font-size: var(--font-size-small);
}
#simpleSearch {
min-width: 200px;
}
.searchButton span {
display: none;
}
.searchButton {
padding: 10px;
}
}
/* Dark theme specific adjustments */
.skin-vector-dark #simpleSearch {
background: var(--card-bg-main);
border-color: var(--theme-border-color);
}
.skin-vector-dark .vector-menu-tabs .vector-menu-content-list {
background: var(--card-bg-sub);
border-color: var(--theme-border-color);
}
.skin-vector-dark .vector-menu-dropdown .vector-menu-content {
background: var(--card-bg-main);
border-color: var(--theme-border-color);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
/* Active state indicators */
#p-personal a:active,
.vector-menu-tabs a:active,
.searchButton:active {
transform: translateY(0);
transition: transform 100ms ease;
}
/* Focus styles for navigation */
#p-personal a:focus-visible,
.vector-menu-tabs a:focus-visible,
.vector-menu-dropdown .vector-menu-heading:focus-visible,
#searchInput:focus-visible,
.searchButton:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: 2px;
border-radius: var(--border-radius-sm);
}
/* Icon adjustments */
.icon a::before {
margin-right: 6px;
opacity: 0.7;
}
/* Animation for dropdown arrow */
.vector-menu-dropdown .vector-menu-heading::after {
content: "▼";
font-size: 10px;
opacity: 0.7;
transition: transform var(--transition-fast) ease;
}
.vector-menu-dropdown .vector-menu-checkbox:checked + .vector-menu-heading::after {
transform: rotate(180deg);
}
/* Loading state for search */
#simpleSearch.loading {
position: relative;
}
#simpleSearch.loading::after {
content: "";
position: absolute;
top: 50%;
right: 60px;
width: 16px;
height: 16px;
border: 2px solid var(--theme-border-color);
border-top-color: var(--theme-accent-color);
border-radius: 50%;
animation: var(--animation-spin);
}
#content.mw-body, .parsoid-body {
background-color: var(--theme-page-background-color) !important;
border: 1px solid var(--theme-border-color);
color: var(--theme-page-text-color);
}
/* Typography improvements */
h1, h2, h3, h4, h5, h6, .mw-body, .editOptions, .ace-tm, .vector-menu-heading, .ace_cursor, .vector-menu-content-list > a, .vector-menu-heading-label {
color: var(--theme-page-text-color);
}
.vector-menu-heading-label {
font-size: 0.8125em;
}
/* Footer and panels */
.mw-footer, .editOptions, .ace-tm, #mw-panel .vector-menu-heading {
background-color: var(--theme-page-background-color--secondary) !important;
color: var(--theme-page-text-color);
}
/* Sidebar and lists */
.ace-tm .ace_gutter, .selected.mw-list-item, #mw-panel .vector-menu-content-list {
background-color: var(--theme-page-background-color--secondary) !important;
color: var(--theme-page-text-color);
}
/* Notification improvements */
.skin-vector-dark #mw-notification-area.mw-notification.mw-notification-type-error,
.skin-vector-dark .postedit.mw-notification.mw-notification-type-error,
.skin-vector-dark .wds-table-td-alert {
background-color: var(--theme-alert-highlight);
color: var(--theme-alert-label);
}
.text-error {
color: var(--theme-alert-highlight);
}
/* Revision diff styling - improved contrast */
.diff td.diff-addedline {
background-color: var(--teal-050);
border-color: var(--theme-success-color);
border-width: 1px 1px 1px 4px;
color: var(--theme-success-color);
}
.diff td.diff-addedline .diffchange {
background-color: var(--theme-success-color);
color: var(--theme-success-label);
font-weight: normal;
}
.diff td.diff-deletedline {
background-color: var(--theme-alert-color--secondary);
border-color: var(--theme-alert-color);
border-width: 1px 1px 1px 4px;
color: var(--theme-alert-color);
}
.diff td.diff-deletedline .diffchange {
background-color: var(--theme-alert-color);
color: var(--theme-alert-label);
font-weight: normal;
}
.diff td.diff-context {
background: transparent;
border-color: var(--theme-border-color);
color: var(--theme-page-text-color);
}
/* CodeMirror improvements */
.CodeMirror .CodeMirror-scroll {
background: var(--theme-page-background-color);
color: var(--theme-page-text-color);
}
.CodeMirror .CodeMirror-linenumber, .CodeMirror .CodeMirror-gutters {
background: var(--theme-page-background-color--secondary);
color: var(--theme-page-text-color);
border-right: 1px solid var(--theme-border-color);
}
/* Color template improvements */
.text-player, .text-player * {
color: var(--color-player);
font-weight: 600;
}
.bg-player {
background-color: var(--color-player);
color: var(--theme-page-text-color--inverse);
padding: 2px 6px;
border-radius: 3px;
}
.text-accent, .text-accent * {
color: var(--color-accent);
font-weight: 600;
}
.bg-accent {
background-color: var(--color-accent);
color: var(--theme-accent-label-color);
padding: 2px 6px;
border-radius: 3px;
}
/* User highlights - improved contrast */
a[href="https://mbwiki.stairwaygames.work/wiki/User:Ais"],
a[href="/wiki/User:Ais"],
a[href="/wiki/Special:Contributions/Ais"] {
color: var(--custom-admin-highlight);
font-weight: 600;
}
/* Bots */
a[href="https://coralisland.wiki/wiki/User:NoriBot"],
a[href="/wiki/User:NoriBot"],
a[href="/wiki/Special:Contributions/NoriBot"],
a[href="https://coralisland.wiki/wiki/User:VoirBot"],
a[href="/wiki/User:VoirBot"],
a[href="/wiki/Special:Contributions/VoirBot"] {
color: var(--custom-bot-color);
font-style: var(--custom-bot-font-style);
opacity: 0.9;
}
/* Additional improvements for better readability */
.mw-body-content {
line-height: 1.6;
}
/* Improve contrast for links */
a {
transition: color 0.2s ease;
}
a:hover {
text-decoration: underline;
}
/* Improve table readability */
.mw-parser-output table {
background-color: var(--theme-page-background-color);
border: none;
}
.mw-parser-output table th {
background-color: var(--theme-page-background-color--secondary);
color: var(--theme-page-text-color);
}
.mw-parser-output table td {
border: none;
}
body.skin-vector-dark {
/*background: url("https://coralwiki.stairwaygames.com/w/images/9/9a/Site-background-dark.png") no-repeat fixed center center / cover !important;*/
background-color: #000000;
}
.mobileHide, .mobile-only, .no-desktop {
display: none!important;
}
/* || FIXES */
.wikiEditor-ui-text > .ui-resizable {
width: 100% !important;
max-width: 100%;
}
ul {
list-style: disc;
}
h2 .mw-headline,
h3 .mw-headline,
h4 .mw-headline {
font-weight: 500;
}
.vector-body h3 , .vector-body h4 , .vector-body h5 , .vector-body h6 {
margin-bottom: 4px;
}
a, a:visited, a:active,
.mw-parser-output a:is(.external, .external:visited, .external:active) {
color: var(--theme-link-color);
}
#mw-head .vector-menu-content-list .mw-list-item :is(a, a:visited, a:active) {
color: var(--mw-head-link-color, var(--theme-page-text-color));
}
#mw-panel .vector-menu-content-list .mw-list-item :is(a, a:visited, a:active) {
color: var(--theme-link-color);
}
.mw-parser-output a.external {
padding-right: 0;
font-size: inherit;
}
.catlinks {
border-color: var(--theme-border-color);
border-radius: 6px;
background-color: var(--gray-050);
}
.CodeMirror-lines span {
font: 14px Consolas,Eupheima UCAS,Monaco,Menlo,monospace /* Source Editor */
}
.wikiEditor-ui .ace_editor * {
font-size: 13px;
font-family: monospace, monospace; /* Module */
}
.mw-input .mw-abusefilter-editor * {
font-size: 13px;
font-family: monospace, monospace;
}
/* Hide default TOOLBOX nav section on sidebar */
#mw-navigation > #mw-panel > #p-tb {
display: none;
}
/* Column template fix */
.columntemplate ul,
.columntemplate ol {
margin-top: 0;
}
/* RC */
.mw-changeslist table {
width: unset;
}
.gift-table .icon-list-container {
width: auto;
}
/* Quote template */
.quotetable {
width: auto;
}
.Bug6200 {
margin-bottom: 0.75em;
}
/* Code block */
code, pre {
background-color: var(--theme-page-background-color--secondary);
color: var(--theme-page-text-color);
border: 1px solid var(--theme-border-color);
border-radius: 2px;
padding: 1px 4px;
font-family: monospace, monospace;
font-size: 13px;
}
code.code-block-table {
display: table;
line-height: 21px;
padding:8px;
}
.code-block-table * {
font: 14px Consolas,Eupheima UCAS,Monaco,Menlo,monospace;
}
.code-block {
display: inline-block;
line-height: 21px;
}
/* || MAIN PAGE */
/*banner links*/
.banner-links a {
color: #FFFFFF !important;
text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
font-weight: 600 !important;
}
/* mp-banner */
#mp-banner {
position: absolute;
width: 100%;
height: 10%;
filter: blur(0px);
z-index: -1;
/* background: url(filepath://Funguys_Swarm_Banner.png) top center/cover no-repeat;*/
background-color: #000000;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
body.page-Main_Page.action-view .main-page-top {
/* background-image: url(https://coralwiki.stairwaygames.com/w/images/c/c2/441Cover_image_only.png); */
background-color: var(--theme-page-background-color--secondary, #000000);
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 4px;
color: #fffff;
text-align: center;
align-items: center;
}
/* ||TABLE OF CONTENTS */
.toc {
padding: 8px 12px;
border-radius: 4px;
background-color: var(--theme-page-background-color--secondary);
border: 1px solid var(--theme-border-color);
margin-top: 16px;
}
.toctogglelabel {
color: var(--theme-link-color);
}
.tocnumber {
color: var(--theme-page-text-color);
}
.vector-body .toc h2 {
font-family: var(--font-family-headings);
font-weight: bold;
}
/* TOC hide headings */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none;
}
/* For Template:Changelist */
.changelist-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 88%;
margin: 0.3em 0;
}
.changelist-content {
overflow: auto;
max-height: 384px;
padding: 1em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-moz-border-radius-topleft: 0.5em;
background: transparent;
border-radius: 6px;
}
.changelist-border {
border: 1px solid var(--theme-border-color);
border-left: 6px solid var(--accent);
}
/* For Template:Chat */
.chat-wrapper {
display: flex;
flex-direction: column;
}
.chat-player,
.chat-npc {
display: flex;
flex-direction: row;
gap: 0.5em;
}
.chat-player-speaker {
white-space: nowrap;
min-width: 70px;
color: rgb(105, 172, 82);
}
.chat-npc-speaker {
white-space: nowrap;
min-width: 70px;
color: rgb(237, 123, 103);
}
/* Hatnote */
.hatnote {
display: flex;
align-items: center;
padding: 10px 15px;
margin-top: 0.6rem;
margin-bottom: 0.8rem;
background-color: var( --color-surface-2 );
border: 1px solid var( --border-color-base--darker );
border-radius: var( --border-radius-base );
color: var( --color-base--emphasized );
font-size: 0.875rem;
line-height: 1.4;
}
.hatnote-icon img {
width: 14px;
height: auto;
margin-right: 10px;
opacity: var( --opacity-icon-base );
}
.hatnote.hatnote-high {
background-color: var( --background-color-destructive-subtle );
border-color: var( --color-destructive );
}
.hatnote.hatnote-medium {
background-color: var( --background-color-warning-subtle );
border-color: var( --color-warning );
}
.hatnote.hatnote-low {
background-color: var( --color-surface-2 );
}
/* Dark mode */
html.skin-citizen-dark .hatnote-icon img {
filter: invert( 1 );
}
/* For [[Module:Formatting]] */
code.code-block {
display: inline-block;
line-height: 21px;
}
code.code-block-table {
display: table;
line-height: 21px;
}
span.variable {
opacity: 0.65;
}
span.variable::after {
opacity: 0.65;
content: ">";
}
span.variable::before {
opacity: 0.65;
content: "<";
}
/* Quote */
.pull-quote {
font-style: italic;
margin: 0;
padding: 0 30px 8px !important
}
.pull-quote::before {
color: var(--accent);
content: "“";
display: block;
font-size: 96px;
font-style: normal;
line-height: 72px;
margin: 4px 0 -45px -5px;;
}
.pull-quote__source::before {
content: "— ";
margin-bottom:8px;
}
.pull-quote__text {
margin-bottom:4px;
}
/* Gallery */
.gallerytext {
text-align: center;
font-size:100%;
}
/* Fix to Template Data */
.mw-templatedata-doc-params > * > tr > th {
width: 150px;
}
.mw-templatedata-doc-params {
width: auto;
max-width: 100%;
}
/* Space sidebar arrows properly */
#mw-panel.collapsible-nav .portal:is(.collapsed, .expanded) .vector-menu-heading {
background-position: 95% center;
}
/* Theme toggle */
.wds-icon {
align-self: center;
margin: 0 6px;
pointer-events: none;
fill: currentColor;
}
.wds-icon-small {
height: 18px;
min-width: 18px;
width: 18px;
}
#p-personal .vector-menu-content-list {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
font-size: 0.875em;
}
.cols {
background-color: var(--theme-page-background-color--secondary);
}
#pagehistory li.selected {
background-color: var(--theme-page-background-color--secondary);
color: var(--theme-page-text-color);
outline: 1px dashed var(--theme-border-color);
}
/* ===== IMproved Main Page Framework CSS ===== */
#mp-container {
display: grid;
gap: 20px;
margin: 20px 0;
width: 100%;
min-width: 100%;
}
/* Desktop layout */
#mp-container {
grid-template-areas: var(--main-page-layout--desktop, '');
grid-template-columns: var(--main-page-layout-columns--desktop, repeat(3, 1fr));
}
/* Tablet layout */
@media (max-width: 1024px) {
#mp-container {
grid-template-areas: var(--main-page-layout--tablet, var(--main-page-layout--desktop, ''));
grid-template-columns: var(--main-page-layout-columns--tablet, var(--main-page-layout-columns--desktop, repeat(2, 1fr)));
}
}
/* Mobile layout */
@media (max-width: 768px) {
#mp-container {
grid-template-areas: var(--main-page-layout--mobile, var(--main-page-layout--tablet, var(--main-page-layout--desktop, '')));
grid-template-columns: var(--main-page-layout-columns--mobile, var(--main-page-layout-columns--tablet, var(--main-page-layout-columns--desktop, 1fr)));
}
}
/* Social Links Improvements */
/* Clean social links styling - follows theme colors */
.social {
position: relative;
z-index: 999;
text-align: center;
margin: 20px auto;
padding: 15px 0;
max-width: 85%;
background: var(--theme-page-background-color--secondary);
border-radius: 12px;
border: 1px solid var(--theme-border-color);
box-shadow: var(--shadow-sm);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 15px;
}
/* Each social link item */
.social .iconname {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
padding: 12px 20px;
background: var(--theme-page-background-color);
border-radius: 8px;
border: 1px solid var(--theme-border-color);
transition: all 0.3s ease;
flex: 1;
max-width: 200px;
}
/* Hover effect */
.social .iconname:hover {
background: var(--theme-accent-bg) !important;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--theme-accent-color);
}
/* The link inside - uses theme colors */
.social .iconname a.external {
display: flex !important;
align-items: center !important;
text-decoration: none !important;
color: var(--theme-page-text-color) !important;
font-weight: var(--font-weight-medium) !important;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
/* Hover text color */
.social .iconname:hover a.external {
color: var(--theme-link-color) !important;
}
/* Icon container */
.social .iconname .floatleft {
display: flex !important;
align-items: center !important;
margin-right: 10px !important;
margin-bottom: 0 !important;
float: none !important;
}
/* Icon image - no filter, keep original */
.social .iconname .floatleft a img {
width: 20px !important;
height: 20px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
/* Remove filter - keep original icon colors */
filter: none !important;
}
/* Text next to icon */
.social .iconname .external-text {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
}
/* Responsive design */
@media (max-width: 1024px) {
.social {
max-width: 95% !important;
gap: 10px;
}
.social .iconname {
min-width: 160px;
padding: 10px 15px;
}
}
@media (max-width: 768px) {
.social {
flex-direction: column;
gap: 8px;
max-width: 100% !important;
padding: 10px;
}
.social .iconname {
width: 100% !important;
max-width: 100% !important;
min-width: auto !important;
justify-content: flex-start;
padding: 10px 20px;
}
.social .iconname a.external {
justify-content: flex-start;
}
}
body {
font-family: Helvetica, Arial, sans-serif !important;
background-color: @background-color-secondary;
/* background: url("https://mbwiki.stairwaygames.work/w/images/3/3d/384Web_background.png")*/
no-repeat fixed center center / cover !important;
background-color: rgba(0, 0, 0, 0.1) !important;
overflow-y: scroll;
}
.mw-body, .parsoid-body{
background-color: rgba(255, 255, 255, 0.98) !important;
}
ul{
list-style: none;
}
.wikitable, .scheduletable {
table-layout: auto;
width: 100%;
}
.scheduletable {
table-layout: auto;
width: 30%;
}
.fishtable {
table-layout: auto;
width: 100%;
}
.artisan-table{
table-layout: auto;
width: 60%;
border-spacing: 0;
max-width: 100%;
margin: 15px 0
border: 1px solid gray;
}
.artisan-table > tr > th, .artisan-table > * > tr > th{
background-color: #e7c361 !important;
max-width: fit-content;
}
.artisan-table > tr > th, .artisan-table > tr > td, .artisan-table > * > tr > th, .artisan-table > * > tr > td{
border: 1px solid #a2a9b1;
padding: 0.2em 0.4em;
}
.quotetable{
border-spacing: 0;
width: 100%;
max-width: 100%;
}
.quotetable > caption {
text-align: left;
}
.heart{
margin-left: -7px;
margin-bottom: 5px;
}
.quotetable > tbody > tr > td {
padding: 0;
}
blockquote {
margin: 0 10px;
}
.detail-list ul {
list-style: none;
}
caption .mw-collapsible-toggle, .mw-content-ltr caption .mw-collapsible-toggle, .mw-content-rtl caption .mw-collapsible-toggle, .mw-content-rtl .mw-content-ltr caption .mw-collapsible-toggle, .mw-content-ltr .mw-content-rtl caption .mw-collapsible-toggle {
float: right;
}
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
.ci-letter-wrapper{
border-radius: 20px;
padding: 20px;
max-width: 35em;
font-weight: 700;
background: #faf3ea;
}
.ci-letter-header{
padding-bottom: 28px;
}
.ci-letter-content{
font-weight: 400;
}
.ci-letter-footer{
display: flex;
padding-top: 28px;
justify-content: space-between;
font-weight: 700;
align-items: center;
}
.ci-letter-attachment{
max-width: 70%;
}
.card-list-container{
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.custom-card{
display: inline-block;
position: relative;
width: fit-content;
align-self: baseline;
}
.custom-card-body{
display: inline-block;
position: relative;
width: fit-content;
align-self: baseline;
background: #f6e6cf;
border-radius: 12px;
text-align: center;
overflow: hidden;
}
.custom-card-image{
width: 60px;
height: 60px;
padding: 4px;
}
.custom-card-amount{
background: #e9cda2;
text-align: center;
border-radius: 0 0 5px 5px;
padding: 4px 0;
white-space: nowrap;
line-height: 1;
font-size: 12px;
hyphens: auto;
overflow-wrap: break-word;
}
.custom-card-caption{
width: 56px;
text-align: center;
line-height: 1;
font-size: 12px;
hyphens: auto;
overflow-wrap: break-word
}
.wikitable{
background-color: transparent !important;
// min-width: -webkit-fill-available !important;
// table-layout: fixed;
}
.cost-template {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
gap: 0.2rem
}
.cost-detail {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem
}
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), .jquery-tablesorter th.headerSort{
font-size: 10px;
white-space: normal;
}
.wikitable > tr > th, .wikitable > * > tr > th{
background-color: #e7c361 !important;
max-width: fit-content;
}
.heart-event-table {
width: 30%;
}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
// -ms-word-break: break-all;
// word-break: break-all;
// -webkit-hyphens: auto;
// -moz-hyphens: auto;
// hyphens: auto;
width: 150px;
white-space: break-space;
margin-left: auto;
margin-right: auto;
}
.artisan-table > tr > th, .artisan-table > tr > td, .artisan-table > * > tr > th, .artisan-table > * > tr > td:first-child {
// -ms-word-break: break-all;
// word-break: break-all;
// -webkit-hyphens: auto;
// -moz-hyphens: auto;
// hyphens: auto;
width: 150px;
white-space: break-space;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td:first-child {
// -ms-word-break: break-all;
// word-break: break-all;
// -webkit-hyphens: auto;
// -moz-hyphens: auto;
// hyphens: auto;
width: min-content;
white-space: break-space;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.scheduletable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
// -ms-word-break: break-all;
// word-break: break-all;
// -webkit-hyphens: auto;
// -moz-hyphens: auto;
// hyphens: auto;
}
.quotetable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
// -ms-word-break: break-all;
// word-break: break-all;
// -webkit-hyphens: auto;
// -moz-hyphens: auto;
// hyphens: auto;
}
.vector-menu-content {
margin-left: 10px;
}
.mw-body,
.parsoid-body {
// General background/foreground color definition as one exception to the rule.
background-color: rgba(255, 255, 255, 0.9);
color: @color-base;
direction: ltr;
padding: 1em;
}
.infobox {
background: #e7c361 ;
border: 1px solid #e7c361 ;
float: right;
margin: 0 0 1em 1em;
padding: 1em;
// min-width: 25%;
}
.infobox-title {
font-size: 2em;
text-align: center;
}
.infobox p {
text-decoration: underline;
font-size: 1.3em;
}
.infobox-image {
text-align: center;
}
.infobox-table {
width: 100%;
}
.infobox-table th {
text-align: left;
vertical-align: top;
width: 120px;
}
.infobox-table td {
vertical-align: top;
text-align: right;
// color: white;
}
.wikitable > caption{
text-align: left;
}
.Bug6200 {
font-style: italic;
font-weight: normal;
display: flex;
flex-direction: row;
align-items: center;
white-space: normal;
}
.Bug6200 > img {
width: 24px;
height: 24px;
}
.scheduletable{
text-align: center;
margin: 10px 0;
border-collapse: collapse;
}
.scheduletable > tbody > tr > td{
border: 1px solid #a2a9b1;
// text-align: left;
// padding: 0.2em 0.4em;
}
// .scheduletable > tbody > tr > td:first-child{
// width: 70px;
// }
.navbox-list{
padding: 0 0 0 2px;
font-size: 10pt;
}
.navbox{
width: 100%;
margin-top: 12px;
border-spacing: 0;
}
.croptable > tbody > tr > td:first-child{
width: 100px !important;
}
.navbox-title th {
padding: 6px;
border-radius: 4px;
background: #e7c361;
}
.navbox-group a{
color: black;
}
.alt .navbox-list {
background-color: rgba(231, 195, 97, 0.35);
}
.navbox-subgroup {
margin: 0;
border-spacing: 0;
}
.navbox-subgroup .navbox-group{
color: black;
background: rgba(231, 195, 97, 0.10);
white-space: nowrap;
text-align: left;
}
th.navbox-group{
background-color: #e7c361;
color: black;
font-size: 10pt;
padding: 0.25em 1em;
}
.scheduletable > tbody > tr > td:first-child{
width: 150px !important;
}
// td {
// width: 100px;
// }
.scheduletable caption{
background: #e7c361 ;
border: 1px solid #e7c361;
text-align: center;
}
.wikitable > caption > span{
float: right !important;
}
.collapsible-header:before{
float: right;
}
.ci-recipe-wrapper{
display: flex;
width: fit-content;
position: relative;
gap: 7px
}
.ci-recipe-timed{
padding-bottom: 25px;
}
.ci-recipe-timed{
border: 1px solid #e7c361;
border-radius: 5px;
position: relative;
text-align: center;
font-weight: 500;
width: 100%;
padding: 8px;
max-width: 100px;
overflow-wrap: break-word;
hyphens: auto;
}
.ci-recipe-yield{
border: 1px solid #e7c361;
border-radius: 3px;
padding: 8px;
position: relative;
width: 100%;
text-align: center;
}
.ci-recipe-yield-amount {
background: #e7c361;
width: fit-content;
border-radius: 3px;
padding: 0 5px;
position: absolute;
bottom: 0;
right: 0;
}
span.custom-icon {
display: inline;
}
.ci-recipe-ingredient{
border: 1px solid #e7c361;
border-radius: 3px;
padding: 5px;
min-height: 100%;
}
.ci-recipe-medium::after{
border: 1px solid #e7c361;
background-color: #e7c361;
border-radius: 3px;
width: 5px;
height: 5px;
content: "";
position: absolute;
top: 50%;
left: -7px;
}
.gifted-item{
background-color: rgba(231, 195, 97, 0.2);
}
.gifted-item > tbody > tr > th{
background-color: rgba(231, 195, 97, 0.8);
max-width: 100px;
}
.portable-infobox{
margin: 0 0 15px 15px;
max-width: 250px;
width: 100%;
border: 1px solid #e7c361;
border-radius: 10px;
}
.portable-infobox .pi-header{
padding: 0 5px;
background: rgba(231, 195, 97, 0.2);
}
.portable-infobox .pi-title{
background: #e7c361;
padding: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.portable-infobox .pi-data-label, .portable-infobox .pi-data-value {
padding: 5px;
}
// .bg-trans {
// background-color: transparent !important;
// }
// .portable-infobox {
// clear: both !important;
// float: none !important;
// border: 5px solid #e7c361;
// background-color: #e7c361;
// color: white;
// }
// .portable-infobox .pi-header{
// font-size: 0.75rem ;
// }
// .portable-infobox .pi-data-label{
// background-color: #e7c361 ;
// min-width: 50%;
// }
// .pi-smart-group .pi-smart-data-label{
// font-size: 0.5rem;
// }
// .portable-infobox .pi-title {
// text-align: center;
// font-weight: bold;
// }
.pi-image-thumbnail {
max-width: 100%!important;
}
.content-table {
background: transparent;
padding: 10px 2%;
width: 100%;
}
.content-table-basic {
background: transparent;
width: 100%;
}
.content-table-second {
background: transparent;
width: 100%;
}
.child-content-table {
display: flex;
justify-content: flex-start;
gap: 10px;
margin-left: 4px;
}
#p-personal {
position: absolute;
top: @top-personal-tools;
right: 0.75em;
z-index: @z-index-personal;
ul {
padding-left: 10em;
}
}
.mw-body,
#mw-data-after-content {
margin-left: 10em;
}
.mw-body {
// Merge the border below with tabs' one (in their background image).
margin-top: -@border-width-base;
// Border on top, left, and bottom side.
// border: @border-width-base @border-style-base @border-color-content;
border: 10px solid azure;
border-radius: 5px;
// border-right-width: 0;
.firstHeading {
/* Change the default from mediawiki.skinning CSS to let indicators float into heading area */
overflow: visible;
}
}
.mw-indicators {
z-index: @z-index-indicators;
}
.vector-body {
font-size: var(--font-size) !important;
position: relative;
z-index: @z-index-base;
}
.vector-body,
.vector-body p,
.vector-body div,
.vector-body span {
font-size: var(--font-size) !important;
font-family: Helvetica, Arial, sans-serif !important;
}
/* Override table tiny fonts on mobile */
@media screen and (max-width: 1024px) {
.wikitable > tr > th, .wikitable > tr > td,
.wikitable > * > tr > th, .wikitable > * > tr > td {
font-size: 14px !important;
}
.content {
font-size: 14px !important;
}
/* Also fix vector body on mobile */
.vector-body {
font-size: 16px !important;
}
}
/* Ensure text in mw-body isn't affected by Vector's scaling */
.mw-body-content,
.mw-parser-output {
font-size: var(--font-size) !important;
}
/* Head */
#mw-page-base {
// .vertical-gradient( @background-color-base, @background-color-secondary, 50%, 100% );
background: transparent;
background-position: bottom left;
height: 5em;
}
#mw-head-base {
margin-top: -5em;
margin-left: 10em;
height: 5em;
background: transparent;
}
/* Hide, but keep accessible for screen-readers */
#mw-navigation h2 {
position: absolute;
top: -9999px;
}
#mw-head {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 3.125em;
}
/* Navigation Containers */
#left-navigation {
float: left;
margin-left: 10em;
margin-top: 2.5em;
/* When right nav would overlap left nav, it's placed below it
(normal CSS floats behavior). This rule ensures that no empty space
is shown between them due to right nav's margin-top. Page layout
is still broken, but at least the nav overlaps only the page title
instead of half the content. */
margin-bottom: -2.5em;
}
#right-navigation {
float: right;
margin-top: 2.5em;
}
/* Search */
.vector-search-box {
float: left;
margin-right: 0.5em;
margin-left: 0.5em;
// FIXME: This selector requires knowledge of the internals of the search component
// and should not be used here.
form {
margin: 0.5em 0 0;
}
}
// Defined as `div`.
// Provide extra element for gadgets due to `form` already carrying an `id`.
// FIXME: This selector requires knowledge of the internals of the search component
.vector-search-box-inner {
min-width: 5em;
// Support: IE 8, Firefox 18-, Chrome 19-, Safari 5.1-, Opera 19-, Android 4.4.4-.
width: 13.2em;
// Support: Modern browsers, responsive width.
width: 20vw;
max-width: 20em;
}
/* Sidebar */
#mw-panel {
position: absolute;
top: 0;
width: 10em;
left: 0;
}
// hide the heading of the first menu
#p-logo + .mw-portlet .vector-menu-heading {
display: flex;
justify-content: flex-start;
align-items: center;
background: white;
color: black;
font-weight: bold;
padding: 0 5px;
height: 20px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
// ul {
// list-style-type: none !important
// }
.vector-body blockquote{
border: 0;
padding: 0;
}
.vector-menu-portal .vector-menu-content li {
padding: 5px;
}
.vector-menu-portal .vector-menu-content ul {
background: rgba(255, 255, 255, 0.8);
}
.vector-menu-portal .vector-menu-heading {
display: flex;
justify-content: flex-start;
align-items: center;
background: white;
color: black;
font-weight: bold;
padding: 0 5px;
height: 20px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.mw-footer {
margin-left: 10em;
margin-top: 1%;
margin-bottom: 1%;
padding: 0.75em;
background: white;
min-height: 120px;
border-radius: 5px;
}
.social {
display: flex;
justify-content: center;
flex-direction: row;
width: auto;
background: #474747;
padding: 1rem 3rem;
& .iconname {
max-width: 20%;
& .external-text {
font-size: 12px;
}
& .floatleft {
display: flex;
justify-content: space-between;
align-items: center;
& a {
font-size: 12px;
}
img {
max-width: 20px;
max-height: 20px;
}
}
}
}
div.floatleft,
table.floatleft {
margin: 0;
}
big{
color: white;
}
.jumbotron {
//background-image: url("https://mbwiki.stairwaygames.work/w/images/1/13/manabreak-hero.png");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
body.page-Main_Page.action-view .main-page-top{
background-color: #474747;
padding: 1rem 0;
background-image: url("https://mbwiki.stairwaygames.work/w/images/1/13/manabreak-hero.png") !important;
height: 300px !important;
}
/* Vector screen styles for high definition displays. These rules cross the above components and are
grouped together here only for the sake of the media query common to each. */
.mw-body,
#mw-head-base,
#left-navigation,
#mw-data-after-content,
.mw-footer {
margin-left: 11em;
}
.mw-body {
padding: 1.25em 1.5em 1.5em 1.5em;
}
.mw-footer {
padding: 1.25em;
}
#mw-panel {
padding-left: 0.5em;
}
.vector-search-box {
margin-right: 1em;
}
#p-personal {
position: absolute;
top: 0.5em;
right: 0.5em;
}
// Directionality styles previously provided by the deprecated `legacy` feature (T287410)
// for HTML elements which do not carry dir HTML attributes.
// These have been copied across to legacy Vector to minimize disruption caused by T287701.
// If you are reading this comment in 2022, please consider checking usage in wikitext and
// removing them both.
.mw-content-ltr {
/* @noflip */
direction: ltr;
}
.mw-content-rtl {
/* @noflip */
direction: rtl;
}
.cols {
text-align: left;
word-break: break-all;
// padding: 1em 0;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 5px;
font-weight: 600;
// text-transform: uppercase;
// letter-spacing: 1px;
}
.forest {
margin-top: -25px;
}
.forest2 {
margin-top: 0;
}
/* grid styling - Connected to Module Variables */
.grid {
display: grid !important;
/* Desktop: Use module variable, fallback to 12 columns */
grid-template-columns: var(--main-page-layout-columns--desktop, repeat(12, 1fr));
margin: 10px 0;
gap: 10px; /* Better than grid-gap (deprecated) */
}
/* Tablet */
@media (max-width: 1024px) {
.grid {
grid-template-columns: var(--main-page-layout-columns--tablet, var(--main-page-layout-columns--desktop, repeat(12, 1fr)));
}
}
/* Mobile */
@media (max-width: 768px) {
.grid {
grid-template-columns: var(--main-page-layout-columns--mobile, var(--main-page-layout-columns--tablet, var(--main-page-layout-columns--desktop, repeat(1, 1fr))));
}
}
/* Optional: Keep column classes as fallback when NOT using module */
.grid:not([data-has-module-layout]) .grid__col4 {
grid-column: span 4;
}
/* Other styles can stay the same */
.specification-table {
font-size: 10px;
padding: 0 5%;
}
.content {
padding: 10px;
font-size: 12px;
}
.wrapper {
max-width: 100%;
margin: 0 auto;
padding: 0 1rem;
}
@supports (display: grid) {
.mw-content-ltr ul,
.mw-content-rtl .mw-content-ltr ul {
// margin: 0 !important;
}
.social .iconname .floatleft {
display: flex;
justify-content: center;
align-items: center;
}
.social {
gap: 30px;
}
.croptable > tbody > tr >td > a > img{
max-width: 40px;
max-height: 40px;
}
.exceptable > tbody > tr >td > a > img{
max-width: 70px;
max-height: 70px;
}
.floatleft > a > img {
// width: 24px;
// height: 24px;
}
.iconname {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 5px;
}
.auto-grid > * {
max-width: unset;
list-style: none;
}
.auto-grid > * + * {
margin-top: unset;
}
.auto-grid > li > ul {
margin-left: 10px !important;
}
.auto-grid > li > ul > li {
list-style: none;
margin: 0;
padding-left: 15px;
list-style: none;
background-image: url("https://www.svgrepo.com/show/165220/diamond.svg");
background-repeat: no-repeat;
background-position: left center;
background-size: 10px;
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
}
.minus-ten {
margin-top:0;
}
.minus-fifty {
margin-top:-55%;
}
#footer-info li{
color:white !important
}
@media (max-width: 1024px) {
.minus-fifty {
margin-top:-5%;
}
.minus-ten {
margin-top:-10%;
}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
font-size: 0.7em;
}
.scheduletable > tbody > tr > td:first-child{
width: 40px;
}
.wikitable, .quotetable, .scheduletable {
table-layout: fixed;
width: 100%;
}
.croptable > tbody > tr >td > a > img{
max-width: 24px;
max-height: 24px;
}
.infobox{
float: none;
margin: 0
}
.forest2 {
margin-top: -5px;
}
.content {
font-size: 10px;
}
.social {
flex-direction: column;
padding: 1rem;
& .iconname {
max-width: 100%;
}
}
.mw-parser-output a.external {
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
#mw-panel {
width: -webkit-fill-available;
display: flex;
justify-content: center;
align-items: center;
max-height: 100px;
}
.vector-search-box {
min-width: 90vw;
margin-top: 0px;
}
.vector-search-box-input {
width: 80vw;
}
#mw-content-text
> div.mw-parser-output
> div
> div
> div.content
> table
> tbody
> tr
> td
> a {
font-size: 8px;
}
#mw-content-text
> div.mw-parser-output
> div
> div
> div.content
> table
> tbody
> tr
> th
> div
> div
> a
> img {
width: 16px;
height: 16px;
}
#mw-content-text
> div.mw-parser-output
> div
> div
> div.content
> table
> tbody
> tr
> td
> div
> div
> a
> img {
width: 16px;
height: 16px;
}
#mw-content-text
> div.mw-parser-output
> table.jumbotron
> tbody
> tr
> th
> a
> img {
max-width: 100%;
object-fit: contain;
}
footer,
.vector-menu-content,
#p-navigation,
#p-tb {
display: none;
}
#p-logo {
display: block;
justify-content: center;
}
#p-logo a {
width: 5em;
}
table {
width: 100%;
}
.mw-body,
#mw-data-after-content {
margin: 10% 10px;
}
.grid__col1 {
grid-column: span 1;
}
.grid__col2 {
grid-column: span 2;
}
.grid__col3 {
grid-column: span 6;
}
.grid__colsm1 {
grid-column: span 1;
}
.grid__colsm2 {
grid-column: span 2;
}
.grid__colsm3 {
grid-column: span 12;
}
.grid__colsm4 {
grid-column: span 12;
}
.grid__colsm5 {
grid-column: span 5;
}
.grid__colsm6 {
grid-column: span 6;
}
.grid__colsm7 {
grid-column: span 7;
}
.grid__colsm8 {
grid-column: span 12;
}
.grid__colsm9 {
grid-column: span 9;
}
.grid__colsm10 {
grid-column: span 10;
}
.grid__colsm11 {
grid-column: span 11;
}
.grid__colsm12 {
grid-column: span 12;
}
.content-table,
.content-table th,
.content-table td {
border: none !important;
}
.content-table-basic > tbody {
display: grid;
}
.content-table-basic > tbody > tr {
display: grid;
grid-template-columns: repeat(2, minmax(50px, 1fr));
width: fit-content;
}
.content-table-basic > tbody > tr > th {
display: flex;
align-items: center;
justify-content: center;
width: 45vw;
}
.content-table-basic > tbody > tr > th > .iconname > .floatleft > a > img{
width:14px;
height: 14px;
}
.forest {
margin-top: 0;
}
.content-table-second {
background: transparent;
width: 100%;
}
.auto-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.mw-body,
#mw-data-after-content {
padding: 0;
}
}
@media screen and (max-width: 1920px) {
.mw-parser-output a.external {
font-size: 14px;
}
}
@media screen and (min-width: 2000px) {
.mw-parser-output a.external {
font-size: 20px;
font-weight: 400;
}
.floatleft > a > img {
width: 48px;
height: 48px;
}
}
#content .header-column {
background-color: #1a6a7a !important; /* Your requested color */
justify-content: center !important; /* Centers the content horizontally (for flexbox) */
text-align: center !important; /* Centers any text content (for fallback) */
color: #ffffff !important; /* Recommended: Set text to white for contrast */
}
.header-column > span > a > img{
width: 14px;
height: 14px;
}
.header-column > a > img{
width: 14px;
height: 14px;
}
.heading-char{
color:#deb76c !important
}
#footer {
background: #fff;
color: #000;
margin-top: 1em;
border-top: 1pt solid #aaa;
padding-top: 5px;
direction: ltr;
}
/* ---- CONTENTS STYLING GOES BELOW THIS LINE --- */
/* Character Infobox */
.character-infobox {
float: right;
clear: right;
max-width: 300px; /* Use the max-width you prefer, e.g., 250px or 300px */
width: 100%;
margin: 0 0 16px 16px;
border: 1px solid var(--theme-border-color);
border-radius: var(--border-radius-md); /* 8px */
background-color: var(--gray-050); /* White/Light background */
font-size: .9em;
}
.character-header {
background: var(--teal-600); /* Or the brown color you used previously */
color: var(--theme-accent-label-color); /* White text */
padding: 8px 10px;
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
text-align: center;
font-weight: var(--font-weight-bold);
}
.character-title {
font-size: 1.5em;
}
.character-image {
padding: 10px;
text-align: center;
}
.character-section {
padding: 5px 10px;
}
.section-title {
font-size: 1.1em;
font-weight: var(--font-weight-semibold);
margin-top: 10px;
margin-bottom: 5px;
border-bottom: 1px solid var(--theme-border-color--subtle);
}
.data-row {
display: flex;
justify-content: space-between;
padding: 3px 0;
border-bottom: 1px dotted var(--gray-300);
}
.data-label {
font-weight: var(--font-weight-medium);
color: var(--gray-700);
}