MediaWiki:Common.css

/* 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://noita.gamepedia.com/media/6/64/Gif_icon_overlay.png) 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 *
************************/