MédiaWiki:Common.css
/* MediaWiki:Interwiki.css - for favicons and styling relating to interwiki */ @import url("https://splatoonwiki.org/wiki/MediaWiki:Interwiki.css?action=raw&ctype=text/css");
/* MediaWiki:Rights.css - for username color highlights depending on rights level */ @import url("https://splatoonwiki.org/wiki/MediaWiki:Rights.css?action=raw&ctype=text/css");
/* MediaWiki:Backgrounds.css - for background URL styling classes */ @import url("https://splatoonwiki.org/wiki/MediaWiki:Backgrounds.css?action=raw&ctype=text/css");
/* MediaWiki:SiteColor.css - for Template:SiteColor classes */ @import url("https://splatoonwiki.org/wiki/MediaWiki:SiteColor.css?action=raw&ctype=text/css");
/* Importing font used elsewhere on the site */ @import URL("https://fonts.googleapis.com/css?family=Quantico:700"); @import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');
/* Remember, anything here applies to all skins. */
- root {
--global-footer: url("https://cdn.wikimg.net/en/splatoonwiki/images/0/06/Footer-mask.png"); --global-stripes: url("https://cdn.wikimg.net/en/splatoonwiki/images/9/9a/Inkipedia_background_S3.svg") !important;
}
/* Causes MediaWiki:Tagline to display */ .mw-body #siteSub {
display: block;
}
/* Hide licensing menu on Special:Upload */ .mw-htmlform-field-Licenses, .mw-upload-editlicenses {
display: none;
}
/* Enable custom list style types */ div.note-list ol.references {
list-style-type: inherit;
}
/* Prevent list items in columns from breaking into the next column */ .list-columns li {
page-break-inside: avoid;
}
/* Allow limiting of which header levels are shown in a TOC.
.toclimit-2 .toclevel-1 ul, .toclimit-3 .toclevel-2 ul, .toclimit-4 .toclevel-3 ul, .toclimit-5 .toclevel-4 ul {
display: none;
}
/* Prevents some things from displaying on the main page */ body.page-Main_Page #ca-delete, body.page-Main_Page #ca-move, body.page-Main_Page #deleteconfirm, body.page-Main_Page #siteSub, body.page-Main_Page #contentSub, body.page-Main_Page h1.firstHeading, body.page-Main_Page_S2 #ca-delete, body.page-Main_Page_S2 #ca-move, body.page-Main_Page_S2 #deleteconfirm, body.page-Main_Page_S2 #siteSub, body.page-Main_Page_S2 h1.firstHeading {
display: none !important;
}
/* For things that should only appear when printed. Used in gear checklists. */ .onlyprint {
display: none;
}
/* Use sans-serif font for optimal display of some languages. This helps templates that use the 'lang' attribute, like Template:Localized name and Template:NewsDialogue. zh = Chinese, ja = Japanese, ko = Korean. */
- lang(zh),
- lang(ja),
- lang(ko) {
font-family: sans-serif;
}
/* Fix issue where top margin looks problematic within a sublist. Issue impacts all skins. */ li>ul:first-child, li>ol:first-child {
margin-top: 0;
}
/*==================================================
LINKS
==================================================*/
/* Links' color */ a:link, a:hover, a:active, div#mw-panel a:link, div.vector-menu-content li a:link, div.vector-menu-content ul.vector-menu-content-list li.selected a:link, li a:hover {
color: var(--link-internal, #378B00);
}
/* Visited links' color */ a:visited, a:visited:hover, div#mw-panel a:visited, div.vector-menu-content li a:visited, div.vector-menu-content ul.vector-menu-content-list li.selected a:visited, li a:visited:hover {
color: var(--link-visited, var(--link-internal, #378B00));
}
/* Underline links when hovering over */ a:hover {
text-decoration: underline;
}
/* Non-existent page link color (i.e. red links) */ div.vector-menu-content li.new a, div.vector-menu-content li.new a:visited, div.vector-menu-content li.new a, div.vector-menu-content li.new, a.new,
- p-personal a.new,
a.new {
color: var(--link-missing, #BA0000);
}
/*==================================================
INPUT
==================================================*/
/* text input */ .oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus {
border-color: var(--selected, #3366cc);
}
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
border-color: var(--selected, #3366cc); box-shadow: inset 0 0 0 1px var(--shadow, #3366cc);
}
/* dropdown menu */ .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
border-color: var(--selected, #3366cc); box-shadow: inset 0 0 0 1px var(--shadow, #3366cc);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
color: var(--ui-main-theme, #008B2A); background-color: var(--page, #EBFFEC);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
color: var(--ui-main-theme, #008B2A); background-color: var(--ui-main-theme-b, rgba(0, 139, 42, 0.1));
}
/* primary button */ .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive>.oo-ui-buttonElement-button {
background-color: var(--ui-main-theme, #008B2A); border-color: var(--border, #008B2A);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive>.oo-ui-buttonElement-button:hover {
background-color: var(--ui-main-theme, #378B00); /* Fallback not checked */ border-color: var(--page, #378B00);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive>.oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive>.oo-ui-buttonElement-button:active:focus, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed>.oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active>.oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active>.oo-ui-buttonElement-button {
background-color: var(--ui-main-theme, #006400); border-color: var(--border, #006400);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive>.oo-ui-buttonElement-button:focus {
border-color: var(--border, #008B2A); box-shadow: inset 0 0 0 1px var(--border, #008B2A), inset 0 0 0 2px var(--input, #fff);
}
/* secondary button */ .oo-ui-buttonElement-framed.oo-ui-widget-enabled>.oo-ui-buttonElement-button:focus {
border-color: var(--border, #008B2A); box-shadow: inset 0 0 0 1px var(--border, #008B2A);
}
/* recent changes buttons */ .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active>.oo-ui-buttonElement-button {
color: var(--ui-main-theme, #006400); border-color: var(--border, #006400);
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active>.oo-ui-buttonElement-button:focus {
border-color: var(--border, #008B2A); box-shadow: inset 0 0 0 1px var(--border, #008B2A), inset 0 0 0 2px var(--input, #fff);
}
/* checkbox */ .oo-ui-checkboxInputWidget {
/* Fix checkboxes' containers being displayed away from the check */ display: flex;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox'] {
/* Fix checks not appearing by inheriting opacity 0 */ opacity: 0.75;
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus+span {
border-color: var(--border, #008B2A); box-shadow: inset 0 0 0 1px var(--border, #008B2A);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:hover+span {
border-color: var(--ui-main-theme, #378B00); /* Fallback not checked */
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active+span {
background-color: var(--ui-main-theme, #006400); border-color: var(--border, #006400); box-shadow: inset 0 0 0 1px var(--ui-main-theme, #006400);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked+span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate+span {
background-color: var(--ui-main-theme, #008B2A); border-color: var(--border, #008B2A);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:focus+span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:focus+span {
background-color: var(--ui-main-theme, #008B2A); border-color: var(--border, #008B2A); box-shadow: inset 0 0 0 1px var(--selected, #36c), inset 0 0 0 2px var(--ui-main-theme, #008B2A);
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover+span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:hover+span {
background-color: var(--ui-main-theme, #378B00); border-color: var(--ui-main-theme, #378B00); /* Fallback not checked */
}
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:active+span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:active+span {
background-color: var(--ui-main-theme, #006400); border-color: var(--border, #006400); box-shadow: inset 0 0 0 1px var(--ui-main-theme, #006400);
}
/* radio button */ .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:hover+span {
border-color: var(--ui-main-theme, #378B00); /* Fallback not checked */
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:active+span {
background-color: var(--ui-main-theme, #006400); border-color: var(--border, #006400);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked+span {
border-color: var(--border, #008B2A);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:hover+span {
border-color: var(--ui-main-theme, #378B00); /* Fallback not checked */
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active+span {
border-color: var(--border, #006400); box-shadow: inset 0 0 0 1px var(--ui-main-theme, #006400);
}
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active+span:before {
border-color: var(--border, #006400);
}
/* ReplaceText widget */ .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
background-color: var(--page); border-color: var(--ui-warning);
}
/*==================================================
BOXES
==================================================*/
.widget {
background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png"); box-shadow: 0px 0px 15px var(--page, white) inset; width: 25%; border-style: solid; border-color: var(--divider, #AADC00); border-radius: 10px; border-width: 10px 1px 10px 1px; padding: 15px; margin: 5px;
}
.widget1 {
background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png"); box-shadow: 0px 0px 15px var(--page, white) inset; width: 75%; border-style: solid; border-color: var(--divider, #AADC00); border-radius: 10px; border-width: 10px 1px 10px 1px; padding: 15px; margin: 5px;
}
.widget2 {
background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png"); box-shadow: 0px 0px 15px var(--page, white) inset; width: 100%; border-style: solid; border-color: var(--divider, #AADC00); border-radius: 10px; border-width: 10px 1px 10px 1px; padding: 15px; margin: 5px;
}
.widget3 {
background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/6/62/S2_Fes_Main_BG3.png"); box-shadow: 0px 0px 25px var(--shadow, black) inset; overflow: hidden; width: 100%; border-style: solid; border-color: var(--divider, #13EB92); border-radius: 10px; border-width: 10px 1px 10px 1px; padding: 15px; margin: 5px;
}
.widget4 {
background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png"); box-shadow: 0px 0px 15px var(--page, white) inset; width: 100%; border-style: solid; border-color: #FF8000; border-radius: 10px; border-width: 10px 1px 10px 1px; padding: 15px; margin: 5px;
}
.widget5 {
background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png"); box-shadow: 0px 0px 15px var(--page, white) inset; width: 50%; border-style: solid; border-color: var(--divider, #AADC00); border-radius: 10px; border-width: 10px 1px 10px 1px; padding: 15px; margin: 5px;
}
.widget6 {
background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png"); box-shadow: 0px 0px 15px var(--page, white) inset; width: 100%; border-style: solid; border-color: var(--body-2, #424242); border-radius: 10px; border-width: 10px 1px 10px 1px; padding: 15px; margin: 5px;
}
.widgett {
background-image: url("//cdn.wikimg.net/en/splatoonwiki/images/2/26/Amiibo_main_bg.png"); box-shadow: 0px 0px 15px var(--page, white) inset; width: 97%; border-style: solid; border-color: var(--divider, #AADC00); border-radius: 10px; border-width: 10px 0 10px 0; position: relative; padding: 15px;
}
.btextwidget {
background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.7); border-style: solid; border-width: 2px; border-radius: 10px; text-align: center; font-size: 24px; font-weight: 600; position: relative;
}
- widcontent {
justify-content: center; display: flex; display: -webkit-flex;
}
.textwidget, .cd {
padding: 5px; background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.7); border-style: solid; border-width: 2px; border-radius: 10px; text-align: center; position: relative; overflow: hidden;
}
- tex2 {
margin-left: 25%;
}
- widgfa {
position: relative; left: 1.5%; max-width: 85%;
}
.infobox {
background-color: var(--ui-main-theme-b, rgba(140, 220, 0, 0.1)); width: 25%; border-radius: 10px; padding: 10px; border-style: solid; border-color: var(--divider, #AADC00); border-width: 10px 1px 10px 1px;
}
.infobox1 {
background-color: var(--ui-main-theme-b, rgba(140, 220, 0, 0.3)); border-style: solid; border-color: var(--ui-main-theme, rgba(140, 220, 0, 0.5)); border-width: 1px 1px 1px 5px; border-radius: 5px; color: var(--input-text, #190707); font-size: 115%; padding: 1em; margin: 5px;
}
.infobox td {
padding: 5px;
}
.infobox td b {
padding: 6px; background: -moz-linear-gradient(left, var(--ui-main-theme-b, rgba(140, 220, 0, 0.3)) 0%, var(--input-text, #190707) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(140, 220, 0, 0.3)), color-stop(100%, var(--input-text, #190707))); background: -webkit-linear-gradient(left, var(--ui-main-theme-b, rgba(140, 220, 0, 0.3)) 0%, var(--input-text, #190707) 100%); background: -o-linear-gradient(left, var(--ui-main-theme-b, rgba(140, 220, 0, 0.3)) 0%, var(--input-text, #190707) 100%); background: -ms-linear-gradient(left, var(--ui-main-theme-b, rgba(140, 220, 0, 0.3)) 0%, var(--input-text, #190707) 100%); background: linear-gradient(to right, var(--ui-main-theme-b, rgba(140, 220, 0, 0.3)) 0%, var(--input-text, #190707) 100%); border-style: solid; border-color: var(--ui-main-theme, rgba(140, 220, 0, 0.5)); border-width: 1px 0 1px 5px; border-radius: 5px 0 0 5px;
}
/* removes borders from table cells to complement zebra stripes */ table.nocellborder>thead>tr>th, table.nocellborder>tbody>tr>th, table.nocellborder>tbody>tr>td {
border-style: none;
}
/* left-aligns header cell text to complement zebra stripes */ table.nocellborder>thead>tr>th, table.nocellborder>tbody>tr>th {
text-align: left;
}
/* Give `stickyheader` class tables sticky headers that stay on-screen even when the page scrolls, very useful for list articles */ table.stickyheader {
position: relative;
}
table.stickyheader thead, table.stickyheader tbody th {
position: sticky; top: 0;
}
/*==================================================
Interactive Music
==================================================*/
/* Checkbox styling */ .i-checkbox {
border: 3px solid var(--shadow, black); border-radius: 5px; width: 25px; height: 25px; text-align: center; display: inline-block;
}
.i-checkbox-checked {
width: 100%; height: 100%; font-size: 18px;
}
/* Category header */ .i-categoryh- {
font-size: 26px;
}
/* Subcategory header */ .i-categorys- {
font-size: 22px; margin-left: 10px
}
/* Sizes for columns in Interactive Music */ /* Column1 */ .i-column1 {
width: 25%
}
/* Column2 */ .i-column2 {
width: 10%
}
/* Column4 */ .i-column4 {
width: 350px
}
/*==================================================
OTHER
==================================================*/
/* Smaller text size for link suggestions */
- ui-id-1 {
font-size: inherit;
}
/* Countdowns start with their metadata until the Js changes them. So they should start invisible */ countdown {
display: none;
}
.noscript {
display: none;
}
.schedulesplit {
display: table-cell;
}
/* Prevent line breaks in silly places:
1) Where desired 2) Links when we don't want them to 3) Bold "links" to the page itself */
.nowrap, .nowraplinks a, .nowraplinks .selflink {
white-space: nowrap;
}
/* Prevent text selection */ .noselect {
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
/* force-display-none */ .force-display-none {
display: none !important
}
/* Warnings like "This user is blocked. Here is the log" */ div.mw-warning-with-logexcerpt {
padding: 10px; border-radius: 20px;
}
/* hide sensitive data on file pages */
- mw_metadata .exif-gpslatitude,
- mw_metadata .exif-gpslongitude,
- mw_metadata .exif-artist {
display: none;
}
/*==================================================
3D/2D Viewer
==================================================*/
/* 3D/2D viewer */ .container-2d {
display: block; position: relative;
}
.viewer-2d {
position: relative; width: 100%; height: 100%; top: 0; left: 0;
}
.switch-to-3d {
position: absolute; top: 0; right: 0; background: url("https://cdn.wikimg.net/en/splatoonwiki/images/6/65/2D_icon.png"); width: 92px; height: 48px; z-index: 999; opacity: 0.5; cursor: pointer; cursor: hand; transition: opacity 0.2s;
}
.switch-to-2d {
position: absolute; top: 0; right: 0; background: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/7e/3D_icon.png"); width: 92px; height: 48px; z-index: 999; opacity: 0.5; cursor: pointer; cursor: hand; transition: opacity 0.2s;
}
.switch-to-3d:hover, .switch-to-2d:hover {
opacity: 1.0;
}
/* 3D model viewer */ .viewer-3d span {
display: none;
}
.viewer-3d {
margin: 4px; display: block; cursor: move; position: relative;
}
.viewer-3d-frame {
position: absolute;
}
.viewer-3d-overlay {
background: url("https://cdn.wikimg.net/en/splatoonwiki/images/e/ed/3D_rotation_icon.png") bottom right no-repeat; width: 100%; height: 100%; opacity: 0.5; position: relative;
}
/* End 3D model viewer */
/* New 3D viewer specific CSS */ .viewer-3d-container {
display: block; padding: 2px; margin-left: auto; margin-right: auto; width: 288px;
}
.viewer-3d-container ul {
padding: 0px; margin: 0px;
}
.viewer-3d-container ul li {
display: block; margin: 0px; margin-top: 2px; /* For vertical spacing of the buttons */ list-style: none; text-align: center;
}
.viewer-3d-container ul a {
display: block; width: 134px; padding: 4px; text-decoration: none; font-size: 1.25em; opacity: .75;
}
.viewer-3d-container ul a:hover {
opacity: 1;
}
.view-selector-default-left {
border-radius: 10px; float: left; background: #e2e2e2;
}
.view-selector-default-right {
border-radius: 10px; float: right; background: #e2e2e2;
}
.view-selector-default-full {
border-radius: 10px; width: 100%; float: left; clear: both; background: #e2e2e2;
}
.view-selector-default-full a {
width: 100% !important;
}
/* End new 3D viewer */
/* Button icons */
/* Base icon element style */ .pro-icon, .switch-icon {
background: currentcolor; display: inline-block; height: 28px; mask-size: contain; vertical-align: middle; width: 28px; -webkit-mask-size: contain;
}
/* Icon URLs */
- root {
--pro-icon-controller-outline: url("https://cdn.wikimg.net/en/splatoonwiki/images/3/35/Pro_Icon_Controller_Outline.svg"); --pro-icon-d-pad-down: url("https://cdn.wikimg.net/en/splatoonwiki/images/d/df/Pro_Icon_D-Pad_Down.svg"); --pro-icon-d-pad-left: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/7e/Pro_Icon_D-Pad_Left.svg"); --pro-icon-d-pad-right: url("https://cdn.wikimg.net/en/splatoonwiki/images/2/2a/Pro_Icon_D-Pad_Right.svg"); --pro-icon-d-pad-up: url("https://cdn.wikimg.net/en/splatoonwiki/images/8/89/Pro_Icon_D-Pad_Up.svg"); --pro-icon-d-pad: url("https://cdn.wikimg.net/en/splatoonwiki/images/e/e8/Pro_Icon_D-Pad.svg"); --pro-icon-gyro-pitch: url("https://cdn.wikimg.net/en/splatoonwiki/images/9/9c/Pro_Icon_Gyro_Pitch.svg"); --pro-icon-gyro-roll: url("https://cdn.wikimg.net/en/splatoonwiki/images/5/55/Pro_Icon_Gyro_Roll.svg"); --pro-icon-gyro-yaw: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/7d/Pro_Icon_Gyro_Yaw.svg"); --switch-icon-a: url("https://cdn.wikimg.net/en/splatoonwiki/images/5/5a/Switch_Icon_A.svg"); --switch-icon-b: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/7f/Switch_Icon_B.svg"); --switch-icon-capture: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/77/Switch_Icon_Capture.svg"); --switch-icon-home: url("https://cdn.wikimg.net/en/splatoonwiki/images/d/da/Switch_Icon_Home.svg"); --switch-icon-l: url("https://cdn.wikimg.net/en/splatoonwiki/images/3/3e/Switch_Icon_L.svg"); --switch-icon-left-stick-all: url("https://cdn.wikimg.net/en/splatoonwiki/images/0/0b/Switch_Icon_Left_Stick_All.svg"); --switch-icon-left-stick-click: url("https://cdn.wikimg.net/en/splatoonwiki/images/5/58/Switch_Icon_Left_Stick_Click.svg"); --switch-icon-left-stick-down: url("https://cdn.wikimg.net/en/splatoonwiki/images/e/e2/Switch_Icon_Left_Stick_Down.svg"); --switch-icon-left-stick-left-right: url("https://cdn.wikimg.net/en/splatoonwiki/images/4/49/Switch_Icon_Left_Stick_Left-Right.svg"); --switch-icon-left-stick-left: url("https://cdn.wikimg.net/en/splatoonwiki/images/9/95/Switch_Icon_Left_Stick_Left.svg"); --switch-icon-left-stick-right: url("https://cdn.wikimg.net/en/splatoonwiki/images/1/14/Switch_Icon_Left_Stick_Right.svg"); --switch-icon-left-stick-up-down: url("https://cdn.wikimg.net/en/splatoonwiki/images/0/06/Switch_Icon_Left_Stick_Up-Down.svg"); --switch-icon-left-stick-up: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/7c/Switch_Icon_Left_Stick_Up.svg"); --switch-icon-left-stick: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/73/Switch_Icon_Left_Stick.svg"); --switch-icon-minus: url("https://cdn.wikimg.net/en/splatoonwiki/images/6/6d/Switch_Icon_Minus.svg"); --switch-icon-plus: url("https://cdn.wikimg.net/en/splatoonwiki/images/c/c9/Switch_Icon_Plus.svg"); --switch-icon-r: url("https://cdn.wikimg.net/en/splatoonwiki/images/d/d0/Switch_Icon_R.svg"); --switch-icon-right-stick-all: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/73/Switch_Icon_Right_Stick_All.svg"); --switch-icon-right-stick-click: url("https://cdn.wikimg.net/en/splatoonwiki/images/d/d8/Switch_Icon_Right_Stick_Click.svg"); --switch-icon-right-stick-down: url("https://cdn.wikimg.net/en/splatoonwiki/images/4/47/Switch_Icon_Right_Stick_Down.svg"); --switch-icon-right-stick-left-right: url("https://cdn.wikimg.net/en/splatoonwiki/images/a/a2/Switch_Icon_Right_Stick_Left-Right.svg"); --switch-icon-right-stick-left: url("https://cdn.wikimg.net/en/splatoonwiki/images/b/b1/Switch_Icon_Right_Stick_Left.svg"); --switch-icon-right-stick-right: url("https://cdn.wikimg.net/en/splatoonwiki/images/f/f2/Switch_Icon_Right_Stick_Right.svg"); --switch-icon-right-stick-up-down: url("https://cdn.wikimg.net/en/splatoonwiki/images/c/c1/Switch_Icon_Right_Stick_Up-Down.svg"); --switch-icon-right-stick-up: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/78/Switch_Icon_Right_Stick_Up.svg"); --switch-icon-right-stick: url("https://cdn.wikimg.net/en/splatoonwiki/images/f/f6/Switch_Icon_Right_Stick.svg"); --switch-icon-sl: url("https://cdn.wikimg.net/en/splatoonwiki/images/3/35/Switch_Icon_SL.svg"); --switch-icon-sr: url("https://cdn.wikimg.net/en/splatoonwiki/images/c/c3/Switch_Icon_SR.svg"); --switch-icon-x: url("https://cdn.wikimg.net/en/splatoonwiki/images/2/24/Switch_Icon_X.svg"); --switch-icon-y: url("https://cdn.wikimg.net/en/splatoonwiki/images/c/c5/Switch_Icon_Y.svg"); --switch-icon-zl: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/79/Switch_Icon_ZL.svg"); --switch-icon-zr: url("https://cdn.wikimg.net/en/splatoonwiki/images/1/1e/Switch_Icon_ZR.svg");
}
/* Icon styles */ .pro-icon.controller-outline {
mask-image: var(--pro-icon-controller-outline); -webkit-mask-image: var(--pro-icon-controller-outline);
}
.pro-icon.d-pad-down {
mask-image: var(--pro-icon-d-pad-down); -webkit-mask-image: var(--pro-icon-d-pad-down);
}
.pro-icon.d-pad-left {
mask-image: var(--pro-icon-d-pad-left); -webkit-mask-image: var(--pro-icon-d-pad-left);
}
.pro-icon.d-pad-right {
mask-image: var(--pro-icon-d-pad-right); -webkit-mask-image: var(--pro-icon-d-pad-right);
}
.pro-icon.d-pad-up {
mask-image: var(--pro-icon-d-pad-up); -webkit-mask-image: var(--pro-icon-d-pad-up);
}
.pro-icon.d-pad {
mask-image: var(--pro-icon-d-pad); -webkit-mask-image: var(--pro-icon-d-pad);
}
.pro-icon.gyro-pitch {
mask-image: var(--pro-icon-gyro-pitch); -webkit-mask-image: var(--pro-icon-gyro-pitch);
}
.pro-icon.gyro-roll {
mask-image: var(--pro-icon-gyro-roll); -webkit-mask-image: var(--pro-icon-gyro-roll);
}
.pro-icon.gyro-yaw {
mask-image: var(--pro-icon-gyro-yaw); -webkit-mask-image: var(--pro-icon-gyro-yaw);
}
.switch-icon.a {
mask-image: var(--switch-icon-a); -webkit-mask-image: var(--switch-icon-a);
}
.switch-icon.b {
mask-image: var(--switch-icon-b); -webkit-mask-image: var(--switch-icon-b);
}
.switch-icon.capture {
mask-image: var(--switch-icon-capture); -webkit-mask-image: var(--switch-icon-capture);
}
.switch-icon.home {
mask-image: var(--switch-icon-home); -webkit-mask-image: var(--switch-icon-home);
}
.switch-icon.l {
mask-image: var(--switch-icon-l); -webkit-mask-image: var(--switch-icon-l);
}
.switch-icon.left-stick-all {
mask-image: var(--switch-icon-left-stick-all); -webkit-mask-image: var(--switch-icon-left-stick-all);
}
.switch-icon.left-stick-click {
mask-image: var(--switch-icon-left-stick-click); -webkit-mask-image: var(--switch-icon-left-stick-click);
}
.switch-icon.left-stick-down {
mask-image: var(--switch-icon-left-stick-down); -webkit-mask-image: var(--switch-icon-left-stick-down);
}
.switch-icon.left-stick-left-right {
mask-image: var(--switch-icon-left-stick-left-right); -webkit-mask-image: var(--switch-icon-left-stick-left-right);
}
.switch-icon.left-stick-left {
mask-image: var(--switch-icon-left-stick-left); -webkit-mask-image: var(--switch-icon-left-stick-left);
}
.switch-icon.left-stick-right {
mask-image: var(--switch-icon-left-stick-right); -webkit-mask-image: var(--switch-icon-left-stick-right);
}
.switch-icon.left-stick-up-down {
mask-image: var(--switch-icon-left-stick-up-down); -webkit-mask-image: var(--switch-icon-left-stick-up-down);
}
.switch-icon.left-stick-up {
mask-image: var(--switch-icon-left-stick-up); -webkit-mask-image: var(--switch-icon-left-stick-up);
}
.switch-icon.left-stick {
mask-image: var(--switch-icon-left-stick); -webkit-mask-image: var(--switch-icon-left-stick);
}
.switch-icon.minus {
mask-image: var(--switch-icon-minus); -webkit-mask-image: var(--switch-icon-minus);
}
.switch-icon.plus {
mask-image: var(--switch-icon-plus); -webkit-mask-image: var(--switch-icon-plus);
}
.switch-icon.r {
mask-image: var(--switch-icon-r); -webkit-mask-image: var(--switch-icon-r);
}
.switch-icon.right-stick-all {
mask-image: var(--switch-icon-right-stick-all); -webkit-mask-image: var(--switch-icon-right-stick-all);
}
.switch-icon.right-stick-click {
mask-image: var(--switch-icon-right-stick-click); -webkit-mask-image: var(--switch-icon-right-stick-click);
}
.switch-icon.right-stick-down {
mask-image: var(--switch-icon-right-stick-down); -webkit-mask-image: var(--switch-icon-right-stick-down);
}
.switch-icon.right-stick-left-right {
mask-image: var(--switch-icon-right-stick-left-right); -webkit-mask-image: var(--switch-icon-right-stick-left-right);
}
.switch-icon.right-stick-left {
mask-image: var(--switch-icon-right-stick-left); -webkit-mask-image: var(--switch-icon-right-stick-left);
}
.switch-icon.right-stick-right {
mask-image: var(--switch-icon-right-stick-right); -webkit-mask-image: var(--switch-icon-right-stick-right);
}
.switch-icon.right-stick-up-down {
mask-image: var(--switch-icon-right-stick-up-down); -webkit-mask-image: var(--switch-icon-right-stick-up-down);
}
.switch-icon.right-stick-up {
mask-image: var(--switch-icon-right-stick-up); -webkit-mask-image: var(--switch-icon-right-stick-up);
}
.switch-icon.right-stick {
mask-image: var(--switch-icon-right-stick); -webkit-mask-image: var(--switch-icon-right-stick);
}
.switch-icon.sl {
mask-image: var(--switch-icon-sl); -webkit-mask-image: var(--switch-icon-sl);
}
.switch-icon.sr {
mask-image: var(--switch-icon-sr); -webkit-mask-image: var(--switch-icon-sr);
}
.switch-icon.x {
mask-image: var(--switch-icon-x); -webkit-mask-image: var(--switch-icon-x);
}
.switch-icon.y {
mask-image: var(--switch-icon-y); -webkit-mask-image: var(--switch-icon-y);
}
.switch-icon.zl {
mask-image: var(--switch-icon-zl); -webkit-mask-image: var(--switch-icon-zl);
}
.switch-icon.zr {
mask-image: var(--switch-icon-zr); -webkit-mask-image: var(--switch-icon-zr);
}
/* Infobox styles */
/* Supporting CSS for Template:GearCategory */
- root {
--gear-icon-clothing: url("https://cdn.wikimg.net/en/splatoonwiki/images/7/78/S2_Icon_Clothing.png"); --gear-icon-headgear: url("https://cdn.wikimg.net/en/splatoonwiki/images/1/12/S2_Icon_Headgear.png"); --gear-icon-shoes: url("https://cdn.wikimg.net/en/splatoonwiki/images/a/a5/S2_Icon_Shoes.png");
}
.gear-category {
display: inline-block; position: relative; vertical-align: middle;
}
.gear-category a, .gear-category a:hover {
display: block; height: 100%; left: 0; position: absolute; text-decoration: none; top: 0; width: 100%;
}
.gear-category::before {
background: currentcolor; content: ""; height: 100%; left: 0; mask-position: center; mask-repeat: no-repeat; mask-size: contain; opacity: 0.6; position: absolute; top: 0; width: 100%; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain;
}
.gear-category.Clothing::before {
mask-image: var(--gear-icon-clothing); -webkit-mask-image: var(--gear-icon-clothing);
}
.gear-category.Headgear::before {
mask-image: var(--gear-icon-headgear); -webkit-mask-image: var(--gear-icon-headgear);
}
.gear-category.Shoes::before {
mask-image: var(--gear-icon-shoes); -webkit-mask-image: var(--gear-icon-shoes);
}
/* New infobox implementation styles */ .infobox {
box-shadow: 0 0 16px var(--page, #ffffff) inset;
}
/* dark gallery */ .darkgallery div.thumb {
background-color: #000505 !important;
}
/* light gallery */ .lightgallery div.thumb {
background-color: #f8f9fa !important;
}
.img-greyscale {
filter: grayscale(100%);
}