MediaWiki:Common.css: Difference between revisions
From Inkipedia, the Splatoon wiki
m (turned "visited" colors on) Tag: Reverted |
Trig Jegman (talk | contribs) m (& despite all my anger I am still just a squid in an airplane hangar) |
||
(41 intermediate revisions by 7 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins | /* CSS placed here will be applied to all skins | ||
NOTE: The editor does not know how to handle CSS variables and will complain | NOTE: The editor does not know how to handle CSS variables and will complain | ||
about there being errors when this file is saved. Be sure to double-check your | about there being errors when this file is saved. Be sure to double-check your | ||
edits carefully before saving. | edits carefully before saving. | ||
*/ | */ | ||
/* [[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 */ | /* Causes [[MediaWiki:Tagline]] to display */ | ||
.mw-body #siteSub { | .mw-body #siteSub { | ||
display: block; | display: block; | ||
} | |||
/* Hide licensing menu on [[Special:Upload]] */ | |||
.mw-htmlform-field-Licenses, | |||
.mw-upload-editlicenses { | |||
display: none; | |||
} | } | ||
Line 19: | Line 46: | ||
/* Prevent list items in columns from breaking into the next column */ | /* Prevent list items in columns from breaking into the next column */ | ||
.list-columns li { | .list-columns li { | ||
page-break-inside: avoid; | page-break-inside: avoid; | ||
} | } | ||
Line 32: | Line 59: | ||
/* Prevents some things from displaying on the main page */ | /* 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 #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; | display: none !important; | ||
} | } | ||
Line 39: | Line 76: | ||
.onlyprint { | .onlyprint { | ||
display: none; | 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; | |||
} | } | ||
Line 46: | Line 98: | ||
/* Links' color */ | /* 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 { | 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); | color: var(--link-internal, #378B00); | ||
} | } | ||
/* Visited links' color */ | /* 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 | a:visited, | ||
color: var(--link-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)); | |||
} | } | ||
Line 58: | Line 121: | ||
a:hover { | a:hover { | ||
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
/* Non-existent page link color (i.e. red links) */ | /* 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 { | 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); | color: var(--link-missing, #BA0000); | ||
} | } | ||
/*================================================== | /*================================================== | ||
Line 334: | Line 142: | ||
border-color: var(--selected, #3366cc); | border-color: var(--selected, #3366cc); | ||
} | } | ||
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus { | .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus { | ||
border-color: var(--selected, #3366cc); | border-color: var(--selected, #3366cc); | ||
box-shadow:inset 0 0 0 1px var(--shadow, #3366cc); | box-shadow: inset 0 0 0 1px var(--shadow, #3366cc); | ||
} | } | ||
Line 342: | Line 151: | ||
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus { | .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus { | ||
border-color: var(--selected, #3366cc); | border-color: var(--selected, #3366cc); | ||
box-shadow:inset 0 0 0 1px var(--shadow, #3366cc); | box-shadow: inset 0 0 0 1px var(--shadow, #3366cc); | ||
} | } | ||
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected { | .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-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, | ||
.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.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 */ | /* primary button */ | ||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-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); | background-color: var(--ui-main-theme, #008B2A); | ||
border-color: var(--border, #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); | .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); | 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-button:active, | ||
.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-button:active:focus, | ||
.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-buttonElement-pressed>.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 { | .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); | background-color: var(--ui-main-theme, #006400); | ||
border-color: var(--border, #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 { | |||
.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); | border-color: var(--border, #008B2A); | ||
box-shadow:inset 0 0 0 1px var(--border, #008B2A), inset 0 0 0 2px var(--input, #fff); | box-shadow: inset 0 0 0 1px var(--border, #008B2A), inset 0 0 0 2px var(--input, #fff); | ||
} | } | ||
/* secondary button */ | /* secondary button */ | ||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { | .oo-ui-buttonElement-framed.oo-ui-widget-enabled>.oo-ui-buttonElement-button:focus { | ||
border-color: var(--border, #008B2A); | border-color: var(--border, #008B2A); | ||
box-shadow:inset 0 0 0 1px var(--border, #008B2A); | box-shadow: inset 0 0 0 1px var(--border, #008B2A); | ||
} | } | ||
/* recent changes buttons */ | /* recent changes buttons */ | ||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { | .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active>.oo-ui-buttonElement-button { | ||
color: var(--ui-main-theme, #006400); | color: var(--ui-main-theme, #006400); | ||
border-color: var(--border, #006400); | border-color: var(--border, #006400); | ||
} | } | ||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:focus { | |||
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active>.oo-ui-buttonElement-button:focus { | |||
border-color: var(--border, #008B2A); | border-color: var(--border, #008B2A); | ||
box-shadow: inset 0 0 0 1px var(--border, #008B2A), inset 0 0 0 2px var(--input, #fff); | box-shadow: inset 0 0 0 1px var(--border, #008B2A), inset 0 0 0 2px var(--input, #fff); | ||
Line 393: | Line 209: | ||
/* checkbox */ | /* checkbox */ | ||
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus + span { | .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); | border-color: var(--border, #008B2A); | ||
box-shadow: inset 0 0 0 1px 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); | .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 { | |||
.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active+span { | |||
background-color: var(--ui-main-theme, #006400); | background-color: var(--ui-main-theme, #006400); | ||
border-color: var(--border, #006400); | border-color: var(--border, #006400); | ||
box-shadow:inset 0 0 0 1px var(--ui-main-theme, #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 { | .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); | background-color: var(--ui-main-theme, #008B2A); | ||
border-color: var(--border, #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 { | .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); | background-color: var(--ui-main-theme, #008B2A); | ||
border-color: var(--border, #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); | 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 { | .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); | background-color: var(--ui-main-theme, #378B00); | ||
border-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 { | .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); | background-color: var(--ui-main-theme, #006400); | ||
border-color: var(--border, #006400); | border-color: var(--border, #006400); | ||
Line 429: | Line 263: | ||
/* radio button */ | /* radio button */ | ||
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:hover + span { | .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 { | |||
.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 { | |||
.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 { | |||
.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 { | |||
.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 { | |||
.oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active+span:before { | |||
border-color: var(--border, #006400); | |||
} | } | ||
/* ReplaceText widget */ | /* ReplaceText widget */ | ||
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning { | .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning { | ||
background-color: var(--page); | |||
border-color: var(--ui-warning); | |||
} | } | ||
Line 514: | Line 355: | ||
width: 100%; | width: 100%; | ||
border-style: solid; | border-style: solid; | ||
border-color: | border-color: #FF8000; | ||
border-radius: 10px; | border-radius: 10px; | ||
border-width: 10px 1px 10px 1px; | border-width: 10px 1px 10px 1px; | ||
Line 558: | Line 399: | ||
.btextwidget { | .btextwidget { | ||
background-color: rgba(255,255,255,0.5); | background-color: rgba(255, 255, 255, 0.5); | ||
border-color: rgba(255,255,255,0.7); | border-color: rgba(255, 255, 255, 0.7); | ||
border-style: solid; | border-style: solid; | ||
border-width: 2px; | border-width: 2px; | ||
Line 575: | Line 416: | ||
} | } | ||
.textwidget, .cd { | .textwidget, | ||
.cd { | |||
padding: 5px; | padding: 5px; | ||
background-color: rgba(255,255,255,0.5); | background-color: rgba(255, 255, 255, 0.5); | ||
border-color: rgba(255,255,255,0.7); | border-color: rgba(255, 255, 255, 0.7); | ||
border-style: solid; | border-style: solid; | ||
border-width: 2px; | border-width: 2px; | ||
Line 598: | Line 440: | ||
.infobox { | .infobox { | ||
background-color: var(--ui-main-theme-b, | background-color: var(--ui-main-theme-b, rgba(140, 220, 0, 0.1)); | ||
width: 25%; | width: 25%; | ||
border-radius: 10px; | border-radius: 10px; | ||
Line 608: | Line 450: | ||
.infobox1 { | .infobox1 { | ||
background-color: var(--ui-main-theme-b, | background-color: var(--ui-main-theme-b, rgba(140, 220, 0, 0.3)); | ||
border-style: solid; | border-style: solid; | ||
border-color: var(--ui-main-theme, | border-color: var(--ui-main-theme, rgba(140, 220, 0, 0.5)); | ||
border-width: 1px 1px 1px 5px; | border-width: 1px 1px 1px 5px; | ||
border-radius: 5px; | border-radius: 5px; | ||
Line 623: | Line 465: | ||
} | } | ||
.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-style: solid; | ||
border | border-color: var(--ui-main-theme, rgba(140, 220, 0, 0.5)); | ||
border-width: 1px 0 1px 5px; | |||
border-radius: 5px 0 0 5px; | |||
border- | |||
border- | |||
} | } | ||
/* removes borders from table cells to complement zebra stripes */ | /* removes borders from table cells to complement zebra stripes */ | ||
table.nocellborder > thead > tr > th, | table.nocellborder>thead>tr>th, | ||
table.nocellborder > tbody > tr > th, | table.nocellborder>tbody>tr>th, | ||
table.nocellborder > tbody > tr > td { | table.nocellborder>tbody>tr>td { | ||
border-style: none; | border-style: none; | ||
} | } | ||
/* left-aligns header cell text to complement zebra stripes */ | /* left-aligns header cell text to complement zebra stripes */ | ||
table.nocellborder > thead > tr > th, | table.nocellborder>thead>tr>th, | ||
table.nocellborder > tbody > tr > th { | table.nocellborder>tbody>tr>th { | ||
text-align: left; | text-align: left; | ||
} | } | ||
Line 825: | Line 497: | ||
position: relative; | position: relative; | ||
} | } | ||
table.stickyheader thead, table.stickyheader tbody th { | |||
table.stickyheader thead, | |||
table.stickyheader tbody th { | |||
position: sticky; | position: sticky; | ||
top: 0; | top: 0; | ||
Line 836: | Line 510: | ||
/* Checkbox styling */ | /* Checkbox styling */ | ||
.i-checkbox{ | .i-checkbox { | ||
border: 3px solid var(--shadow, black); | |||
border-radius: 5px; | |||
width: 25px; | |||
height: 25px; | |||
text-align: center; | |||
display: inline-block; | |||
} | } | ||
.i-checkbox-checked{ | |||
.i-checkbox-checked { | |||
width: 100%; | |||
height: 100%; | |||
font-size: 18px; | |||
} | } | ||
/* Category header */ | /* Category header */ | ||
.i-categoryh-{ | .i-categoryh- { | ||
font-size: 26px; | |||
} | } | ||
/* Subcategory header */ | /* Subcategory header */ | ||
.i-categorys-{ | .i-categorys- { | ||
font-size: 22px; | |||
margin-left: 10px | |||
} | } | ||
/* Sizes for columns in Interactive Music */ | /* Sizes for columns in Interactive Music */ | ||
/* Column1 */ | /* Column1 */ | ||
.i-column1{ | .i-column1 { | ||
width: 25% | |||
} | } | ||
/* Column2 */ | /* Column2 */ | ||
.i-column2{ | .i-column2 { | ||
width: 10% | |||
} | } | ||
/* Column4 */ | /* Column4 */ | ||
.i-column4{ | .i-column4 { | ||
width: 350px | |||
} | } | ||
Line 889: | Line 567: | ||
} | } | ||
.noscript { display: none; } | .noscript { | ||
.schedulesplit { display: table-cell; } | display: none; | ||
} | |||
.schedulesplit { | |||
display: table-cell; | |||
} | |||
/* Prevent line breaks in silly places: | /* Prevent line breaks in silly places: | ||
Line 905: | Line 588: | ||
.noselect { | .noselect { | ||
-webkit-touch-callout: none; | -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 */ | ||
.force-display-none { | .force-display-none { | ||
display: none !important | |||
} | } | ||
/* Warnings like "This user is blocked. Here is the log" */ | /* Warnings like "This user is blocked. Here is the log" */ | ||
div.mw-warning-with-logexcerpt { | div.mw-warning-with-logexcerpt { | ||
padding: 10px; | |||
border-radius: 20px; | |||
} | } | ||
Line 958: | Line 641: | ||
z-index: 999; | z-index: 999; | ||
opacity: 0.5; | opacity: 0.5; | ||
cursor :pointer; | cursor: pointer; | ||
cursor: hand; | cursor: hand; | ||
transition: opacity 0.2s; | transition: opacity 0.2s; | ||
Line 977: | Line 660: | ||
} | } | ||
.switch-to-3d:hover, .switch-to-2d:hover { | .switch-to-3d:hover, | ||
.switch-to-2d:hover { | |||
opacity: 1.0; | opacity: 1.0; | ||
} | } | ||
Line 983: | Line 667: | ||
/* 3D model viewer */ | /* 3D model viewer */ | ||
.viewer-3d span { | .viewer-3d span { | ||
display: none; | |||
} | } | ||
.viewer-3d { | .viewer-3d { | ||
margin: 4px; | |||
display: block; | |||
cursor: move; | |||
position: relative; | |||
} | } | ||
.viewer-3d-frame { | .viewer-3d-frame { | ||
position: absolute; | |||
} | } | ||
.viewer-3d-overlay { | .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 */ | /* End 3D model viewer */ | ||
Line 1,016: | Line 704: | ||
margin: 0px; | margin: 0px; | ||
} | } | ||
.viewer-3d-container ul li { | .viewer-3d-container ul li { | ||
display: block; | display: block; | ||
margin: 0px; | margin: 0px; | ||
margin-top: 2px; /* For vertical spacing of the buttons */ | margin-top: 2px; | ||
/* For vertical spacing of the buttons */ | |||
list-style: none; | list-style: none; | ||
text-align: center; | text-align: center; | ||
} | } | ||
.viewer-3d-container ul a { | .viewer-3d-container ul a { | ||
display: block; | display: block; | ||
Line 1,037: | Line 728: | ||
.view-selector-default-left { | .view-selector-default-left { | ||
border-radius: 10px; | |||
float: left; | |||
background: #e2e2e2; | |||
} | } | ||
.view-selector-default-right { | .view-selector-default-right { | ||
border-radius: 10px; | |||
float: right; | |||
background: #e2e2e2; | |||
} | } | ||
.view-selector-default-full { | .view-selector-default-full { | ||
border-radius: 10px; | |||
width: 100%; | |||
float: left; | |||
clear: both; | |||
background: #e2e2e2; | |||
} | } | ||
.view-selector-default-full a { | .view-selector-default-full a { | ||
width: 100% !important; | |||
} | } | ||
/* End new 3D viewer */ | /* End new 3D viewer */ | ||
/* Button icons */ | |||
/ | |||
/* Base icon element style */ | /* Base icon element style */ | ||
.pro-icon, | .pro-icon, | ||
.switch-icon { | .switch-icon { | ||
background: currentcolor; | |||
display: inline-block; | |||
height: 28px; | |||
mask-size: contain; | |||
vertical-align: middle; | |||
width: 28px; | |||
-webkit-mask-size: contain; | |||
} | } | ||
/* Icon URLs */ | /* Icon URLs */ | ||
:root { | :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 */ | /* Icon styles */ | ||
.pro-icon.controller-outline { mask-image: var(--pro-icon-controller-outline); -webkit-mask-image: var(--pro-icon-controller-outline); } | .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); } | mask-image: var(--pro-icon-controller-outline); | ||
.pro-icon.d-pad-left { mask-image: var(--pro-icon-d-pad-left); -webkit-mask-image: var(--pro-icon-d-pad-left); } | -webkit-mask-image: var(--pro-icon-controller-outline); | ||
.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.d-pad-down { | ||
.pro-icon.gyro-pitch { mask-image: var(--pro-icon-gyro-pitch); -webkit-mask-image: var(--pro-icon-gyro-pitch); } | mask-image: var(--pro-icon-d-pad-down); | ||
.pro-icon.gyro-roll { mask-image: var(--pro-icon-gyro-roll); -webkit-mask-image: var(--pro-icon-gyro-roll); } | -webkit-mask-image: var(--pro-icon-d-pad-down); | ||
.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); } | .pro-icon.d-pad-left { | ||
.switch-icon.capture { mask-image: var(--switch-icon-capture); -webkit-mask-image: var(--switch-icon-capture); } | mask-image: var(--pro-icon-d-pad-left); | ||
.switch-icon.home { mask-image: var(--switch-icon-home); -webkit-mask-image: var(--switch-icon-home); } | -webkit-mask-image: var(--pro-icon-d-pad-left); | ||
.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); } | .pro-icon.d-pad-right { | ||
.switch-icon.left-stick-down { mask-image: var(--switch-icon-left-stick-down); -webkit-mask-image: var(--switch-icon-left-stick-down); } | mask-image: var(--pro-icon-d-pad-right); | ||
.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); } | -webkit-mask-image: var(--pro-icon-d-pad-right); | ||
.switch-icon.left-stick-left { mask-image: var(--switch-icon-left-stick- | } | ||
.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); } | .pro-icon.d-pad-up { | ||
.switch-icon.left-stick-up { mask-image: var(--switch-icon-left-stick-up); -webkit-mask-image: var(--switch-icon-left-stick-up); } | mask-image: var(--pro-icon-d-pad-up); | ||
.switch-icon.left-stick { mask-image: var(--switch-icon-left-stick); -webkit-mask-image: var(--switch-icon-left-stick); } | -webkit-mask-image: var(--pro-icon-d-pad-up); | ||
.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); } | .pro-icon.d-pad { | ||
.switch-icon.right-stick-all { mask-image: var(--switch-icon-right-stick-all); -webkit-mask-image: var(--switch-icon-right-stick-all); } | mask-image: var(--pro-icon-d-pad); | ||
.switch-icon.right-stick-click { mask-image: var(--switch-icon-right-stick-click); -webkit-mask-image: var(--switch-icon-right-stick-click); } | -webkit-mask-image: var(--pro-icon-d-pad); | ||
.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); } | .pro-icon.gyro-pitch { | ||
.switch-icon.right-stick-right { mask-image: var(--switch-icon-right-stick-right); -webkit-mask-image: var(--switch-icon-right-stick-right); } | mask-image: var(--pro-icon-gyro-pitch); | ||
.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); | -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 */ | /* Supporting CSS for Template:GearCategory */ | ||
:root { | :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 { | .gear-category { | ||
display: inline-block; | |||
position: relative; | |||
vertical-align: middle; | |||
} | } | ||
.gear-category a, | .gear-category a, | ||
.gear-category a:hover{ | .gear-category a:hover { | ||
display: block; | |||
height: 100%; | |||
left: 0; | |||
position: absolute; | |||
text-decoration: none; | |||
top: 0; | |||
width: 100%; | |||
} | } | ||
.gear-category::before { | .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 { | .gear-category.Clothing::before { | ||
mask-image: var(--gear-icon-clothing); | |||
-webkit-mask-image: var(--gear-icon-clothing); | |||
} | } | ||
.gear-category.Headgear::before { | .gear-category.Headgear::before { | ||
mask-image: var(--gear-icon-headgear); | |||
-webkit-mask-image: var(--gear-icon-headgear); | |||
} | } | ||
.gear-category.Shoes::before { | .gear-category.Shoes::before { | ||
mask-image: var(--gear-icon-shoes); | |||
-webkit-mask-image: var(--gear-icon-shoes); | |||
} | } | ||
/* New infobox implementation styles */ | /* New infobox implementation styles */ | ||
.infobox { | .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%); | |||
} | } |
Latest revision as of 03:38, 13 March 2024
/* CSS placed here will be applied to all skins NOTE: The editor does not know how to handle CSS variables and will complain about there being errors when this file is saved. Be sure to double-check your edits carefully before saving. */ /* [[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. <div class="toclimit-3">, for instance, will limit to showing ==headings== and ===headings=== but no further. */ .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%); }