MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/* Once the font upload issue is fixed (MAIN-21389), the two fonts below should be replaced with a local upload */ @font-face { font-family: 'noita'; src: local('noita'), url('https://vignette.wikia.nocookie.net/pcj/images/a/a4/NoitaPixel.ttf') format('truetype'); }

@font-face { font-family: 'glyphs'; src: local('glyphs'), url('https://vignette.wikia.nocookie.net/pcj/images/3/3b/Noita-Glyph.ttf') format('truetype'); }

/* This governs the sections on the Community portal */ .cpbox { display: flex; flex-direction: row-reverse; flex-wrap: wrap; }

.cpbox #admins { box-sizing: border-box; width: calc(33% - 10px); margin: 5px; flex-grow: 1; min-width: 300px; }

.cpbox #help { box-sizing: border-box; width: calc(67% - 10px); margin: 5px; flex-grow: 1; }

/* Front page layout styles */ .fpbox { margin: 5px; padding: 5px; overflow: auto; width: calc(100% - 2px); font-size: 14px; }

/* Multi-column box support */ .fp-container main .columns .leftcol, .fp-container .columns .rightcol { width: 100%; margin: 0; padding: 0; }

.fpheader { font-family: noita, sans-serif; text-shadow: 2px 2px black; }

@media (min-width: 990px) { .fp-container .columns .leftcol { float: left; width: 50%; }

.fp-container .columns .rightcol { float: right; width: 50%; } }

.fp-section { display: flex; flex-wrap: wrap; }

/* This CSS governs the responsive 3 column main page layout */ min-height:calc(325px + 2.3em); }
 * 1) fptweets {

display: grid; grid-template-areas: "a" "b" "c" "d"; grid-template-columns: 100%; } @media screen and (min-width:990px) { #fp-3column.fp-container { grid-template-areas: "a b" "c b" "c d"; grid-template-columns: 520px auto; } } @media screen and (min-width:1350px) { #fp-3column.fp-container { grid-template-areas: "a b c" "d b c"; grid-template-columns: 1fr 1fr 505px; } }
 * 1) fp-3column.fp-container {

grid-area: a; }
 * 1) fp-1 {

grid-area: b; }
 * 1) fp-2 {

grid-area: c; }
 * 1) fp-3 {


 * 1) fp-3 .fpbox { min-width: 500px; }

grid-area: d; }
 * 1) fp-4 {

.fpbody.responsive-columns { display: grid; grid-template-columns: repeat(auto-fit,minmax(10rem,1fr)); column-gap: 1rem; place-items: center; padding: 0 0.5rem; }

.fpbody.responsive-columns div { width: 100%; }

.fpbody.fplinks { display: flex; flex-wrap: wrap; place-content: space-evenly; column-gap: 0.5rem; }

/* Used in Template:FP icon */

.fpbody.fplinks .fp-icon { flex: 0 1 64px; }

.fp-icon { display: inline-block; margin: 2px; max-width: 100px; text-align: center; vertical-align: top; }

/* end responsive 3 column main page layout */

/* Fix for popups sometimes overlapping their link, creating a loop */ .mwe-popups.flipped-y, .mwe-popups.flipped-x-y { margin-top: -30px; }

/* Adjust caption styles for EmbedVideo extension */ .embedvideo .thumbcaption { padding: 0.5ex 1ex; font-size: 0.9em; }

/* Simple spoiler-compatible reusable pixel font class */ .noita-font { font-family: 'noita', sans-serif; }

.spoiler-hidden .noita-font { font-family: 'glyphs', sans-serif; }

/* Base styles for Portable Infoboxes */

figure.pi-image { border: 0; margin: 0; padding: 0; vertical-align:baseline }

.portable-infobox .pi-title { font-size: 1.5em; padding: 0.4em; font-family: 'noita', '04b03', sans-serif; text-shadow: 1px 1px 1px rgb(0 0 0 / 75%); text-align: center; }

.portable-infobox .pi-secondary-font { font-family: 'noita', sans-serif; font-weight: normal; }

.pi-theme-enemy .pi-data[data-source="alias"] div.pi-data-value { text-align: center; width: 100%; }

.portable-infobox { background-color: #000000; border: 2px solid #505050; border-radius: 4px; position: relative; }

.portable-infobox .pi-border-color, .portable-infobox .pi-smart-data-value:not(:first-child), .portable-infobox .pi-smart-data-label:not(:first-child) { border-color: #505050; }

.portable-infobox .pi-header { background-color: #181818; }

.portable-infobox .pi-data { align-items: center; }

.pi-section-tab:only-child { display: none; }

.pi-section-navigation { flex-wrap: wrap; justify-content: center; align-content: baseline; overflow-x: hidden; overflow-y: auto; }

.portable-infobox .pi-group:last-child { border-bottom: none; }

.pi-theme-item .pi-item[data-source^="description"] .pi-data-value { text-align: center; width: 100%; hyphens: manual; }

.portable-infobox .pi-caption { text-align: center; hyphens: manual; }

.portable-infobox .pi-section-tab { color: #9bdae9; }

.portable-infobox .pi-section-tab.pi-section-active { color: #2cbaed; }

/*************************************
 * Used by Template:Infobox enemy *

.pi-theme-enemy .pi-data[data-source^="health"] .pi-data-value { display: grid; grid-template-columns: 1fr auto; grid-gap: 0.5rem; }

.pi-data-value .hp-value { grid-column: 2 / 3; }

.pi-theme-enemy .pi-data[data-source^="immunities"] .pi-data-value { width: 100%; display: flex; place-content: center; flex-wrap: wrap; }

.pi-theme-enemy .pi-data[data-source^="immunities"] .pi-data-value div { margin: 0 0.2rem 0.2rem 0.2rem; flex: 0 1 40px; }

.pi-theme-enemy .pi-data[data-source^="drops"] .pi-data-value { column-count: 2; column-gap: 0.5rem; }

.pi-theme-enemy .pi-data[data-source^="icon"] { position: absolute; margin-top: -55px; border: none; }

.pi-theme-enemy .pi-data[data-source^="icon"] img { border-radius: 5px; box-shadow: 0 0 0 2px #d7bd70; }

.pi-theme-enemy figure.pi-image { display: grid; grid-gap: 0.5rem; justify-content: center; align-content: space-evenly; max-width: 95%; min-height: 100px; margin: 0 auto; }

.pi-theme-enemy figure.pi-image img { max-width: 100%; height: auto; }

/*************************************
 * Used by Template:Spell infobox *

.portable-infobox.pi-theme-spell { width: 32em; }

.pi-theme-spell .pi-data, .pi-theme-spell .pi-group { border: none; }

.pi-theme-spell .pi-font { font-family: 'noita', sans-serif; font-weight: normal; }

.pi-theme-spell .pi-font, .pi-theme-spell .pi-secondary-font { font-size: 1.2em; }

.pi-theme-spell .pi-section-content.pi-section-active { display: grid; grid-template-columns: auto 100px; align-items: center; }

.pi-theme-spell .pi-data-label { flex-basis: 100%; grid-column: 1 / 2; }

.pi-theme-spell .pi-data { grid-column: 1 / 2; }

.pi-theme-spell .pi-image { grid-column: 2 / 3; grid-row: 2 / 4; margin-right: 2em; }

.pi-theme-spell .pi-data[data-source^="description"] { margin: 0.5em; grid-column: 1 / 3; }

.pi-theme-spell .pi-data[data-source^="effect"] { grid-column: 1 / 4; }

.pi-theme-spell .pi-data[data-source^="effect"] .pi-data-value { flex-basis: 100%; }

.pi-theme-spell { padding: 0 0.5rem 0.75rem 0.5rem; }

/*********************************
 * Used by Template:Hover gif *

.hover-gif.gif-inline { display:inline-block; }

.hover-gif .thumbinner { position: relative; opacity: 1; }

.hover-gif .thumbinner:not(:hover) img { opacity:0; transition: opacity 0.5s; }

.hover-gif a.image { position:relative; }

.hover-gif a.image::before { position: absolute; background: url(https://static.wikia.nocookie.net/noita_gamepedia_en/images/6/64/Gif_icon_overlay.png/revision/latest) no-repeat; background-size: 50px; width: 50px; height: 50px; top: calc(50% - 25px); left: calc(50% - 25px); content: ""; z-index: 2; }

.hover-gif:hover a.image::before { display:none; }

.hover-gif canvas { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid #3C4258; border-radius: 4px; opacity: 1; transition: opacity 0.3s; }

.hover-gif .thumbinner:hover canvas { opacity: 0; }

/***********************************
 * Used by Template:GameMessage *

.GameMessage { display: inline-grid; grid-template-rows: auto auto; color: #fff; margin: 2px 5px; vertical-align: middle; text-align: center; }

.spoiler-hidden .GameMessage { display: inline; color: #77c999; }

.GameMessageInner { background-color: rgba(248,144,0,0.25); border-radius: 8px; border: 2px solid rgb(248,144,0); border-left: 5px groove rgb(248,144,0); border-right: 5px ridge rgb(248,144,0); padding: 4px 15px 0 15px; font-size: 1.2em }

.spoiler-hidden .GameMessageInner { background-color: transparent; border: 0; border-radius: 0; border-left: 0; border-right: 0; padding: 0; font-size: inherit; }

.GameMessageUnder { font-size: 0.8em; } .spoiler-hidden .GameMessageUnder { font-size: inherit; }

/****************************
 * Used by Template:Book *

.lore-book { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; align-items: center; column-gap: 1rem; float: left; border: 3px solid #948064; border-radius: 4px; padding: 0.5rem 1rem; background-color: #0d0c0b; }

.book-text { font-family: Noita, sans-serif; color: #77c989; }

.spoiler-hidden .book-text { font-family: glyphs, sans-serif; }

.lore-book .book-title { font-size: 1.2em; grid-column: 2 / 3; grid-row: 1 / 2; }

.lore-book .book-image { grid-column: 1 / 2; grid-row: 1 / 3; }

/*****************************************
 * Used by Template:Glyph Translation *

.glyph-translate-box { border-width: 2px; border-style: solid; border-color: #9a7a5a; border-radius: 2px; float: left; clear: left; padding: 0.25rem 0.5rem; }

.glyph-translate-box .word { display: inline-grid; letter-spacing: 0.2ex; text-align: center; }

.glyph-translate-box .glyphs { font-family: glyphs, sans-serif; line-height: 1em; }

.glyph-translate-box .plaintext { font-family: noita, sans-serif; letter-spacing: 1px; line-height: 1em; }

.spoiler-hidden .glyph-translate-box .plaintext { color: transparent; }

/*********************************************************
 * Used by Template:Wand and/or Template:Wand Card*

.wand-card, .wand-spells-card { font-family: 'noita', sans-serif;

border: 3px solid #928167; border-radius: 0px 7.5px 0px 7.5px; background-color: rgba(5, 5, 5, 0.8); display: grid; width: fit-content; column-gap: 1.5rem; align-items: center; justify-items: left; }

.wand-spells-card { font-size: 1.3em; padding: 1em; grid-template-areas: 'image label value. . . .'       'image label value. . . .'       'image label value. . . .'       'spells spells spells spells spells spells spells'; }

.wand-card { font-size: 1.4em; line-height: 1.2em; padding: 1.25rem; grid-template-areas: "name name image" "label value image" "label value image" "label value image" "label value image" "label value image" "label value image" "label value image" "label value image" "label value image" "spells spells spells"; }

.wand-card .wand-name { margin-top: 0; grid-area: name; }

.wand-sprite { grid-area: image; }

.wand-card .wand-sprite { transform: rotate(-0.25turn); }

.stat-label { grid-column: label; }

.stat-label img { margin-right: 0.5rem; }

.stat-value { grid-column: value; }

.always-cast-label { margin-top: 1.25rem; }

.always-cast-spells { margin-top: 1.25rem; display: flex; justify-items: left; justify-content: left; }

.always-cast-spells .always-cast { background: transparent; height: 32px; width: 32px; flex: 0 0 32px; }

.spell-container { grid-area: spells; grid-gap: 0.2rem; margin-top: 1.25rem; }

.wand-card .spell-container { display: grid; place-items: center; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; margin-left: auto; margin-right: auto; }

.wand-spells-card .spell-container { grid-area: spells; display: flex; flex-wrap: wrap; align-items: center; align-content: center; }

.spell-container .wand-card-spell { border: 3px solid #794738; border-radius: 5px; border-style: dashed; background: rgb(54, 43, 38); height: 42px; width: 42px; }

/**************************************
 * Used by Template:SpellQueryIcon *

.SpellQueryIcon { border: 3px solid #8D3F18; border-radius: 5px; background: rgba(34,41,51,0.8); height: 48px; width: 48px; display: inline-block; margin-bottom: 4px; }

/***************************************
 * Used by Template:SpellQueryGroup *

.SpellQueryGroup { text-align:center; float:right; font-family:'04b03',sans-serif; font-size:1.3em; border:2px solid #928167; border-radius:5px; background-color:rgba(5,5,5,0.8); margin:0em 2.5em 0em 2.5em; width:100%; max-width:21em; clear:right; }

/*******************************
 * Used by Template:Spoiler *

.spoiler-toggle { background-color: #0d0c0b; color: #77c999; overflow: auto; border: 3px solid #948064; padding: 0.4em; border-radius: 0 3px; font-weight: normal; }

.spoiler-hidden, .spoiler-hidden code { font-family: glyphs, sans-serif; }

.spoiler-hidden img, .spoiler-hidden .hover-gif canvas { filter: blur(20px); clip-path:inset(0px 0px 0px 0px); /* Chrome */ clip-path:border-box; /* Good browsers */ }

/**************************
 * Used by Template:Hp *

.hp-label, .hp-value { display: inline-block; }

.hp-label { margin-right: 0.5em; }

.hp-value { color: red; }

/**********************************
 * Used by Template:EnemyQuery *

.enemy-query-item { background: rgb(39, 43, 55); height: 10rem; width: 11rem; margin: 0.1rem; display: inline-grid; grid-template-rows: 1fr auto auto; grid-gap: 0.1rem; align-items: end; justify-items: center; }

/* Ambox notices */ .ambox { background-color: #282828; border-bottom-color: #383838; border-right-color: #383838; border-top-color: #383838; border-collapse: collapse; align-items: center; font-size: 95%; margin: 1rem 6rem; display: grid; grid-template: auto 1fr / auto 1fr; }

.ambox-gray { border-left-color: #383838; }

.ambox.ambox-tiny { font-size: 90%; margin: 2px 0; width: auto; }

.ambox + .ambox { margin-top: -2px; }

.ambox-text { padding: 0.25em 0.5em; }

.ambox-image { padding: 2px 0px 2px 0.5em; text-align: center; width: 60px; }

.ambox-tiny .ambox-image { padding: 2px 0.5em; text-align: left; width: auto; }

/* Ambox colors */ .ambox-blue { border-left: 10px solid #1e90ff; }

.ambox-red { border-left: 10px solid #b22222; }

.ambox-orange { border-left: 10px solid #f28500; }

.ambox-yellow { border-left: 10px solid #f4c430; }

.ambox-purple { border-left: 10px solid #9932cc; }

.ambox-gray { border-left: 10px solid #bba; }

.ambox-green { border-left: 10px solid #228b22; }

/* Ambox small text */ .amsmalltext { font-size: smaller; margin-left:0.8em; margin-top:0.5em; }

/**************** ul.tabbernav { border:none; padding-bottom:1em; margin:0 2px; }
 * Tabber styles *

ul.tabbernav li a, ul.tabbernav li a:link { border:2px solid #928167; color:#9acbf1; }

ul.tabbernav li a, ul.tabbernav li a:hover, ul.tabbernav li.tabberactive a { background-color:#000; }

ul.tabbernav li:not(.tabberactive) a:hover { box-shadow:inset 0 0 2px 2px #0d0c0b6f; color:#e6e6e6; }

ul.tabbernav li:not(.tabberactive) { padding-top:1em; }

ul.tabbernav li.tabberactive { border-bottom:0; }

ul.tabbernav li.tabberactive a, ul.tabbernav li.tabberactive a:hover { border:2px solid #a67e4d; border-bottom:0; color:#E6E6E6; padding-bottom:1em; }

.tabber .tabbertab { border:2px solid #928167; border-radius:5px; }

/*************
 * End Tabber *

/***************** .infobox { float: right; width: 21em; max-width:100%; margin-left: 1em; margin-right: 1em; margin-bottom: 0.5em; padding: 4px; background-color:transparent; border:1px solid #505050; }
 * Infobox styles *

.infobox-table { width: 100%; padding: 0; background-color:transparent; border: 0; }

.infobox-header, .infobox-section { font-size:1.1em; font-family: 'noita', '04b03',sans-serif; text-shadow:1px 1px 1px rgba(0,0,0,0.75); border:0; font-weight:normal; text-align:center; }

.infobox-header { background-color:#181818; font-size: 1.5em; padding:0.4em; }

.infobox-section { padding:0.05em 0.5em; }

.infobox-centered { text-align: center; }

.infobox-centered img { max-width:100%; height:auto; }

.infobox-row { vertical-align: top; }

.infobox-row-name { min-width:50%; text-align: right; vertical-align:middle; padding:0.1em 0.7em; font-size:0.95em; font-family: 'noita', '04b03',sans-serif; background-color:#181818; border-right: 1px solid #223546; }

.infobox-row-value { padding-left:0.2em; }

.infobox-spacer { height: 0.5em; }

/* Styles for multiple infoboxes inside a tabber */

.infobox-tabber { width:calc(22.3em + 10px); float:right; }

.infobox-tabber .tabber { margin-left:1em; margin-bottom:0.5em; }

.infobox-tabber .tabbertab { padding:0; border:0; }

.infobox-tabber .infobox { margin:0; }

.infobox-tabber .tabbertab > p:first-child, .infobox-tabber .tabbertab > p:last-child { display:none; }

.infobox-tabber .tabbernav { border-bottom:0; }

/*********************
 * End infobox styles *

/************************************* .spell { float:right; font-family: 'noita', '04b03', sans-serif; font-size:1.3em; border:2px solid #928167; border-radius:5px; background-color:rgba(5,5,5,0.8); padding:0.5em; margin:0.5em; width:100%; max-width:25em; }
 * Used by Template:Spell infobox *

.spell .spell-description { width:100%; } /*****************************
 * End Template:Spell infobox *

/*********************** .spoilers-body { background-color:#222; color:#eee; overflow:auto; } /*********************
 * Spoiler style tweaks *
 * End spoiler tweaks *

/********************* /* Front page styles * /*********************/ .fpmain { width: 100%; overflow: hidden; z-index: 1; }

.fpbanner { border: 1px solid #9C9C9C; box-shadow: rgba(255, 255, 255, .7) 0 0.1em 0.5em; background: rgba( 0, 0, 0, .2 ); color: #ffffff; margin: 0 5px 5px 5px; padding: 5px; min-height: 80px; }

.fpbannertable { display: table; border: none; background: transparent; width: 100%; min-height: 75px; margin: 0; padding: 5px; }

.fpbannercell { display: table-cell; text-align: center; vertical-align: middle; }

.fpbannerblock { border: none; color: #ffffff; font-weight: bold; text-shadow: 0 0 8px rgba(255, 255, 255, 0.75); font-size: 132%; width: 100%; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpheader { background-color: rgba(180, 159, 139, .3); border: none; text-align: center; color: #ffdc8a; font-size: 150%; box-shadow: 6px 6px 18px -10px #676767; margin-bottom: 10px; }

.fpmidsections { float: left; width: 100%; overflow: hidden; }

.fpbox { border: 1px solid #9C9C9C; box-shadow: rgba(255,255,255,.7) 0 0.1em 0.5em; background: rgba(0, 0, 0, 0.5); color: #ffffff; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; }

.fpbox .mainheading { border: none; color: #ffffff; font-size: 150%; font-weight: bold; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpbox .heading { border: none; border-bottom: 1px solid #ffffff; color: #ffffff; font-size: 132%; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpmain .columns .leftcol { width: 100%; margin: 0; padding: 0; }

.fpmain .columns .rightcol { width: 100%; margin: 0; padding: 0; }

.fpsection1, .fpsection2, .fpsection3, .fpsection4 { float: left; clear: both; width: 100%; }

div.fp2columnonly, div.fp3columnonly { display: none; }

@media (min-width: 790px) { .fpsection1 { float: left; clear: none; width: 50%; }

.fpmidsections { clear: none; float: right; width: 50%; }

.fpsection4 { float: left; clear: none; width: 50%; }

div.fp2columnonly { display: block; } }

@media (min-width: 990px) { .fpmain .columns .leftcol { float: left; width: 50%; margin: 0; padding: 0; }

.fpmain .columns .rightcol { float: right; width: 50%; margin: 0; padding: 0; } }

@media (min-width: 1390px) { .fpmidsections { clear: none; float: right; width: 66.667%; }

.fpsection1 { clear: none; width: 33.333%; }

.fpsection2 { clear: none; width: 50%; }

.fpsection3 { clear: none; width: 50%; } .fpsection4 { clear: left; width: 33.333%; }

div.fp2columnonly { display: none; }

div.fp3columnonly { display: block; } }

.fpbox.plain { border: none; box-shadow: none; background: transparent; }

.fpimagelist ul { list-style-type: none; list-style-image: none; }

.fpvideos { margin: 0 auto; overflow: hidden; text-align: center; }

.fpvideo { display: inline-block; margin: 0 5px; } .pi-horizontal-group .pi-header { text-align: center; }