MediaWiki:Common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
.class { }/* needed for some reason for the @imports to work */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap');
/* Imports caching */
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Colors.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Module:Documentation.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Documentation.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Infobox.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Tables.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:MessageBox.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:CustomTabs.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Navbox.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Icons.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Dialogue.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Cards.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Tabbers.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Mobile.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Recipe.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:Modal.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:AceEditor.css&action=raw&ctype=text/css");
@import url("https://coralwiki.stairwaygames.com/w/index.php?title=MediaWiki:CodeMirror.css&action=raw&ctype=text/css");
/* CSS placed here will be applied to all skins */
/******************************************************************************************
********************************* Start user-edit variables *******************************
******************************************************************************************/
/*****************************************
****** START BASIC DESIGN VARIABLES ******
----------------------------------------*/
:root {
--wiki-sidebar-heading-font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
--wiki-body-font-family: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
--wiki-content-firstheading-font-family: 'Bebas Neue', 'Montserrat', sans-serif;
--wiki-content-border-radius: 2px;
--wiki-sidebar-border-radius: 4px;
}
/*----------------------------------------
******* END BASIC DESIGN VARIABLES *******
*****************************************/
/*****************************************
****** START BASIC COLOR VARIABLES *******
----------------------------------------*/
:root,
/* Begin light styles, delete from here to "end light styles" if you don't want your wiki to support any light themes (remove from [[Mediawiki:Theme-definitions]] too, or ask wiki.gg staff for help doing this) */
/* FYI: .view- will affect any theme marked |kind=light, */
/* individual themes are prefixed with .theme- instead */
.view-light {
/**********************
* Probably edit these * [ LIGHT VIEW ]
***********************/
--wiki-body-background-color: #F8F4E9 ;
--wiki-body-background-image: url(filepath://FGS-Wiki-background-light.png);
--wiki-content-background-color: #FDFDF8;
--wiki-content-background-opacity: 95%;
--wiki-content-border-color: #D4C9B8;
--wiki-content-link-color: #8B5A3C;
/* [ LIGHT VIEW ] */
--wiki-accent-color: #4A6B2F;
--wiki-accent-label-color: #ffffff;
--wiki-accent-link-color: #3A2619;
--wiki-icon-to-link-filter: invert(20%) sepia(93%) saturate(2141%) hue-rotate(210deg) brightness(83%) contrast(103%); /* put your --wiki-content-link-color into https://mrpie5.gitlab.io/css-filter-generator/ */
/**/
/**********************
* Mainbox Header Colors - Light Theme *
***********************/
--mainbox-header-bg: #2E5C3A;
--mainbox-header-text: #FFFFFF;
--mainbox-header-border: #1E3A27;
}
/* end light styles */
/* Begin dark styles, delete from here to "end dark styles" if you don't want your wiki to support any dark themes (remove it from [[Mediawiki:Theme-definitions]] too, or ask wiki.gg staff for help doing this) */
/* FYI: .view- will affect any theme marked |kind=dark, */
/* individual themes are prefixed with .theme- instead */
.view-dark {
/**********************
* Probably edit these * [ DARK VIEW ]
***********************/
--wiki-body-background-color: #1A120B;
--wiki-body-background-image: url(filepath://FGS-Wiki-background-dark.png);
--wiki-content-background-color: #25180F;
--wiki-content-background-opacity: 95%;
--wiki-content-border-color: #3A2C1F;
--wiki-content-link-color: #D4A76A;
/* [ DARK VIEW ] */
--wiki-accent-color: #9BCF7B;
--wiki-accent-label-color: #1A120B;
--wiki-accent-link-color: #C8B299;
--wiki-icon-to-link-filter: invert(60%) sepia(70%) saturate(3715%) hue-rotate(206deg) brightness(101%) contrast(97%); /* put your --wiki-content-link-color into https://mrpie5.gitlab.io/css-filter-generator/ */
/**/
/**********************
* Mainbox Header Colors - Dark Theme *
***********************/
--mainbox-header-bg: #E14A1C;
--mainbox-header-text: #1A120B;
--mainbox-header-border: #B33715;
}
/* End dark styles */
/*----------------------------------------
******* END BASIC COLOR VARIABLES ********
*****************************************/
/*****************************************
**** START ADVANCED COLOR VARIABLES ******
----------------------------------------*/
:root,
.view-light {
/*******************
* Maybe edit these * [ LIGHT VIEW ]
********************/
--wiki-body-background-position: top center;
--wiki-body-background-size: cover;
--wiki-body-background-repeat: no-repeat;
--wiki-body-background-attachment: fixed;
--wiki-content-background-color--secondary: color-mix(in srgb, var(--wiki-content-background-color) 80%, var(--wiki-content-dynamic-color));
--wiki-content-text-color: #2D2D2D;
--wiki-content-link-color--visited: color-mix(in srgb, var(--wiki-content-link-color) 95%, #734C32);
--wiki-content-link-color--hover: #2E5C3A;
--wiki-content-redlink-color: #A80000;
--wiki-content-heading-color: #1A1A1A;
/* Slightly darker for better hierarchy */
--wiki-content-heading-border-color: var(--wiki-content-border-color);
/* [ LIGHT VIEW ] */
--wiki-navigation-background-color: #3A2619;
--wiki-navigation-border-color: var(--wiki-navigation-selected-border-color);
--wiki-navigation-text-color: #F5F0E6;
--wiki-navigation-selected-background-color: #4A3D32;
--wiki-navigation-selected-border-color: #E14A1C;
--wiki-navigation-selected-text-color: #FFFFFF;
/* [ LIGHT VIEW ] */
--wiki-neutral-color: var(--wiki-content-text-mix-color);
--wiki-alert-color: #A80015;
--wiki-warning-color: #9B542A;
--wiki-success-color: #0A6529;
/**/
/***********************************
* Likely do not need to edit these * [ LIGHT VIEW ]
************************************/
--wiki-body-dynamic-color: #000000;
--wiki-body-dynamic-color--inverted: #ffffff;
--wiki-body-dynamic-color--secondary: #333333;
--wiki-body-dynamic-color--secondary--inverted: #cccccc;
--wiki-content-border-color--secondary: color-mix(in srgb, var(--wiki-content-border-color) 50%, transparent);
--wiki-content-border-color--accent: color-mix(in srgb, var(--wiki-accent-color) 50%, transparent);
--wiki-content-link-label-color: #ffffff;
--wiki-content-dynamic-color: #000000;
--wiki-content-dynamic-color--inverted: #ffffff;
--wiki-content-dynamic-color--secondary: #333333;
--wiki-content-dynamic-color--secondary--inverted: #cccccc;
/* [ LIGHT VIEW ] */
--wiki-alert-label-color: #ffffff;
--wiki-warning-label-color: #ffffff;
--wiki-success-label-color: #ffffff;
--wiki-icon-general-filter: ; /* do not set this to none, ignore the "unexpected token" error */
/**/
}
.view-dark {
/*******************
* Maybe edit these * [ DARK VIEW ]
********************/
--wiki-body-background-position: top center;
--wiki-body-background-size: cover;
--wiki-body-background-repeat: no-repeat;
--wiki-body-background-attachment: fixed;
--wiki-content-background-color--secondary: color-mix(in srgb, var(--wiki-content-background-color) 96%, var(--wiki-content-dynamic-color));
--wiki-content-text-color: #E8E6E1;
--wiki-content-link-color--visited: color-mix(in srgb, var(--wiki-content-link-color) 95%, #B8860B);
--wiki-content-link-color--hover: #FF6B35;
--wiki-content-redlink-color: #FF6B5B;
--wiki-content-heading-color: var(--wiki-content-text-color);
--wiki-content-heading-border-color: var(--wiki-content-border-color);
/* [ DARK VIEW ] */
--wiki-navigation-background-color: #1A120B;
--wiki-navigation-border-color: var(--wiki-navigation-selected-border-color);
--wiki-navigation-text-color: #E8E6E1;
--wiki-navigation-selected-background-color: #2D1F14;
--wiki-navigation-selected-border-color: #FF7B45;
--wiki-navigation-selected-text-color: #FFFFFF;
/* [ DARK VIEW ] */
--wiki-neutral-color: var(--wiki-content-text-mix-color);
--wiki-alert-color: #FF6B7A;
--wiki-warning-color: #E17D35;
--wiki-success-color: #15B845;
/**/
/***********************************
* Likely do not need to edit these * [ DARK VIEW ]
************************************/
--wiki-body-dynamic-color: #ffffff;
--wiki-body-dynamic-color--inverted: #000000;
--wiki-body-dynamic-color--secondary: #cccccc;
--wiki-body-dynamic-color--secondary--inverted: #333333;
--wiki-content-border-color--secondary: color-mix(in srgb, var(--wiki-content-border-color) 50%, transparent);
--wiki-content-border-color--accent: color-mix(in srgb, var(--wiki-accent-color) 50%, transparent);
--wiki-content-link-label-color: #000;
--wiki-content-dynamic-color: #ffffff;
--wiki-content-dynamic-color--inverted: #000000;
--wiki-content-dynamic-color--secondary: #cccccc;
--wiki-content-dynamic-color--secondary--inverted: #333333;
/* [ DARK VIEW ] */
--wiki-alert-label-color: #000000;
--wiki-warning-label-color: #000000;
--wiki-success-label-color: #000000;
--wiki-icon-general-filter: invert(100%);
}
/*----------------------------------------
***** END ADVANCED COLOR VARIABLES *******
*****************************************/
/*****************************************
**** START ADVANCED DESIGN VARIABLES *****
----------------------------------------*/
:root {
/***********************
start logo position
----------------------*/
--wiki-is-top-logo: 0; /* 1 = center logo at the top of the page; 0 = logo at the top left of the page */
--wiki-logo-file-width: 160; /* Width of the image file in px. Put a number without the letters `px`. */
--wiki-logo-file-height: 160; /* Height of the image file in px. Put a number without the letters `px`. */
--wiki-logo-height: calc(var(--wiki-logo-file-height)*1px); /* Valid only when --wiki-is-top-logo is 1. The height the logo should be shown */
--wiki-logo-margin: 15px; /* the width of margin below the logo. When --wiki-is-top-logo is 1, this is also the default value of --wiki-top-spacing */
/*-----------------------
end logo position
***********************/
--wiki-is-navigation-inside-content: 0; /* 0 = default navigation tabs layout; 1 = navigation tabs inside content box */
--wiki-body-font-family: sans-serif;
--wiki-content-firstheading-font-family: var(--wiki-content-heading-font-family); /* only apply to the main title of article */
/****** the following length variables must have units specified even if 0, ignore the warning *****/
--wiki-content-border-width: 1px;
--wiki-sidebar-width: 10em; /* width of sidebar(#mw-panel) */
--wiki-sidebar-portal-spacing: 2px;
--wiki-sidebar-border-width: var(--wiki-content-border-width);
--wiki-navigation-border-radius: 6px; /* border radius of tabs */
/*******************
* Maybe edit these * [ DESIGN ]
********************/
--wiki-logo-filter: none;
/****** the following length variables must have units specified even if 0, ignore the warning *****/
--wiki-content-border-top-radius: var(--wiki-content-border-radius);
--wiki-content-border-style: solid;
--wiki-content-border-image: none;
--wiki-content-backdrop-filter: none;
--wiki-page-content-max-width: 9999px; /* max width of sidebar+gap+content, must be a length value. A huge value can be used to indicate no limit, e.g. 99999px */
--wiki-gap-between-sidebar-and-content: 1em; /* gap between sidebar(#mw-panel) and content(#content) */
--wiki-sidebar-font-size: 0.75em; /* please use em or rem for this */
--wiki-sidebar-line-height: 1.125;
--wiki-sidebar-heading-font-size: 0.75em; /* please use em or rem for this */
--wiki-sidebar-margin: 0em;
--wiki-sidebar-list-item-padding: 0.25em 0.25rem;
--wiki-sidebar-list-padding: 0.25rem;
--wiki-sidebar-list-item-background--hover: none; /* background of hover item */
--wiki-navigation-font-size: 0.8125em; /* please use em or rem for this */
--wiki-navigation-font-weight: normal;
--wiki-navigation-text-transform: none;
--wiki-navigation-height: 2.75rem; /* height of navigation area,include spacing above tabs */
--wiki-navigation-left-spacing: calc( (1 - var(--wiki-is-navigation-inside-content))*var(--wiki-content-border-radius) + var(--wiki-is-navigation-inside-content) * 0.5rem );
--wiki-navigation-right-spacing: calc( var(--wiki-is-navigation-inside-content) * 0.5rem );
--wiki-navigation-box-background-color: var(--wiki-content-background-color);
--wiki-navigation-box-background-opacity: calc(var(--wiki-content-background-opacity)*0.8*var(--wiki-is-navigation-inside-content));
--wiki-navigation-box-background: color-mix(in srgb, var(--wiki-navigation-box-background-color) var(--wiki-navigation-box-background-opacity), transparent); /* usually only needed when --wiki-is-navigation-inside-content is 1 */
--wiki-navigation-box-border-image: none; /* usually only needed when --wiki-is-navigation-inside-content is 1 */
--wiki-navigation-box-backdrop-filter: none; /* usually only needed when --wiki-is-navigation-inside-content is 1 */
--wiki-navigation-selected-backdrop-filter: var(--wiki-content-backdrop-filter); /* usually only needed when --wiki-is-navigation-inside-content is 0 */
--wiki-navigation-backdrop-filter: var(--wiki-navigation-selected-backdrop-filter); /* usually only needed when --wiki-is-navigation-inside-content is 0 */
/* nav tabs style. The vector gradient is default.
* If you want to customize the style of tabs, it's easier to start with the following settings:
* --wiki-navigation-background-image: none;
* --wiki-navigation-selected-background-image: none;
* --wiki-navigation-selected-border-width: calc( (1 - var(--wiki-is-navigation-inside-content))*var(--wiki-content-border-width) + var(--wiki-is-navigation-inside-content) * 1px );
* --wiki-navigation-selected-border-bottom-background: none;
* --wiki-navigation-tab-spacing: 0.25em;
* --wiki-navigation-tab-padding-top: 0.5em;
* --wiki-navigation-tab-padding-bottom: 0.5em;
*/
--wiki-navigation-tab-spacing: -1px; /* width of the space between tabs, can be a negative number, in which case adjacent tabs will overlap */
--wiki-navigation-tab-padding-top: 1.25em;
--wiki-navigation-tab-padding-x: 0.75em;
--wiki-navigation-tab-padding-bottom: 4px;
--wiki-navigation-selected-border-width: 0px; /* border width of selected tabs */
--wiki-navigation-border-width: var(--wiki-navigation-selected-border-width); /* border width of normal tabs */
--wiki-navigation-border-image: none;
--wiki-navigation-selected-border-image: var(--wiki-navigation-border-image);
--wiki-navigation-background-image: linear-gradient(to bottom,transparent 0,var(--wiki-content-border-color) 100%), linear-gradient(to bottom,transparent 0,var(--wiki-content-border-color) 100%), linear-gradient(to top,var(--wiki-navigation-background-color) 0,var(--wiki-navigation-selected-background-color) 100%);
--wiki-navigation-background-repeat: no-repeat, no-repeat, repeat-x;
--wiki-navigation-background-position: left bottom, right bottom, left bottom;
--wiki-navigation-background-size: 1px 100%, 1px 100%, 100%;
--wiki-navigation-selected-background-image: linear-gradient(to bottom,transparent 0,var(--wiki-content-border-color) 100%), linear-gradient(to bottom,transparent 0,var(--wiki-content-border-color) 100%);
--wiki-navigation-selected-background-repeat: no-repeat, no-repeat;
--wiki-navigation-selected-background-position: left bottom, right bottom;
--wiki-navigation-selected-background-size: 1px 100%, 1px 100%;
--wiki-navigation-selected-border-bottom-background: linear-gradient(to right, var(--wiki-content-border-color) 0, var(--wiki-content-border-color) 1px, transparent 1px), linear-gradient(to left, var(--wiki-content-border-color) 0, var(--wiki-content-border-color) 1px, transparent 1px);
/* affects the dropdown menu under More */
--wiki-navigation-dropdown-text-color: var(--wiki-navigation-text-color);
--wiki-navigation-dropdown-text-color--hover: var(--wiki-navigation-dropdown-text-color);
--wiki-navigation-dropdown-font-size: var(--wiki-navigation-font-size); /* please use em or rem for this */
--wiki-navigation-dropdown-border-width: 1px;
--wiki-navigation-dropdown-border-radius: var(--wiki-navigation-border-radius);
--wiki-navigation-dropdown-padding: 0.25em; /* padding of the dropdown menu box */
--wiki-navigation-dropdown-item-padding: 0.625em; /* padding of each dropdown menu items */
--wiki-navigation-dropdown-item-background--hover: none; /* background of hover item */
--wiki-navigation-dropdown-border-image: none;
--wiki-navigation-dropdown-backdrop-filter: none;
--wiki-navigation-dropdown-box-shadow: none; /* box shadow */
/* styles of the footer */
--wiki-spacing-before-footer: 0px;
--wiki-footer-border-image: none;
/* padding on body element */
--wiki-top-spacing: calc(var(--wiki-is-top-logo)*var(--wiki-logo-margin) + (1 - var(--wiki-is-top-logo))*1em); /* extra spacing below wiki.gg netbar */
--wiki-left-spacing: 1em;
--wiki-right-spacing: 1em;
--wiki-bottom-spacing: 2em;
/* end design variables */
}
/*----------------------------------------
***** END ADVANCED DESIGN VARIABLES ******
*****************************************/
/*******************************
**** START SHARED VARIABLES ****
**** tl;dr: don't edit this ****
********************************/
/*
These variables are rarely touched, usually inherit other variables, and are shared on all themes.
In 99% of cases none of these are ever edited, and you should only be doing so if you have a very clear vision,
understand what you are doing, and *know* that what you are trying to do is not accomplished by changing
another variable in the above sections.
Since these are by default shared across all themes, if you support multiple themes you'll probably want to
separate the variables you want to modify here into .view-x blocks like above. If you don't understand
what that means or how to do that then you probably shouldn't be modifying this section.
*/
:root {
--wiki-content-border-bottom-width: var(--wiki-content-border-width);
--wiki-content-border-bottom-style: var(--wiki-content-border-style);
--wiki-content-border-bottom-color: var(--wiki-content-border-color);
--wiki-content-text-mix-color: color-mix(in srgb, var(--wiki-content-background-color), var(--wiki-content-text-color) 62%);
--wiki-content-text-mix-color-95: color-mix(in srgb, var(--wiki-content-background-color) 95%, var(--wiki-content-text-color));
--wiki-content-text-color--hover: var(--wiki-content-text-color);
/* heading */
--wiki-content-heading-border-bottom-width: 1px;
--wiki-content-heading-border-style: solid;
--wiki-content-heading-font-weight: bold;
--wiki-content-heading-font-style: normal;
--wiki-content-heading-text-transform: none;
--wiki-content-heading-line-height: normal;
--wiki-content-heading-text-shadow: none;
/* first heading (h1) */
--wiki-content-firstheading-border-bottom-width: var(--wiki-content-heading-border-bottom-width);
--wiki-content-firstheading-border-style: var(--wiki-content-heading-border-style);
--wiki-content-firstheading-border-color: var(--wiki-content-heading-border-color);
--wiki-content-firstheading-font-weight: var(--wiki-content-heading-font-weight);
--wiki-content-firstheading-font-style: var(--wiki-content-heading-font-style);
--wiki-content-firstheading-text-transform: var(--wiki-content-heading-text-transform);
--wiki-content-firstheading-line-height: var(--wiki-content-heading-line-height);
--wiki-content-firstheading-color: var(--wiki-content-heading-color);
--wiki-content-firstheading-text-shadow: none;
/* sub-heading (h3, h4, h5, h6) */
--wiki-content-subheading-border-bottom-width: 0px;
--wiki-content-subheading-border-style: var(--wiki-content-heading-border-style);
--wiki-content-subheading-border-color: var(--wiki-content-heading-border-color);
--wiki-content-subheading-font-family: var(--wiki-body-font-family);
--wiki-content-subheading-font-weight: bold;
--wiki-content-subheading-font-style: normal;
--wiki-content-subheading-text-transform: none;
--wiki-content-subheading-line-height: var(--wiki-content-heading-line-height);
--wiki-content-subheading-color: var(--wiki-content-heading-color);
--wiki-content-subheading-text-shadow: none;
/* heading size */
--wiki-content-firstheading-font-size: 1.8em;
--wiki-content-heading-h2-font-size: 1.5em;
--wiki-content-heading-h3-font-size: 1.2em;
--wiki-content-heading-h4-font-size: 114%;
--wiki-content-heading-h5-font-size: 108%;
--wiki-content-heading-h6-font-size: 100%;
--wiki-content-toc-background: var(--wiki-content-background-color--secondary);
--wiki-content-toc-border-width: 1px;
--wiki-content-toc-border-style: solid;
--wiki-content-toc-border-color: var(--wiki-content-border-color);
--wiki-content-toc-border-radius: 0px;
--wiki-content-toc-border-image: none;
--wiki-content-toc-box-shadow: 0 0.1em 0.2em #000000;
--wiki-content-catlinks-background: var(--wiki-content-background-color--secondary);
--wiki-content-catlinks-border-width: 1px;
--wiki-content-catlinks-border-style: solid;
--wiki-content-catlinks-border-color: var(--wiki-content-border-color);
--wiki-content-catlinks-border-radius: 0px;
--wiki-content-catlinks-border-image: none;
--wiki-content-catlinks-box-shadow: none;
--wiki-content-filetoc-background: var(--wiki-content-background-color--secondary);
--wiki-content-filetoc-border-width: 1px;
--wiki-content-filetoc-border-style: solid;
--wiki-content-filetoc-border-color: var(--wiki-content-border-color);
--wiki-content-filetoc-border-radius: 0px;
--wiki-content-filetoc-border-image: none;
--wiki-content-filetoc-box-shadow: none;
--wiki-logo-offset-x: 0px;
--wiki-logo-offset-y: 0px;
--wiki-sidebar-padding: 0px;
--wiki-sidebar-background-color: var(--wiki-content-background-color);
--wiki-sidebar-background-opacity: var(--wiki-content-background-opacity);
--wiki-sidebar-background-image: none;
--wiki-sidebar-background-position: center;
--wiki-sidebar-background-repeat: repeat;
--wiki-sidebar-background-size: auto;
--wiki-sidebar-box-shadow: none;
--wiki-sidebar-filter: none;
--wiki-sidebar-backdrop-filter: var(--wiki-content-backdrop-filter);
--wiki-sidebar-border-color: var(--wiki-content-border-color);
--wiki-sidebar-border-style: solid;
--wiki-sidebar-border-image: none;
--wiki-sidebar-link-color: var(--wiki-content-link-color);
--wiki-sidebar-link-color--hover: var(--wiki-content-link-color--hover);
--wiki-sidebar-heading-color: var(--wiki-content-heading-color);
--wiki-sidebar-heading-font-weight: normal;
--wiki-sidebar-heading-font-style: normal;
--wiki-sidebar-heading-text-transform: none;
--wiki-sidebar-heading-line-height: normal;
--wiki-sidebar-heading-padding: 0.5rem 0.25rem 0.5rem 0.5rem;
--wiki-sidebar-heading-margin: 0px 0px -0.5rem 0px;
--wiki-sidebar-heading-background: none;
--wiki-sidebar-heading-border-image: none;
--wiki-sidebar-heading-text-shadow: none;
--wiki-sidebar-list-background: none;
--wiki-sidebar-list-border-image: none;
--wiki-sidebar-list-margin: 0px;
--wiki-sidebar-list-item-background: none;
--wiki-sidebar-list-item-border-image: none;
--wiki-sidebar-list-item-background--hover: none;
--wiki-sidebar-list-item-border-image--hover: none;
--wiki-sidebar-list-item-spacing: 0px;
--wiki-sidebar-icon-to-link-filter: var(--wiki-icon-to-link-filter);
--wiki-sidebar-offset: 0px; /* Vertical offset */
--wiki-sidebar-box-padding: 0px;
--wiki-sidebar-box-background: none;
--wiki-sidebar-box-border: 0px;
--wiki-sidebar-box-border-image: none;
--wiki-accent-color--hover: color-mix(in srgb, var(--wiki-accent-color) 90%, var(--wiki-accent-label-color));
--wiki-footer-border-width: var(--wiki-content-border-width);
--wiki-footer-border-style: var(--wiki-content-border-style);
--wiki-footer-border-color: var(--wiki-content-border-color);
--wiki-footer-background-color: var(--wiki-content-background-color);
--wiki-footer-background-opacity: var(--wiki-content-background-opacity);
--wiki-footer-backdrop-filter: var(--wiki-content-backdrop-filter);
--wiki-footer-text-color: var(--wiki-content-text-color);
--wiki-footer-link-color: var(--wiki-content-link-color);
--wiki-footer-link-color--hover: var(--wiki-content-link-color--hover);
--wiki-footer-border-radius: var(--wiki-content-border-radius);
--wiki-navigation-background-opacity: var(--wiki-navigation-selected-background-opacity);
--wiki-navigation-background-color--hover: var(--wiki-navigation-background-color);
--wiki-navigation-background-opacity--hover: var(--wiki-navigation-background-opacity);
--wiki-navigation-background-image--hover: var(--wiki-navigation-background-image);
--wiki-navigation-background-position--hover: var(--wiki-navigation-background-position);
--wiki-navigation-background-repeat--hover: var(--wiki-navigation-background-repeat);
--wiki-navigation-background-size--hover: var(--wiki-navigation-background-size);
--wiki-navigation-text-color--hover: var(--wiki-content-link-color--hover);
--wiki-navigation-transform--hover: none;
--wiki-navigation-selected-border-style: solid;
--wiki-navigation-selected-background-opacity: var(--wiki-content-background-opacity);
--wiki-navigation-border-style: solid;
--wiki-navigation-border-color--hover: var(--wiki-navigation-border-color);
--wiki-navigation-border-image--hover: var(--wiki-navigation-border-image);
--wiki-navigation-border-bottom-color: var(--wiki-navigation-selected-border-color);
--wiki-navigation-border-bottom-style: var(--wiki-navigation-selected-border-style);
--wiki-navigation-border-bottom-width: calc(var(--wiki-is-navigation-inside-content, 0) * var(--wiki-navigation-selected-border-width, 1px) + (1 - var(--wiki-is-navigation-inside-content, 0)) * var(--wiki-content-border-width, 1px));
--wiki-navigation-icon-size: 1em;
--wiki-navigation-tab-padding-x--icon: var(--wiki-navigation-tab-padding-x);
--wiki-navigation-bottom-spacing: 0px; /* If you change this to greater than 0px, you should usually change the value of --wiki-navigation-selected-border-bottom-background to var(--wiki-navigation-border-bottom-color) */
--wiki-navigation-dropdown-background-color: var(--wiki-content-background-color);
--wiki-navigation-dropdown-background-opacity: var(--wiki-content-background-opacity);
--wiki-navigation-dropdown-border-color: var(--wiki-navigation-border-color);
--wiki-navigation-dropdown-offset: 0px; /* vertical offset */
--wiki-navigation-search-background-color: var(--wiki-content-background-color--secondary);
--wiki-navigation-search-background-image: none;
--wiki-navigation-search-background-position: 0;
--wiki-navigation-search-background-size: auto;
--wiki-navigation-search-background-repeat: repeat;
--wiki-navigation-search-backdrop-filter: none;
--wiki-navigation-search-border-color: var(--wiki-navigation-border-color);
--wiki-navigation-search-border-color--hover: var(--wiki-accent-color);
--wiki-navigation-search-border-style: solid;
--wiki-navigation-search-border-width: 1px;
--wiki-navigation-search-border-radius: 4px;
--wiki-navigation-search-border-image: none;
--wiki-navigation-search-border-image--hover: var(--wiki-navigation-search-border-image);
--wiki-navigation-search-box-shadow: none;
--wiki-navigation-search-box-shadow--hover: var(--wiki-navigation-search-box-shadow);
--wiki-navigation-search-text-color: var(--wiki-content-text-color);
--wiki-navigation-search-font-size: var(--wiki-navigation-font-size);
--wiki-navigation-search-height: 2em;
--wiki-navigation-search-button-color: currentColor;
--wiki-navigation-search-button-color--hover: var(--wiki-navigation-search-button-color);
--wiki-navigation-search-button-color-opacity: 80%;
--wiki-navigation-search-button-color-opacity--hover: 95%;
--wiki-navigation-search-bottom-spacing: 3px;
--wiki-navigation-search-highlight-background-color: color-mix(in srgb, var(--wiki-accent-color) 5%, transparent);
--wiki-navigation-gap-between-left-and-right: calc(max(0px, var(--wiki-navigation-tab-spacing))); /* minimum width between #left-navigation and #right-navigation before tabs start to collapse */
}
/*** mobile adjustments ***/
@media screen and (max-width: 720px) {
body.has-vector-mobile-menu{
--wiki-sidebar-offset: 0px; /* Vertical offset */
--wiki-sidebar-margin: 0px;
--wiki-sidebar-heading-background: none;
--wiki-sidebar-heading-border-image: none;
--wiki-sidebar-heading-margin: 0px 0px -0.5em 0px;
--wiki-sidebar-list-margin: 0px;
--wiki-sidebar-list-background: none;
--wiki-sidebar-list-border-image: none;
--wiki-sidebar-list-item-background: none;
--wiki-sidebar-list-item-border-image: none;
--wiki-sidebar-list-item-background--hover: none;
--wiki-sidebar-list-item-border-image--hover: none;
--wiki-sidebar-list-item-spacing: 0px;
--wiki-sidebar-line-height: 1.125;
--wiki-sidebar-background-opacity: 100%;
--wiki-navigation-search-border-width: 1px;
--wiki-logo-offset-x: 0px;
--wiki-logo-offset-y: 0px;
}
}
/*****************************
**** END SHARED VARIABLES ****
******************************/
/******************************************************************************************
********************************* End user-edit variables *********************************
******************************************************************************************/
/******************************
* Fallback for older browsers *
* DONT EDIT THIS *
*******************************/
@supports not (color:color-mix(in srgb, #000, transparent)) {
.view-dark,
.view-light,
:root {
--wiki-content-text-mix-color: var(--wiki-content-text-color);
--wiki-content-text-mix-color-95: var(--wiki-content-background-color);
--wiki-content-background-color--secondary: var(--wiki-content-dynamic-color--secondary--inverted);
--wiki-content-border-color--secondary: var(--wiki-content-border-color);
--wiki-content-border-color--accent: var(--wiki-accent-color);
--wiki-accent-color--hover: var(--wiki-accent-color);
--wiki-navigation-search-highlight-background-color: transparent;
}
}
/*****************************
* End older browser fallback *
******************************/
/*****************************
* PortableInfoboxes *
******************************/
:root {
--pi-background: var(--wiki-content-background-color);
--pi-secondary-background: var(--wiki-accent-color);
--pi-secondary-background-label: var(--wiki-accent-label-color);
--pi-border-color: color-mix(in srgb, var(--pi-secondary-background) 50%, transparent);
}
.portable-infobox .pi-title,
.portable-infobox .pi-header {
text-align: center;
font-size: 2em;
background: color-mix(in srgb, var(--pi-secondary-background) 75%, transparent);
color: var(--pi-secondary-background-label);
}
.portable-infobox .pi-data,
.portable-infobox .pi-group {
background: var(--wiki-content-background-color--secondary);
}
.portable-infobox .pi-image {
padding: 8px;
}
.pi-image-thumbnail {
max-width: 100%;
}
.pi-image img {
width: 128px;
height: 141px;
display: block;
margin: 0 auto;
}
.pi-caption {
color: var(--wiki-content-text-mix-color);
}
.pi-section-navigation .pi-section-tab.pi-section-active,
.pi-section-navigation .pi-section-tab.current,
.pi-media-collection .pi-tab-link.current {
background: var(--pi-secondary-background);
color: var(--pi-secondary-background-label);
}
.pi-collapse > .pi-item:first-child {
cursor: pointer;
}
/* overqualify these to overwrite normal content heading styles */
.mw-body .portable-infobox h2,
.mw-body .portable-infobox h3 {
border-bottom: 0;
font-family: inherit;
font-weight: 700;
margin: 0;
}
/* Portable Infobox Style */
.infobox-right,
.infobox-enemy {
float: right;
clear: right;
width: 300px;
max-width: 100%;
margin: 0 0 1em 1em;
display: block;
background: var(--body-light);
border: 1px solid var(--body-border);
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
word-break: break-word;
}
.infobox-right .pi-title,
.infobox-enemy .pi-title {
text-align: center;
font-size: 2em;
background: color-mix(
in srgb,
var(--pi-secondary-background) 75%,
transparent
);
color: var(--pi-secondary-background-label);
padding: 12px;
margin: 0;
border-radius: 5px 5px 0 0;
}
.infobox-right .pi-data,
.infobox-enemy .pi-data {
background: var(--wiki-content-background-color--secondary);
padding: 10px 15px;
}
.infobox-right .pi-data:nth-child(even),
.infobox-enemy .pi-data:nth-child(even) {
background: var(--pi-background);
}
@media (max-width: 768px) {
.infobox-right,
.infobox-enemy {
float: none;
margin: 1em auto;
width: 90%;
max-width: 300px;
}
}
/*****************************
* End PortableInfoboxes *
******************************/
/*******************
* Main page layout *
********************/
.banner-links a {
color: #FFFFFF !important;
text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
font-weight: 600 !important;
}
#mp-container {
display: grid;
gap: 10px;
clear:both; /* for .mw-indicators combined with NOTITLE */
}
@media screen and (max-width: 990px) {
/* for mobile screens */
#mp-container {
grid-template-areas:var(--main-page-layout--mobile);
grid-template-columns:var(--main-page-layout-columns--mobile, 100%);
}
.mp-box.mp-hide-on-mobile {
display: none;
}
}
@media screen and (min-width: 990px) and (max-width: 1350px) {
/* for narrow screens, between 990px and 1350px */
#mp-container {
grid-template-areas:var(--main-page-layout--tablet);
grid-template-columns:var(--main-page-layout-columns--tablet, 1fr 1fr);
}
.mp-box.mp-hide-on-tablet {
display: none;
}
}
@media screen and (min-width: 1350px) {
/* for all other screens, 1350px and wider */
#mp-container {
grid-template-areas:var(--main-page-layout--desktop);
grid-template-columns:var(--main-page-layout-columns--desktop, 2fr 1fr 2fr);
}
.mp-box.mp-hide-on-desktop {
display: none;
}
}
.mp-box {
position: relative;
display: flex;
flex-flow: column nowrap;
width: 100%;
box-sizing: border-box;
background: color-mix(in srgb, var(--wiki-content-background-color--secondary) 25%, transparent);
border: 0px solid var(--wiki-content-border-color);
border-radius: 8px;
overflow: hidden;
padding: 0px;
}
.mp-body {
height: 100%;
display: flex;
padding: 0.5em;
flex-flow: column nowrap;
}
.mp-box.centered-content .mp-body {
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
.mp-box.has-floating-image {
display: block;
}
.mp-box.has-floating-image .mp-body {
height: unset;
display: block;
}
.mp-box.header-only {
border-bottom-width:0px;
}
.mp-box.header-only .mp-body {
display:none;
}
.mp-box.missing .mw-inputbox-input {
/* max-width doesn't override the input element's 'size' property, but that property does work as a max-width itself, so we can set width:100% for the same effect */
width:100% !important;
}
/* overqualified to override normal heading styles */
.mw-body .mp-box h2 {
text-align: center;
font-weight: bold;
font-family: var(--wiki-content-heading-font-family);
overflow: initial;
border: 1px solid #F15A22;
border-radius: 2px;
font-size: 150%;
margin: 0.5em auto 0 auto;
padding: 12px 20px;
color: var(--wiki-content-heading-color);
background: var(--wiki-content-background-color);
box-shadow:
0 0 10px rgba(241, 90, 34, 0.3), /*glow*/
0 0 20px rgba(241, 90, 34, 0.2), /*glow*/
0 0 30px rgba(241, 90, 34, 0.1); /*glow*/
display: inline-block;
width: fit-content;
max-width: 100%;
justify-content: center;
}
#mp-box-welcome {
text-align: center;
position: relative;
overflow: hidden;
}
#mp-box-welcome h2 {
font-size: 200%;
}
#mp-welcome {
display: flex;
flex-flow: column nowrap;
position: relative;
height: 100%;
z-index: 2;
box-sizing: border-box;
}
#mp-welcome .welcome-subtitle {
background: rgba(26, 18, 11, 0.6);
backdrop-filter: blur(2px);
padding: 0.5em 1em;
border-radius: 6px;
display: inline-block;
}
#mp-welcome p[style*="color:#FFFFFF"] {
text-shadow: 2px 2px 8px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6) !important;
}
#mp-banner {
position: absolute;
width: 100%;
height: 100%;
filter: blur(0px);
z-index: -1;
background: url(filepath://Funguys_Swarm_Banner.png) top center/cover no-repeat;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
.view-dark #mp-banner {
filter: blur(0px) brightness(65%) contrast(120%);
}
.view-light #mp-banner {
filter: blur(0px) brightness(90%) contrast(120%);
}
/*Edit for template FGS wiki*/
/* Notes Styling */
.notes-container {
display: inline-block;
background: none;
border-left: 4px solid #36c;
padding: 4px 8px;
margin: 0 0 10px 0;
font-style: italic;
font-size: 0.95em;
width: auto;
max-width: 100%;
box-sizing: border-box;
vertical-align: middle;
}
/* Quotes Styling */
.quotes-box {
border: 1px solid #434242;
border-left: 8px solid #eab759 !important;
border-radius: 2px;
padding: 15px;
margin: 1em 0 1.5em;
font-family: serif;
font-size: 1em;
width: 50%;
max-width: 450px;
line-height: 1.5em;
background: rgba(255, 255, 255, 0.05);
margin-left: 200px;
display: flex;
flex-direction: row;
}
.quotes-box blockquote {
margin: 0;
font-style: italic;
text-align: center;
}
.quotes-box blockquote {
margin: 0;
font-style: italic;
}
/* Wrap Content */
.content-wrapper {
vertical-align: top;
align-items: flex-start;
}
.content-wrapper::after {
content: "";
display: table;
clear: both;
}
/* Contents Left */
.contents-left {
float: left;
width: 65%;
margin-right: 5%;
margin-bottom: 20px;
}
/* Mainbox Styling V001*/
/* Global Main Box ItemList Style Settings */
.mainbox-itemlist {
margin-bottom: 0;
height: 100%;
}
.mainbox-header {
padding: 12px;
font-weight: bold;
text-align: center;
border: 1px solid var(--mainbox-header-border, #A0522D);
background-color: var(--mainbox-header-bg, #8B4513);
color: var(--mainbox-header-text, #FFFFFF);
margin-bottom: 1px;
}
.mainbox-links {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
border: 1px solid #A0522D;
height: calc(100% - 50px);
}
.mainbox-link {
padding: 6px;
text-align: center;
border: none;
color: var(--wiki-content-link-color);
}
.mainbox-link:hover {
background-color: color-mix(in srgb, var(--wiki-content-link-color--hover) 15%, transparent);
color: var(--wiki-content-link-color--hover);
border-left: 3px solid var(--wiki-content-link-color--hover);
padding-left: 8px;
transform: translateX(2px);
font-weight: 600;
}
.mainbox-grid-layout {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
width: 100%;
}
.mainbox-grid-layout > .mainbox-itemlist {
display: flex;
flex-direction: column;
}
.mainbox-links-horizontal {
border: 1px solid #8B4513;
padding: 8px;
text-align: center;
}
.mainbox-links-horizontal .mainbox-link {
display: inline-block;
padding: 8px 12px;
text-align: center;
border: none;
margin: 4px;
color: var(--wiki-content-link-color);
}
.mainbox-links-horizontal .mainbox-link:hover {
background-color: color-mix(in srgb, var(--wiki-content-link-color--hover) 15%, transparent);
color: var(--wiki-content-link-color--hover);
border-left: 3px solid var(--wiki-content-link-color--hover);
padding-left: 8px;
transform: translateX(2px);
font-weight: 600;
}
/* Regular content links burning effect */
.mw-body a:not(.new) {
transition: color 0.3s ease, text-shadow 0.3s ease;
}
.mw-body a:not(.new):hover {
color: var(--wiki-content-link-color--hover);
text-shadow: 0 0 6px color-mix(in srgb, var(--wiki-content-link-color--hover) 40%, transparent);
}
/* End of Mainbox Styling*/
/* === CARDGRID MODULE STYLES === */
/* These styles are for the CardGrid module */
.cardgrid-container {
background: var(--wiki-content-background-color--secondary);
border: 1px solid var(--wiki-content-border-color);
border-radius: 8px;
padding: 25px;
margin: 2em 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.cardgrid-header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 3px solid var(--wiki-accent-color);
}
.cardgrid-header h2 {
color: var(--wiki-content-heading-color);
margin: 0 0 10px 0;
font-size: 2em;
font-weight: 700;
}
.cardgrid-subtitle {
color: var(--wiki-content-text-color);
font-size: 1.1em;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}
/* === GRID LAYOUT - THIS IS CRITICAL === */
.cardgrid-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 25px !important;
width: 100% !important;
}
@media (max-width: 1200px) {
.cardgrid-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
.cardgrid-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
}
/* Section headers */
.cardgrid-section {
grid-column: 1 / -1;
margin: 40px 0 20px 0;
padding-bottom: 15px;
border-bottom: 2px solid var(--wiki-accent-color);
}
.cardgrid-section:first-child {
margin-top: 0;
}
.cardgrid-section h3 {
color: var(--wiki-content-heading-color);
margin: 0;
font-size: 1.5em;
font-weight: 600;
}
/* Individual cards */
.cardgrid-card {
background: var(--wiki-content-background-color);
border: 1px solid var(--wiki-content-border-color--secondary);
border-radius: 10px;
padding: 20px;
border-left: 6px solid;
min-height: 320px;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cardgrid-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.cardgrid-card-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.cardgrid-icon {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cardgrid-icon-inner {
width: 60px;
height: 60px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.cardgrid-title {
margin: 0;
font-size: 1.3em;
font-weight: 700;
line-height: 1.3;
flex-grow: 1;
}
.cardgrid-content {
flex-grow: 1;
margin-bottom: 15px;
color: var(--wiki-content-text-color);
line-height: 1.6;
font-size: 0.95em;
}
.cardgrid-content b {
font-weight: 700;
}
.cardgrid-footer {
margin-top: auto;
padding-top: 15px;
border-top: 1px solid var(--wiki-content-border-color--secondary);
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
/* Strategy section */
.cardgrid-strategy {
background: rgba(var(--wiki-accent-color-rgb), 0.05);
border-radius: 10px;
padding: 25px;
margin-top: 40px;
border-left: 5px solid var(--wiki-accent-color);
}
.cardgrid-strategy h4 {
color: var(--wiki-content-heading-color);
margin: 0 0 15px 0;
font-size: 1.3em;
display: flex;
align-items: center;
gap: 10px;
}
.cardgrid-strategy ul {
margin: 0;
padding-left: 20px;
list-style-type: none;
}
.cardgrid-strategy li {
margin-bottom: 8px;
padding-left: 10px;
position: relative;
}
.cardgrid-strategy li:before {
content: "•";
color: var(--wiki-accent-color);
position: absolute;
left: 0;
font-size: 1.2em;
}
/* In-Game Gallery */
.game-gallery {
margin: 1.5em 0;
padding: 1.5em;
background: var(--wiki-content-background-color--secondary);
border: var(--wiki-content-border-width) solid var(--wiki-content-border-color);
border-radius: var(--wiki-content-border-radius);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
backdrop-filter: var(--wiki-content-backdrop-filter);
}
.game-gallery-standard {
}
.game-gallery-compact {
padding: 1em;
}
.game-gallery-compact .image-gallery {
gap: 8px;
}
.game-gallery-compact .gallery-item {
margin: 2px;
}
.game-gallery-wide .image-gallery {
justify-content: space-between;
}
.game-gallery-mosaic .image-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.game-gallery-grid .image-gallery {
display: grid;
gap: 12px;
}
.game-gallery-grid[style*="grid-template-columns"] .image-gallery {
display: grid;
gap: 12px;
}
.gallery-header {
margin-bottom: 1.2em;
font-weight: bold;
font-size: 1.4em;
text-align: center;
color: var(--wiki-content-heading-color);
border-bottom: 2px solid var(--wiki-accent-color);
padding-bottom: 0.5em;
font-family: var(--wiki-content-heading-font-family);
}
.image-gallery {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
align-items: flex-start;
}
.gallery-item {
transition: transform 0.2s ease;
border-radius: 4px;
overflow: hidden;
background: var(--wiki-content-background-color);
border: 1px solid var(--wiki-content-border-color--secondary);
}
.gallery-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
border-color: var(--wiki-accent-color);
}
.gallery-caption {
margin-top: 1em;
font-style: italic;
text-align: center;
color: var(--wiki-content-text-mix-color);
font-size: 0.95em;
line-height: 1.4;
padding: 0.5em 1em;
background: color-mix(in srgb, var(--wiki-content-background-color) 85%, transparent);
border-radius: 4px;
border-left: 3px solid var(--wiki-accent-color);
}
.gallery-footer {
margin-top: 1em;
text-align: center;
font-size: 0.85em;
color: var(--wiki-content-text-mix-color);
border-top: 1px solid var(--wiki-content-border-color--secondary);
padding-top: 0.8em;
}
.game-gallery-thumb .game-gallery-item {
transition: all 0.3s ease;
}
.game-gallery-thumb .game-gallery-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
border-color: var(--wiki-accent-color);
}
.gallery-item-image {
transition: transform 0.2s ease;
}
.game-gallery-item:hover .gallery-item-image {
transform: scale(1.02);
}
@media (max-width: 768px) {
.game-gallery {
padding: 1em;
margin: 1em 0;
}
.image-gallery {
gap: 8px;
}
.game-gallery-mosaic .image-gallery,
.game-gallery-grid .image-gallery {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px;
}
.gallery-header {
font-size: 1.2em;
margin-bottom: 1em;
}
}
.view-dark .game-gallery {
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.view-dark .gallery-item:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.view-light .game-gallery {
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.gallery-item img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.game-gallery .infobox-right,
.game-gallery .infobox-enemy {
margin: 0.5em;
}
.game-gallery .mp-box {
margin: 0.5em 0;
}
/* End of game-gallery */
/* FGS-Thumb V001 */
.fgs-thumb {
margin-bottom: var(--layout-gap);
border: 0;
position: relative;
transition: all 0.3s ease;
}
.fgs-thumb * {
box-sizing: content-box;
}
.fgs-thumb .fgs-thumbinner {
border: 1px solid var(--theme-box-border-color);
border-radius: var(--theme-box-border-radius);
background: var(--theme-box-background);
padding: var(--layout-box-padding);
font-size: unset;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
/* Enhanced hover effects */
.fgs-thumb:hover .fgs-thumbinner {
border-color: var(--wiki-accent-color);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
/* Image styling */
.fgs-thumb a.img {
display: block;
transition: transform 0.3s ease;
}
.fgs-thumb:hover a.img {
transform: scale(1.02);
}
.fgs-thumb img {
background: none;
border-color: var(--theme-box-border-color);
border-radius: calc(var(--theme-box-border-radius) - 2px);
}
/* Caption styling */
.fgs-thumb .fgs-caption {
font-size: var(--font-size-s);
line-height: var(--line-height-s);
padding: 0 1px;
margin-top: var(--layout-gap);
border-left: 3px solid transparent;
transition: all 0.3s ease;
position: relative;
}
.fgs-thumb:hover .fgs-caption {
border-left-color: var(--wiki-accent-color);
padding-left: 8px;
}
/* Hide magnify icon */
.fgs-thumb .fgs-caption .magnify:first-child {
display: none;
}
/* Alignment variants */
.fgs-thumb.fgs-tleft {
margin: 0 var(--layout-gap) var(--layout-gap) 0;
float: left;
clear: left;
}
.fgs-thumb.fgs-tright {
margin: 0 0 var(--layout-gap) var(--layout-gap);
float: right;
clear: right;
}
.fgs-thumb.fgs-tcenter {
margin-left: auto;
margin-right: auto;
float: none;
display: table;
}
/* Size variants */
.fgs-thumb.fgs-small .fgs-thumbinner {
max-width: 150px;
}
.fgs-thumb.fgs-medium .fgs-thumbinner {
max-width: 200px;
}
.fgs-thumb.fgs-large .fgs-thumbinner {
max-width: 300px;
}
.fgs-thumb.fgs-xlarge .fgs-thumbinner {
max-width: 400px;
}
/* Special effects */
.fgs-thumb.fgs-featured .fgs-thumbinner {
border: 2px solid var(--wiki-accent-color);
background: linear-gradient(135deg, var(--theme-box-background) 0%, color-mix(in srgb, var(--wiki-accent-color) 5%, var(--theme-box-background)) 100%);
}
.fgs-thumb.fgs-bordered img {
border: 2px solid var(--theme-box-border-color);
padding: 4px;
}
/* Mobile responsiveness */
@media screen and (max-width: 640px) {
.fgs-thumb.fgs-tright {
margin-left: 0;
float: none;
clear: both;
}
.fgs-thumb.fgs-tleft {
margin-right: 0;
float: none;
clear: both;
}
.fgs-thumb .fgs-thumbinner {
max-width: 100% !important;
}
}
/* Focus state for accessibility */
.fgs-thumb:focus-within .fgs-thumbinner {
outline: 2px solid var(--wiki-accent-color);
outline-offset: 2px;
}
/* --- Core Container --- */
div.variants-container {
width: 60%;
margin-left: 0;
margin-right: auto;
align-items: flex-start;
border: none;
background: none;
box-shadow: none;
padding: 20px 0;
display: flex;
flex-direction: column;
}
/* --- Heading --- */
div.variants-container h4 {
text-align: left;
margin-bottom: 20px;
font-size: 1.4rem;
font-weight: 700;
}
/* --- Variants Grid Layout --- */
div.variants-container .variants-grid {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
/* ============================================================
VARIANT CARD STYLE
============================================================ */
div.variants-container .variant-card {
background: var(--wiki-content-background-color--secondary, #fff);
border: 1px solid var(--pi-border-color, #d0d7de);
border-radius: 2px;
padding: 15px;
text-align: center;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
div.variants-container .variant-card-content {
display: flex;
flex-direction: column;
height: 100%;
}
div.variants-container .variant-image {
margin-bottom: 12px;
}
div.variants-container .variant-image img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: 0;
}
/* --- Variant Card Hover --- */
div.variants-container .variant-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--pi-secondary-background, #36c);
transform: scaleX(0);
transition: transform 0.3s ease;
}
div.variants-container .variant-card:hover::before {
transform: scaleX(1);
}
div.variants-container .variant-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
border-color: var(--pi-secondary-background, #36c);
}
/* --- Typography --- */
div.variants-container .variant-card h5 {
margin: 0 0 8px 0;
font-size: 1.2em;
color: var(--pi-secondary-background, #36c);
line-height: 1.3;
}
div.variants-container .variant-card .variant-meta {
font-size: 0.9em;
color: var(--wiki-content-text-mix-color, #666);
margin: 0 0 8px 0;
font-style: italic;
}
div.variants-container .variant-card .variant-description {
font-size: 0.95em;
margin: 8px 0;
line-height: 1.4;
flex-grow: 1;
}
div.variants-container .variant-card .variant-notes {
font-size: 0.85em;
margin-top: 10px;
padding: 8px;
background: var(--pi-background, #f0f0f0);
border-radius: 2px;
border-left: 3px solid var(--pi-border-color, #a2a9b1);
}
div.variants-container .variant-card .variant-notes strong {
color: var(--pi-secondary-background, #36c);
}
/* Statbox HOVER */
div.variants-container .statbox-variant:hover {
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(189, 58, 40, 0.3);
}
div.variants-container .statbox-variant .variant-notes strong {
color: #ffcc00;
}
.statbox-variant {
transition: all 0.3s ease;
}
.statbox-variant:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(189, 58, 40, 0.3);
}
/* Responsive design */
@media (max-width: 768px) {
.variants-grid {
grid-template-columns: 1fr !important;
}
.statbox-variant table {
font-size: 0.9em;
}
}
@media (max-width: 1024px) {
div.variants-container {
width: 80%;
}
}
@media (max-width: 768px) {
div.variants-container .statbox-variant {
max-width: 95%;
}
div.variants-container .statbox-variant table {
font-size: 0.9em;
}
div.variants-container .statbox-variant td,
div.variants-container .statbox-variant th {
padding: 6px 8px;
}
div.variants-container .statbox-variant .variant-image img {
max-width: 60px;
}
div.variants-container .statbox-variant h5 {
font-size: 1.1em;
}
div.variants-container .variant-card {
padding: 12px;
}
div.variants-container .variant-image img {
max-width: 60px;
}
div.variants-container {
width: 95%;
}
}
/* --- Print Styles --- */
@media print {
div.variants-container .statbox-variant,
div.variants-container .variant-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #000;
transform: none;
}
}
/* Custom Footer */
.custom-footer {
background: #e9ecef;
border-top: 2px solid #6c757d;
padding: 15px;
margin-top: 30px;
font-size: 0.9em;
color: #495057;
}
/* Clear floats */
.infobox-right + *,
.infobox-enemy + *,
.contents-left + * {
clear: both;
}
/* [[Template:MP_link]] */
.mp-links {
--gap: 10px;
}
.mp-links > ul {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin: 2px;
gap: var(--gap);
}
.mp-links > ul > li {
display: flex;
flex-flow: column nowrap;
align-items: stretch;
text-align: center;
box-sizing: border-box;
flex: max(calc(50% - var(--gap)), 5em) 1 1;
outline: 1px solid var(--wiki-content-link-color);
transition: 0.1s ease-in;
}
.mp-links > ul > li:hover {
background-color: color-mix(in srgb, var(--wiki-content-link-color) 20%, transparent);
}
.mp-links.columns-1 > ul > li {flex: max(calc(100% - var(--gap)), 5em) 1 1;}
.mp-links.columns-2 > ul > li {flex: max(calc(50% - var(--gap)), 5em) 1 1;}
.mp-links.columns-3 > ul > li {flex: max(calc((100% / 3) - var(--gap)), 5em) 1 1;}
.mp-links.columns-4 > ul > li {flex: max(calc(25% - var(--gap)), 5em) 1 1;}
.mp-links.columns-5 > ul > li {flex: max(calc(20% - var(--gap)), 5em) 1 1;}
.mp-links.columns-6 > ul > li {flex: max(calc((100% / 6) - var(--gap)), 5em) 1 1;}
.mp-links.columns-7 > ul > li {flex: max(calc((100% / 7) - var(--gap)), 5em) 1 1;}
.mp-links.columns-8 > ul > li {flex: max(calc((100% / 8) - var(--gap)), 5em) 1 1;}
.mp-links.columns-max > ul > li {flex: max(calc(0% - var(--gap)), 5em) 1 1;}
.mp-links > ul > li:hover a {
text-decoration: underline;
}
.mp-links > ul > li > a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
flex: 1 1 auto;
box-sizing: border-box;
padding: 5px;
}
.mp-links > ul > li > a:first-child {
height: 100%;
}
.mp-links > ul > li > a:last-child:not(:first-child) {
height: unset;
}
.mp-links.stretch,
.mp-links.stretch > ul {
height: 100%;
}
.mp-links.side-image li {
flex-flow: row nowrap;
}
.mp-links.plain > ul > li {
outline-color: transparent;
}
/* Card Navbox Styles */
.card-navbox-container {
border-radius: 12px;
margin: 1em 0;
padding: 16px;
box-shadow: 0 4px 6px var(--shadow-color, rgba(74, 124, 89, 0.1));
position: relative;
transition: box-shadow 0.3s ease;
}
.card-navbox-container:hover {
box-shadow: 0 6px 12px var(--shadow-color, rgba(74, 124, 89, 0.15));
}
.card-navbox-container::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 14px;
z-index: -1;
opacity: 0.1;
}
.card-navbox-title {
background: var(--mainbox-header-bg);
color: #FFFFFF;
padding: 12px 16px;
border-radius: 2px;
font-weight: 600;
font-size: 1.2em;
text-align: center;
margin-bottom: 16px;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
border: 1px solid #3a6b4a;
}
.card-section-header {
background: var(--section-header-bg, #f8f9fa);
padding: 12px 16px;
margin: 24px 0 16px 0;
border-radius: 8px;
font-weight: 600;
font-size: 1.1em;
border-left: 6px solid var(--accent-color, #4a7c59);
border-bottom: 1px solid #e9ecef;
}
.card-navbox-item {
padding: 20px;
border-bottom: 1px solid var(--border-light, #e9ecef);
}
.card-navbox-item:last-child {
border-bottom: none;
}
.card-navbox-item:hover .card-container {
transform: translateY(-2px);
}
.card-navbox-item:hover .element-badge {
transform: scale(1.05);
}
.card-container {
display: flex;
gap: 24px;
align-items: flex-start;
transition: transform 0.2s ease;
}
.card-content-left {
flex: 1;
min-width: 0;
}
.card-content-right {
width: 320px;
flex-shrink: 0;
}
.card-icon-section {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.icon-container {
width: 64px;
height: 64px;
border-radius: 8px;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #e9ecef;
transition: all 0.2s ease;
}
.item-header {
margin-bottom: 16px;
}
.item-name {
margin: 0 0 4px 0;
font-size: 1.4em;
font-weight: 700;
word-wrap: break-word;
hyphens: auto;
transition: color 0.2s ease;
}
.item-level {
font-size: 0.95em;
font-weight: 500;
color: #6c757d;
}
.item-info-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 16px;
background: #f8f9fa;
border-radius: 6px;
overflow: hidden;
}
.item-info-table th,
.item-info-table td {
padding: 8px 12px;
text-align: left;
border-bottom: 1px solid #e9ecef;
}
.item-info-table th {
font-weight: 600;
width: 30%;
background: #e9ecef;
}
.item-info-table tr:last-child th,
.item-info-table tr:last-child td {
border-bottom: none;
}
.upgrade-section,
.mutation-section {
margin-bottom: 16px;
}
.upgrade-section h4,
.mutation-section h4 {
margin: 0 0 8px 0;
font-size: 1.1em;
font-weight: 600;
color: #495057;
}
.upgrade-list,
.mutation-list {
margin: 0;
padding-left: 20px;
color: #6c757d;
}
.upgrade-list li,
.mutation-list li {
margin-bottom: 4px;
line-height: 1.4;
}
.card-image-container {
margin-bottom: 16px;
}
.item-card-image {
width: 300px;
height: 400px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.item-card-image img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.item-description {
padding: 12px 16px;
border-radius: 6px;
border-left: 4px solid var(--accent-color, #667eea);
}
.item-description p {
margin: 0;
line-height: 1.5;
font-style: italic;
max-height: 120px;
overflow-y: auto;
padding-right: 8px;
}
.item-description p::-webkit-scrollbar {
width: 4px;
}
.item-description p::-webkit-scrollbar-thumb {
background: var(--accent-color);
border-radius: 2px;
}
/* Element-specific colors - LIGHT THEME */
.card-section-header[data-element="nature"] { border-left-color: #27ae5f; } /* Slightly brighter green */
.card-section-header[data-element="earth"] { border-left-color: #a86437; } /* Warmer, lighter brown */
.card-section-header[data-element="sky"] { border-left-color: #1abc9c; } /* Distinct Turquoise */
.card-section-header[data-element="night"] { border-left-color: #34495e; } /* Lighter, less blackish blue */
.card-section-header[data-element="water"] { border-left-color: #3498db; } /* Kept your perfect blue */
.card-section-header[data-element="beast"] { border-left-color: #e67e22; } /* Kept your great orange */
.card-section-header[data-element="fire"] { border-left-color: #e74c3c; } /* Kept your perfect red */
/* Element color definitions - More Pronounced for light theme */
.element-nature { --accent-color: var(--element-color-nature, #81C784); --element-glow: rgba(129, 199, 132, 0.12); }
.element-earth { --accent-color: var(--element-color-earth, #A1887F); --element-glow: rgba(161, 136, 127, 0.1); }
.element-sky { --accent-color: var(--element-color-sky, #FFD54F); --element-glow: rgba(255, 213, 79, 0.15); }
.element-night { --accent-color: var(--element-color-night, #BA68C8); --element-glow: rgba(186, 104, 200, 0.08); }
.element-water { --accent-color: var(--element-color-water, #4FC3F7); --element-glow: rgba(79, 195, 247, 0.15); }
.element-beast { --accent-color: var(--element-color-beast, #FF6B6B); --element-glow: rgba(255, 107, 107, 0.12); }
.element-fire { --accent-color: var(--element-color-fire, #FF8A65); --element-glow: rgba(255, 138, 101, 0.15); }
.element-generic { --accent-color: #7f8c8d; --element-glow: rgba(127, 140, 141, 0.08); }
/* Element badges */
.element-badge {
background: var(--accent-color);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.85em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
transition: transform 0.2s ease;
}
/* Element styling - SUBTLE for light theme */
.element-nature .icon-container,
.element-earth .icon-container,
.element-sky .icon-container,
.element-night .icon-container,
.element-water .icon-container,
.element-beast .icon-container,
.element-fire .icon-container,
.element-generic .icon-container {
border-color: var(--accent-color);
}
.element-nature .item-description,
.element-earth .item-description,
.element-sky .item-description,
.element-night .item-description,
.element-water .item-description,
.element-beast .item-description,
.element-fire .item-description,
.element-generic .item-description {
border-left-color: var(--accent-color);
background: var(--element-glow);
}
.element-nature:hover .item-name,
.element-earth:hover .item-name,
.element-sky:hover .item-name,
.element-night:hover .item-name,
.element-water:hover .item-name,
.element-beast:hover .item-name,
.element-fire:hover .item-name,
.element-generic:hover .item-name {
color: var(--accent-color);
}
.card-navbox-item:hover {
background: var(--element-glow);
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
.card-navbox-container {
--border-color: #3a6b4a;
--card-bg: #1a1f1c;
--shadow-color: rgba(0,0,0,0.4);
}
.card-navbox-title {
--header-bg: linear-gradient(135deg, #3a6b4a 0%, #2d501c 100%);
--header-text: #e8f4ea;
}
.card-section-header {
--section-header-bg: #2d3748;
border-bottom-color: #4a5568;
color: #e2e8f0;
}
.item-level {
color: #a0aec0;
}
.item-info-table {
background: #2d3748;
}
.item-info-table th {
background: #4a5568;
color: #e2e8f0;
}
.item-info-table th,
.item-info-table td {
border-bottom-color: #4a5568;
color: #e2e8f0;
}
.upgrade-section h4,
.mutation-section h4 {
color: #e2e8f0;
}
.upgrade-list,
.mutation-list {
color: #a0aec0;
}
.icon-container {
background: #2d3748;
border-color: #4a5568;
}
.item-card-image {
background: #2d3748;
border-color: #4a5568;
}
.item-description {
background: #2d3748;
}
.item-description p {
color: #a0aec0;
}
/* Dark theme element glows */
.element-nature { --element-glow: rgba(39, 174, 96, 0.1); }
.element-earth { --element-glow: rgba(139, 69, 19, 0.1); }
.element-sky { --element-glow: rgba(52, 152, 219, 0.1); }
.element-night { --element-glow: rgba(44, 62, 80, 0.1); }
.element-water { --element-glow: rgba(41, 128, 185, 0.1); }
.element-beast { --element-glow: rgba(230, 126, 34, 0.1); }
.element-fire { --element-glow: rgba(231, 76, 60, 0.1); }
.element-generic { --element-glow: rgba(149, 165, 166, 0.1); }
}
/* Responsive */
@media (max-width: 768px) {
.card-container {
flex-direction: column;
}
.card-content-right {
width: 100%;
order: -1;
}
.item-card-image {
width: 100%;
height: 300px;
}
.card-navbox-item {
padding: 16px;
}
}
/* Animation */
@keyframes cardEntry {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card-navbox-item {
animation: cardEntry 0.3s ease-out;
}
/* END CardNavbox SETUP */
/***********************
* End main page layout *
************************/
/*********************************************************************************************************************
* Semantically-correct horizontal lists (for Module:Navbox, and they're more machine-readable than {{*}}-formatting) *
**********************************************************************************************************************/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
/*
* don't trust the note that says margin doesn't work with inline
* removing margin: 0 makes dds have margins again
* We also want to reset margin-right in Minerva
*/
margin: 0;
display: inline;
}
/* Display requested top-level lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
/* Display nested lists inline */
.hlist dl dl,
.hlist dl ol,
.hlist dl ul,
.hlist ol dl,
.hlist ol ol,
.hlist ol ul,
.hlist ul dl,
.hlist ul ol,
.hlist ul ul {
display: inline;
}
/* Hide empty list items */
.hlist .mw-empty-li {
display: none;
}
/* TODO: :not() can maybe be used here to remove the later rule. naive test
* seems to work. more testing needed. like so: */
.hlist dt:not(:last-child)::after {
content: ":\20";
}
.hlist dd:not(:last-child)::after,
.hlist li:not(:last-child)::after {
/* "space, Middle Dot, space"
We use unicode numbers instead of the raw characters due to a Firefox encoding bug on unicode characters.
The space is also encoded because raw spaces combined with a unicode number strips the spaces under some conditions such as single-line lists */
/* content: "\20\00B7\20"; font-weight: bold; */
/* "space • space"
There may (and likely) be an extra whitespace between <li>s,
therefore we have to use a space character as last character of this sequence.
By this way, the last space and the next whitespace will collapse as a single space,
to make the whitespace on both sides of the middle dot the same width.
*/
content: "\20\A0\2022\A0\20";
font-weight: inherit;
}
/* Add parentheses around nested lists */
.hlist dd ol::before,
.hlist dd ul::before,
.hlist dd dl::before,
.hlist dt ol::before,
.hlist dt ul::before,
.hlist dt dl::before,
.hlist li ol::before,
.hlist li ul::before,
.hlist li dl::before {
content: "\20(";
font-weight: inherit;
}
.hlist dd ol::after,
.hlist dd ul::after,
.hlist dd dl::after,
.hlist dt ol::after,
.hlist dt ul::after,
.hlist dt dl::after,
.hlist li ol::after,
.hlist li ul::after,
.hlist li dl::after {
content: ")";
font-weight: inherit;
}
/* Put ordinals in front of ordered list items */
.hlist ol {
counter-reset: listitem;
}
.hlist ol > li {
counter-increment: listitem;
}
.hlist ol > li::before {
content: " " counter(listitem) ".\20";
}
/* Progressive enhancement:
* try to make the dot always follow the list item in same line
*/
.hlist :is(li,dt,dd):not(:has(:is(li,dt,dd))) {
display: inline-block;
}
/********************************************
* End semantically-correct horizontal lists *
*********************************************/
/*** Miscellaneous ***/
.responsive-image {
max-width: 100%;
height: auto;
box-sizing: border-box;
}
.view-dark .invert-on-dark,
.view-light .invert-on-light {
filter: invert(100%);
}
.pixelated {
image-rendering: pixelated;
}
@media screen and (min-width: 720px) {
.mobileonly {
display: none;
}
}
@media screen and (max-width: 720px) {
.nomobile {
display: none;
}
}
/*** Utility classes for standard MW galleries ***/
/* it's important that spaced comes before centered in the sheet */
.gallery.gallery.gallery.spaced { /* this selector looks ridiculous but is actually part of stock Vector and therefore a necessary override */
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
margin-left: unset;
}
.gallery.centered {
text-align: center;
}
/**************************
* Start Modular Templates *
**************************/
/********* [[Template:Ambox]] *********/
.ambox {
--ambox-color: var(--wiki-accent-color);
border: 1px solid var(--wiki-content-border-color);
border-left: 10px solid var(--ambox-color);
border-radius: 4px;
display: flex;
align-items: center;
gap: .6em;
margin: 1em 0;
padding: 3px .6em;
background-color: var(--wiki-content-background-color--secondary);
box-shadow: 2px 2px 5px 0px #0002;
}
@media (min-width: 720px) {
.ambox {
margin-inline: 10%;
}
}
.ambox.tiny {
padding: .04rem .5em;
margin-inline: 0;
width: fit-content;
}
.ambox + .ambox {
margin-top: -.6em;
}
.ambox-content {
flex: 1;
}
.ambox-content p {
margin: .15em 0;
}
.ambox-title {
font-weight: bold;
}
/********* [[Template:Hatnote]] *********/
.hatnote {
padding: 1px 0 1px 1.6em;
margin-bottom: 0.5em;
font-style: italic;
border-top: 1px solid var(--wiki-content-border-color--secondary);
border-bottom: 1px solid var(--wiki-content-border-color--secondary);
}
.hatnote.icon {
padding-left: 0;
}
/********* [[Template:Spoiler]] *********/
.spoiler-content {
background-color: color-mix(in srgb, var(--wiki-content-dynamic-color) 50%, transparent);
transition: all 0.3s;
cursor: pointer;
overflow: auto;
}
@supports not (color:color-mix(in srgb, #000, transparent)) {
.spoiler-content {
background-color: var(--wiki-content-dynamic-color--secondary);
}
}
.spoiler-content > * {
pointer-events: none;
opacity: 0;
transition: all 0.3s;
}
.spoiler-content.show {
background-color: transparent;
}
.spoiler-content.show > * {
pointer-events: unset;
opacity: 1;
}
/********* [[Template:Link icon]] *********/
.link-icon {
--link-icon-line-height: 1.5em;
--link-icon-size: 1.5em;
display: inline-flex;
align-items: center;
height: var(--link-icon-line-height);
vertical-align: bottom;
}
.link-icon .regular {
align-self: center;
}
.link-icon .regular a {
display: flex;
}
.link-icon .regular img {
height: var(--link-icon-size);
max-width: var(--link-icon-size);
}
.link-icon .fallback {
outline: 1px solid var(--wiki-content-text-color);
border-radius: 50%;
text-align: center;
width: var(--link-icon-size);
line-height: var(--link-icon-size);
}
.link-icon.notext,
.link-icon.notext .fallback {
display: inline-block;
}
/********* [[Template:Quote]] *********/
.quote {
background: var(--wiki-content-background-color--secondary);
border-radius: 5px;
border: 2px solid var(--wiki-content-border-color);
margin: .5em 0;
padding: .5em;
overflow-y: hidden;
}
.quote .block {
display: block;
}
.quote .title {
font-size: large;
font-weight: bold;
}
.quote .content {
font-style: italic;
}
.quote .author {
font-weight: bold;
text-align: end;
}
.quote .marks-wrapper {
display: flex;
gap: 5px;
}
.quote .marks-wrapper::before,
.quote .marks-wrapper::after {
font-size: 100px;
line-height: 0px;
}
.quote .marks-wrapper::before {
content: "\201C";
margin-top: 40px;
}
.quote .marks-wrapper::after {
content: "\201D";
align-self: end;
margin-bottom: -10px;
}
.client-js .mw-charinsert-item {
display: none;
}
/************************
* End Modular Templates *
*************************/
/*****************************
* Used by [[Template:Color]] *
******************************/
.color__splotch {
display: inline-block;
height: 1em;
width: 1em;
box-sizing: border-box;
vertical-align: text-top;
border-radius: 50%;
border: 1px solid var(--wiki-content-text-color);
}
/*********************
* End Template:Color *
**********************/
/*********************************
* Used by [[Template:TOC limit]] *
**********************************/
.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;
}
/*************************
* End Template:TOC limit *
**************************/
/*********************************
* Used by [[Template:TOC right]] *
**********************************/
@media all and (min-width: 720px) {
.tocright {
float: left;
clear: left;
margin: 0 1em 0.5em 0;
}
}
/*************************
* End Template:TOC right *
**************************/