MediaWiki:Common.css: Difference between revisions

From MB Wiki
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
Tag: Reverted
Line 1: Line 1:
.class { }/* needed for some reason for the @imports to work */
/* =======================================================================
/* Imports caching */
  MB WIKI - OFFICIAL COMMON.CSS
/*@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Colors.css");*/
  Structure: FGS/Wiki.gg Standardized Variables
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Module:Documentation.css");
  Theme: Teal/Terraria Hybrid
@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");
/* --- 1. FONTS & IMPORTS --- */
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:MessageBox.css");
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:CustomTabs.css");
 
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Navbox.css");
/* --- 2. BASIC VARIABLES (Typography & Layout) --- */
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Icons.css");
:root {
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Dialogue.css");
     /* Terraria/Standard Fonts (Overriding the loaded defaults) */
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Cards.css");
     --wiki-font-family-body: Helvetica, Arial, sans-serif;
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Tabbers.css");
     --wiki-font-family-heading: Verdana, Helvetica, Arial, sans-serif;
@import url("https://mbwiki.stairwaygames.work/wiki/MediaWiki:Mobile.css");
     --wiki-font-family-mono: monospace, monospace;
@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; /* Darker for better readability */
    --theme-page-text-color--inverse: #ffffff;
    --theme-page-background-color: #f8fdfc; /* Very light cyan background */
    --theme-page-background-color--rgb: 248, 253, 252;
    --theme-page-background-color--secondary: #e0f7f4; /* Slightly darker cyan */
    --theme-page-background-color--secondary--rgb: 224, 247, 244;
   
     /* Links */
  --theme-link-color: #006d72; /* Darker, more readable teal (was #008489) */
     --theme-link-color--rgb: 0, 109, 114;
    --theme-link-color--hover: #00474A;  
     --theme-link-label-color: #00474A;
    --mw-head-link-color: #006d72;
   
    /* Accents */
    --theme-accent-color: #4fd1c7; /* Vibrant teal accent */
    --theme-accent-color--rgb: 79, 209, 199;
    --theme-accent-color--hover: #38b2ac; /* Darker hover */
    --theme-accent-label-color: #ffffff;
   
    /* Borders */
    --theme-border-color: #b2f5ea; /* Light teal border */
    --theme-border-color--rgb: 178, 245, 234;
   
    /* Status colors - more readable */
    --theme-alert-color: #e53e3e; /* Softer red */
     --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; /* Softer orange */
    --theme-warning-color--rgb: 221, 107, 32;
    --theme-warning-color--secondary: #feebc8;
    --theme-warning-label: #1a202c;
   
    --theme-success-color: #38a169; /* Softer green */
    --theme-success-color--rgb: 56, 161, 105;
    --theme-success-color--secondary: #c6f6d5;
    --theme-success-label: #ffffff;
   
    --theme-message-color: #805ad5; /* Purple for messages */
    --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; /* Very light teal */
    --theme-infobox-bg: #ffffff; /* Pure white for contrast */
   
    /* Your main light color */
    --color-player: #74f4e0; /* Your specified light theme color */
    --color-accent: #4fd1c7; /* Complementary teal */
    --color-npc: #b794f4; /* Complementary purple */
   
    /* Card backgrounds */
    --card-bg-main: #ffffff;
    --card-bg-sub: #e6fffa;
   
    /* Letter background */
    --letter-bg: #f0fff4;
      
      
    /* User highlights */
     --wiki-content-border-radius: 4px;
     --custom-admin-highlight: #dd6b20;
     --wiki-sidebar-border-radius: 4px;
    --custom-contentmoderator-highlight: #805ad5;
    --custom-bot-color: #718096;
     --custom-bot-font-style: italic;
      
      
     /* Named accents */
     /* Layout Variables */
     --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: #74f4e0;
     --main-page-layout--tablet: 'banner banner' 'about updates' 'starts starts' 'items items' 'characters characters' 'enemies enemies' 'area area';
     --npc: #b794f4;
     --main-page-layout--mobile: 'banner' 'about' 'updates' 'starts' 'items' 'characters' 'enemies' 'area';
 
}
}


:root .skin-vector-dark { /* Dark theme */
/* --- 3. LIGHT THEME (Your Teal Palette) --- */
     /* Base colors */
:root, .view-light {
     --theme-page-text-color: #e2e8f0;
     /* Backgrounds */
    --theme-page-text-color--inverse: #1a202c;
     --wiki-body-background-color: #f8fdfc; /* Light Cyan */
     --theme-page-background-color: rgb(26, 32, 44, 0.98); /* Dark blue-gray */
     --wiki-body-background-image: none; /* Removed placeholder image */
     --theme-page-background-color--rgb: 26, 32, 44;
   
     --theme-page-background-color--secondary: #2d3748; /* Slightly lighter */
     --wiki-content-background-color: #ffffff;
     --theme-page-background-color--secondary--rgb: 45, 55, 72;
     --wiki-content-background-color--secondary: #e0f7f4; /* Darker Cyan for boxes */
     --wiki-content-border-color: #b2f5ea;
      
      
     /* Links - using your dark theme color */
     /* Text & Links */
     --theme-link-color: #4fd1c7;  
     --wiki-content-text-color: #1a2a2a;
     --theme-link-color--rgb: 79, 209, 199;
     --wiki-content-link-color: #006d72; /* Dark Teal */
     --theme-link-color--hover: #81e6d9;
     --wiki-content-link-color--hover: #00474A;
     --theme-link-label-color: #e2e8f0;
     --wiki-content-link-color--visited: #00585c;
    --mw-head-link-color: #4fd1c7;  
      
      
     /* Accents */
     /* Accents */
     --theme-accent-color: #4fd1c7; /* Bright teal */
     --wiki-accent-color: #4fd1c7; /* Vibrant Teal */
     --theme-accent-color--rgb: 79, 209, 199;
     --wiki-accent-label-color: #ffffff;
    --theme-accent-color--hover: #81e6d9; /* Lighter hover */
    --theme-accent-label-color: #1a202c;
   
    /* Borders */
    --theme-border-color: #4a5568; /* Dark gray border */
    --theme-border-color--rgb: 74, 85, 104;
   
    /* Status colors - dark theme optimized */
    --theme-alert-color: #fc8181; /* Softer red for dark mode */
    --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; /* Softer orange */
    --theme-warning-color--rgb: 246, 173, 85;
    --theme-warning-color--secondary: #744210;
    --theme-warning-label: #1a202c;
   
    --theme-success-color: #68d391; /* Softer green */
    --theme-success-color--rgb: 104, 211, 145;
    --theme-success-color--secondary: #22543d;
    --theme-success-label: #1a202c;
   
    --theme-message-color: #9f7aea; /* Softer purple */
    --theme-message-label: #1a202c;
   
    /* Custom variables */
    --theme-alt-text: #2d3748;
    --theme-accent-bg: #2d3748;
    --theme-infobox-bg: #2d3748;
   
    /* Your main dark color */
    --color-player: #339193; /* Your specified dark theme color */
    --color-accent: #4fd1c7; /* Complementary teal */
    --color-npc: #9f7aea; /* Complementary purple */
      
      
     /* Card backgrounds */
     /* Special Components (Mainbox/Navbox) */
     --card-bg-main: #2d3748;
     --mainbox-header-bg: #e7c361; /* Gold (Terraria Style) */
     --card-bg-sub: #4a5568;
    --mainbox-header-text: #000000;
     --mainbox-header-border: #a2a9b1;
      
      
     /* Letter background */
     /* Messages/Alerts */
    --letter-bg: #1a202c;
     --wiki-alert-color: #e53e3e;
   
     --wiki-warning-color: #dd6b20;
    /* User highlights */
     --wiki-success-color: #38a169;
     --custom-admin-highlight: #f6ad55;
     --custom-contentmoderator-highlight: #9f7aea;
     --custom-bot-color: #a0aec0;
    --custom-bot-font-style: italic;
   
    /* Alert highlight - darker for dark theme */
    --theme-alert-highlight: #c53030;
    --theme-alert-highlight--rgb: 197, 48, 48;
    --theme-alert-highlight--hover: #e53e3e;
   
    /* Named accents */
    --accent: #4fd1c7;
    --player: #339193;
    --npc: #9f7aea;
}
}


:root { /* Universal styles */
/* --- 4. DARK THEME (Your Dark Palette) --- */
   
.view-dark, .skin-vector-dark {
    /*Fonts */
     /* Backgrounds */
    --font-family: Helvetica, Arial, sans-serif;
     --wiki-body-background-color: #1a202c; /* Dark Blue-Gray */
    --font-family-headings: Verdana, Helvetica, Arial, sans-serif;
     --wiki-body-background-image: none;
    --font-family-mono: monospace, monospace;
    --font-size: 14px;
    --line-height: 1.5;
    --font-size-h1: 32px;
    --font-size-h2: 26px;
     /* Gray scale - optimized for readability */
     --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/brown scale for complementary colors */
     --wiki-content-background-color: #2d3748;
     --teal-800: #234e52;
     --wiki-content-background-color--secondary: #4a5568;
    --teal-500: #319795;
     --wiki-content-border-color: #4a5568;
     --teal-400: #38b2ac;
    --teal-300: #4fd1c7;
    --teal-200: #81e6d9;
     --teal-100: #b2f5ea;
    --teal-050: #e6fffa;
      
      
     --light-blue: #bee3f8;
     /* Text & Links */
     --gold: #d69e2e;
    --wiki-content-text-color: #e2e8f0;
    --wiki-content-link-color: #4fd1c7; /* Bright Teal */
     --wiki-content-link-color--hover: #81e6d9;
    --wiki-content-link-color--visited: #38b2ac;
      
      
     /* Border */
     /* Accents */
     --border-color: var(--theme-border-color);
     --wiki-accent-color: #4fd1c7;
    --wiki-accent-label-color: #1a202c;
   
    /* Special Components */
    --mainbox-header-bg: #d69e2e; /* Darker Gold */
    --mainbox-header-text: #000000;
    --mainbox-header-border: #4a5568;
}
}


/* Improved content styling */
/* =======================================================================
#content.mw-body, .parsoid-body {
  5. COMPONENT STYLING (Adapted from your provided code)
    background-color: var(--theme-page-background-color) !important;
  ======================================================================= */
    border: 1px solid var(--theme-border-color);
    color: var(--theme-page-text-color);
}


/* Typography improvements */
/* --- Typography & Global Resets --- */
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 {
html, body {
     color: var(--theme-page-text-color);
     font-family: var(--wiki-font-family-body);
}
    font-size: 14px;
.vector-menu-heading-label {
     line-height: 1.5;
     font-size: 0.8125em;
}
}


/* Footer and panels */
/* Links */
.mw-footer, .editOptions, .ace-tm, #mw-panel .vector-menu-heading {
a { transition: color 0.2s; }
    background-color: var(--theme-page-background-color--secondary) !important;
a:hover { text-decoration: underline; }
    color: var(--theme-page-text-color);
}


/* Sidebar and lists */
/* Tables (Terraria Style Header) */
.ace-tm .ace_gutter, .selected.mw-list-item, #mw-panel .vector-menu-content-list {
.wikitable {
     background-color: var(--theme-page-background-color--secondary) !important;
     background-color: var(--wiki-content-background-color);
     color: var(--theme-page-text-color);
     border: 1px solid var(--wiki-content-border-color);
    border-collapse: collapse;
    width: 100%;
}
}
 
.wikitable > tr > th, .wikitable > * > tr > th {
/* Notification improvements */
    background-color: var(--mainbox-header-bg);
.skin-vector-dark #mw-notification-area.mw-notification.mw-notification-type-error,
     color: var(--mainbox-header-text);
.skin-vector-dark .postedit.mw-notification.mw-notification-type-error,
     border: 1px solid var(--mainbox-header-border);
.skin-vector-dark .wds-table-td-alert {
    padding: 8px;
     background-color: var(--theme-alert-highlight);
    text-align: center;
     color: var(--theme-alert-label);
    font-weight: bold;
}
}
 
.wikitable > tr > td, .wikitable > * > tr > td {
.text-error {
     border: 1px solid var(--wiki-content-border-color);
     color: var(--theme-alert-highlight);
    padding: 6px;
}
}


/* Revision diff styling - improved contrast */
/* --- Main Page Grid System --- */
.diff td.diff-addedline {
#mp-container {
    background-color: var(--teal-050);
     display: grid;
    border-color: var(--theme-success-color);
     gap: 10px;
    border-width: 1px 1px 1px 4px;
     grid-template-areas: var(--main-page-layout--desktop);
    color: var(--theme-success-color);
     grid-template-columns: repeat(12, 1fr);
}
 
.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: 1px solid var(--theme-border-color);
}
 
.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: 1px solid var(--theme-border-color);
}
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 */
/* Main Page Boxes */
.changelist-header {
.mp-box {
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;
     display: flex;
     flex-wrap: wrap;
     flex-flow: column nowrap;
     gap: 0.5em;
     background: var(--wiki-content-background-color);
    font-size: 0.875em;
    border: 1px solid var(--wiki-content-border-color);
}
    border-radius: var(--wiki-content-border-radius);
.cols {
    padding: 0;
background-color: var(--theme-page-background-color--secondary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
    overflow: hidden;
#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?
.mp-body {
*,
     padding: 10px;
/* --- Global Font Settings --- */
     height: 100%;
html, body {
     font-family: var(--font-family);
    font-size: var(--font-size);
     line-height: var(--line-height);
}
}


/* Verdana  */
/* Main Page Headers (Terraria Gold Style) */
.mw-body h1,
.mp-box h2 {
.mw-body-content h1,
     background-color: var(--mainbox-header-bg);
.mw-body-content h2,
     color: var(--mainbox-header-text);
.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);
    font-weight: normal;
    line-height: 1.25;
     margin: 0;
     margin: 0;
}
     padding: 8px;
 
     font-size: 1.25em;
/* 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;
     text-align: center;
     line-height: 1;
     border-bottom: 1px solid var(--mainbox-header-border);
    font-size: 12px;
    font-family: var(--wiki-font-family-heading);
    hyphens: auto;
     font-weight: bold;
    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;


 
/* --- CardGrid / Navbox (From your code) --- */
.card-navbox-container {
    background: var(--wiki-content-background-color--secondary);
    border: 1px solid var(--wiki-content-border-color);
    border-radius: 8px;
    padding: 15px;
    margin: 1em 0;
}
}
.heart-event-table {
.card-navbox-title {
  width: 30%;
     background: var(--mainbox-header-bg);
}
     color: var(--mainbox-header-text);
.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;
}
.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 {
  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;
     padding: 8px;
    position: relative;
    width: 100%;
     text-align: center;
     text-align: center;
 
     font-weight: bold;
}
     border-radius: 4px;
.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 {
/* --- Inline Icons (.iconname) --- */
  background: transparent;
.iconname {
  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; /* 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;
     display: flex;
    justify-content: space-between;
     align-items: center;
     align-items: center;
     min-height: 3.125em;  
     gap: 6px;
    margin-bottom: 4px;
}
}
 
.iconname img {
/* Navigation Containers */
    width: 24px;
#left-navigation {
    height: 24px;
  float: left;
    object-fit: contain;
  margin-left: 10em;
    image-rendering: pixelated; /* Essential for pixel art */
  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 {
/* --- Portable Infobox --- */
  float: right;
.portable-infobox {
  margin-top: 2.5em;
    border: 1px solid var(--wiki-content-border-color);
    background: var(--wiki-content-background-color);
    border-radius: 8px;
    margin-bottom: 1em;
}
}
 
.portable-infobox .pi-title {
/* Search */
    background: var(--mainbox-header-bg);
.vector-search-box {
    color: var(--mainbox-header-text);
  float: left;
    font-family: var(--wiki-font-family-heading);
  margin-right: 0.5em;
    font-weight: bold;
  margin-left: 0.5em;
     border-radius: 7px 7px 0 0;
 
    padding: 10px;
  // FIXME: This selector requires knowledge of the internals of the search component
  // and should not be used here.
  form {
     margin: 0.5em 0 0;
  }
}
}
 
.portable-infobox .pi-data-label {
// Defined as `div`.
    background: var(--wiki-content-background-color--secondary);
// Provide extra element for gadgets due to `form` already carrying an `id`.
    font-weight: bold;
// 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 */
/* --- Responsive Layouts --- */
#mw-panel {
@media screen and (max-width: 1350px) {
  position: absolute;
    #mp-container {
  top: 0;
        grid-template-areas: var(--main-page-layout--tablet);
  width: 10em;
         grid-template-columns: 1fr 1fr;
  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) {
@media screen and (max-width: 990px) {
  .minus-fifty {
     #mp-container {
margin-top:-5%;
        display: flex;
}
        flex-direction: column;
.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%;
     }
     }
  }
     .grid { display: flex; flex-direction: column; }
 
  .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%;
  }
  .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 {
  6. THE "NUCLEAR OPTION" FOR FONTS
    font-size: 20px;
  This overrides the `load.php` setting: *,body{font-family:Fredoka...}
    font-weight: 400;
  ======================================================================= */
  }
/* 1. Reset Global Font */
  .floatleft > a > img {
html, body, .mw-body, #content {
    width: 48px;
     font-family: Helvetica, Arial, sans-serif !important;
    height: 48px;
  }
}
.header-column > span > a > img{
width: 14px;
     height: 14px;
}
}


.header-column >  a > img{
/* 2. Reset Headings to Verdana */
width: 14px;
h1, h2, h3, h4, h5, h6, .mw-headline, .firstHeading {
     height: 14px;
    font-family: Verdana, Helvetica, Arial, sans-serif !important;
     font-weight: normal !important;
}
}


.heading-char{
/* 3. Force Monospace for Code */
  color:#deb76c !important
pre, code, .mw-code {
    font-family: monospace, monospace !important;
    font-size: 13px !important;
}
}


#footer {
/* 4. Kill Fredoka on everything else */
background: #fff;
* {
color: #000;
    font-family: inherit; /* Forces elements to listen to body/parent instead of load.php */
margin-top: 1em;
border-top: 1pt solid #aaa;
padding-top: 5px;
direction: ltr;
}
}

Revision as of 05:16, 11 December 2025

/* =======================================================================
   MB WIKI - OFFICIAL COMMON.CSS
   Structure: FGS/Wiki.gg Standardized Variables
   Theme: Teal/Terraria Hybrid
   ======================================================================= */

/* --- 1. FONTS & IMPORTS --- */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* --- 2. BASIC VARIABLES (Typography & Layout) --- */
:root {
    /* Terraria/Standard Fonts (Overriding the loaded defaults) */
    --wiki-font-family-body: Helvetica, Arial, sans-serif;
    --wiki-font-family-heading: Verdana, Helvetica, Arial, sans-serif;
    --wiki-font-family-mono: monospace, monospace;
    
    --wiki-content-border-radius: 4px;
    --wiki-sidebar-border-radius: 4px;
    
    /* Layout Variables */
    --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';
}

/* --- 3. LIGHT THEME (Your Teal Palette) --- */
:root, .view-light {
    /* Backgrounds */
    --wiki-body-background-color: #f8fdfc; /* Light Cyan */
    --wiki-body-background-image: none; /* Removed placeholder image */
    
    --wiki-content-background-color: #ffffff;
    --wiki-content-background-color--secondary: #e0f7f4; /* Darker Cyan for boxes */
    --wiki-content-border-color: #b2f5ea;
    
    /* Text & Links */
    --wiki-content-text-color: #1a2a2a;
    --wiki-content-link-color: #006d72; /* Dark Teal */
    --wiki-content-link-color--hover: #00474A;
    --wiki-content-link-color--visited: #00585c;
    
    /* Accents */
    --wiki-accent-color: #4fd1c7; /* Vibrant Teal */
    --wiki-accent-label-color: #ffffff;
    
    /* Special Components (Mainbox/Navbox) */
    --mainbox-header-bg: #e7c361; /* Gold (Terraria Style) */
    --mainbox-header-text: #000000;
    --mainbox-header-border: #a2a9b1;
    
    /* Messages/Alerts */
    --wiki-alert-color: #e53e3e;
    --wiki-warning-color: #dd6b20;
    --wiki-success-color: #38a169;
}

/* --- 4. DARK THEME (Your Dark Palette) --- */
.view-dark, .skin-vector-dark {
    /* Backgrounds */
    --wiki-body-background-color: #1a202c; /* Dark Blue-Gray */
    --wiki-body-background-image: none;
    
    --wiki-content-background-color: #2d3748;
    --wiki-content-background-color--secondary: #4a5568;
    --wiki-content-border-color: #4a5568;
    
    /* Text & Links */
    --wiki-content-text-color: #e2e8f0;
    --wiki-content-link-color: #4fd1c7; /* Bright Teal */
    --wiki-content-link-color--hover: #81e6d9;
    --wiki-content-link-color--visited: #38b2ac;
    
    /* Accents */
    --wiki-accent-color: #4fd1c7;
    --wiki-accent-label-color: #1a202c;
    
    /* Special Components */
    --mainbox-header-bg: #d69e2e; /* Darker Gold */
    --mainbox-header-text: #000000;
    --mainbox-header-border: #4a5568;
}

/* =======================================================================
   5. COMPONENT STYLING (Adapted from your provided code)
   ======================================================================= */

/* --- Typography & Global Resets --- */
html, body {
    font-family: var(--wiki-font-family-body);
    font-size: 14px;
    line-height: 1.5;
}

/* Links */
a { transition: color 0.2s; }
a:hover { text-decoration: underline; }

/* Tables (Terraria Style Header) */
.wikitable {
    background-color: var(--wiki-content-background-color);
    border: 1px solid var(--wiki-content-border-color);
    border-collapse: collapse;
    width: 100%;
}
.wikitable > tr > th, .wikitable > * > tr > th {
    background-color: var(--mainbox-header-bg);
    color: var(--mainbox-header-text);
    border: 1px solid var(--mainbox-header-border);
    padding: 8px;
    text-align: center;
    font-weight: bold;
}
.wikitable > tr > td, .wikitable > * > tr > td {
    border: 1px solid var(--wiki-content-border-color);
    padding: 6px;
}

/* --- Main Page Grid System --- */
#mp-container {
    display: grid;
    gap: 10px;
    grid-template-areas: var(--main-page-layout--desktop);
    grid-template-columns: repeat(12, 1fr);
}

/* Main Page Boxes */
.mp-box {
    display: flex;
    flex-flow: column nowrap;
    background: var(--wiki-content-background-color);
    border: 1px solid var(--wiki-content-border-color);
    border-radius: var(--wiki-content-border-radius);
    padding: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden;
}

.mp-body {
    padding: 10px;
    height: 100%;
}

/* Main Page Headers (Terraria Gold Style) */
.mp-box h2 {
    background-color: var(--mainbox-header-bg);
    color: var(--mainbox-header-text);
    margin: 0;
    padding: 8px;
    font-size: 1.25em;
    text-align: center;
    border-bottom: 1px solid var(--mainbox-header-border);
    font-family: var(--wiki-font-family-heading);
    font-weight: bold;
}

/* --- CardGrid / Navbox (From your code) --- */
.card-navbox-container {
    background: var(--wiki-content-background-color--secondary);
    border: 1px solid var(--wiki-content-border-color);
    border-radius: 8px;
    padding: 15px;
    margin: 1em 0;
}
.card-navbox-title {
    background: var(--mainbox-header-bg);
    color: var(--mainbox-header-text);
    padding: 8px;
    text-align: center;
    font-weight: bold;
    border-radius: 4px;
}

/* --- Inline Icons (.iconname) --- */
.iconname {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.iconname img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated; /* Essential for pixel art */
}

/* --- Portable Infobox --- */
.portable-infobox {
    border: 1px solid var(--wiki-content-border-color);
    background: var(--wiki-content-background-color);
    border-radius: 8px;
    margin-bottom: 1em;
}
.portable-infobox .pi-title {
    background: var(--mainbox-header-bg);
    color: var(--mainbox-header-text);
    font-family: var(--wiki-font-family-heading);
    font-weight: bold;
    border-radius: 7px 7px 0 0;
    padding: 10px;
}
.portable-infobox .pi-data-label {
    background: var(--wiki-content-background-color--secondary);
    font-weight: bold;
}

/* --- Responsive Layouts --- */
@media screen and (max-width: 1350px) {
    #mp-container {
        grid-template-areas: var(--main-page-layout--tablet);
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 990px) {
    #mp-container {
        display: flex;
        flex-direction: column;
    }
    .grid { display: flex; flex-direction: column; }
}

/* =======================================================================
   6. THE "NUCLEAR OPTION" FOR FONTS
   This overrides the `load.php` setting: *,body{font-family:Fredoka...}
   ======================================================================= */
/* 1. Reset Global Font */
html, body, .mw-body, #content {
    font-family: Helvetica, Arial, sans-serif !important;
}

/* 2. Reset Headings to Verdana */
h1, h2, h3, h4, h5, h6, .mw-headline, .firstHeading {
    font-family: Verdana, Helvetica, Arial, sans-serif !important;
    font-weight: normal !important;
}

/* 3. Force Monospace for Code */
pre, code, .mw-code {
    font-family: monospace, monospace !important;
    font-size: 13px !important;
}

/* 4. Kill Fredoka on everything else */
* {
    font-family: inherit; /* Forces elements to listen to body/parent instead of load.php */
}
Retrieved from "https://mbwiki.stairwaygames.work/w/index.php?title=MediaWiki:Common.css&oldid=27491"