(Replacing "/media" links with image links. If you have any questions or noticed issues related to this edit, please reach out to us using the Special:Contact page.) |
mNo edit summary |
||
Line 199: | Line 199: | ||
.spoiler-hidden .GameMessageUnder { |
.spoiler-hidden .GameMessageUnder { |
||
font-size: inherit; |
font-size: inherit; |
||
+ | } |
||
+ | |||
+ | figure.pi-image { |
||
+ | border: 0; |
||
+ | margin: 0; |
||
+ | padding: 0; |
||
+ | vertical-align:baseline |
||
} |
} |
Revision as of 19:16, 3 March 2021
/* CSS placed here will be applied to all skins */
/* 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);
}
/* Multi-column box support */
.fp-container main .columns .leftcol,
.fp-container .columns .rightcol {
width: 100%;
margin: 0;
padding: 0;
}
@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 */
#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: 50% 50%;
}
}
@media screen and (min-width:1350px) {
#fp-3column.fp-container {
grid-template-areas: "a b c" "d b c";
grid-template-columns: 33.3% 33.3% 33.3%;
}
}
#fp-1 {
grid-area: a;
}
#fp-2 {
grid-area: b;
}
#fp-3 {
grid-area: c;
}
#fp-4 {
grid-area: d;
}
/* 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;
}
/*********************************
* 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;
}
/***********************
* End hover gif styles *
************************/
.GameMessage {
display: inline-grid;
grid-template-rows: auto auto;
font-family: 'noita', '04b03', sans-serif;
color: #fff;
margin: 2px 5px;
vertical-align: middle;
text-align: center;
}
.spoiler-hidden .GameMessage {
display: inline;
color: #77c999;
font-family: glyphs,sans-serif;
}
.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;
}
figure.pi-image {
border: 0;
margin: 0;
padding: 0;
vertical-align:baseline
}