MediaWiki:Common.css: Difference between revisions

From MB Wiki
Jump to navigation Jump to search
mNo edit summary
Tag: Reverted
mNo edit summary
 
(205 intermediate revisions by the same user not shown)
Line 1: Line 1:
.class { } /* needed for some reason for the @imports to work */
/*************************************🎮**************************************
                                                                              *
      ╔═══════════════════════════════════════════════════════════════════╗ 
                                                        COMMON.CSS (vA0.1)                                                       
                                                                ✦ M*n* B**** ✦                                                             
      ╚═══════════════════════════════════════════════════════════════════╝ 
                                                                              *
*******************************************************************************/


@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
/*
*This page contains the entire stylesheet for the MB Wiki.
*We urge you "not to edit" this page "directly".
*Some of the code inherited from coralisland.wiki.
*Any functional issue please report to our wiki-team at the official discord channel


/* Imports caching */
*Imports will be starting below this very line;
/*@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Colors.css");*/
*/
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Module:Documentation.css");
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap');
@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 body:not(.skin-vector-dark) { /* Light theme */
    /* Base colors */
    --theme-page-text-color: #1a2a2a;
    --theme-page-text-color--inverse: #ffffff;
    --theme-page-background-color: #f8fdfc;
    --theme-page-background-color--rgb: 248, 253, 252;
    --theme-page-background-color--secondary: #e0f7f4;
    --theme-page-background-color--secondary--rgb: 224, 247, 244;
   
/*Links*/
    --theme-link-color: #00796B; /* Richer, darker teal for readability */
    --theme-link-color--rgb: 0, 121, 107;
    --theme-link-color--hover: #004D40; /* Very dark teal on hover */
    --theme-link-label-color: #004D40;
    --theme-link-visited: #5D4037; /* Earthy brown for visited links (Terraria vibe) */
    --theme-link-new: #D32F2F; /* Sharp red for missing pages */
    --mw-head-link-color: #00796B;r: #006d72;
   
    /* Accents */
    --theme-accent-color: #4fd1c7;
    --theme-accent-color--rgb: 79, 209, 199;
    --theme-accent-color--hover: #38b2ac;
    --theme-accent-label-color: #ffffff;
   
    /* Borders */
    --theme-border-color: #b2f5ea;
    --theme-border-color--rgb: 178, 245, 234;
   
    /* Status colors */
    --theme-alert-color: #e53e3e;
    --theme-alert-color--rgb: 229, 62, 62;
    --theme-alert-color--hover: #c53030;
    --theme-alert-color--secondary: #fed7d7;
    --theme-alert-label: #ffffff;
   
    --theme-warning-color: #dd6b20;
    --theme-warning-color--rgb: 221, 107, 32;
    --theme-warning-color--secondary: #feebc8;
    --theme-warning-label: #1a202c;
   
    --theme-success-color: #38a169;
    --theme-success-color--rgb: 56, 161, 105;
    --theme-success-color--secondary: #c6f6d5;
    --theme-success-label: #ffffff;
   
    --theme-message-color: #805ad5;
    --theme-message-label: #ffffff;
   
    /* Alert highlight */
    --theme-alert-highlight: var(--theme-alert-color);
    --theme-alert-highlight--rgb: var(--theme-alert-color--rgb);
    --theme-alert-highlight--hover: var(--theme-alert-color--hover);
   
    /* Custom variables */
    --theme-alt-text: #ffffff;
    --theme-accent-bg: #e6fffa;
    --theme-infobox-bg: #ffffff;
   
    --theme-heading-color: #1a2a2a; /* Added for consistency */


    /* Your main light color */
    --color-player: #74f4e0;
    --color-accent: #4fd1c7;
    --color-npc: #b794f4;
   
    /* Card backgrounds */
    --card-bg-main: #ffffff;
    --card-bg-sub: #e6fffa;
   
    /* Letter background */
    --letter-bg: #f0fff4;
   
    /* User highlights */
    --custom-admin-highlight: #dd6b20;
    --custom-contentmoderator-highlight: #805ad5;
    --custom-bot-color: #718096;
    --custom-bot-font-style: italic;
   
    /* Named accents */
    --accent: #4fd1c7;
    --player: #74f4e0;
    --npc: #b794f4;
}


:root .skin-vector-dark { /* Dark theme */
/* ============================================
    /* Base colors */
  ALL @IMPORTS MUST BE AT THE VERY TOP
    --theme-page-text-color: #e2e8f0;
  ============================================ */
    --theme-page-text-color--inverse: #1a202c;
 
    --theme-page-background-color: rgb(26, 32, 44, 0.98);
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Colors.css&action=raw&ctype=text/css");
    --theme-page-background-color--rgb: 26, 32, 44;
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Module:Documentation.css&action=raw&ctype=text/css");
    --theme-page-background-color--secondary: #2d3748;  
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Documentation.css&action=raw&ctype=text/css");
    --theme-page-background-color--secondary--rgb: 45, 55, 72;
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Infobox.css&action=raw&ctype=text/css");
   
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tables.css&action=raw&ctype=text/css");
    /* Links */
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:MessageBox.css&action=raw&ctype=text/css");
/* Links - Dark Mode (Bioluminescent Cyan) */
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:CustomTabs.css&action=raw&ctype=text/css");  
    --theme-link-color: #4DB6AC; /* Softer, glowing teal (easier on eyes than neon) */
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Navbox.css&action=raw&ctype=text/css");
    --theme-link-color--rgb: 77, 182, 172;
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Icons.css&action=raw&ctype=text/css");
    --theme-link-color--hover: #80CBC4; /* Brighter glow on hover */
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Dialogue.css&action=raw&ctype=text/css");
    --theme-link-label-color: #E0F2F1;
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Cards.css&action=raw&ctype=text/css");
    --theme-link-visited: #A1887F; /* Muted earth tone for visited */
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tabbers.css&action=raw&ctype=text/css");
    --theme-link-new: #FF8A80; /* Soft coral red for missing pages */
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Mobile.css&action=raw&ctype=text/css");
    --mw-head-link-color: #4DB6AC; #4fd1c7;  
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Recipe.css&action=raw&ctype=text/css");
   
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Modal.css&action=raw&ctype=text/css");
    /* Accents */
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:AceEditor.css&action=raw&ctype=text/css");
    --theme-accent-color: #4fd1c7;  
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:CodeMirror.css&action=raw&ctype=text/css");
    --theme-accent-color--rgb: 79, 209, 199;
 
    --theme-accent-color--hover: #81e6d9;  
/* ============================================
    --theme-accent-label-color: #1a202c;
  TOKEN ROOT ARCHITECTURE
   
  ============================================ */
    /* Borders */
    --theme-border-color: #4a5568;  
    --theme-border-color--rgb: 74, 85, 104;
   
    /* Status colors */
    --theme-alert-color: #fc8181;  
    --theme-alert-color--rgb: 252, 129, 129;
    --theme-alert-color--hover: #feb2b2;
    --theme-alert-color--secondary: #742a2a;
    --theme-alert-label: #ffffff;
   
    --theme-warning-color: #f6ad55;
    --theme-warning-color--rgb: 246, 173, 85;
    --theme-warning-color--secondary: #744210;
    --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: #9f7aea;
    --theme-message-label: #1a202c;
   
    /* Custom variables */
    --theme-alt-text: #2d3748;
    --theme-accent-bg: #2d3748;
    --theme-infobox-bg: #2d3748;
   
    --theme-heading-color: #e2e8f0; /* Added for consistency */


     /* Your main dark color */
/* ✦ THEME MANA (LIGHT) - DEFAULT ✦ */
     --color-player: #339193;  
:root {
     --color-accent: #4fd1c7;  
     /* 1. Core Color Palette */
     --color-npc: #9f7aea;  
     --color-primary: #88eee0;
     --color-secondary: #d9ffe9;
     --color-accent: #87b4b7;
      
      
     /* Card backgrounds */
     /* 2. Semantic Backgrounds */
     --card-bg-main: #2d3748;
     --theme-body-bg: var(--color-secondary);
     --card-bg-sub: #4a5568;
    --theme-card-bg: rgba(255, 255, 255, 0.85);  
     --theme-card-bg-hover: #ffffff;
      
      
     /* Letter background */
     /* 3. Semantic Text Colors */
     --letter-bg: #1a202c;
     --theme-text-primary: #1a2b3c;
    --theme-text-muted: #4a5b6c;
    --theme-heading-color: #0d1b2a;
      
      
     /* User highlights */
     /* 4. Borders & Interactive Elements */
     --custom-admin-highlight: #f6ad55;
     --theme-border-color: var(--color-accent);
     --custom-contentmoderator-highlight: #9f7aea;
     --theme-border-color-rgb: 135, 180, 183;
     --custom-bot-color: #a0aec0;
     --theme-link-color: #006b75;
     --custom-bot-font-style: italic;
     --theme-link-hover: #004a52;
      
      
     /* Alert highlight */
     /* 5. Structures */
     --theme-alert-highlight: #c53030;
     --radius-sm: 4px;
     --theme-alert-highlight--rgb: 197, 48, 48;
     --radius-md: 8px;
     --theme-alert-highlight--hover: #e53e3e;
    --radius-lg: 12px;
     --shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.05);
      
      
     /* Named accents */
     /* Main Page Layout Layout */
     --accent: #4fd1c7;
     --main-page-layout--desktop: 'banner banner banner' 'about about updates' 'starts starts starts' 'items items items' 'characters characters characters' 'enemies enemies enemies' 'area area area';
     --player: #339193;
     --main-page-layout--tablet: 'banner banner' 'about updates' 'starts starts' 'items items' 'characters characters' 'enemies enemies' 'area area';
     --npc: #9f7aea;
     --main-page-layout--mobile: 'banner' 'about' 'updates' 'starts' 'items' 'characters' 'enemies' 'area';
}
}


:root { /* Universal styles */
/* ✦ THEME BREAK (DARK) - TOGGLE ✦ */
/*Font Family */
html.theme-break {
     --font-family: Helvetica, Arial, sans-serif;
    /* 1. Core Color Palette */
     --font-family-headings: Verdana, Helvetica, Arial, sans-serif;
     --color-primary: #12435e;
     --font-family-mono: monospace, monospace;
     --color-secondary: #0e344d;
    --font-size: 14px;
     --color-accent: #7ff6e3;
    --line-height: 1.5;
      
    --font-size-h1: 32px;
     /* 2. Semantic Backgrounds */
     --font-size-h2: 26px;
     --theme-body-bg: var(--color-secondary);
     /* Gray scale */
     --theme-card-bg: var(--color-primary);
     --gray-900: #1a202c;
     --theme-card-bg-hover: #164f6f;
    --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/brown scale */
     /* 3. Semantic Text Colors */
     --teal-800: #234e52;
     --theme-text-primary: #eaeef2;
    --teal-500: #319795;
     --theme-text-muted: #87b4b7;
    --teal-400: #38b2ac;
     --theme-heading-color: #ffffff;
     --teal-300: #4fd1c7;
    --teal-200: #81e6d9;
     --teal-100: #b2f5ea;
    --teal-050: #e6fffa;
      
      
     --light-blue: #bee3f8;
     /* 4. Borders & Interactive Elements */
     --gold: #d69e2e;
    --theme-border-color: var(--color-accent);
    --theme-border-color-rgb: 127, 246, 227;
    --theme-link-color: var(--color-accent);
     --theme-link-hover: #aafff0;
      
      
     /* Border */
     /* 5. Structures */
     --border-color: var(--theme-border-color);
     --shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.3);
}
}
/* ============================================
  BASE LAYOUT & STRUCTURAL RESET
  ============================================ */


/* Improved content styling */
/* 1. Universal Box Sizing */
#content.mw-body, .parsoid-body {
*, *::before, *::after {
     background-color: var(--theme-page-background-color) !important;
     box-sizing: border-box;
    border: 1px solid var(--theme-border-color);
    color: var(--theme-page-text-color);
}
}


/* Typography improvements */
/* 2. MediaWiki Body & Container Reset */
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 {
body {
     color: var(--theme-page-text-color);
    background-color: var(--theme-body-bg) !important;
}
     color: var(--theme-text-primary);
.vector-menu-heading-label {
    font-family: 'Fredoka', sans-serif;
     font-size: 0.8125em;
     transition: background-color 0.3s ease, color 0.3s ease;
}
}


/* Footer and panels */
/* Stripping native MediaWiki container styles  */
.mw-footer, .editOptions, .ace-tm, #mw-panel .vector-menu-heading {
.mw-body, #content {
     background-color: var(--theme-page-background-color--secondary) !important;
     background: transparent !important;
     color: var(--theme-page-text-color);
    border: none !important;
     color: var(--theme-text-primary);
}
}


/* Sidebar and lists */
/* 3. Typography Normalization */
.ace-tm .ace_gutter, .selected.mw-list-item, #mw-panel .vector-menu-content-list {
h1, h2, h3, h4, h5, h6 {
    background-color: var(--theme-page-background-color--secondary) !important;
     color: var(--theme-heading-color);
    color: var(--theme-page-text-color);
     margin-top: 0;
}
 
/* 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 */
.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;
     font-weight: 600;
}
}


.bg-player {  
/* Remove MediaWiki's harsh default underline on H1/H2 */
     background-color: var(--color-player);
.mw-body h1, .mw-body h2 {
    color: var(--theme-page-text-color--inverse);
     border-bottom: 2px solid var(--theme-border-color);  
     padding: 2px 6px;
     padding-bottom: 0.25em;
    border-radius: 3px;
}
}


.text-accent, .text-accent * {  
/* 4. Hyperlink Standardization */
     color: var(--color-accent);
a {
     font-weight: 600;
     color: var(--theme-link-color);
     text-decoration: none;
    transition: color 0.2s ease;
}
}


.bg-accent {
a:hover, a:focus {
    background-color: var(--color-accent);
     color: var(--theme-link-hover);
    color: var(--theme-accent-label-color);
     text-decoration: underline;
    padding: 2px 6px;
    border-radius: 3px;
}
 
/* User highlights */
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:visited {
a[href="https://coralisland.wiki/wiki/User:NoriBot"],
     color: var(--theme-link-color);  
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 */
/* 5. Responsive Media & Selection */
.mw-body-content {
img, video {
     line-height: 1.6;
     max-width: 100%;
}
     height: auto;
 
/* Improve contrast for links */
a {
     transition: color 0.2s ease;
}
}


a:hover {
::selection {
     text-decoration: underline;
     background: var(--color-primary);
    color: #000;  
}
}
 
::-moz-selection {
/* Improve table readability */
     background: var(--color-primary);
.mw-parser-output table {
     color: #000;
     background-color: var(--theme-page-background-color);
     border: 1px solid var(--theme-border-color);
}
}


.mw-parser-output table th {
/* ============================================
     background-color: var(--theme-page-background-color--secondary);
  BASE LAYOUT (MAPPED TO TOKENS)
     color: var(--theme-page-text-color);
  ============================================ */
html, body {
     background-color: var(--theme-body-bg) !important;
    background-image: none !important;  
     color: var(--theme-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;  
}
}


.mw-parser-output table td {
.mw-body {
    margin-top: -1px;
     border: 1px solid var(--theme-border-color);
     border: 1px solid var(--theme-border-color);
}
    border-radius: var(--radius-sm);
body.skin-vector-dark {
     background-color: transparent;
    /*background: url("https://coralwiki.stairwaygames.com/w/images/9/9a/Site-background-dark.png") no-repeat fixed center center / cover !important;*/
     background-color: #000000;
}
}


/* Hide default elements */
.mobileHide, .mobile-only, .no-desktop {
.mobileHide, .mobile-only, .no-desktop {
     display: none!important;
     display: none !important;
}
}


/* || FIXES */
/* Fix for hidden H1 on main page */
.wikiEditor-ui-text > .ui-resizable {
body.page-Main_Page.action-view h1.firstHeading,
    width: 100% !important;
body.page-Main_Page.action-submit h1.firstHeading {
    max-width: 100%;
     display: none;
}
ul {
     list-style: disc;
}
}


 
/* ============================================
h2 .mw-headline,
  MAIN PAGE GRID LAYOUT
h3 .mw-headline,
  ============================================ */
h4 .mw-headline {
#mp-container {
     font-weight: 500;
     display: grid;
    gap: 2rem;
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}
}


.vector-body h3 , .vector-body h4 , .vector-body h5 , .vector-body h6 {
/* Desktop Layout */
    margin-bottom: 4px;
@media (min-width: 1024px) {
    #mp-container {
        grid-template-areas: var(--main-page-layout--desktop);
        grid-template-columns: repeat(3, 1fr);
    }
}
}


a, a:visited, a:active,
/* Tablet Layout */
.mw-parser-output a:is(.external, .external:visited, .external:active) {
@media (min-width: 768px) and (max-width: 1023px) {
     color: var(--theme-link-color);
     #mp-container {
}
        grid-template-areas: var(--main-page-layout--tablet);
#mw-head .vector-menu-content-list .mw-list-item :is(a, a:visited, a:active) {
        grid-template-columns: repeat(2, 1fr);
    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 {
/* Mobile Layout */
    padding-right: 0;
@media (max-width: 767px) {
    font-size: inherit;
    #mp-container {
        grid-template-areas: var(--main-page-layout--mobile);
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
}


.catlinks {
/* MP Box styling */
     border-color: var(--theme-border-color);
.mp-box {
     border-radius: 6px;
     animation: fadeInUp 0.5s ease forwards;
    background-color: var(--gray-050);
     opacity: 0;
}
}


.CodeMirror-lines span {
/* Staggered animations */
    font: 14px Consolas,Eupheima UCAS,Monaco,Menlo,monospace /* Source Editor */
.mp-box:nth-child(1) { animation-delay: 0.05s; }
}
.mp-box:nth-child(2) { animation-delay: 0.1s; }
.mp-box:nth-child(3) { animation-delay: 0.15s; }
.mp-box:nth-child(4) { animation-delay: 0.2s; }
.mp-box:nth-child(5) { animation-delay: 0.25s; }
.mp-box:nth-child(6) { animation-delay: 0.3s; }
.mp-box:nth-child(7) { animation-delay: 0.35s; }
.mp-box:nth-child(8) { animation-delay: 0.4s; }


.wikiEditor-ui .ace_editor * {
@keyframes fadeInUp {
     font-size: 13px;
     from {
     font-family: monospace, monospace; /* Module */
        opacity: 0;
        transform: translateY(20px);
    }
     to {
        opacity: 1;
        transform: translateY(0);
    }
}
}


.mw-input .mw-abusefilter-editor * {
/* ============================================
    font-size: 13px;
  MAIN PAGE CARDS & GRIDS
    font-family: monospace, monospace;
  ============================================ */
}


/* Hide default TOOLBOX nav section on sidebar */
/* Main Grid Wrapper  */
#mw-navigation > #mw-panel > #p-tb {
.main-page-card-grid {
     display: none;
     display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 1rem;
}
}


/* Column template fix */
/* 1. Game Intro Cards */
.columntemplate ul,
.game-intro-card {
.columntemplate ol {
    background-color: var(--theme-card-bg);
     margin-top: 0;
    border-radius: var(--radius-lg); /* From Step 1 */
    padding: 1.25rem;
    border: 1px solid var(--theme-border-color);
    box-shadow: var(--shadow-soft);
    display: flex;
     flex-direction: column;
    height: 100%;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
}
}


/* RC */
.game-intro-card:hover {
.mw-changeslist table {
     background-color: var(--theme-card-bg-hover);
     width: unset;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);  
}
}


.gift-table .icon-list-container {
/* 2. Header Elements */
     width: auto;
.game-header {
    margin-bottom: 1rem;
     position: relative;
}
}


/* Quote template */
.mana-text {
.quotetable {
    font-family: 'Fredoka', sans-serif;
     width: auto;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
   
    /* Gradient */
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
   
    /* Flexbox aligning the icon perfectly */
    display: flex;
    align-items: center;
    gap: 8px;
     letter-spacing: 0.5px;
}
}


.Bug6200 {
.mana-line {
     margin-bottom: 0.75em;
     height: 3px;
}
     background: linear-gradient(90deg, var(--color-accent), transparent);
 
     margin-top: 0.5rem;
/* Code block */
     width: 100%;
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;
     border-radius: 2px;
    padding: 1px 4px;
    font-family: monospace, monospace;
    font-size: 13px;
}
}


code.code-block-table {
/* 3. Card Content & Headings */
     display: table;
.game-content {
     line-height: 21px;
     color: var(--theme-text-primary);
     padding:8px;
     line-height: 1.6;
     flex-grow: 1;  
}
}


.code-block-table * {
.heading-char {
     font: 14px Consolas,Eupheima UCAS,Monaco,Menlo,monospace;
     font-size: 1.1rem;
}
    font-weight: 600;
 
    margin: 0.5rem 0;
.code-block {
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--theme-border-color);
     display: inline-block;
     display: inline-block;
     line-height: 21px;
     transition: border-color 0.3s ease;
}
}


/* || MAIN PAGE */
.heading-char a {
/*banner links*/
     color: var(--theme-heading-color);
.banner-links a {
     text-decoration: none;
     color: #FFFFFF !important;
     transition: color 0.2s ease;
    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;
}
}


 
.heading-char a:hover {
/* ||TABLE OF CONTENTS */
     color: var(--color-accent);
.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 {
/* 4. Auto Grid Lists (The Links) */
     font-family: var(--font-family-headings);
.auto-grid {
     font-weight: bold;
     display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));  
     gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0 0;
}
}


/* TOC hide headings */
.auto-grid li {
.toclimit-2 .toclevel-1 ul,
     padding: 0;
.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 */
/* Elevated List Link Styling */
.changelist-header {
.auto-grid li a {
     display: flex;
     display: block;  
     justify-content: space-between;
     padding: 0.35rem 0.5rem;
     align-items: center;
    color: var(--theme-link-color);
     font-size: 88%;
     text-decoration: none;
     margin: 0.3em 0;
     border-radius: var(--radius-sm);
     background-color: rgba(127, 127, 127, 0.05);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
}


.changelist-content {
.auto-grid li a:hover {
     overflow: auto;
     color: var(--theme-link-hover);
     max-height: 384px;
     background-color: var(--theme-body-bg);
    padding: 1em;
     border-color: var(--theme-border-color);
    box-sizing: border-box;
     transform: translateX(3px);  
     -moz-box-sizing: border-box;
    -moz-border-radius-topleft: 0.5em;
    background: transparent;
     border-radius: 6px;
}
}
/* ============================================
  BANNER, WIKI COMPONENTS & SCROLLBAR
  ============================================ */


.changelist-border {
/* 1. BANNER SECTION */
#mp-box-banner .mp-body {
    background: linear-gradient(135deg, var(--color-secondary), var(--theme-body-bg));
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
     border: 1px solid var(--theme-border-color);
     border: 1px solid var(--theme-border-color);
     border-left: 6px solid var(--accent);
     box-shadow: var(--shadow-soft);
    transition: background 0.3s ease, border-color 0.3s ease;
}
}


 
/* Social links */
/* For Template:Chat */
.social {
.chat-wrapper {
     display: flex;
     display: flex;
     flex-direction: column;
    justify-content: center;
    gap: 1rem;
     flex-wrap: wrap;
    margin-top: 2rem;
}
}


.chat-player,
.iconname {
.chat-npc {
     display: flex;
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 0.5em;
     gap: 0.5rem;
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border-color);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}
}


.chat-player-speaker {
.iconname:hover {
     white-space: nowrap;
     background: var(--color-primary);
     min-width: 70px;
     border-color: var(--color-accent);
     color: rgb(105, 172, 82);
     transform: translateY(-2px);
}
}


.chat-npc-speaker {
.iconname a {
     white-space: nowrap;
     color: var(--theme-text-primary) !important;
     min-width: 70px;
     text-decoration: none;
     color: rgb(237, 123, 103);
     font-weight: 500;
}
}


/* Hatnote */
/* 2. WIKI FIXES & IMPROVEMENTS */
.hatnote {
.wikiEditor-ui-text > .ui-resizable {
    display: flex;
     width: 100% !important;
    align-items: center;
     max-width: 100%;
    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 {
ul { list-style: disc; }
    width: 14px;
    height: auto;
    margin-right: 10px;
    opacity: var( --opacity-icon-base );
}


.hatnote.hatnote-high {
h2 .mw-headline, h3 .mw-headline, h4 .mw-headline { font-weight: 500; }
    background-color: var( --background-color-destructive-subtle );
.vector-body h3, .vector-body h4, .vector-body h5, .vector-body h6 { margin-bottom: 4px; }
    border-color: var( --color-destructive );
}


.hatnote.hatnote-medium {
/* Categories */
     background-color: var( --background-color-warning-subtle );
.catlinks {
     border-color: var( --color-warning );
     border-color: var(--theme-border-color);
    border-radius: var(--radius-md);
     background-color: var(--theme-card-bg);
    padding: 10px;
}
}


.hatnote.hatnote-low {
/* Code blocks */
     background-color: var( --color-surface-2 );
code, pre {
     background-color: var(--theme-card-bg);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-family: Consolas, Eupheima UCAS, Monaco, Menlo, monospace;
}
}


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; }


/* Dark mode */
/* Table of Contents */
html.skin-citizen-dark .hatnote-icon img {
.toc {
     filter: invert( 1 );
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-border-color);
    margin-top: 16px;
     box-shadow: var(--shadow-soft);
}
}


.toctogglelabel { color: var(--theme-link-color); }
.tocnumber { color: var(--theme-text-muted); }
.vector-body .toc h2 { font-family: 'Fredoka', sans-serif; }


/* For [[Module:Formatting]] */
/* Hatnote */
code.code-block {
.hatnote {
     display: inline-block;
    border-left: 4px solid var(--color-accent);
     line-height: 21px;
    padding: 8px 12px;
     border-radius: var(--radius-sm);
     background-color: var(--theme-card-bg);
    margin: 8px 0;
}
}
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 {
/* Variables styling */
    font-style: italic;
span.variable { opacity: 0.65; }
    margin: 0;
span.variable::after { opacity: 0.65; content: ">"; }
    padding: 0 30px 8px !important
span.variable::before { opacity: 0.65; content: "<"; }
}


/* Pull quotes */
.pull-quote { font-style: italic; margin: 0; padding: 0 30px 8px !important; }
.pull-quote::before {
.pull-quote::before {
     color: var(--accent);
     color: var(--color-accent);
     content: "“";
     content: "“";
     display: block;
     display: block;
Line 702: Line 507:
     font-style: normal;
     font-style: normal;
     line-height: 72px;
     line-height: 72px;
     margin: 4px 0 -45px -5px;;
     margin: 4px 0 -45px -5px;
}
}
.pull-quote__source::before { content: "— "; margin-bottom: 8px; }
.pull-quote__text { margin-bottom: 4px; }


.pull-quote__source::before {
/* Gallery & Changelist */
    content: "— ";
.gallerytext { text-align: center; font-size: 100%; }
    margin-bottom:8px;
.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; border-radius: var(--radius-md); }
.changelist-border { border: 1px solid var(--theme-border-color); border-left: 6px solid var(--color-accent); }


.pull-quote__text {
/* Chat wrapper */
    margin-bottom:4px;
.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: #43b581; font-weight: 600; }
.chat-npc-speaker { white-space: nowrap; min-width: 70px; color: #f04747; font-weight: 600; }


/* Gallery */
/* 3. RESPONSIVE IMPROVEMENTS */
.gallerytext {
@media (max-width: 768px) {
     text-align: center;
    .game-intro-card { padding: 1rem; }
     font-size:100%;
     .mana-text { font-size: 1.25rem; }
     .social { gap: 0.5rem; }
    .iconname { padding: 0.35rem 0.75rem; font-size: 0.9rem; }
    #mp-box-banner .mp-body { padding: 1rem; }
}
}


/* Fix to Template Data */
/* 4. CUSTOM SCROLLBAR */
.mw-templatedata-doc-params > * > tr > th {
::-webkit-scrollbar { width: 10px; height: 10px; }
     width: 150px;
::-webkit-scrollbar-track {
     background: var(--theme-body-bg);
    border-radius: 0px;  
}
}
 
::-webkit-scrollbar-thumb {
.mw-templatedata-doc-params {
     background: var(--color-accent);
     width: auto;
     border-radius: 5px;
     max-width: 100%;
}
}
::-webkit-scrollbar-thumb:hover { background: var(--theme-link-hover); }


/* Space sidebar arrows properly */
/* 5. UTILITY CLASSES */
#mw-panel.collapsible-nav .portal:is(.collapsed, .expanded) .vector-menu-heading {
.text-center { text-align: center; }
    background-position: 95% center;
.mt-2 { margin-top: 0.5rem; }
}
.mb-2 { margin-bottom: 0.5rem; }
.p-2 { padding: 0.5rem; }
/* ============================================
  WIKI COMPONENTS
  ============================================ */


/* Theme toggle */
/* 1. WIKITABLES  */
.wds-icon {
table.wikitable {
    align-self: center;
     background-color: var(--theme-card-bg);
    margin: 0 6px;
    color: var(--theme-text-primary);
    pointer-events: none;
    border: 1px solid var(--theme-border-color);
    fill: currentColor;
    border-collapse: collapse;
}
    margin: 1em 0;
.wds-icon-small {
    width: 100%; /* Encourages responsive behavior */
    height: 18px;
    box-shadow: var(--shadow-soft);
    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);
}
}


/* FIXME: Is specific .mw-body even needed? Does .mw-indicators exist outside? */
table.wikitable > tr > th,
/* --- Global Font Settings --- */
table.wikitable > tr > td,
html, body {
table.wikitable > * > tr > th,
     font-family: var(--font-family);
table.wikitable > * > tr > td {
    font-size: var(--font-size);
     border: 1px solid var(--theme-border-color);
     line-height: var(--line-height);
     padding: 0.5em 0.75em;
}
}


/* Verdana  */
/* Table Headers */
.mw-body h1,
table.wikitable > tr > th,
.mw-body-content h1,
table.wikitable > * > tr > th {
.mw-body-content h2,
     background-color: var(--color-primary);
.vector-body h3,
.vector-body h4,
.vector-body h5,
.vector-body h6,
.mw-headline {
     font-family: var(--font-family-headings);
     color: var(--theme-heading-color);
     color: var(--theme-heading-color);
     font-weight: normal;
     font-weight: 600;
    line-height: 1.25;
    margin: 0;
}
 
/* Specific Header Sizes */
.mw-body h1, .mw-body-content h1 { font-size: var(--font-size-h1); }
.mw-body-content h2 {
    font-size: var(--font-size-h2);
    border-bottom: 1px solid var(--theme-border-color);
    margin-top: 1em;
    margin-bottom: 0.5em;
}
.vector-body h3 { font-size: 1.4em; font-weight: bold; }
.vector-body h4 { font-size: 1.2em; font-weight: bold; }
 
.hidden {
  display: none;
}
body {
  /* 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;
     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; */
table.wikitable > tbody > tr:hover {
  /* -moz-hyphens: auto; */
    background-color: rgba(127, 127, 127, 0.05);
  /* hyphens: auto; */
}
}


.quotetable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
/* 2. INFOBOXES */
/* -ms-word-break: break-all; */
/* word-break: break-all; */
 
   
/* -webkit-hyphens: auto; */
/* -moz-hyphens: auto; */
/* hyphens: auto; */
}
 
 
.vector-menu-content {
  margin-left: 10px;
}
.vector-body p{
  /* -ms-word-break: break-all; */
  /* word-break: break-all; */
 
  /* Non standard for WebKit */
 
 
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
.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 {
.infobox {
  background: #e7c361 ;
    float: right;
  border: 1px solid #e7c361 ;
    clear: right;
  float: right;
    margin: 0 0 1em 1em;
  margin: 0 0 1em 1em;
    width: 300px;
  padding: 1em;
    background-color: var(--theme-card-bg);
  /* min-width: 25%; */
    border: 1px solid var(--theme-border-color);
}
    border-radius: var(--radius-md);
.infobox-title {
    padding: 10px;
  font-size: 2em;
    box-shadow: var(--shadow-soft);
  text-align: center;
    font-size: 0.9em;
    color: var(--theme-text-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
}


.infobox p {
/* Infobox Headers */
  text-decoration: underline;
.infobox th {
  font-size: 1.3em;
     background-color: var(--color-secondary);
}
    color: var(--theme-heading-color);
.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;
     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;
     padding: 5px;
     min-height: 100%;
     border-radius: var(--radius-sm);
}
.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{
.infobox td {
     background-color: rgba(231, 195, 97, 0.2);
     padding: 4px 5px;
}
    border-bottom: 1px solid rgba(127, 127, 127, 0.1);  
.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 {
.infobox tr:last-child td {
  max-width: 100%!important;
    border-bottom: none;
}
}


.content-table {
/* 3. NAVBOXES  */
  background: transparent;
.navbox {
  padding: 10px 2%;
     background-color: var(--theme-card-bg);
  width: 100%;
     border: 1px solid var(--theme-border-color);
}
     border-radius: var(--radius-md);
 
    margin: 1.5em 0;
.content-table-basic {
     padding: 2px;
  background: transparent;
     text-align: center;
  width: 100%;
     box-shadow: var(--shadow-soft);
}
 
.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; /* Keep from overlapping logo */
  }
}
 
.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 {
  position: relative;
  z-index: @z-index-base;
}
 
/* 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-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%;
     width: 100%;
  }
     clear: both;
  .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) {
.navbox th {
  .mw-parser-output a.external {
     background-color: var(--color-primary);
     font-size: 20px;
     color: var(--theme-heading-color);
     font-weight: 400;
     border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }
     padding: 6px;
  .floatleft > a > img {
    font-weight: 600;
     width: 48px;
     height: 48px;
  }
}
.header-column > span > a > img{
width: 14px;
    height: 14px;
}
}


.header-column >  a > img{
/* Group Headers inside Navbox */
width: 14px;
.navbox .navbox-group {
     height: 14px;
    background-color: var(--color-secondary);
    color: var(--theme-text-primary);
    font-weight: 600;
     padding: 4px 8px;
    white-space: nowrap;
    border-right: 2px solid var(--theme-body-bg);  
}
}


.heading-char{
.navbox .navbox-list {
  color:#deb76c !important
    text-align: left;
    padding: 4px 8px;
}
}


#footer {
/* Striping for Navbox lists */
background: #fff;
.navbox .navbox-even {
color: #000;
    background-color: rgba(127, 127, 127, 0.03);
margin-top: 1em;
border-top: 1pt solid #aaa;
padding-top: 5px;
direction: ltr;
}
}
 
/* ============================================
/* --- THE KILL SWITCH --- */
  THEME TOGGLE BUTTON
/* 1. Force Body Font */
  ============================================ */
html, body, .mw-body, #content {
.floating-theme-toggle {
     font-family: Helvetica, Arial, sans-serif !important;
     position: fixed;
}
    bottom: 20px;
 
    right: 20px;
/* 2. Force Headers */
    z-index: 9999;
h1, h2, h3, h4, h5, h6, .mw-headline, .firstHeading {
    padding: 10px 16px;
     font-family: Verdana, Helvetica, Arial, sans-serif !important;
    background-color: var(--theme-card-bg);
     font-weight: normal !important;
    color: var(--theme-heading-color);
}
    border: 2px solid var(--theme-border-color);
 
    border-radius: var(--radius-lg);
/* 3. Force Monospace */
     font-family: 'Fredoka', sans-serif;
pre, code, .mw-code {
    font-size: 0.95rem;
    font-family: monospace, monospace !important;
     font-weight: 600;
     font-size: 13px !important;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
     backdrop-filter: blur(8px);  
}
}


/* 4. Force Inheritance on everything else to override load.php's * selector */
.floating-theme-toggle:hover {
* {
    background-color: var(--color-primary);
     font-family: inherit !important;
    border-color: var(--color-accent);
    transform: translateY(-4px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    color: #000;  
}
}

Latest revision as of 06:46, 19 May 2026

/*************************************🎮**************************************
                                                                               *
       ╔═══════════════════════════════════════════════════════════════════╗   
                                                         COMMON.CSS (vA0.1)                                                         
                                                                 ✦ M*n* B**** ✦                                                              
       ╚═══════════════════════════════════════════════════════════════════╝   
                                                                              *
 *******************************************************************************/

/*
*This page contains the entire stylesheet for the MB Wiki.
*We urge you "not to edit" this page "directly".
*Some of the code inherited from coralisland.wiki.
*Any functional issue please report to our wiki-team at the official discord channel

*Imports will be starting below this very line;
*/
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap');



/* ============================================
   ALL @IMPORTS MUST BE AT THE VERY TOP
   ============================================ */

@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Colors.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Module:Documentation.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Documentation.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Infobox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tables.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:MessageBox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:CustomTabs.css&action=raw&ctype=text/css");   
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Navbox.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Icons.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Dialogue.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Cards.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Tabbers.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Mobile.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Recipe.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Modal.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:AceEditor.css&action=raw&ctype=text/css");
@import url("https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:CodeMirror.css&action=raw&ctype=text/css");

/* ============================================
  TOKEN ROOT ARCHITECTURE
   ============================================ */

/* ✦ THEME MANA (LIGHT) - DEFAULT ✦ */
:root {
    /* 1. Core Color Palette */
    --color-primary: #88eee0;
    --color-secondary: #d9ffe9;
    --color-accent: #87b4b7;
    
    /* 2. Semantic Backgrounds */
    --theme-body-bg: var(--color-secondary);
    --theme-card-bg: rgba(255, 255, 255, 0.85); 
    --theme-card-bg-hover: #ffffff;
    
    /* 3. Semantic Text Colors */
    --theme-text-primary: #1a2b3c; 
    --theme-text-muted: #4a5b6c;
    --theme-heading-color: #0d1b2a;
    
    /* 4. Borders & Interactive Elements */
    --theme-border-color: var(--color-accent);
    --theme-border-color-rgb: 135, 180, 183;
    --theme-link-color: #006b75;
    --theme-link-hover: #004a52;
    
    /* 5. Structures */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.05);
    
    /* Main Page Layout Layout */
    --main-page-layout--desktop: 'banner banner banner' 'about about updates' 'starts starts starts' 'items items items' 'characters characters characters' 'enemies enemies enemies' 'area area area';
    --main-page-layout--tablet: 'banner banner' 'about updates' 'starts starts' 'items items' 'characters characters' 'enemies enemies' 'area area';
    --main-page-layout--mobile: 'banner' 'about' 'updates' 'starts' 'items' 'characters' 'enemies' 'area';
}

/* ✦ THEME BREAK (DARK) - TOGGLE ✦ */
html.theme-break {
    /* 1. Core Color Palette */
    --color-primary: #12435e;
    --color-secondary: #0e344d;
    --color-accent: #7ff6e3;
    
    /* 2. Semantic Backgrounds */
    --theme-body-bg: var(--color-secondary);
    --theme-card-bg: var(--color-primary);
    --theme-card-bg-hover: #164f6f;
    
    /* 3. Semantic Text Colors */
    --theme-text-primary: #eaeef2;
    --theme-text-muted: #87b4b7;
    --theme-heading-color: #ffffff;
    
    /* 4. Borders & Interactive Elements */
    --theme-border-color: var(--color-accent);
    --theme-border-color-rgb: 127, 246, 227;
    --theme-link-color: var(--color-accent);
    --theme-link-hover: #aafff0;
    
    /* 5. Structures */
    --shadow-soft: 0 4px 6px rgba(0, 0, 0, 0.3);
}
/* ============================================
   BASE LAYOUT & STRUCTURAL RESET
   ============================================ */

/* 1. Universal Box Sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. MediaWiki Body & Container Reset */
body {
    background-color: var(--theme-body-bg) !important;
    color: var(--theme-text-primary);
    font-family: 'Fredoka', sans-serif; 
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Stripping native MediaWiki container styles  */
.mw-body, #content {
    background: transparent !important;
    border: none !important;
    color: var(--theme-text-primary);
}

/* 3. Typography Normalization */
h1, h2, h3, h4, h5, h6 {
    color: var(--theme-heading-color);
    margin-top: 0;
    font-weight: 600;
}

/* Remove MediaWiki's harsh default underline on H1/H2 */
.mw-body h1, .mw-body h2 {
    border-bottom: 2px solid var(--theme-border-color); 
    padding-bottom: 0.25em;
}

/* 4. Hyperlink Standardization */
a {
    color: var(--theme-link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, a:focus {
    color: var(--theme-link-hover);
    text-decoration: underline;
}

a:visited {
    color: var(--theme-link-color); 
}

/* 5. Responsive Media & Selection */
img, video {
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--color-primary);
    color: #000; 
}
::-moz-selection {
    background: var(--color-primary);
    color: #000;
}

/* ============================================
   BASE LAYOUT (MAPPED TO TOKENS)
   ============================================ */
html, body {
    background-color: var(--theme-body-bg) !important;
    background-image: none !important; 
    color: var(--theme-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease; 
}

.mw-body {
    margin-top: -1px;
    border: 1px solid var(--theme-border-color);
    border-radius: var(--radius-sm);
    background-color: transparent;
}

/* Hide default elements */
.mobileHide, .mobile-only, .no-desktop {
    display: none !important;
}

/* Fix for hidden H1 on main page */
body.page-Main_Page.action-view h1.firstHeading,
body.page-Main_Page.action-submit h1.firstHeading {
    display: none;
}

/* ============================================
   MAIN PAGE GRID LAYOUT
   ============================================ */
#mp-container {
    display: grid;
    gap: 2rem;
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Desktop Layout */
@media (min-width: 1024px) {
    #mp-container {
        grid-template-areas: var(--main-page-layout--desktop);
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet Layout */
@media (min-width: 768px) and (max-width: 1023px) {
    #mp-container {
        grid-template-areas: var(--main-page-layout--tablet);
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Layout */
@media (max-width: 767px) {
    #mp-container {
        grid-template-areas: var(--main-page-layout--mobile);
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* MP Box styling */
.mp-box {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

/* Staggered animations */
.mp-box:nth-child(1) { animation-delay: 0.05s; }
.mp-box:nth-child(2) { animation-delay: 0.1s; }
.mp-box:nth-child(3) { animation-delay: 0.15s; }
.mp-box:nth-child(4) { animation-delay: 0.2s; }
.mp-box:nth-child(5) { animation-delay: 0.25s; }
.mp-box:nth-child(6) { animation-delay: 0.3s; }
.mp-box:nth-child(7) { animation-delay: 0.35s; }
.mp-box:nth-child(8) { animation-delay: 0.4s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
  MAIN PAGE CARDS & GRIDS
   ============================================ */

/* Main Grid Wrapper  */
.main-page-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 1rem;
}

/* 1. Game Intro Cards */
.game-intro-card {
    background-color: var(--theme-card-bg);
    border-radius: var(--radius-lg); /* From Step 1 */
    padding: 1.25rem;
    border: 1px solid var(--theme-border-color);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.3s ease;
}

.game-intro-card:hover {
    background-color: var(--theme-card-bg-hover);
    transform: translateY(-4px); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary); 
}

/* 2. Header Elements */
.game-header {
    margin-bottom: 1rem;
    position: relative;
}

.mana-text {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    
    /* Gradient */
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
    /* Flexbox aligning the icon perfectly */
    display: flex;
    align-items: center;
    gap: 8px; 
    letter-spacing: 0.5px;
}

.mana-line {
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
    margin-top: 0.5rem;
    width: 100%;
    border-radius: 2px;
}

/* 3. Card Content & Headings */
.game-content {
    color: var(--theme-text-primary);
    line-height: 1.6;
    flex-grow: 1; 
}

.heading-char {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--theme-border-color);
    display: inline-block;
    transition: border-color 0.3s ease;
}

.heading-char a {
    color: var(--theme-heading-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.heading-char a:hover {
    color: var(--color-accent);
}

/* 4. Auto Grid Lists (The Links) */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); 
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0 0;
}

.auto-grid li {
    padding: 0;
}
 
/* Elevated List Link Styling */
.auto-grid li a {
    display: block; 
    padding: 0.35rem 0.5rem;
    color: var(--theme-link-color);
    text-decoration: none;
    border-radius: var(--radius-sm);
    background-color: rgba(127, 127, 127, 0.05); 
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.auto-grid li a:hover {
    color: var(--theme-link-hover);
    background-color: var(--theme-body-bg);
    border-color: var(--theme-border-color);
    transform: translateX(3px); 
}
/* ============================================
   BANNER, WIKI COMPONENTS & SCROLLBAR
   ============================================ */

/* 1. BANNER SECTION */
#mp-box-banner .mp-body {
    background: linear-gradient(135deg, var(--color-secondary), var(--theme-body-bg));
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    border: 1px solid var(--theme-border-color);
    box-shadow: var(--shadow-soft);
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* Social links */
.social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.iconname {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--theme-card-bg);
    border: 1px solid var(--theme-border-color);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.iconname:hover {
    background: var(--color-primary);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.iconname a {
    color: var(--theme-text-primary) !important;
    text-decoration: none;
    font-weight: 500;
}

/* 2. WIKI FIXES & IMPROVEMENTS */
.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; }

/* Categories */
.catlinks {
    border-color: var(--theme-border-color);
    border-radius: var(--radius-md);
    background-color: var(--theme-card-bg);
    padding: 10px;
}

/* Code blocks */
code, pre {
    background-color: var(--theme-card-bg);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-family: Consolas, Eupheima UCAS, Monaco, Menlo, monospace;
}

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; }

/* Table of Contents */
.toc {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-border-color);
    margin-top: 16px;
    box-shadow: var(--shadow-soft);
}

.toctogglelabel { color: var(--theme-link-color); }
.tocnumber { color: var(--theme-text-muted); }
.vector-body .toc h2 { font-family: 'Fredoka', sans-serif; }

/* Hatnote */
.hatnote {
    border-left: 4px solid var(--color-accent);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background-color: var(--theme-card-bg);
    margin: 8px 0;
}

/* Variables styling */
span.variable { opacity: 0.65; }
span.variable::after { opacity: 0.65; content: ">"; }
span.variable::before { opacity: 0.65; content: "<"; }

/* Pull quotes */
.pull-quote { font-style: italic; margin: 0; padding: 0 30px 8px !important; }
.pull-quote::before {
    color: var(--color-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 & Changelist */
.gallerytext { text-align: center; font-size: 100%; }
.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; border-radius: var(--radius-md); }
.changelist-border { border: 1px solid var(--theme-border-color); border-left: 6px solid var(--color-accent); }

/* Chat wrapper */
.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: #43b581; font-weight: 600; } 
.chat-npc-speaker { white-space: nowrap; min-width: 70px; color: #f04747; font-weight: 600; }

/* 3. RESPONSIVE IMPROVEMENTS */
@media (max-width: 768px) {
    .game-intro-card { padding: 1rem; }
    .mana-text { font-size: 1.25rem; }
    .social { gap: 0.5rem; }
    .iconname { padding: 0.35rem 0.75rem; font-size: 0.9rem; }
    #mp-box-banner .mp-body { padding: 1rem; }
}

/* 4. CUSTOM SCROLLBAR */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
    background: var(--theme-body-bg);
    border-radius: 0px; 
}
::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--theme-link-hover); }

/* 5. UTILITY CLASSES */
.text-center { text-align: center; }
.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.p-2 { padding: 0.5rem; }
/* ============================================
   WIKI COMPONENTS
   ============================================ */

/* 1. WIKITABLES  */
table.wikitable {
    background-color: var(--theme-card-bg);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-color);
    border-collapse: collapse;
    margin: 1em 0;
    width: 100%; /* Encourages responsive behavior */
    box-shadow: var(--shadow-soft);
}

table.wikitable > tr > th,
table.wikitable > tr > td,
table.wikitable > * > tr > th,
table.wikitable > * > tr > td {
    border: 1px solid var(--theme-border-color);
    padding: 0.5em 0.75em;
}

/* Table Headers */
table.wikitable > tr > th,
table.wikitable > * > tr > th {
    background-color: var(--color-primary);
    color: var(--theme-heading-color);
    font-weight: 600;
    text-align: center;
}


table.wikitable > tbody > tr:hover {
    background-color: rgba(127, 127, 127, 0.05);
}

/* 2. INFOBOXES  */
.infobox {
    float: right;
    clear: right;
    margin: 0 0 1em 1em;
    width: 300px;
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--radius-md);
    padding: 10px;
    box-shadow: var(--shadow-soft);
    font-size: 0.9em;
    color: var(--theme-text-primary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Infobox Headers */
.infobox th {
    background-color: var(--color-secondary);
    color: var(--theme-heading-color);
    text-align: center;
    padding: 5px;
    border-radius: var(--radius-sm);
}

.infobox td {
    padding: 4px 5px;
    border-bottom: 1px solid rgba(127, 127, 127, 0.1); 
}


.infobox tr:last-child td {
    border-bottom: none;
}

/* 3. NAVBOXES  */
.navbox {
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--radius-md);
    margin: 1.5em 0;
    padding: 2px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    width: 100%;
    clear: both;
}

.navbox th {
    background-color: var(--color-primary);
    color: var(--theme-heading-color);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 6px;
    font-weight: 600;
}

/* Group Headers inside Navbox */
.navbox .navbox-group {
    background-color: var(--color-secondary);
    color: var(--theme-text-primary);
    font-weight: 600;
    padding: 4px 8px;
    white-space: nowrap;
    border-right: 2px solid var(--theme-body-bg); 
}

.navbox .navbox-list {
    text-align: left;
    padding: 4px 8px;
}

/* Striping for Navbox lists */
.navbox .navbox-even {
    background-color: rgba(127, 127, 127, 0.03);
}
/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.floating-theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    padding: 10px 16px;
    background-color: var(--theme-card-bg);
    color: var(--theme-heading-color);
    border: 2px solid var(--theme-border-color);
    border-radius: var(--radius-lg);
    font-family: 'Fredoka', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    backdrop-filter: blur(8px); 
}

.floating-theme-toggle:hover {
    background-color: var(--color-primary);
    border-color: var(--color-accent);
    transform: translateY(-4px); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    color: #000; 
}
Retrieved from "https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Common.css&oldid=28415"