MediaWiki:Common.css

@import url("/index.php?action=raw&title=MediaWiki:OSFEFonts.css&ctype=text/css"); @import url("/index.php?action=raw&title=MediaWiki:SkinSlideshow.css&ctype=text/css"); @import url("/index.php?action=raw&title=MediaWiki:Transforms.css&ctype=text/css"); @import url("/index.php?action=raw&title=MediaWiki:LinkFormatting.css&ctype=text/css");

.multipleTemplateInstance { background-color: #25344b !important; }

/* 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; }

/* Template documentation styles */ /* If modifying these styles, be sure to update the mobile skin! */ .doc { margin: 0em auto 1em; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #BDCAC3; border-radius: 1em; padding: 1em; }

.doc-header { padding-bottom: 3px; border-bottom: 1px solid #BDCAC3; margin-bottom: 1ex; }

.doc-footer { margin: 0; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #BDCAC3; border-radius: 1em; padding: 1em; }

/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */ /* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */ .desktopleft {   text-align: left; }

.desktopcenter { text-align: center; }

.desktopright { text-align: right; }

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

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

.fpbox .heading, .fpbox .mainheading, .fpbox .welcome { margin: 0 0 10px; padding: 0 0 5px; overflow: auto; }

.fpbox .mainheading, .fpbox .welcome { font-size: 150%; font-weight: bold; }

.fpbox .heading { text-align: center; font-size: 132%; }

.linkslabel { margin: 15px 5px 5px; padding: 0 0 5px; }

/* Template:FP links styles */ .fplinks { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: stretch; text-align: center; }

.fplink-outer { padding: 5px; flex-basis: calc(25% - 10px); width: calc(25% - 15px); min-width: 115px; display: inline-block; vertical-align: middle; }

.fplink-wide { flex-basis: calc(33% - 10px); width: calc(33% - 15px); }

.fplink-fullwidth { flex-basis: 100%; width: calc(100% - 15px); font-weight: bold; }

.fplink { padding: 0.5em; box-sizing: border-box; width: 100%; height: 100%; display: table; }

.fplink-plain { background: transparent; border-radius: 0; border: 0; box-shadow: none; }

.fplink-inner { display: table-row; }

.fplink a { display: table-cell; vertical-align: middle; }

.fplink img { max-width: 150px; width: 100%; height: auto; } /* Auto-resize front page video to fit smaller columns */ .fpbox .embedvideowrap { width: 100%!important; max-width: 480px; margin: 0 auto; }

.fpbox .embedvideowrap iframe { width: 100%!important; }

/* 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 section affects the main page layout            */ /*                                                      */ /* Both 3 and 2 column layouts are here. Managers should */ /* remove whichever of the two they are not using, as   */ /* well as this comment. */

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

display: grid; grid-template-areas: "a" "b" "c" "d"; grid-template-columns: 100%; } @media screen and (min-width:990px) { #fp-3column.fp-container { grid-template-areas: "a b" "c b" "c d"; grid-template-columns: 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%; } }
 * 1) fp-3column.fp-container {

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

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

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

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

/* end responsive 3 column main page layout */

/* this CSS governs the responsive 2 column main page layout */ display: grid; grid-template-areas: "a" "b" "c"; grid-template-columns: 100%; } @media screen and (min-width:990px) { #fp-2column.fp-container { grid-template-areas: "a b" "c c"; grid-template-columns: 50% 50%; } } @media screen and (min-width:1350px) { #fp-2column.fp-container { grid-template-areas: "a b" "c b"; grid-template-columns: auto 520px; } }
 * 1) fp-2column.fp-container {

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

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

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

/* end responsive 2 column main page layout */

/* End main page layout */ /* ******************** */

/* Allow limiting of which header levels are shown in a TOC; , for instance, will limit to  showing ==headings== and ===headings=== but no further (as long as there are no =headings= on the page, which  there shouldn't be according to the MoS). */ .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; }

/* ***************************** */ /* Start Text Effects           */ /* Copy to Mobile.css if edited! */

font.rarity-common { font-weight:bold; color:white; }

font.rarity-rare { font-weight:bold; color:lightblue; }

font.rarity-epic { font-weight:bold; color:plum; }

font.rarity-legendary { font-weight:bold; color:orange; }

font.rarity-calamity { background-image: linear-gradient(to left, lightcoral, sandybrown, palegoldenrod, springgreen, mediumaquamarine, skyblue, mediumslateblue, plum); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; font-weight:bold; color: transparent; }

/* End Text Effects             */ /* Copy to Mobile.css if edited! */ /* ***************************** */

/* Change float to none and clear to both when copying to Mobile.css */ div.infobox-container{ float:right; clear:right; }

/* ***************************** */ /* Start Infobox Spell          */ /* Copy to Mobile.css if edited! */

div.infobox-weapon { background-image: url("https://gamepedia.cursecdn.com/onestepfromeden_gamepedia_en/6/65/Infobox_Weapon_Background.png"); background-repeat: no-repeat; position: relative; width:   256px; height:  373px; overflow: hidden; margin:  5px; }

div.infobox-weapon div { position: absolute; overflow: hidden; }

div.infobox-spell { background-image: url("https://gamepedia.cursecdn.com/onestepfromeden_gamepedia_en/7/75/Infobox_Spell_Background.png"); background-repeat: no-repeat; position: relative; width:   256px; height:  402px; overflow: hidden; margin:  5px; }

div.infobox-spell div { position: absolute; overflow: hidden; }

div.infobox-spell-manacost { top:        17px; left:       0px; width:      65px; height:     40px; text-align: center; font-family: Josefin Sans; font-size:  40px; line-height: 1em; }

div.infobox-spell-name { top:        19px; left:       93px; width:      140px; height:     45px; text-align: left; font-family: Josefin Sans; font-weight: bold; font-size:  14px; line-height: 1.1em; }

div.infobox-spell-image { top:       55px; left:      64px; width:     128px; height:    128px; text-align: center; }

div.infobox-spell-effect { top:       171px; left:      28px; width:     200px; height:    110px; font-family:Ubuntu; text-align: center; }

div.infobox-spell-flavor { top:       289px; left:      13px; width:     145px; height:    70px; text-align: left; font-family:Ubuntu; font-style: italic; font-size: 0.8em; }

div.infobox-spell-damage { top:        321px; left:       180px; width:      80px; height:     45px; text-align: center; font-family: Josefin Sans; font-size:  2.7em; line-height: 1em; }

div.infobox-spell-shots { top:        352px; left:       190px; width:      70px; height:     14px; text-align: center; font-size:  1.0em; line-height: 1em; font-family: Montserrat; }

div.infobox-spell-brand { top:         370px; width:       256px; height:      32px; font-family: Josefin Sans; font-size:   1.5em; padding-left: 10px; }

/* End Infobox Spell            */ /* Copy to Mobile.css if edited! */ /* ***************************** */

/* ***************************** */ /* Start Infobox Artifact       */ /* Copy to Mobile.css if edited! */

div.infobox-artifact { background-image: url("https://gamepedia.cursecdn.com/onestepfromeden_gamepedia_en/b/bc/Infobox_Artifact_Background.png"); background-repeat: no-repeat; position: relative; width:   256px; height:  256px; overflow: hidden; margin:  5px; }

div.infobox-artifact div { position: absolute; overflow: hidden; }

div.infobox-artifact-name { top:        33px; left:       106px; width:      132px; height:     47px; text-align: left; font-family: Josefin Sans; font-weight: bold; font-size:  14px; line-height: 1.1em; }

div.infobox-artifact-effect { top:       113px; left:      15px; width:     222px; height:    85px; font-family:Ubuntu; text-align: left; }

div.infobox-artifact-flavor { top:       202px; left:      17px; width:     221px; height:    35px; text-align: left; font-family:Ubuntu; font-style: italic; font-size: 0.8em; }

/* End Infobox Artifact         */ /* Copy to Mobile.css if edited! */ /* ***************************** */

/* ***************************** */ /* Start Pact Element           */ /* Copy to Mobile.css if edited! */

div.pact { background-image: url("https://gamepedia.cursecdn.com/onestepfromeden_gamepedia_en/1/10/Pact_Background.png"); background-repeat: no-repeat; position: relative; width:   284px; height:  128px; overflow: hidden; margin:  5px; }

div.pact div { position: absolute; overflow: hidden; }

div.pact-image { top:        -7px; left:       189px; width:      100px; height:     100px; }

div.pact-name { top:        11px; left:       15px; width:      182px; height:     23px; text-align: left; font-family: Josefin Sans; font-weight: bold; font-size:  14px; line-height: 1.1em; }

div.pact-challenge { top:       28px; left:      15px; width:     182px; height:    70px; font-family:Ubuntu; text-align: left; }

div.pact-reward { top:       99px; left:      15px; width:     256px; height:    20px; font-family:Ubuntu; text-align: left; }

div.pact-id { top:       99px; left:      125px; width:     140px; height:    20px; font-family:Ubuntu; text-align: right; }

/* End Pact Element             */ /* Copy to Mobile.css if edited! */ /* ***************************** */

/* Start JavaScript Playfield */

.infobox-playfield-js { width: 338px; height: 168px; background-image: url("https://onestepfromeden.gamepedia.com/Special:FilePath/Playfield.png"); background-repeat: no-repeat; background-color: #445599; }

.playfield-entity { display: none; }

/* End JavaScript Playfield */

/* ***************************** */ /* Start Infobox Playfield      */ /* Copy to Mobile.css if edited! */

div.infobox-playfield { background-image: url("https://gamepedia.cursecdn.com/onestepfromeden_gamepedia_en/2/26/Playfield.png"); background-repeat: no-repeat; position: relative; width:   338px; height:  168px; overflow: hidden; margin:  5px; }

div.infobox-playfield-serif { background-image: url("https://gamepedia.cursecdn.com/onestepfromeden_gamepedia_en/c/c1/Playfield_Serif.png"); background-repeat: no-repeat; position: relative; width:   338px; height:  168px; overflow: hidden; margin:  5px; }

div.entity { position: absolute; transform: translate(-50%, -100%); }

div.entity-flat-align{ position: absolute; transform: translate(-50%, -100%) translateY(5px); }

div.tilehighlight { position: absolute; transform: translate(-50%, -14px); width:    34px; height:   19px; padding:  0px; margin:   0px; }

div.row1 { top: 150px; }

div.row2 { top: 125px; }

div.row3 { top: 100px; }

div.row4 { top: 75px; }

div.col1 { left: 29px; }

div.col2 { left: 69px; }

div.col3 { left: 109px; }

div.col4 { left: 149px; }

div.col5 { left: 189px; }

div.col6 { left: 229px; }

div.col7 { left: 269px; }

div.col8 { left: 309px; }

/* End Infobox Playfield        */ /* Copy to Mobile.css if edited! */ /* ***************************** */

.absolute-zero { position: absolute; top: 0px; left: 0px; }

.colorize-red { filter: brightness(50%) sepia(100%) saturate(10000%); }

.colorize-green { filter: brightness(50%) sepia(100%) hue-rotate(30deg) saturate(10000%); }

.colorize-blue { filter: brightness(40%) sepia(100%) hue-rotate(180deg) saturate(10000%); }

/* Keyboard key */ .keyboard-key { border: 1px solid #101010; background-color: #333; border-radius: 6px; padding: 5px; min-width: 25px; height: 25px; display:inline-block; font-weight:bold; }