MediaWiki:Common.css
Jump to navigation
Jump to search
In other languages: 日本語 • Български • Deutsch • Ελληνικά • English • Español • Français • Magyar • Italiano • 한국어 • Nederlands • Polski • Português • Português do Brasil • Русский • Türkçe • 中文
CSS and Javascript changes must not modify the wiki.gg branding or advertisements.
Note: After saving, you may have to bypass your browser's cache to see the changes.
Firefox / Safari | Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
|
---|---|
Google Chrome | Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
|
Internet Explorer | Hold Ctrl while clicking Refresh, or press Ctrl-F5
|
Opera | Clear the cache in Tools → Preferences |
/* CSS placed here will be applied to all skins */
/* Noita pixel and glyph-cipher fonts used in various templates */
@font-face {
font-family: 'noita';
src: local('Noita Wiki Pixel'), url('https://commons.wiki.gg/images/a/a4/NoitaPixel.ttf') format('truetype');
font-display: swap;
}
@font-face {
font-family: 'glyphs';
src: local('Noita Wiki Glyphs'), url('https://commons.wiki.gg/images/c/ca/NoitaGlyphScaled.ttf') format('truetype');
font-display: swap;
}
/* The following variables can be overridden by themes to alter certain colors */
:root {
/* main content colors / styles */
--content-background: rgba(24, 23, 21, 0.95);
--content-inset-background: rgba(255,255,255,0.05);
--content-border-color-rgb: 177, 156, 114;
--content-border-color: rgb(var(--content-border-color-rgb));
--content-border: 4px solid var(--content-border-color);
--content-hover-border-color-rgb: 217, 190, 153;
--content-hover-border-color: rgb(var(--content-hover-border-color-rgb));
/* portable infobox colours */
--pi-background: #000;
--pi-secondary-background: #181818;
--pi-border-color: #505050;
--pi-border-color-active: #eee;
/* frontpage colors */
--fpbox-background-color: rgba(0,0,0,0.5);
--fpheader-background-color: var(--theme-sticky-nav-background-color);
--fpheader-color: #ffdc8a;
/* template colors, mainly used for Template:SpellQuery and a few others */
--template-background-color-1: #272b37;
--template-background-color-2: #434649;
--spoiler-color: #77c999;
/* miscellaneous colors */
--text-color: #eeeaea;
--visited-link-color: #816c96;
/* spell border colors + sizes */
--color-spell-projectile: #5A2323;
--color-spell-static: #8D3F18;
--color-spell-passive: #212F26;
--color-spell-utility: #7B2A74;
--color-spell-modifier: #2D3A72;
--color-spell-material: #356F44;
--color-spell-multicast: #1C6D73;
--color-spell-other: #714B33;
--color-spell-beta: #1E90FF;
--color-spell-unknown: #928167;
/* the spellType (spellProjectile etc.) classes override this variable */
--color-spell-base: var(--color-spell-unknown);
--color-spell-background: rgba(34,41,51,0.8);
--spell-border-radius: 5px;
--spell-border-width: 3px;
/* Inline SVG icons */
--svg-icon-tag: url(data:image/svg+xml;base64,PHN2ZyBzdHlsZT0iZmlsbDp0cmFuc3BhcmVudDtzdHJva2Utd2lkdGg6MjQ7c3Ryb2tlOiNiZmMyYmQ7IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMWVtIiB2aWV3Qm94PSItMTIgMCA0NTggNTEyIj48IS0tISBGb250IEF3ZXNvbWUgRnJlZSA2LjQuMiBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZSAoQ29tbWVyY2lhbCBMaWNlbnNlKSBDb3B5cmlnaHQgMjAyMyBGb250aWNvbnMsSW5jLiAtLT48cGF0aCBkPSJNMCA4MFYyMjkuNWMwIDE3IDYuNyAzMy4zIDE4LjcgNDUuM2wxNzYgMTc2YzI1IDI1IDY1LjUgMjUgOTAuNSAwTDQxOC43IDMxNy4zYzI1LTI1IDI1LTY1LjUgMC05MC41bC0xNzYtMTc2Yy0xMi0xMi0yOC4zLTE4LjctNDUuMy0xOC43SDQ4QzIxLjUgMzIgMCA1My41IDAgODB6bTExMiAzMmEzMiAzMiAwIDEgMSAwIDY0IDMyIDMyIDAgMSAxIDAtNjR6Ij48L3BhdGg+PC9zdmc+);
}
html {
/* Pad scrolling so clicking anchors puts them a bit below the top of the screen. */
scroll-padding-block-start: 6rem;
}
/* Tweaks for mod-namespace breadcrumb links to be more prominent */
body.ns-10004 #contentSub::before {
content: 'Modded content';
}
body.ns-10004 #contentSub:not(:empty)::before {
content: 'Modded content from';
}
body.ns-10004 #contentSub:not(:empty)::after {
content: '>';
}
body.ns-10004 #contentSub {
font-size: 1.25em;
display: flex;
gap: 0.25rem;
color: var(--content-border-color);
}
::-webkit-scrollbar {
width: 0.75rem;
background: inherit;
}
::-webkit-scrollbar-thumb {
background-color: #ccc;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 0.5rem;
}
::-webkit-scrollbar-thumb {
background-color: #c5c5c5;
background-color: rgba(255, 255, 255, 0.35);
}
@media screen and (min-device-width: 1024px) {
.mobileonly {
display: none;
}
}
@media screen and (max-device-width: 1024px) {
.nomobile {
display: none;
}
#fp-3 .fpbox {
min-width: 300px;
}
div:is(.thumb, .thumbinner),
.embedvideo,
.embedvideowrap {
max-width: 100%;
box-sizing: border-box;
}
.embedvideowrap iframe {
max-width: 100%;
}
}
#searchInput::placeholder {
color: var(--text-color);
}
#content {
background: var(--content-background);
border: var(--content-border);
color: var(--text-color);
}
@media screen and (max-width: 720px) {
#content {
padding-left: 0.5em;
padding-right: 0.5em;
border-left: none;
}
#right-navigation #p-search {
margin-top: 14px;
}
#mw-head {
top: 3.2rem;
}
}
@media screen {
#mw-head-base {
height: 6em;
}
}
#content a:visited {
color: var(--visited-link-color);
}
#content a:visited.new {
color: #e55;
}
/*
** Tweaks for the visual editor **
*/
/* Move below wikigg banner */
.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
top: 35px;
}
/* Fix ad sizes to what is expected per wiki.gg, since font sizing causes it to increase beyond its expected size.
This is temporary until the original styles get fixed.
*/
.header-img, .footer-img {
max-width:728px !important;
max-height:90px !important;
}
.content-body {
margin-bottom: 2rem;
}
#content .content-body img {
/* Make sure images can't exceed their content boxes */
max-width: 100%;
height: auto;
}
/*
Most of our images will be sprites and such that use pixel sizing.
This should force browsers to render them upscaled with nearest-neighbour
scaling, to avoid blurriness.
However, this may cause some issues with non-pixel-art image scaling,
so if issues arise we should remove this.
*/
#content .content-body img:not(:is(.mwe-math-fallback-image-inline, .mwe-math-fallback-image-display)) {
image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
}
/* Provides a way for templates to override the hard-coded dimensions
* applied to images when using [[File:]]
* Particularly useful for pixel graphics to avoid server-side downscaling
* making them look blurry.
* Instead of this:
** [[File:Some_Spell.png|40px|link=some link]]
* Do this:
** <div class="setChildImgSize" style="--child-image-size:40px">
** [[File:Some_Spell.png|link=some link]]</div>
*/
.setChildImgSize > img,
.setChildImgSize > * > img,
.setChildImgSize > * > * > img {
width: var(--child-image-size) !important;
}
#catlinks,
#toc,
.toc,
.mw-warning,
.warningbox,
ul#filetoc {
background-color: var(--content-inset-background);
}
#toc {
margin: 1em 0.25em;
}
.toctogglelabel {
color: var(--links-color);
}
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none;
}
/* Enlarge the top-level section-headings, for hierarchy and skimmability */
.toclevel-1 > a {
font-size: 1.14em;
line-height: 1;
}
h1, h2 {
color: var(--text-color);
border-bottom: 1px solid var(--content-border-color);
}
h3, h4, h5, h6 {
color: var(--text-color);
}
pre,
.mw-code {
color: var(--text-color);
}
#footer {
background: var(--content-background);
border: var(--content-border);
}
#footer ul li {
color: var(--text-color);
overflow: auto;
}
.editOptions {
color: var(--text-color);
}
.editSchemaSection {
color: #222;
}
.oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
color: var(--content-background);
}
.flip-img-x img {
transform: scaleX(-1);
}
.flip-img-y img {
transform: scaleY(-1);
}
.redirectMsg {
background: var(--content-inset-background);
}
/* This governs the sections on the Community portal */
.cpbox {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.cpbox #admins {
box-sizing: border-box;
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 */
.fp-section {
display: flex;
flex-wrap: wrap;
}
/* This CSS governs the responsive 3 column main page layout */
#fptweets {
min-height:calc(325px + 2.3em);
}
#fp-3column.fp-container {
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: 530px auto;
}
}
/* Remove the 3-column version for now -- looks bad without Twitter
@media screen and (min-width: 1350px) {
#fp-3column.fp-container {
grid-template-areas: "a b c" "d b c";
grid-template-columns: 1fr 1fr 530px;
}
}
*/
#fp-1 {
grid-area: a;
}
#fp-2 {
grid-area: b;
}
#fp-3 {
grid-area: c;
}
#fp-3 .fpbox { min-width: 500px; }
#fp-4 {
grid-area: d;
}
.fpbody.responsive-columns {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(14rem,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:is(.flipped-y, .flipped-x-y) {
margin-top: -30px;
}
/* Adjust caption styles for EmbedVideo extension */
/*.embedvideowrap iframe {
position: absolute;
top: 0;
left: 0;
}*/
.embedvideo {
border-radius: 0;
}
.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;
}
/* Classes for whitespace templates */
.nowrap {
white-space: nowrap;
}
/* table styles */
table {
white-space: normal;
}
table.wikitable {
display: block;
}
table.wikitable caption {
display: block;
}
table.wikitable.alchemy-table :is(th, td) {
padding: 0.25rem;
word-break: break-word;
min-width: 2em;
}
table.wikitable.compact :is(th, td) {
min-width: 1em;
}
/* cargo table stuff */
table.cargoTable td {
padding: 0.05rem;
white-space: pre;
overflow: auto;
max-width: 20rem;
}
table.cargoTable td::-webkit-scrollbar {
width: 6px;
height: 6px;
}
/* headline numbering */
span.mw-headline-number::after {
content: '.';
}
/* Base styles for Portable Infoboxes */
.portable-infobox {
background-color: var(--pi-background);
border: 2px solid var(--pi-border-color);
position: relative;
}
.portable-infobox :is(.pi-section-navigation, .pi-media-collection-tabs) {
padding: 0;
}
figure.pi-image {
border: 0;
margin: 0;
padding: 0;
vertical-align:baseline
}
/* embiggen infobox images that are small */
.pi-image-thumbnail {
min-width: 84px;
height: auto;
image-rendering: pixelated;
}
.portable-infobox .pi-title {
font-size: 1.5em;
padding: 0.4em;
padding-bottom: 0.2em;
font-family: 'noita', '04b03', sans-serif;
text-shadow: 1px 1px 1px rgb(0 0 0 / 75%);
text-align: center;
border-radius: 3px 3px 0 0;
}
.portable-infobox .pi-secondary-font {
font-family: 'noita', sans-serif;
font-weight: normal;
}
.portable-infobox :is(.pi-section-navigation, .pi-media-collection-tabs) {
font-family: 'noita', sans-serif;
}
.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;
}
.pi-section-navigation .pi-section-tab,
.pi-media-collection .pi-tab-link {
border-width: 0;
border-color: var(--pi-border-color);
border-bottom-width: 3px;
margin: 0 0.1rem;
}
.portable-infobox .pi-group {
clear: both;
}
.portable-infobox .pi-group:last-child {
border-bottom: none;
}
.portable-infobox .pi-caption {
text-align: center;
hyphens: manual;
}
.portable-infobox table.pi-horizontal-group {
display: table;
}
.portable-infobox :is(.pi-panel-scroll-wrapper, .pi-title) {
background-color: var(--pi-secondary-background);
}
.portable-infobox :is(.pi-smart-data-value, .pi-smart-data-label):not(:first-child) {
border-color: var(--pi-border-color);
}
.portable-infobox .pi-header {
background-color: var(--pi-secondary-background);
}
.pi-section-navigation .pi-section-tab:is(.pi-section-active, .current),
.pi-media-collection .pi-tab-link.current {
border-color: var(--pi-border-color-active);
box-shadow: 0 -6px 6px -4px rgb(255 255 255 / 50%) inset;
}
/*************************************
* 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-theme-enemy .pi-data[data-source^="alias"] div.pi-data-value {
text-align: center;
width: 100%;
}
.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 h3[data-source~="damage"] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pi-theme-enemy .pi-data[data-source^="drops"] .pi-data-value {
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
}
.pi-theme-enemy .pi-data[data-source^="drops"] .pi-data-value .item-drop {
background-color: var(--pi-secondary-background);
padding: 0.25rem 0.3rem;
transition: 0.25s background-color ease-in-out;
border-radius: 0.8rem;
}
.pi-theme-enemy .pi-data[data-source^="drops"] .pi-data-value .item-drop:hover {
background-color: var(--pi-border-color);
}
.pi-theme-enemy .pi-data[data-source^="icon"] {
position: absolute;
margin-top: -4rem;
border: none;
}
.pi-theme-enemy .pi-data[data-source^="icon"] img {
border-image-slice: 2 fill;
border-image-width: 2px;
border-image-outset: 2px;
border-image-repeat: stretch;
border-image-source: url(https://noita.wiki.gg/images/5/52/UI_Progress_grid_box.png);
border-style: solid;
border-width: 4px;
}
.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:Infobox spell]] *
*************************************/
.portable-infobox.pi-theme-spell {
width: 22rem;
color: #dbd7d7;
letter-spacing: 0.02em;
background-color: rgb(5, 5, 5);
background-color: rgba(5 5 5 / .8);
}
.portable-infobox.pi-theme-spell .pi-item[data-source="type"] {
background-color: var(--pi-secondary-background);
}
.pi-theme-spell .pi-item[data-source="type"] .pi-data-label {
flex-basis: 50%;
}
.pi-theme-spell :is(.pi-data, .pi-group) {
border: none;
}
.pi-theme-spell .pi-font {
font-family: 'noita', sans-serif;
font-weight: normal;
}
.pi-theme-spell :is(.pi-font, .pi-secondary-font) {
font-size: 1.2em;
}
.pi-theme-spell .pi-section-content.pi-section-active {
display: grid;
grid-template-columns: 1fr auto;
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-group {
grid-column: 1/4;
}
.pi-theme-spell .pi-group .pi-data-label {
flex-basis: 30%;
}
.pi-theme-spell .pi-image {
grid-column: 2 / 3;
grid-row: 1 / 30;
margin-right: 2em;
}
.pi-theme-spell .pi-data[data-source^="description"] {
margin: 0.5em;
grid-column: 1/span 2;
grid-row: 1;
}
.portable-infobox.pi-theme-spell {
--pi-item-spacing: 0.22em 1em;
}
.portable-infobox .pi-header {
padding-top: 0.6em;
padding-bottom: 0.5em;
}
.portable-infobox.pi-theme-spell .pi-panel .pi-data-label {
position: relative;
display: flex;
align-items: baseline;
}
.portable-infobox.pi-theme-spell .pi-panel .pi-data-label::after {
content: '';
border-bottom: 0.18em dotted #222;
height: 1em;
display: inline-flex;
margin: 0 0.2em 0 0.3em;
flex: 1 1 100%;
}
.portable-infobox.pi-theme-spell .pi-data:only-of-type .pi-data-label::after {
opacity: 0;
}
.portable-infobox.pi-theme-spell .pi-data {
align-items: baseline;
}
#content .content-body .portable-infobox.pi-theme-spell .pi-data-label > img,
.portable-infobox.pi-theme-spell .pi-data-label > img {
margin-bottom: 0.2em;
margin-right: 0.2em;
align-self: center;
image-rendering: pixelated;
width: 20px;
max-width: 20px;
}
.portable-infobox.pi-theme-spell .pi-data-value code {
border-radius: 0 0.2em;
padding: 0px 0.3em;
line-height: 1.5;
}
.portable-infobox.pi-theme-spell .pi-image[data-source^="image"] {
margin: 1em;
grid-row: 1;
grid-column: 2;
place-self: center center;
}
.portable-infobox.pi-theme-spell .pi-data-value {
flex: 0 0 min-content;
white-space: pre;
overflow: hidden;
font-size: 1.4em;
line-height: 1.4;
padding-left: 3px;
}
.portable-infobox.pi-theme-spell .pi-data[data-source^="description"] .pi-data-value {
white-space: normal;
hyphens: none;
flex: 1 0 100%;
text-align: left;
}
.portable-infobox.pi-theme-spell .pi-data-label {
display: flex;
flex: 1 1 auto;
align-items: center;
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.portable-infobox.pi-theme-spell .pi-item {
grid-column: 2/3;
}
.portable-infobox.pi-theme-spell .pi-data[data-source^="description"] {
font-size: 1em;
grid-column: 1;
margin: 0.5em;
}
.portable-infobox.pi-theme-spell .pi-data[data-source^="description"] ~ .pi-item:nth-child(n+3) {
grid-column: 1/span 2;
}
@media screen and (max-width: 720px) {
.portable-infobox.pi-theme-spell {
min-width: 280px;
width: 50%;
max-width: 340px;
font-size: initial;
margin: 0 auto 15px 5px;
float: right;
}
#content .portable-infobox.pi-theme-spell .pi-image-thumbnail {
width: 50%;
max-width: 120px;
}
.portable-infobox.pi-theme-spell .pi-data {
padding: 0.22em 1.2em;
justify-content: space-between;
}
.portable-infobox.pi-theme-spell .pi-data-value {
font-size: 1.3em;
line-height: 1.3;
padding-left: 0.2em;
}
.portable-infobox.pi-theme-spell .pi-data[data-source^="description"] .pi-data-value {
font-size: 1.1em;
}
.portable-infobox.pi-theme-spell .pi-data-label > img {
margin-right: 0.2em;
}
}
@media screen and (max-width: 500px) {
.portable-infobox.pi-theme-spell {
width: 98%;
margin: 0 auto 15px 5px;
font-size: initial;
max-width: 98%;
}
.portable-infobox.pi-theme-spell .pi-data {
grid-column: 1/span 2;
padding: 2px 0.9em;
margin: 0;
}
}
.portable-infobox.pi-theme-spell .spoiler-toggle.inline {
display: block;
padding: 4px;
min-width: 8em;
text-align: center;
}
.portable-infobox.pi-theme-spell .spoiler-toggle .spoiler-content {
line-height: 1.2em;
font-size: .95em;
vertical-align: middle;
word-spacing: .1175em;
}
.portable-infobox.pi-theme-spell .spoiler-toggle .spoiler-content::after {
display: block;
content: '...Click to hide this spoiler';
font-size: 0.46em;
text-align: end;
font-family: noita,sans-serif;
word-spacing: 0;
letter-spacing: 0.04em;
}
.portable-infobox.pi-theme-spell .spoiler-toggle .spoiler-content.spoiler-hidden::after {
content: '...Click to reveal this spoiler';
}
.portable-infobox.pi-theme-spell :is(
[data-source^="unlockCondition"],
[data-source^="tags"],
[data-source^="effect"],
[data-source^="id"]) > .pi-data-value {
flex: 0 1 auto;
width: fit-content;
white-space: normal;
text-align: end;
overflow: clip;
min-width: 10%;
max-width: 78%;
font-size: 1.2em;
}
.portable-infobox.pi-theme-spell [data-source^="tags"] .pi-data-label {
min-width: min-content;
}
.portable-infobox.pi-theme-spell [data-source^="tags"] .pi-data-label::after {
display: none;
}
.portable-infobox.pi-theme-spell [data-source^="tags"] .pi-data-value {
min-width: min-content;
flex: 1 1 fit-content;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-end;
font-size: 0.9em;
}
.portable-infobox.pi-theme-spell .pi-data-value code {
display: inline-flex;
border-radius: 0 .2em;
padding: 0 .3em;
line-height: 1.5;
white-space: normal;
word-break: break-all;
background-color: #141414;
margin: 0.2em;
letter-spacing: 0.06em;
}
.portable-infobox.pi-theme-spell [data-source^="id"] code {
font-size: 0.96em;
border-radius: 0 0.4em;
border-color: currentColor;
}
.portable-infobox.pi-theme-spell [data-source^="tags"] code {
white-space: pre;
padding: 0.08em 0.3em 0.08em 1.86em;
border: 0.1em solid #bfc2bd77;
border-radius: 0 0.8em;
background-image: var(--svg-icon-tag);
background-repeat: no-repeat;
background-position: left 0.3em center;
letter-spacing: 0.01em;
}
.portable-infobox.pi-theme-spell [data-source^="tags"] code:hover {
box-shadow: 0 0 0.2em 0.02em #fff7;
filter: brightness(1.1);
}
.portable-infobox.pi-theme-spell {
--highlight-color: var(--color-spell-base, #777);
}
@media screen and (min-width: 720px) {
.portable-infobox.pi-theme-spell {
width: 22rem;
}
}
.portable-infobox.pi-theme-spell .pi-title,
.portable-infobox.pi-theme-spell .pi-group .pi-header {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-spell-background);
box-shadow: 0 0 0.32em 0.12em var(--highlight-color) inset;
letter-spacing: 0.02em;
text-shadow:
0 0 0 #fff,
4px 3px 3px #000,
1px 1px 2px #000,
-1px 0px 2px var(--highlight-color),
2px 1px 4px var(--highlight-color);
border: 0.11em solid black;
border-radius: var(--border-radius);
color: #fff;
}
.portable-infobox.pi-theme-spell .pi-title {
font-size: 1.8em;
height: 1.6em;
border: 3.6px solid black !important;
}
.portable-infobox.pi-theme-spell .pi-group .pi-header {
font-size: 1.2em;
border-radius: 0;
border: 3.6px solid black !important;
height: 1em;
}
.portable-infobox.pi-theme-spell {
border-radius: 4px / 10px;
border-radius: var(--border-radius);
border-width: 3px;
--border-radius: var(--a) var(--a) 0 0 / var(--b) var(--b) 0 0;
--a: 16px;
--b: 62px;
}
.portable-infobox.pi-theme-spell :is(.pi-title,.pi-header) {
--offtop: 0.06;
--inedges: 0.1;
--thickness: 0.06;
--blurratio: 3.2;
box-shadow:
var(--x) var(--y) var(--b) var(--w) var(--highlight-color) inset,
calc(var(--x) * -1) var(--y) var(--b) var(--w) var(--highlight-color) inset;
--x: calc(1em * var(--inedges));
--y: calc(1em * var(--offtop));
--w: calc(1em * var(--thickness));
--b: calc(var(--w) * var(--blurratio));
}
.portable-infobox.pi-theme-Passive :is(.pi-title,.pi-header) {
--highlight-color: hsla(171, 35%, 22%, 1);
}
.portable-infobox.pi-theme-Material :is(.pi-title,.pi-header) {
--highlight-color: hsla(126, 35%, 32%, 1);
}
.portable-infobox.pi-theme-Other :is(.pi-title,.pi-header) {
--highlight-color: hsla(43, 42%, 36%, 1);
}
@media screen and (max-width: 720px) {
.pi-theme-spell .pi-item.pi-item-spacing.pi-title {
font-size: 1.4em;
}
}
@media screen and (min-width: 500px) and (max-width: 720px) {
.portable-infobox.pi-theme-spell .pi-data {
padding: .22em 0.6em;
}
.portable-infobox.pi-theme-spell .pi-data[data-source^="description"] .pi-data-value{
font-size: 1em;
}
.portable-infobox.pi-theme-spell .pi-data-label {
font-size: 0.9em;
}
.portable-infobox.pi-theme-spell .pi-data-value {
font-size: 1.2em;
}
.portable-infobox.pi-theme-spell .pi-image[data-source^="image"] {
margin: 1em 1em 1em 0.8em;
}
.portable-infobox.pi-theme-spell .pi-group .pi-header {
font-size: 1.1em;
}
.portable-infobox.pi-theme-spell [data-source^="id"] code {
font-size: 0.76em;
}
}
.portable-infobox.pi-theme-spell .frames::after,
.portable-infobox.pi-theme-spell .frames.lowerbound:last-child::after {
content: 'f';
font-size: 0.9em;
margin-left: 0.2em;
}
.portable-infobox.pi-theme-spell .degrees::after {
content: '°';
content: '\00b0';
margin-left: 0.1em;
font-size: 1.3em;
line-height: 0;
}
.portable-infobox.pi-theme-spell [data-source="pattern"] .degrees::before {
content: '±';
content: '\00b1';
margin-right: 0.1em;
font-size: 1.2em;
line-height: 0.5;
}
.portable-infobox.pi-theme-spell .percentage::after {
content: '%';
font-family: monospace;
margin-left: 0.2em;
}
.portable-infobox.pi-theme-spell .seconds::after {
content: 's';
font-size: 0.9em;
margin-left: 0.2em;
}
.portable-infobox.pi-theme-spell .lowerbound::after {
content: none;
}
/************************************************************************/
/* Spell Tiers - Used by [[Template:SpellTierInfo]] & Spell Infobox */
/************************************************************************/
.portable-infobox.pi-theme-spell .pi-item[data-source^=spellTier] {
flex-direction: column;
padding: 0 .3em;
}
.portable-infobox.pi-theme-spell .pi-item[data-source^=spellTier] h3 {
padding: .2em .6em;
height: 2em;
}
.portable-infobox.pi-theme-spell .pi-item[data-source^=spellTier] .pi-data-value {
width: 100%;
}
.spellTierInfo-rarity,
.spellTierInfo-tier:is([data-tier-id="7"],[data-tier-id="8"],[data-tier-id="9"]),
.spellTierInfo-tierbinpercent,
.spellTierInfo-tierbinodds,
[data-tier-rarity=nospawn] .spellTierInfo-tierbinodds,
[data-tier-rarity=nospawn] {
display: none;
}
.spellTierInfo-tierbinpercent::after,
.spellTierInfo-tierpercent::after {
content: "%";
font-size: 1.2em;
opacity: .5;
font-family: monospace;
line-height: 0.02;
margin-bottom: 0.1em;
}
.spellTierInfo-tierpercent {
grid-row: percent;
flex-direction: column;
}
[data-tier-rarity=nospawn] .spellTierInfo-tierpercent,
[data-tier-rarity=nospawn] .spellTierInfo-tierbinpercent {
visibility: collapse;
}
.spellTierInfo-tier[data-tier-rarity=nospawn] :is(.spellTierInfo-tierpercent::after,.spellTierInfo-tierbinpercent::after) {
grid-row: percent;
content: "X";
visibility: visible;
display: flex;
font-size: .6em;
opacity: .24;
align-self: center;
font-style: italic;
transition: opacity 200ms ease 200ms
}
[data-tier-rarity=nospawn] .spellTierInfo-tierpercent::before,
[data-tier-rarity=nospawn] .spellTierInfo-tierbinpercent::before {
color: #6b0d0d;
}
.spellTierInfo-tier[data-tier-rarity=nospawn] .spellTierInfo-tiernum,
.spellTierInfo-tier[data-tier-rarity=nospawn]::before {
color: #414141;
}
.spellTierInfo {
width: 100%;
display: grid;
grid-auto-flow: column;
grid-column-gap: 1px;
grid-template-columns: repeat(8,1fr);
grid-template-rows: repeat(3,auto);
margin-bottom: 1em !important;
background-color: #080808;
font-family: noita;
place-self: stretch;
padding-top: 0;
}
.spellTierInfo > :nth-child(2n+2) > * {
background-color: #212121;
}
.spellTierInfo-tier {
display: contents;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin: 0 .6em;
}
.spellTierInfo-tier::before {
font-size: .5em;
content: "Tier";
line-height: 1.6;
display: flex;
background-color: transparent;
transform: translate(3px) rotate(-3deg);
}
.spellTierInfo-tiernum {
font-size: 1.2em;
line-height: .9;
align-self: start;
justify-self: stretch;
background-color: #000;
text-align: center;
padding-bottom: 0;
padding-top: 0.2em;
letter-spacing: .07em;
height: 100%;
}
:is([data-tier-id="0"], [data-tier-id="7"], [data-tier-id="10"]) .spellTierInfo-tiernum {
background-color: #211821;
line-height: 1;
}
.spellTierInfo-tiernum::before {
font-size: .6em;
}
.spellTierInfo-tierpercent {
display: flex;
font-size: .6em;
text-align: center;
background-color: #121212;
overflow: visible;
align-items: center;
justify-content: center;
white-space: nowrap;
align-content: center;
letter-spacing: -0.05em;
height: 100%;
padding-top: 1px;
border-top: 2px dotted #000;
}
:is([data-tier-id="0"], [data-tier-id="7"], [data-tier-id="10"]) :is(.spellTierInfo-tierpercent, .spellTierInfo-tierbinpercent) {
background-color: #211821;
}
.spellTierInfo-tierbinpercent::before {
content: '<';
margin-right: 0.34em;
font-size: 0.8em;
padding-top: 0;
}
.spellTierInfo-tierpercent::after,
.spellTierInfo-tierbinpercent::after {
font-size: 1em;
margin-left: .1em;
}
.spellTierInfo-tierpercent {
flex-direction: row;
font-size: 0.7em;
}
/* [[Template:Infobox item]] */
.pi-theme-item .pi-item[data-source^="description"] .pi-data-value {
text-align: center;
width: 100%;
hyphens: manual;
}
/****************************************
* Used by [[Template:Infobox material]] *
****************************************/
.pi-theme-material .pi-item[data-source^="id"] code {
display: inline-block;
}
.pi-theme-material .pi-item[data-source^="image"] .pi-image-thumbnail {
background-image: url(https://noita.wiki.gg/images/c/cf/Material-background.png);
background-size: 100%;
}
.pi-theme-material section.pi-group[data-item-name="materialIcons"] {
display: flex;
border: none;
place-content: space-evenly;
}
.pi-theme-material .pi-image ~ .pi-group[data-item-name="materialIcons"] {
position: absolute;
margin-top: -4.75rem;
width: 100%;
}
.pi-theme-material .pi-data:is([data-source^="icon"],[data-source^="pouchIcon"]) {
border: none;
width: auto;
}
.pi-theme-material .pi-data:is([data-source^="icon"],[data-source^="pouchIcon"]) img {
border-image-slice: 1 fill;
border-image-width: 2px;
border-image-outset: 2px;
border-image-repeat: stretch;
border-image-source: url(https://noita.wiki.gg/images/e/eb/Inventory_box.png);
border-style: solid;
border-width: 0;
filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.8));
}
/****************************************
* Used by [[Template:Infobox perk]] *
****************************************/
.portable-infobox.pi-theme-perk .pi-media {
margin: 0.5rem 0 0 0;
}
.pi-theme-perk .pi-item[data-source="description"] .pi-data-value {
text-align: center;
}
/*********************************
* Used by [[Template:Hover gif]] *
*********************************/
.hover-gif.gif-inline {
display:inline-block;
}
.hover-gif .thumb {
position: relative;
opacity: 1;
}
.hover-gif .thumb: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://noita.wiki.gg/images/8/86/Spell_speed.png) no-repeat;
background-size: 50px;
width: 50px;
height: 50px;
top: calc(50% - 25px);
left: calc(50% - 25px);
content: "";
z-index: 2;
opacity: 0.65;
}
.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 .thumb: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;
}
/* The following is a list of styles used by GameMessage */
.GameMessageInner {
border-style: solid;
padding: .75rem 2.5rem .5rem;
font-size: 1.5em;
margin: .25rem auto;
/* [[File:3piece important msg.png]] */
border-image-source: url(https://noita.wiki.gg/zh/images/4/42/3piece_important_msg.webp);
border-image-slice: 10 32 10 32 fill;
border-image-width: 5px 15px;
border-image-outset: 0;
border-image-repeat: repeat repeat;
/* Prevent blurry stretching of the border image and use pixelated resampling */
image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
}
.GameMessageBase{
border-style: solid;
padding: .75rem 3.5rem .5rem;
font-size: 1.5em;
margin: .25rem auto;
border-image-slice: 10 32 10 32 fill;
border-image-width: 25px 75px;
border-image-outset: 0;
border-image-repeat: repeat repeat;
/* Prevent blurry stretching of the border image and use pixelated resampling */
image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
}
.gmiFungalShift {
border-image-source: url(https://noita.wiki.gg/zh/images/c/c0/3piece_fungal_shift.png);
}
.gmiMoist {
border-image-source: url(https://noita.wiki.gg/zh/images/1/1b/Moist.png);
}
.gmiBooby {
border-image-source: url(https://noita.wiki.gg/zh/images/a/ab/Booby_trapped.png);
}
.gmiConductive {
border-image-source: url(https://noita.wiki.gg/zh/images/a/a0/Conductive.png);
}
.gmiFogofwar {
border-image-source: url(https://noita.wiki.gg/zh/images/0/01/Fog_of_war.png);
}
.gmiFogofplayer {
border-image-source: url(https://noita.wiki.gg/zh/images/8/8f/Fog_of_war_clear_at_player.png);
}
.gmiFreezing {
border-image-source: url(https://noita.wiki.gg/zh/images/d/db/Freezing.png);
}
.gmiFungal {
border-image-source: url(https://noita.wiki.gg/zh/images/7/71/Fungal.png);
}
.gmiFurnished {
border-image-source: url(https://noita.wiki.gg/zh/images/4/46/Furnished.png);
}
.gmiGas {
border-image-source: url(https://noita.wiki.gg/zh/images/7/78/Gas.png);
}
.gmiGold {
border-image-source: url(https://noita.wiki.gg/zh/images/2/20/Modgold.png);
}
.gmiGravity {
border-image-source: url(https://noita.wiki.gg/zh/images/7/78/Gravity_fields.png);
}
.gmiHigh {
border-image-source: url(https://noita.wiki.gg/zh/images/d/d9/High_gravity.png);
}
.gmiHot {
border-image-source: url(https://noita.wiki.gg/zh/images/b/b2/Hot.png);
}
.gmiInvisible {
border-image-source: url(https://noita.wiki.gg/zh/images/e/e1/Invisible.png);
}
.gmiLow {
border-image-source: url(https://noita.wiki.gg/zh/images/1/1f/Low_gravity.png);
}
.gmiOminous {
border-image-source: url(https://noita.wiki.gg/zh/images/5/59/Ominous.png);
}
.gmiPerforated {
border-image-source: url(https://noita.wiki.gg/zh/images/0/0c/Perforated.png);
}
.gmiPlant {
border-image-source: url(https://noita.wiki.gg/zh/images/e/e3/Plant_infested.png);
}
.gmiShielded {
border-image-source: url(https://noita.wiki.gg/zh/images/c/cb/Shielded.png);
}
.gmiSpooky {
border-image-source: url(https://noita.wiki.gg/zh/images/8/88/Spooky.png);
}
.gmiSunlight {
border-image-source: url(https://noita.wiki.gg/zh/images/0/05/Sunlight.png);
}
.gmiWormy {
border-image-source: url(https://noita.wiki.gg/zh/images/9/9a/Wormy.png);
}
.spoiler-hidden .GameMessageInner {
background-color: transparent;
border: 0;
border-radius: 0;
border-left: 0;
border-right: 0;
padding: 0;
font-size: inherit;
color:rgba(85, 201, 153, 0.0005);
}
.GameMessageUnder {
font-size: 0.8em;
}
.spoiler-hidden .GameMessageUnder {
font-size: inherit;
color:rgba(85, 201, 153, 0.0005);
}
/****************************
* 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;
text-align: center;
word-spacing: 0;
margin: 0 0.1ex;
}
.glyph-translate-box .glyphs {
font-family: glyphs, sans-serif;
line-height: 1em;
letter-spacing: 0.2ex;
user-select: none;
}
.glyph-translate-box .plaintext {
font-family: noita, sans-serif;
letter-spacing: 1px;
line-height: 1em;
}
.spoiler-hidden .glyph-translate-box .plaintext {
visibility: hidden;
}
/***************************************/
/* Wand2 - Used by [[Module:Wand]] */
/***************************************/
/* Wand2 - Layout variables */
.wand2-card,
.wand2-mini {
/* Basic wand stats, wide format */
--w2mini-spell-size: 42px;
--w2mini-spell-gap: 3px;
--w2mini-spell-border: 3px;
--w2mini-spell-slot-border: 3px;
--w2mini-grid-tcolumns: [left sprite-start name-start] 4fr [sprite-end] 2em [stats-start] 6fr [stats-end link-start] 3fr [link-end name-end right];
--w2mini-grid-trows:
[top name-start sprite-start]
auto
[name-end stats-start]
repeat(10, min-content)
[stats-end sprite-end spells-start]
auto
[spells-end bottom];
/* All wand stats, 'card' format */
--w2card-spell-size: 42px;
--w2card-spell-gap: 3px;
--w2card-spell-border: 3px;
--w2card-spell-slot-border: 2px;
--w2card-grid-tcolumns:
[left sprite-start name-start] 4fr [sprite-end stats-start] 8fr [stats-end link-start] 2em [link-end name-end right];
--w2card-grid-trows:
[top name-start]
auto
[name-end sprite-start stats-start]
repeat(10, min-content)
[stats-end sprite-end spells-start]
auto
[spells-end bottom];
/* Grid of spells */
--wand2-grid-template-columns-repeat: auto-fit;
--wand2-cap: 26;
--wand2-wrap-count: 26;
--wand2-spell-slot-size: calc(var(--wand2-spell-size) + 2 * var(--wand2-spell-slot-border));
--wand2-max-width: calc(min(var(--wand2-cap), var(--wand2-wrap-spells-at)) * (var(--wand2-spell-gap) + var(--wand2-spell-slot-size)));
/* Grid of always cast spells */
--wand2-always-size: 32px;
--wand2-always-gap: 6px;
--wand2-always-border: 2px;
--wand2-always-slot-border: 0;
--wand2-always-slot-size: calc(var(--wand2-always-size) + var(--wand2-always-slot-border) * 2);
position: relative;
width: fit-content;
max-width: var(--wand2-max-width);
margin: .6rem 0;
display: grid;
column-gap: 0;
align-items: center;
justify-items: left;
grid-auto-flow: dense;
font-family: 'noita', sans-serif;
color: #dbd7d7;
border: 3px solid #928167;
border-radius: 0px 7.5px 0px 7.5px;
background-color: rgba(5, 5, 5, 0.8);
}
.wand2-mini {
--wand2-wrap-spells-at: 26;
--wand2-spell-size: var(--w2mini-spell-size);
--wand2-spell-gap: var(--w2mini-spell-gap);
--wand2-spell-border: var(--w2mini-spell-border);
--wand2-spell-slot-border: var(--w2mini-spell-slot-border);
grid-template-columns: var(--w2mini-grid-tcolumns);
grid-template-rows: var(--w2mini-grid-trows);
padding: 1em;
font-size: 1.3em;
line-height: 1.1em;
min-width: fit-content;
}
.wand2-card {
--wand2-wrap-spells-at: 10;
--wand2-spell-size: var(--w2card-spell-size);
--wand2-spell-gap: var(--w2card-spell-gap);
--wand2-spell-border: var(--w2card-spell-border);
--wand2-spell-slot-border: var(--w2card-spell-slot-border);
--wand2-max-width: calc(min(var(--wand2-cap),var(--wand2-wrap, var(--wand2-wrap-spells-at))) * (var(--wand2-spell-gap) + var(--wand2-spell-slot-size)));
display: grid;
grid-template-columns: var(--w2card-grid-tcolumns);
grid-template-rows: var(--w2card-grid-trows);
/*padding: .35rem 1.4rem 1.25rem;*/
font-size: 1.2em;
line-height: 1.2em;
width: min-content;
min-width: var(--wand2-max-width);
padding: 1.45rem 1rem 1.75rem;
}
/* Vertical option (optimised for mobile screens) */
.wand2-card.wand2-vertical,
.wand2-mini.wand2-vertical,
.wand2-vertical {
display: flex;
flex-direction: column;
align-items: stretch;
position: relative;
--wand2-wrap-spells-at: 6;
}
.wand2-card.wand2-vertical {
padding: 1.75rem 1.1rem 1.75rem;
}
@media screen and (max-device-width: 980px) {
.wand2-card,
.wand2-mini {
display: flex;
flex-direction: column;
align-items: stretch;
position: relative;
--wand2-wrap-spells-at: 6;
}
}
/* Wand sprite */
.wand2-sprite {
width: 100%;
height: 100%;
display: flex;
align-items: center;
align-self: center;
justify-content: center;
justify-self: center;
}
.wand2-mini .wand2-sprite,
.wand2-card .wand2-sprite {
grid-column: sprite-start/sprite-end;
grid-row: sprite-start/sprite-end;
}
.wand2-vertical .wand2-sprite,
.wand2-vertical .wand2-rotate {
transform: none;
width: unset;
height: unset;
}
.wand2-vertical .wand2-sprite {
transform: rotate(90deg);
margin: 1rem auto;
max-width: unset;
}
.wand2-mini.wand2-vertical .wand2-sprite {
transform: rotate(0);
}
.wand2-sprite img {
max-width: 130px;
}
.wand2-vertical .wand2-sprite img {
transform: none;
}
.wand2-card .wand2-sprite img {
/* Wand sprites stored vertically, correct for display */
transform: rotate(-90deg);
transform-origin: center center;
}
/* This prevents the wand sprite from being sized
* down by the width of the sprite holder */
#content .wand2-card .wand2-sprite img,
#content .wand2-mini.wand2-expanded .wand2-sprite img {
max-width: unset;
}
/* Extended stats hiding */
.wand2-card .wand2-details {
display: contents;
}
.wand2-mini .wand2-details {
display: none;
}
.wand2-mini .wand2-details::before {
content: 'show detail';
display: list-item;
list-style-type: disclosure-closed;
}
.wand2-mini .wand2-details::before {
content: 'hide detail';
display: list-item;
list-style-type: disclosure-open;
}
/* Wand name */
.wand2-name {
font-size: 1em;
font-variant: small-caps;
margin: 0 0 0.8em;
justify-self: center;
grid-column: name-start/end;
grid-row: 1/1;
}
.wand2-card .wand2-name {
font-size: 1.3em;
letter-spacing: 0.08em;
line-height: 1;
margin: 0.5em auto 0.6em;
}
.wand2-vertical .wand2-name {
text-align: center;
line-height: 1;
margin: 0.4em auto 0.1em;
}
/* Wand2 - Wand Simulator Link */
.wand2-simlink {
position: absolute;
top: -0.1em;
right: 0.4em;
font-size: 0.8em;
}
.wand2-card .wand2-simlink,
.wand2-mini .wand2-simlink {
position: absolute;
top: -1.2em;
right: 0.6em;
font-size: .8em;
margin-top: 0.6em;
margin-bottom: 0em;
grid-row: 1;
opacity: 0.7;
transition: opacity 30ms ease;
}
.wand2-card .wand2-simlink {
top: -1.6em;
}
.wand2-vertical .wand2-simlink {
font-size: 0.8em;
position: absolute;
right: 0.4em;
margin-top: 0;
bottom: unset;
top: 0.4em;
}
.wand2-card.wand2-vertical .wand2-simlink {
top: 0.7em;
}
.wand2-simlink-link {
font-size: 1em;
}
.wand2-simlink-link > .external {
padding: 20px;
}
.wand2-simlink-desc {
z-index: 100;
position: absolute;
/*right: 0;*/
/*top: -30%;*/
/*right: 90%;*/
width: 20em;
display: flex;
flex-direction: column;
right: 0%;
top: 90%;
font-size: 0.7em;
line-height: 1.4em;
text-align: right;
white-space: nowrap;
text-shadow:
2px 2px 40px black,
-2px 2px 4px black,
2px -2px 4px black,
-2px -2px 4px black;
pointer-events: none;
margin-top: 2px;
}
.wand2-card:hover .wand2-simlink,
.wand2-mini:hover .wand2-simlink {
opacity: 1;
transition: opacity 60ms ease;
}
.wand2-mini .wand2-simlink-desc {
right: 0%;
left: unset;
top: 92%;
width: 9em;
white-space: break-spaces;
bottom: unset;
top: auto;
}
.wand2-mini .wand2-simlink-desc,
.wand2-card .wand2-simlink-desc,
.wand2-vertical .wand2-simlink-desc {
right: 84%;
bottom: 28%;
top: unset;
flex-direction: column;
width: max-content;
}
.wand2-simlink > .wand2-simlink-desc {
opacity: 0;
transition: opacity 30ms ease;
}
.wand2-simlink:hover > .wand2-simlink-desc {
opacity: 1;
transition: opacity 60ms ease;
}
.wand2-mini .wand2-simlink-desc > div,
.wand2-card .wand2-simlink-desc > div,
.wand2-vertical .wand2-simlink-desc > div {
display: flex;
}
.wand2-card .wand2-simlink-desc > div > div,
.wand2-vertical .wand2-simlink-desc > div > div {
margin-left: 0.4em;
}
.wand2-simlink.hidden {
display: none;
}
/* Wand2 - Inside Spoiler Tags */
.spoiler-hidden .wand2-card,
.spoiler-hidden .wand2-mini {
font-family: glyphs, sans-serif;
}
/* Wand properties */
.wand2-stat {
grid-column: stats-start/stats-end;
justify-self: stretch;
width: 100%;
flex-direction: row;
display: flex;
align-items: center;
align-content: space-between;
justify-content: space-between;
white-space: nowrap;
}
.wand2-label {
width: 100%;
display: flex;
align-items: center;
justify-content: start;
margin: .2em 0;
flex: 1 1 auto;
}
.wand2-label::after {
content: '';
width: 100%;
height: 0.8em;
border-bottom: 3px dotted #222222;
}
.wand2-mini .wand2-label::after {
min-width: 0.7em;
}
.wand2-card .wand2-label::after {
min-width: 1.6em;
}
.wand2-vertical .wand2-label::after {
min-width: 0.8em;
}
.wand2-label .image {
width: 24px;
display: block;
flex: 1 0 auto;
}
.wand2-label .image img {
width: 16px;
image-rendering: pixelated;
}
.wand2-value {
display: flex;
align-items: center;
justify-content: end;
margin: .2em 0;
}
/* Wand2 - Grid of spells */
.wand2-spells {
display: grid;
justify-content: center;
grid-row: spells-start/spells-end;
grid-column: 1/-1;
grid-template-columns: repeat(var(--wand2-grid-template-columns-repeat),
calc(var(--wand2-spell-size) + 2 * var(--wand2-spell-slot-border)));
gap: var(--wand2-spell-gap);
width: 100%;
max-width: var(--wand2-max-width);
margin-top: 0.8rem;
}
.wand2-mini .wand2-spells {
grid-column: 1/-1;
}
.wand2-spell {
display: flex;
flex: 0 0 var(--wand2-spell-size);
position: relative;
background: transparent;
border: var(--wand2-spell-slot-border) solid #794738;
border-radius: 8px;
border-style: dashed;
background: rgb(54, 43, 38);
height: var(--wand2-spell-size);
width: var(--wand2-spell-size);
}
.wand2-spell img {
display: block;
}
/* Wand2 - List of always cast spells */
.wand2-always .wand2-label {
grid-area: alkey;
padding-top: 0.3em;
align-items: last baseline;
}
.wand2-always .wand2-value {
grid-area: alval;
display: grid;
grid-template-rows: 1fr;
gap: 4px;
margin: 0.3em 0 0.2em 0;
justify-content: end;
grid-auto-flow: column;
background-color: black;
padding-left: 0.3em;
line-height: 1;
justify-self: end;
}
.wand2-vertical .wand2-always {
grid-template-columns: unset;
}
.wand2-always .wand2-spell {
background: transparent;
gap: 0.25rem;
border-width: var(--wand2-always-slot-border);
height: var(--wand2-always-size);
width: var(--wand2-always-size);
}
.wand2-expandable {
display: none;
}
.wand2-mini.wand2-expanded .wand2-expandable,
.wand2-card .wand2-expandable {
display: flex;
}
/* WIP reworking template styles - TODO */
/*.wand2-card.compact.wand2-expanded {*/
/* grid-template-columns: 3fr 3fr 3fr;*/
/*}*/
/*.wand2-card.wand2-expanded {*/
/* grid-template-columns: [img-start name-start] 4fr [img-end stats-start] 6fr [stats-end link-start] 3fr [end];*/
/* width: min-content;*/
/*}*/
/*.wand2-card .wand2-name.wand2-expandable {*/
/* margin-top: 1.1em;*/
/* margin-bottom: 0.8em;*/
/* text-align: center;*/
/*}*/
/*.wand2-card .wand2-name.wand2-expandable {*/
/* margin-top: 1.1em;*/
/* margin-bottom: 0.8em;*/
/*}*/
/*.wand2-mini.compact .wand2-stat {*/
/* grid-column: stats-start;*/
/*}*/
/*.wand2-mini.compact {*/
/* grid-template-columns: [img-start] 4fr [img-end stats-start] 6fr [stats-end link-start] 3fr [end];*/
/*}*/
/*.wand2-mini./compact {*/
/* grid-template-columns: 4fr 2fr 3fr 3fr;*/
/*}*/
/* Wand2 - Spell tooltips*/
.wand2-spelltip {
display: grid;
position: absolute;
visibility: hidden;
z-index: 10;
font-family: 'noita', sans-serif;
border: 3px solid #928167;
border-radius: 0px 7.5px 0px 7.5px;
background-color: rgba(5,5,5,0.9);
max-width: 300px;
min-width: 200px;
height: min-content;
width: max-content;
padding: 1em;
font-size: 0.8em;
pointer-events: none;
}
.wand2-spelltip {
left: -16px;
bottom: 50%;
white-space: normal;
grid-template-areas:
'sname sname simage'
'sdesc sdesc simage'
'label value simage'
'label value simage'
'label value simage'
'label value simage'
'label value simage'
'label value simage'
'label value simage'
'label value simage'
'label value simage';
}
.wand2-always .wand2-spelltip {
left: unset;
right: 36px;
bottom: -36px;
}
.wand2-spelltip-name {
grid-area: sname;
text-transform: uppercase;
}
.wand2-spelltip-desc {
grid-area: sdesc;
margin-top: 0.6em;
}
.wand2-spelltip-sub {
margin-top: 0.4em;
}
.wand2-spelltip-label {
grid-column: label;
}
.wand2-spelltip-value {
grid-column: value;
}
.wand2-spelltip-img {
grid-row-start: simage-start;
grid-row-end: simage-end;
display: flex;
flex-direction: column;
justify-content: center;
}
.wand2-spelltip-target > .wand2-spelltip {
transition: transform 200ms, visibility 100ms, opacity 100ms;
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
transform: scale(0.6);
opacity: 0;
visibility: hidden;
}
.wand2-spelltip-target:hover > .wand2-spelltip {
transition: transform 200ms, visibility 300ms, opacity 300ms;
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
transform: scale(1);
opacity: 1;
visibility: visible;
}
/* Respect user choices */
@media (prefers-reduced-motion: reduce) {
.wand2-spelltip-target > .wand2-spelltip,
.wand2-spelltip-target:hover > .wand2-spelltip {
transition: none;
}
.wand2-simlink > .wand2-simlink-desc,
.wand2-simlink:hover > .wand2-simlink-desc,
.wand2-card .wand2-simlink,
.wand2-mini .wand2-simlink,
.wand2-card:hover .wand2-simlink,
.wand2-mini:hover .wand2-simlink {
transition: none;
}
}
/**************************************************/
/* Used by [[Template:Expandy]] *WIP* */
/**************************************************/
.expandy {
border: 1px dashed #3c4258;
border-radius: 0 10px;
overflow-y: scroll;
padding: 3px;
}
.expandy > pre {
max-height: var(--expandy-max-height, 80vh);
min-height: var(--expandy-min-height, 3em);
height: var(--expandy-initial-height, 30vh);
--bga: 0.45;
--bgrgb: 4; /* needs 3.6 bga * 8 */
--bgrgb: 20; /* needs 0.27 bga * 0.6 */
--bgrgb: 30; /* needs 0.009 bga * 0.02 */
--bgrgb: 10; /* needs 0.9 bga * 2 */
--bgmul: calc(var(--bgrgb) + (var(--bgrgb) * var(--bga) * 2));
--color-background: rgba(var(--bgrgb), var(--bgrgb), var(--bgrgb), var(--bga));
--color-cover: rgba(var(--bgmul), var(--bgmul), var(--bgmul), 1);
--color-uphint: rgba(204, 136, 14, 0.75);
--color-downhint: var(--color-uphint);
--scrollhint-size: 5px;
--cover-size: calc(var(--scrollhint-size) * 5);
--scrollhint-width: max(80%, 100px);
--cs: var(--cover-size);
--hs: var(--scrollhint-size);
--hw: var(--scrollhint-width);
--cbg: var(--color-cover);
--cup: var(--color-uphint);
--cdn: var(--color-downhint);
resize: vertical;
margin: 0;
padding: 0px 10px;
border: 2px solid var(--color-background) !important;
border-radius: 0 7px;
background:
radial-gradient(
farthest-side at 50% 0,
var(--cbg) 0%,
var(--cbg) var(--hs),
rgba(0,0,0,0)) 50% 0,
radial-gradient(
farthest-side at 50% 100%,
var(--cbg) 0%,
var(--cbg) var(--hs),
rgba(0,0,0,0)) 50% 100%,
linear-gradient(
var(--cbg) var(--hs),
rgba(255,255,255,0)) 0 0,
linear-gradient(
rgba(255,255,255,0),
var(--cbg) var(--hs)) 0 100%,
radial-gradient(
farthest-side at 50% 0,
var(--cup),
rgba(0,0,0,0)) 50% 0,
radial-gradient(
farthest-side at 50% 100%,
var(--cdn),
rgba(0,0,0,0)) 50% 100%
;
background-size:
var(--hw) var(--cs), var(--hw) var(--cs),
100% var(--hs), 100% var(--hs),
var(--hw) var(--hs), var(--hw) var(--hs);
background-repeat: no-repeat;
background-attachment:
local, local, local, local, scroll, scroll;
background-color: var(--color-background);
}
/***********************************************************************/
/* Used by [[Template:Example]] and/or [[Template:Example/result]] */
/***********************************************************************/
.egbox-container {
position: relative;
display: flex;
flex-direction: column;
padding: 5px 18px 10px 18px;
margin: 10px 2px;
background: rgba(0,0,0,0.3);
border: 2px solid #52504e;
border-style: dotted;
border-radius: 0 9px;
}
.egbox-heading {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: flex-start;
align-items: center;
margin: 2px 0 5px -8px;
color: #9c9894;
}
.egbox-title {
align-self: end !important;
font-size: 1em !important;
font-weight: unset !important;
line-height: 1.6 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
border-bottom: none !important;
font-family: unset !important;
color: unset !important;
}
.result-container {
position: relative;
display: flex;
flex-direction: column;
padding: 5px 18px 10px 18px;
margin: 10px 2px;
background: var(--content-inset-background, rgba(0,0,0,0.3));
border: 1px dotted #5f5c58;
border-radius: 0 9px;
color: var(--text-color);
}
.result-heading {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: space-between;
align-items: center;
margin: 2px 0 5px -8px;
color: #9c9894;
}
/*********************************************************
* 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;
}
.spoiler-hidden :is(.wand-card, .wand-spells-card) {
font-family: glyphs, sans-serif;
}
.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';
}
.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"
"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);
/* This prevents the wand sprite's width over-compensating the grid spacing and getting a ton of space */
width: 2rem;
height: 2rem;
margin-top: 11rem;
}
/* This prevents the wand sprite from being sized down by the width of the sprite holder */
#content .wand-card .wand-sprite img {
max-width: unset;
}
.wand-card .wand-rotate {
transform: rotate(-0.5turn);
}
.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;
margin-bottom: 4px;
display: flex;
justify-items: left;
justify-content: left;
}
.always-cast-spells .always-cast {
background: transparent;
flex: 0 0 32px;
display: flex;
gap: 0.25rem;
}
.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;
}
.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:SpellQuery]]
**********************************/
.SpellQuery {
display:flex;
column-gap:0.5rem;
row-gap:0.5rem;
justify-content:center;
flex-wrap:wrap;
}
.SpellQuery__row2 {
min-width: 290px;
width: 30%;
display: grid;
grid-gap: 0.25rem;
background: var(--template-background-color-1);
padding: 0.5rem;
grid-template-columns: auto 1fr;
grid-template-rows: 0.25fr auto;
}
.SpellQuery__row2__image {
border-radius: 5px;
background: var(--template-background-color-2);
height: 48px;
width: 48px;
grid-column: 1 / 2;
grid-row: 1 / 3;
justify-content: center;
align-items: center;
display: flex;
margin-right: 0.3em;
}
.SpellQuery__row2__name {
width: 100%;
grid-row: 1 / 2;
grid-column: 2 / 3;
padding-left: 0.25rem;
align-self: center;
}
.SpellQuery__row2__description {
grid-row: 2 / 3;
grid-column: 2 / 3;
align-self: start;
padding-left: 0.25rem;
}
/**************************************
* Used by [[Template:SpellQueryIcon]] *
**************************************/
.SpellQueryIcon {
height: 48px;
width: 48px;
display: inline-flex;
margin-bottom: 4px;
justify-content: center;
align-items: center;
}
.SpellQueryIcon-flexwrapper {
--size: var(--sqi-size, 54px);
--gap: var(--sqi-gap, 4px);
--cols: var(--sqi-cols, 5);
--justify: var(--sqi-justify, start);
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: var(--justify);
align-items: center;
max-width: calc((var(--size) + var(--gap)) * var(--cols) - var(--gap));
gap: var(--gap, 4px);
margin: var(--gap, 4px);
}
.SpellQueryIcon-row {
font-size: var(--spell-size, 54px);
width: var(--spell-size, 54px);
height: var(--spell-size, 54px);
border-width: 0.065em;
box-sizing: border-box;
border-radius: 0.08em;
position: relative;
margin-bottom: 0;
line-height: 0;
box-shadow: 0 0 0.13em 0.056em var(--color-spell-base) inset;
}
.SpellQueryIcon-framed {
padding: 1em;
border: 1px solid #928167;
border-radius: 0 0.4em;
width: 100%;
background-color: #00000020;
}
.SpellQueryIcon-title {
align-self: stretch;
width: 100%;
margin-top: -4px;
}
.spellHighlighted, .spellBorder.spellHighlighted {
transform: scale(1.04);
box-shadow: 0 0 0.1em 0.03em var(--color-spell-base) inset,
0 0 0 0.01em #00000091,
0 0 0.08em 0.06em #ffffffa1,
0 0 0.12em 0.08em var(--color-spell-base),
0 0 0.2em 0.1em #0c0c0cd6;
position: relative;
margin: 2px 2px;
margin-bottom: 2px;
z-index: 1;
}
/***************************************
* Used by [[Template:SpellQueryGroup]] *
* with [[Template:SpellQueryIcon]] *
****************************************/
.SpellQueryGroup2 .SpellQueryIcon-flexwrapper {
position: relative;
justify-content: center;
max-width: calc((var(--size) + var(--gap)) * var(--cols));
margin: 2px;
counter-reset: spellquerygroup -14;
gap: 0;
}
.SpellQueryGroup2 .SpellQueryIcon-flexwrapper > div {
counter-increment: spellquerygroup;
margin: 2px;
}
.SpellQueryGroup2 .SpellQueryIcon-flexwrapper:has(div:nth-child(9)) {
--cols: 5;
}
.SpellQueryGroup2 .SpellQueryIcon-flexwrapper:has(div:nth-child(11)) {
--cols: 6;
}
.SpellQueryGroup2 .SpellQueryIcon-flexwrapper:has(div:nth-child(13)) {
--cols: 7;
}
.SpellQueryGroup2 .SpellQueryIcon-flexwrapper:has(div:nth-child(15)) {
--cols: 8;
}
.SpellQueryGroup2 .SpellQueryIcon-flexwrapper > div:nth-child(n+17),
.SpellQueryGroup2 .SpellQueryIcon-flexwrapper:has(div:nth-child(17)) > div:nth-child(n+15) {
visibility: collapse;
}
.SpellQueryGroup2 .SpellQueryIcon-flexwrapper:has(div:nth-child(17))::after {
content: '...and ' counter(spellquerygroup) ' more';
display: flex;
font-size: 0.6em;
align-self: end;
justify-content: center;
flex: 1 1 22%;
}
/***************************************
* Used by [[Template:SpellQueryGroup]] *
***************************************/
.SpellQueryGroup {
text-align: center;
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);
margin: 0 0 0 2.5rem;
width: 100%;
max-width: 21em;
clear: right;
}
.SpellQueryGroup2 {
float: right;
clear: right;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: content-box;
max-width: 22rem;
width: 22rem;
margin: 0 0 var(--pi-margin) var(--pi-margin);
padding-top: 5px;
background-color: var(--pi-background);
text-align: center;
font-family: noita,'04b03',sans-serif;
font-size: 1em;
border: 2px solid #928167;
border-radius: 0 8px;
}
@media screen and (max-width: 720px) {
.SpellQueryGroup2.SpellQueryGroup2 {
min-width: 200px;
width: 50%;
max-width: 300px;
font-size: initial;
margin: 0 auto 15px 5px;
}
}
@media screen and (max-width: 500px) {
.SpellQueryGroup2.SpellQueryGroup2 {
width: 98%;
margin: 0 auto 15px 5px;
font-size: initial;
max-width: 98%;
}
}
.portable-infobox.pi-theme-spell ~ .SpellQueryGroup2 {
border: 3px solid var(--pi-border-color);
margin-top: -10px;
}
.SpellQueryGroup2 .SQG-title {
display: flex;
align-items: baseline;
margin-bottom: 0.2em;
padding: 0.3em 0.2em 0.1em 0.2em;
text-align: center;
font-size: 0.9em;
flex-wrap: wrap;
justify-content: center;
}
.SpellQueryGroup2 .SQG-groupTitle {
margin-bottom: 0.1em;
padding: .3em .2em 0em;
font-size: 1.3em;
}
.SpellQueryGroup2 .wand2-spelltip {
left: unset;
right: -34px;
bottom: 14px;
}
.SpellQueryGroup2 .SQG-description {
margin: 0.5em;
text-align: center;
overflow: hidden;
font-size: 0.7em;
line-height: 2em;
max-height: 2em;
text-overflow: ellipsis;
height: 2em;
white-space: nowrap;
max-width: 92%;
}
.SQG-title .SQG-tag {
display: inline flex;
margin-left: 0.6em;
padding: .4em .3em 0.24em 1.86em;
border: 0.15em solid #bfc2bd77;
border-radius: 0 0.7em;
background-image: var(--svg-icon-tag);
background-repeat: no-repeat;
background-position: left .3em center;
background-size: 1.1em;
white-space: pre;
letter-spacing: 0.06em;
line-height: 1;
font-size: 1.14em;
}
.SpellQueryGroup2 {
--h-oneline: 1.6em;
}
.SpellQueryGroup2 .SQG-overflow {
position: relative;
width: 98%;
max-width: 98%;
height: var(--h-oneline);
line-height: var(--h-oneline);
margin: 0.4em 0 0.6em 0;
}
.SpellQueryGroup2 .SQG-description {
text-overflow: ellipsis;
position: absolute;
top: 0;
display: block;
min-height: var(--h-oneline);
height: var(--h-oneline);
line-height: var(--h-oneline);
width: 98%;
max-width: 98%;
padding: .2em .5em;
box-sizing: border-box;
border: 1px solid #0001;
border-radius: .2em;
text-align: center;
user-select: all;
background-color: black;
}
.SpellQueryGroup2:hover .SQG-description {
height: auto;
max-height: unset;
opacity: 1;
z-index: 10000;
word-wrap: break-word;
white-space: normal;
border: 1px solid #eaecf055;
}
/********************************
* Used by [[Template:BiomeNav]] *
********************************/
.BiomeNav {
--arrow-size: 12px;
display: grid;
padding-bottom: 1.8em;
grid-template-rows:
[title] min-content
[north] 1fr
[arrow-north] var(--arrow-size)
[equator] auto
[arrow-south] var(--arrow-size)
[south] 1fr
[dragons] !important;
grid-template-columns:
[west] 1fr
[arrow-west] var(--arrow-size)
[meridian] auto
[arrow-east] var(--arrow-size)
[east] 1fr
[dragons] !important;
place-items: center;
grid-gap: 0.5em;
text-align: center;
font-family: 'noita', '04b03', sans-serif;
font-size: 0.8em;
border: 2px solid #928167;
border-radius: 5px;
background-color: rgba(5, 5, 5, 0.8);
padding: 0.5em;
margin: 0.5em 0 0.5em 1.5em;
width: min(300px, 50vw);
max-width: 300px;
line-height: 1em;
box-sizing: border-box;
float: right;
clear: right;
}
.BiomeNav .floatLeft {
float: left;
clear: left;
}
.BiomeNav p {
line-height: 1.3;
}
.BiomeNav-pagename {
font-size: 1.5em;
border: 2px solid #928167;
border-radius: 5px;
padding: 0.2em 1em 0 1em;
line-height: 1.6;
}
@media screen and (max-width:500px) {
.BiomeNav {
--margin: 0.4em;
max-width: unset;
width: calc(50% - (var(--margin) * 2));
height: 240px;
box-sizing: border-box;
float: right;
clear: right;
margin: var(--margin);
}
.BiomeNav + .BiomeNav {
float: right;
clear: none;
margin-bottom: 1.5em;
}
}
.BiomeNav-title {
grid-row: title !important;
grid-column: west / dragons !important;
font-size: 1.5em;
line-height: 1.5em;
border-bottom: 2px solid #928167;
width: 100%;
margin-bottom: 0.3em;
padding-bottom: 0.2em;
}
.BiomeNav-nw,
.BiomeNav-n,
.BiomeNav-ne {
grid-row: north !important;
}
.BiomeNav-ne,
.BiomeNav-e,
.BiomeNav-se {
grid-column: east / dragons !important;
}
.BiomeNav-ne,
.BiomeNav-se {
grid-column: arrow-east / dragons !important;
}
.BiomeNav-se,
.BiomeNav-s,
.BiomeNav-sw {
grid-row: south !important;
}
.BiomeNav-e,
.BiomeNav-w {
grid-row: arrow-north / south !important;
}
.BiomeNav-pagename,
.BiomeNav :is(.arrow-e, .arrow-w) {
grid-row: equator !important;
}
.BiomeNav-n,
.BiomeNav-pagename,
.BiomeNav-s,
.BiomeNav :is(.arrow-n, .arrow-s) {
grid-column: meridian !important;
}
.BiomeNav-sw,
.BiomeNav-w,
.BiomeNav-nw {
grid-column: west !important;
}
.BiomeNav-sw,
.BiomeNav-nw {
grid-column-end: meridian !important;
}
.BiomeNav :is(.arrow-ne, .arrow-e, .arrow-se) {
grid-column: arrow-east !important;
}
.BiomeNav :is(.arrow-nw, .arrow-w, .arrow-sw) {
grid-column: arrow-west !important;
}
.BiomeNav :is(.arrow-nw, .arrow-n, .arrow-ne) {
grid-row: arrow-north !important;
}
.BiomeNav :is(.arrow-se, .arrow-s, .arrow-sw) {
grid-row: arrow-south !important;
}
/************************************************************
* Used by [[Template:Spoiler]] / [[Template:Spoiler/start]] *
************************************************************/
.spoiler-toggle {
background-color: #0d0c0b;
color: var(--spoiler-color);
border: 3px solid #948064;
padding: 0.4em;
border-radius: 0 3px;
font-weight: normal;
transition: 0.2s border-color ease-in-out;
outline: none;
}
.spoiler-ambox-wrapper {
margin-bottom: 10px;
}
.skin-vector .spoiler-toggle :is(.mw-datatable, .cargoTable, table.wikitable) :is(td, th, caption) {
color: var(--spoiler-color);
}
.skin-vector .spoiler-hidden :is(.mw-datatable, .cargoTable, table.wikitable) :is(th, caption) {
font-weight: normal;
}
.spoiler-toggle:hover {
border-color: #9a6d2adb #724e18 #70552c #895c1ade;
}
.spoiler-toggle:not(.inline) {
display: flow-root;
}
.spoiler-toggle.inline {
display: inline;
border-width: 2px;
padding: 0 0 0.15em 0.15em;
margin-right: 0.15em;
}
/* only show clicky hand if JS enabled */
.client-js .spoiler-toggle {
cursor: pointer;
}
.spoiler-toggle h2, h3, h4, h5 {
color: inherit;
}
.spoiler-toggle .ambox {
user-select: none;
}
/* This has the 'click to show/hide content' message in spoilers, but if JS is disabled this is a little confusing, so we hide it */
.client-nojs .spoiler-toggle .ambox .pseudo-link {
display: none;
}
.client-js :is(.spoiler-hidden, .mw-body-content .spoiler-hidden :is(code, h2)) {
font-family: glyphs, sans-serif;
}
.spoiler-toggle.inline .spoiler-warning {
font-weight: bold;
}
.client-js .spoiler-toggle.inline .spoiler-warning {
display: none;
}
.spoiler-hidden {
word-spacing: 0.1175em;
}
.spoiler-toggler {
position: absolute;
width: fit-content;
color: #0000 !important;
font-family: initial;
display: flex;
justify-content: center;
align-items: center;
}
.spoiler-toggler::after {
font-style: italic;
transition: 200ms box-shadow ease,200ms filter ease;
color: var(--links-color);
}
.spoiler-toggler:hover::after {
transition: 200ms box-shadow ease,200ms filter ease;
}
.spoiler-toggle .spoiler-toggler::after {
content: 'Click to hide content';
font-family: initial;
position: absolute;
top: 1px;
width: fit-content;
font-weight: 300;
font-style: italic;
word-spacing: .1175em;
font-size: .96em;
line-height: 1.6em;
letter-spacing: -.01em;
}
.spoiler-toggle .spoiler-hidden .spoiler-toggler::after {
content: 'Click to show content';
font-family: initial;
}
.spoiler-toggle .ambox {
padding: 2px 0;
border-radius: 4px/24px;
box-shadow: 0 0 1.6px 0#77c999b2 inset;
margin: 1rem 0;
}
.spoiler-toggle {
position: relative;
padding: .6em 1em 1.4em;
border-radius: .2em/2em;
box-shadow: 1px 1px 0 0#2d200c,0 0 2px 1px #663c01 inset;
filter: drop-shadow(3px 3px 2px #00000061);
border-width: 2px 1px 1px 2px;
margin: .5em 0 1em 0;
border-color: #835b20db #5b3d10 #4c3a1e #7b5216de;
}
.spoiler-toggle .ambox-image {
--a: 1px;
--b: calc(var(--a) * -1);
--l: 0.8px;
--c: #00000094;
width: 28px;
margin: 0 .4em;
filter: drop-shadow(var(--a) 0 var(--l) var(--c)) drop-shadow(var(--b) 0 var(--l) var(--c)) drop-shadow(0 var(--b) var(--l) var(--c)) drop-shadow(0 var(--a) var(--l) var(--c)) drop-shadow(0 0 3px #77c9999c);
}
.spoiler-toggle .ambox-text {
letter-spacing: .03em;
font-size: 1em;
display: flex;
justify-content: space-between;
align-items: center;
word-spacing: .1175em;
line-height: 1.6em;
height: min-content;
flex: 0 0 auto;
align-self: center;
}
.spoiler-toggler {
position: absolute;
top: 0.4em;
left: unset;
right: 2em;
bottom: unset;
border-radius: 4px/24px;
color: var(--links-color);
box-shadow: 0 0 1px 0#ff0000de,0 0 2px 4px #760000 inset;
position: absolute;
padding: .1em .4em;
border: #f00c 1px solid;
background: #000;
letter-spacing: .04em;
font-size: .9em;
word-spacing: .1175em;
line-height: 1.6em;
height: min-content;
flex: 0 0 auto;
align-self: center;
top: 0.4em;
left: unset;
right: 2em;
bottom: unset;
}
.spoiler-toggler::after {
font-family: initial;
}
.spoiler-hidden :is(img, .hover-gif canvas, iframe, video) {
filter: blur(1rem);
clip-path: inset(0 0 0 0); /* Chrome */
clip-path: border-box; /* Other browsers */
}
.spoiler-toggle.inline .spoiler-hidden {
line-height: 0.5em;
font-size: 0.95em;
vertical-align: middle;
}
/**************************
* Used by [[Template:Hp]] *
**************************/
.hp-label, .hp-value {
display: inline-block;
}
.hp-label {
margin-right: 0.5em;
}
.hp-value {
color: red;
}
.hp-value2 {
--shadow: 0.1em;
--color-shadow: #130000;
color: red;
display: inline-flex;
flex-wrap: nowrap;
white-space: nowrap;
align-items: center;
text-shadow: 0 var(--shadow) 0 var(--color-shadow);
font-size: 1em;
line-height: 1;
}
.hp-value2 img {
filter: drop-shadow(0 var(--shadow) 0 var(--color-shadow));
image-rendering: pixelated;
height: 1em;
width: 1em;
aspect-ratio: 1;
margin: -0.2em 0 0 0.26em;
}
/**********************************
* Used by [[Template:EnemyQuery]] *
**********************************/
.enemy-query-item {
height: 10rem;
width: 11rem;
margin: 0.3rem;
display: inline-grid;
grid-template-rows: 1fr auto auto;
align-items: end;
justify-items: center;
overflow: hidden;
border-image-slice: 10 fill;
border-image-width: 10px;
border-image-outset: 0;
border-image-repeat: stretch stretch;
border-image-source: url("https://noita.wiki.gg/images/5/5d/UI_enemy_frame_upscaled_b.png");
border-style: solid;
border-width: 10px;
}
.enemy-query-item .enemy-thumbnail {
margin-bottom: 0.5rem;
}
.enemy-query-item .label {
background-color: var(--content-inset-background);
width: 100%;
text-align: center;
}
.enemy-query-item :not(.label)+.label {
padding-top: 0.1rem;
}
.enemy-query-item .label+.label {
padding-bottom: 0.1rem;
}
.enemy-thumbnail img {
width: 80px;
height: 80px;
}
/* New grid, previous bits kept for older templates */
.EnemyQuery {
--enemyquery-card-size-min: 7.2rem;
--enemyquery-card-size-max: 12rem;
--enemyquery-card-gap: 0.6rem;
--enemyquery-image-size: 70%;
--enemyquery-background: url('https://noita.wiki.gg/images/5/5d/UI_enemy_frame_upscaled_b.png');
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(var(--enemyquery-card-size-min) + var(--enemyquery-card-gap)),1fr));
gap: var(--enemyquery-card-gap);
place-items: stretch stretch;
}
.EnemyQuery .enemy-query-item {
aspect-ratio: 1;
height: auto;
width: auto;
min-width: var(--enemyquery-card-size-min);
max-width: var(--enemyquery-card-size-max);
display: inline-grid;
grid-template-rows: 1fr auto auto;
align-items: end;
justify-items: center;
overflow: visible;
margin: 0;
padding: 0;
border: none;
background-size: 100%;
background-image: var(--enemyquery-background);
background-repeat: no-repeat;
background-position: top center;
}
@media screen and (max-width: 720px) {
.EnemyQuery {
--enemyquery-card-size-min: 7.4rem;
--enemyquery-card-size-max: 11rem;
--enemyquery-card-gap: 0.4rem;
font-size: 0.9em;
}
.EnemyQuery .enemy-query-item-name {
margin-top: 0.8em;
font-size: 1em;
padding: 0.12em 0 0 0;
}
}
.enemy-query-item .enemy-thumbnail {
aspect-ratio: 1;
margin-bottom: 0;
height: var(--enemyquery-image-size);
}
.enemy-query-item .enemy-thumbnail img {
height: 100%;
width: 100%;
}
.EnemyQuery .enemy-query-item-name,
.EnemyQuery .enemy-query-item-alias {
color:var(--links-color);
width: auto;
font-size: 1em;
line-height: 1em;
background-color: var(--content-inset-background);
}
.EnemyQuery:visited .enemy-query-item-name,
.EnemyQuery:visited .enemy-query-item-alias {
color:var(--links-color-visited);
}
.EnemyQuery .enemy-query-item-name {
margin-top: 0.8em;
font-size: 1em;
width: auto;
overflow: clip;
}
.EnemyQuery .enemy-query-item-alias {
font-style: italic;
font-size: 0.8em;
line-height: 1em;
padding: 0.22em 0.3em 0.3em 0.3em;
margin-bottom: 0.1em;
}
/**********************************
* Used by [[Template:MaterialQuery]] *
**********************************/
.MaterialQuery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.5rem;
}
.material-query-item {
display: grid;
place-items: center;
gap: 0.3rem;
background: var(--template-background-color-1);
padding: 0.2rem;
border-radius: 0.4rem;
border-style: solid;
border-color: var(--template-background-color-2);
border-width: 0 4px;
}
.material-query-label {
display: flex;
gap: 0.5rem;
align-items: center;
}
.material-query-item .name {
font-family: noita;
}
.material-query-item :is(.id, .id code) {
overflow: visible;
}
.material-query-item .id {
--h-oneline: 1.6em;
position: relative;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.3;
max-width: 96%;
width: 94%;
height: var(--h-oneline);
border-width: 0;
}
.material-query-item .id code {
--bs-voff: 0;
--bs-hoff: 0;
--bs-blur: 0.5em;
--bs-spread: 0.2em;
--bs-color: #0000;
overflow: hidden;
text-overflow: ellipsis;;
box-sizing: border-box;
display: block;
position: absolute;
top: 0;
min-height: var(--h-oneline);
width: fit-content;
max-width: 100%;
padding: 0.1em 0.3em;
border: 0.08em solid #eaecf0ee;
border-radius: 0.2em;
line-height: 1.3;
text-align: center;
user-select: all;
opacity: 0.6;
transition:
opacity 200ms ease 30ms,
box-shadow 200ms ease 30ms,
word-wrap 0ms ease 0ms;
box-shadow: var(--bs-voff) var(--bs-hoff) var(--bs-blur) var(--bs-spread) var(--bs-color);
}
.material-query-item .id:hover code {
--bs-color: #0005;
transition:
opacity 100ms ease 30ms,
box-shadow 100ms ease 30ms,
word-wrap 0ms ease 0ms;
opacity: 1;
word-wrap: break-word;
}
/**********************************
* Used by [[Template:PerkQuery]] *
**********************************/
.PerkQuery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.5rem;
}
.perk-query-item {
display: grid;
place-items: center;
gap: 0.3rem;
background: var(--template-background-color-1);
padding: 0.2rem;
border-radius: 0.4rem;
border-style: solid;
border-color: var(--template-background-color-2);
border-width: 0 4px;
}
.perk-query-label {
display: flex;
gap: 0.5rem;
align-items: center;
}
.perk-query-item .name {
font-family: noita;
text-align: center;
}
.perk-query-item :is(.id, .id code) {
max-width: 100%;
overflow: hidden;
}
.perk-query-item .id code {
text-overflow: ellipsis;
display: block;
overflow: hidden;
}
.perk-query-item .id code:hover {
text-overflow: clip;
white-space: normal;
word-break: break-word;
}
/* 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%;
font-weight: bold;
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 #306d98;
}
.ambox-red {
border-left: 10px solid #e55756;
}
.ambox-orange {
border-left: 10px solid #ff8b5e;
}
.ambox-yellow {
border-left: 10px solid #fcda82;
}
.ambox-purple {
border-left: 10px solid #b31295;
}
.ambox-gray {
border-left: 10px solid #bba;
}
.ambox-green {
border-left: 10px solid #6f973d;
}
/* Ambox small text */
.amsmalltext {
margin-top: 0.5em;
font-weight: normal;
font-size: 0.95em;
}
/****************
* Tabber styles *
****************/
ul.tabbernav {
border:none;
padding-bottom:1em;
margin:0 2px;
}
ul.tabbernav li :is(a, a:link) {
border:2px solid #928167;
color:#9acbf1;
}
ul.tabbernav :is(li, li.tabberactive) :is(a, a:hover) {
background-color:#000;
}
ul.tabbernav li:not(.tabberactive) a:hover {
box-shadow: 0 0 2px 2px #0d0c0b6f inset;
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 *
**************/
/*********************
/* 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 );
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;
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 {
font-family: noita, sans-serif;
text-shadow: 2px 2px black;
background-color: var(--fpheader-background-color);
border: none;
text-align: center;
color: var(--fpheader-color);
font-size: 1.5em;
box-shadow: 0 8px 10px -10px var(--content-border-color);
margin-bottom: 10px;
}
.fpmidsections {
float: left;
width: 100%;
overflow: hidden;
}
.fpbox {
overflow: auto;
width: calc(100% - 0.1rem);
font-size: 1em;
border-top: var(--content-border);
box-shadow: rgba(var(--content-border-color-rgb), 0.7) 0 0.1rem 0.5rem;
background: var(--fpbox-background-color);
margin: 0.5rem;
padding: 0.5rem;
box-sizing: border-box;
}
.fpbox .mainheading {
border: none;
font-size: 2.2em;
font-weight: bold;
text-align: right;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}
.fpbox .heading {
border: none;
border-bottom: 1px solid #ffffff;
font-size: 132%;
margin: 0 0 10px 0;
padding: 0 0 5px 0;
}
.fpsection1, .fpsection2, .fpsection3, .fpsection4 {
float: left;
clear: both;
width: 100%;
}
div:is(.fp2columnonly, .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;
}
table.sticky-headers {
overflow: visible;
}
table.sticky-headers :is(thead tr, tbody tr:first-child) th {
position: sticky;
top: 32px;
background-clip: padding-box;
z-index: 10;
}
}
@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: flex;
max-width: 100%;
box-sizing: border-box;
place-content: center;
}
.pi-horizontal-group .pi-header { text-align: center; }
/* <math> */
.mwe-math-element {
padding: 0.25em 0.1em;
}
/* Random chooser helper rule */
.choose-random > :not(.selected) {
display: none;
}
/* advanced-search's autocomplete dropdown */
.oo-ui-menuSelectWidget {
background-color:#181818;
}
/* legend box on RecentChanges */
.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
background-color: #181818;
}
/*********************************************
* [[Template:Flex]], [[Template:Flex/start]] *
*********************************************/
.flex-container {
display: flex;
flex-direction: row;
gap: 1.5rem;
flex-basis: 33%;
flex-wrap: wrap;
place-items: center;
}
/*********************************************
* [[Template:Bandcamp]] *
*********************************************/
.bandcamp-embed {
border-width: 1px;
border-color: var(--content-border-color);
border-style: solid;
}
/*********************************************
* [[Template:Pronunciation]] *
*********************************************/
.client-nojs .pronunciation a:first-child {
display: none;
}
.pronunciation audio {
display: none;
}
.pronunciation img {
filter: invert(1);
vertical-align: middle;
}
.hidemeta, .hidemeta tbody, .hidemeta tr, .hidemeta td {
display:inline;
border-collapse:collapse;
text-indent: 0;
border-spacing:0;
border:0;
vertical-align:baseline;
}
/**************************************************************
* Tabs-script and Infobox CSS from User:Redirected *
**************************************************************/
/* Tabs container code */
/* don't mess with these start */
.tabs-container .tabs-btn { display: inline-block; cursor: pointer; }
.tabs-container .tabs-btn:only-child { display: none; }
.tabs-container .tabs-btn a { pointer-events: none; }
/* don't mess with these end */
.tabs-container .tabs-btn.tabs-active {
border-color: var(--visited-link-color);
box-shadow: 0 -6px 6px -4px rgb(255 255 255 / 50%) inset;
}
/* Infobox basic styling */
/* don't mess with these start */
.ib-infobox-container dd,
.ib-infobox-container dt,
.ib-infobox-container dl {
margin: unset;
font-weight: unset;
}
.ib-infobox-container { position:relative; }
.ib-infobox {
display: grid; overflow: auto;
grid-template-columns: 1fr auto;
/* don't mess with these end */
--ib-main-border-style: 3px solid;
--ib-main-border-color: #5f5f5f;
--ib-item-border-style: 0.5px solid;
--ib-item-border-color: #272727;
--ib-item-border-color2: #373737;
border: var(--ib-main-border-style) var(--ib-main-border-color);
background-color: #000;
font-family: 'noita',sans-serif;
font-weight: normal;
text-shadow: 1px 1px 1px rgb(0 0 0 / 75%);
line-height: 1.5;
color: #FFF;
hyphens: auto;
}
.ib-infobox .ib-tabs {
padding: 0 .5em;
}
.ib-infobox .ib-tabs > * {
padding: 0 .25em;
margin: .25em;
color: var(--visited-link-color);
border-bottom: 3px solid var(--ib-main-border-color);
}
.ib-infobox .ib-header {
font-size: 1.02em;
background-color: #181818;
}
.ib-infobox .ib-item {
font-size: 1.02em;
padding: 0.5em;
overflow-wrap: break-word; /*word-break: break-word;/* deprecated */
/* Shaping code from below onwards, don't mess with it */
flex: 1; min-width: 0;
overflow: hidden;
}
/* Right columnization, usually for images */
.ib-infobox .ib-group {
grid-column: 1 / 3;
}
@media (min-width: 400px) { /* wider than 400px, allow right column to exist in single tab mode */
.ib-infobox:not(.tabs-multi) .ib-group.ib-columnize-right + .ib-group{
grid-row: colgroup_r;
grid-column: 1 / 2;
}
.ib-infobox:not(.tabs-multi) .ib-group.ib-columnize-right{
grid-row: colgroup_r;
grid-column: 2 / 3;
/* below two are for vertical centering of right column items */
display: grid;
align-items: center;
}
}
.ib-infobox .ib-group.ib-columnize-right .ib-propsg .ib-prop .ib-val .ib-item {
text-align: center;
}
/**/
/* Hierarchy:
.ib-infobox-container > .ib-infobox.tabs-multi > .ib-group.ib-columnize-right >
1> .ib-header
1> .ib-tabs ...
2> .ib-propsg ...
2> .ib-propsg.ib-columnize.ib-nokey .ib-prop .ib-key/.ib-val .ib-item
*/
/* hide keys for .ib-nokey */
.ib-infobox.tabs-multi .ib-nokey .ib-key .ib-item,
.ib-infobox:not(.tabs-multi) .ib-nokey .ib-key {
display: none;
}
/* Flex */
.ib-infobox .ib-propsg,
.ib-infobox .ib-propsg .ib-prop, /* .ib-val can have multiple .ib-item */
.ib-infobox .ib-propsg .ib-prop .ib-val { /* unlike .ib-key */
display: flex;
}
.ib-infobox .ib-propsg { flex-direction: column; }
.ib-infobox .ib-propsg .ib-prop .ib-key { flex: 3; min-width: 0; }
.ib-infobox .ib-propsg .ib-prop .ib-val { flex: 4; min-width: 0; }
/* media query */
@media not (max-width: 350px) { /* wider than 350px, key and value
rows are separate below this, so max width needs to be unset */
.ib-infobox.tabs-multi .ib-group .ib-propsg .ib-prop .ib-key,
.ib-infobox:not(.tabs-multi) .ib-propsg:not(.ib-columnize) .ib-prop .ib-key {
max-width: 12.5em;
}
/* column code start *//* when .tabs-multi mode is inactive, columns are allowed to exist */
/* when columnized the value is often smaller than the key, key needs to flex for evenness between props */
.ib-infobox:not(.tabs-multi) .ib-propsg.ib-columnize .ib-prop .ib-val { flex: 0; min-width: 0; }
/**/
.ib-infobox:not(.tabs-multi) /*.ib-propsg*/ .ib-columnize {
flex-direction: row;
flex-wrap: wrap;
}
.ib-infobox:not(.tabs-multi) .ib-propsg.ib-columnize .ib-prop {
/* determine items per row, min-content (default) fits all, overwritten in lua */
flex: var(--ib-columnize-flex, min-content); min-width: 0;
flex-direction: column;
}
}
/* column code end */
@media (max-width: 350px) { /* smaller than than 350px */
.ib-infobox.tabs-multi .ib-group .ib-propsg.ib-columnize .ib-prop,
.ib-infobox .ib-group .ib-propsg:not(.ib-columnize) .ib-prop {
flex-direction: column; /* have keys and values on separate rows in non-columnized groups */
}
/* Border code hell */
.ib-infobox.tabs-multi .ib-group:not(.ib-nokey) .ib-propsg:not(.ib-nokey) .ib-key{
border-left: var(--ib-item-border-style) var(--ib-item-border-color); /* DIV,
left border fix to match key with values in small mode */
}
.ib-infobox.tabs-multi .ib-group:not(.ib-header):not(.ib-nokey) .ib-propsg:not(.ib-nokey) .ib-key {
border-bottom: var(--ib-item-border-style) var(--ib-item-border-color); /* DIV */
}
}
.ib-infobox.tabs-multi :not(.ib-header):not(.ib-nokey):not(.ib-columnize-right) .ib-propsg:not(.ib-columnize) .ib-val .ib-item,
.ib-infobox.tabs-multi .ib-header .ib-val .ib-item,
.ib-infobox.tabs-multi .ib-propsg.ib-columnize .ib-val .ib-item {
border-left: var(--ib-item-border-style) var(--ib-item-border-color); /* DIV, multi mode tab value separator */
}
.ib-infobox.tabs-multi :not(.ib-header) .ib-propsg .ib-prop {
border: var(--ib-item-border-style) var(--ib-item-border-color2);
border-collapse: collapse; /* PROP */
}
.ib-infobox:not(.tabs-multi) :not(.ib-columnize-right):not(.ib-header) .ib-propsg:not(.ib-columnize) .ib-prop,
.ib-infobox:not(.tabs-multi) .ib-group.ib-columnize-right,
.ib-infobox:not(.tabs-multi) .ib-propsg.ib-columnize .ib-prop {
border: var(--ib-item-border-style) var(--ib-item-border-color);
border-collapse: collapse; /* PROP, all the property bordering in all the possible modes */
}
/* Tabs-script and Infobox CSS end *
***********************************/
.mw-wiki-logo {
background-image: url(/images/e/e6/Site-logo.png?cdb0e);
}
.spellBackground {
background-color: var(--color-spell-background);
}
/* Shared stuff for the spell icon and spell infobox borders */
.spellBorder {
border-radius: var(--spell-border-radius);
border: var(--spell-border-width) solid var(--color-spell-base, var(--color-spell-unknown));
box-shadow: 0 0 8px 2px var(--color-spell-base) inset;
}
.spellProjectile,.pi-theme-Projectile {
--color-spell-base: var(--color-spell-projectile);
}
.spellStatic, .pi-theme-Static,
.pi-theme-Static-projectile,
.pi-theme-Static-Projectile {
--color-spell-base: var(--color-spell-static);
}
.spellPassive, .pi-theme-Passive {
--color-spell-base: var(--color-spell-passive);
}
.spellUtility, .pi-theme-Utility {
--color-spell-base: var(--color-spell-utility);
}
.spellModifier, .pi-theme-Modifier,
.pi-theme-Projectile-modifier,
.pi-theme-Projectile-Modifier {
--color-spell-base: var(--color-spell-modifier);
}
.spellMaterial, .pi-theme-Material {
--color-spell-base: var(--color-spell-material);
}
.spellMulticast, .pi-theme-Multicast {
--color-spell-base: var(--color-spell-multicast);
}
.spellOther, .pi-theme-Other {
--color-spell-base: var(--color-spell-other);
}
/*********************************/
/* Changes made for beta content */
/*********************************/
.spellBeta {
border-color: var(--color-spell-beta);
box-shadow: 0 0 8px 2px var(--color-spell-beta) inset;
}
.spellIsBeta > img {
background-color: var(--color-spell-background);
}
.spellBorder.spellIsBeta {
--beta-border-width: max(var(--spell-border-width), 0.3em);
--beta-border-outset: 0px;
--bwsp: var(--spell-border-width);
--voff: calc((var(--bwsp) * -1) - var(--beta-border-outset));
--hoff: calc((var(--bwsp) * -1) - var(--beta-border-outset));
--bwp: var(--beta-border-width);
--bwn: calc(var(--bwp) * -1);
--brad: calc(var(--spell-border-radius));
--h: 0.5;
--w: 0.76;
--b1: 1.6;
--b2: 0.67;
--bfc: #1161AE;
--bgc: transparent;
box-shadow: 0 0 1px 1px var(--color-spell-beta), 0 0 6px 1px var(--color-spell-base) inset;
--spell-border-width: clamp(3px, calc((var(--spell-size) * 0.1) - 1px), 9px);
}
.spellBorder.spellHighlighted.spellIsBeta {
box-shadow: 0 0 1px 1px var(--color-spell-beta),
0 0 0.1em 0.03em var(--color-spell-base) inset,
0 0 0 0.01em #00000091,
0 0 0.08em 0.06em #ffffffa1,
0 0 0.12em 0.08em var(--color-spell-base),
0 0 0.2em 0.1em #0c0c0cd6;
}
.spellIsBeta::before,
.spellIsBeta::after {
position: absolute;
height: calc(var(--h) * 100%);
width: calc(var(--w) * 100%);
display: flex;
align-items: end;
justify-content: start;
pointer-events: none;
opacity: 0.8;
background: var(--bgc);
border-color: var(--bfc);
box-sizing: border-box;
filter: drop-shadow(0px 0px calc(var(--h) * 2px) black);
font-family: noita;
font-size: clamp(4px, 14%, 20px);
color: #eeeeff;
line-height: 0.4;
letter-spacing: 0.06em;
--c: var(--color-spell-background);
--p: 0.14em;
--m: calc(var(--p) * -1);
text-shadow:
0px var(--p) 0px var(--c), var(--p) var(--p) 0px var(--c), var(--p) 0px 0px var(--c), var(--p) var(--m) 0px var(--c), -0px var(--m) 0px var(--c), var(--m) var(--m) 0px var(--c), var(--m) -0px 0px var(--c), 0 0 0 #0000;
}
.spellIsBeta::after {
content: '';
top: var(--voff);
right: var(--hoff);
border-color: var(--color-spell-beta) var(--color-spell-beta) transparent transparent;
border-style: ridge groove solid solid;
border-width: var(--bwp) var(--bwp) calc(var(--bwp) * var(--w-ratio)) calc(var(--bwp) / var(--w-ratio));
border-width: var(--bwp) var(--bwp) calc(var(--b2) * var(--bwp)) calc(var(--b1) * var(--bwp));
border-radius: 0 var(--brad) 0 0;
}
.spellIsBeta::before {
content: 'Beta';
bottom: var(--voff);
left: var(--hoff);
border-color: transparent transparent var(--color-spell-beta) var(--color-spell-beta);
border-style: solid solid groove ridge;
border-width: calc(var(--b2) * var(--bwp)) calc(var(--b1) * var(--bwp)) var(--bwp) var(--bwp);
border-radius: 0 0 0 var(--brad);
}
.nextInfoboxBeta + .pi-theme-spell figcaption {
display: none;
}
.nextInfoboxBeta + .pi-theme-spell .pi-item.pi-item-spacing.pi-title::after {
content: 'Beta';
z-index: 20;
position: absolute;
top: 0.1em;
left: 0.6em;
font-weight: bold;
font-size: 0.66em;
transform: rotate(-10deg);
opacity: 0.9;
color: #FBFCFF;
--i: 0.07em;
--j: calc(var(--i) * -1);
--k: #0a0356;
--bk: 0.04em;
--a: 0.14em;
--b: calc(var(--a) * -1);
--c: #197ad9;
--c2: #074d92b0;
--bc: 0.18em;
--bc2: 0.26em;
text-shadow:
var(--i) var(--j) var(--bk) var(--k),
var(--i) var(--i) var(--bk) var(--k),
var(--j) var(--j) var(--bk) var(--k),
var(--j) var(--i) var(--bk) var(--k),
var(--a) var(--b) var(--bc) var(--c),
var(--a) var(--a) var(--bc) var(--c),
var(--b) var(--b) var(--bc) var(--c),
var(--b) var(--a) var(--bc) var(--c),
var(--a) 0 var(--bc) var(--c),
var(--b) 0 var(--bc) var(--c),
0 var(--b) var(--bc) var(--c),
0 var(--a) var(--bc) var(--c),
var(--a) var(--b) var(--bc2) var(--c2),
var(--a) var(--a) var(--bc2) var(--c2),
var(--b) var(--b) var(--bc2) var(--c2),
var(--b) var(--a) var(--bc2) var(--c2);
color: #f0e3e3;
filter: drop-shadow(0.06em 0.06em 0em black) drop-shadow(-0.06em -0.06em 0em black) drop-shadow(0.06em 0.06em 0em var(--color-spell-base)) drop-shadow(-0.06em 0 0em var(--color-spell-base));
}
/* Make new spells new */
.nextInfoboxBeta + .pi-theme-spell .pi-item.pi-item-spacing.pi-title::after {
content: 'New!';
--k: #564503;
--a: 0.18em;
--c: #ffcd36;
--c2: #920707b0;
--bc: 0.24em;
--bc2: 0.26em;
color: #fff;
}