MediaWiki:Fandomdesktop.css

.theme-fandomdesktop-light { --template-background-color-1: #ddd7e3; --template-background-color-1-rgb: 221, 215, 227; }

.theme-fandomdesktop-dark{ --template-background-color-1: #081B2B; --template-background-color-1-rgb: 8, 27, 43; }

.main-container { background-image: var(--theme-body-background-image); background-size: cover; background-position: top center; background-repeat: no-repeat; background-attachment: fixed; background-color: var(--theme-body-background-color); }

.page__main { background-color:rgba(var(--theme-page-background-color--rgb), 0.75); border:1px solid var(--theme-border-color); }

/********************* /* Front page styles * /*********************/ .fpHeaderImage { max-width:100%; height:auto; }

display: grid; grid-template-areas: "a" "b" "c" "d"; grid-template-columns: 100%; }
 * 1) fp-container {

display:grid; grid-template-areas:"x" "y"; grid-template-columns: 100%; }
 * 1) fp-4-inner {

@media screen and (min-width:990px) { #fp-container { grid-template-areas: "a a" "c b" "c b" "d d"; grid-template-columns: 50% 50%; } #fp-4-inner { grid-template-areas: "x y"; grid-template-columns: 50% 50%; } } @media screen and (min-width:1350px) { #fp-container { grid-template-areas: "a b c" "d d d"; grid-template-columns: 33.3% 33.3% 33.3%; } #fp-4-inner { grid-template-areas: "x y"; grid-template-columns: 50% 50%; } }

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

.fp-section > .fpbox { width: calc(100% - 2px); }


 * 1) fp-1 {grid-area: a;}
 * 2) fp-2 {grid-area: b;}
 * 3) fp-3 {grid-area: c;}
 * 4) fp-4 {grid-area: d;}
 * 5) fp-4-1 {grid-area: x;}
 * 6) fp-4-2 {grid-area: y;}

.fpvideos { display:flex; flex-flow:row wrap; height:100%; justify-content:center; align-items:center; }

.fpbox { border: none; border-radius: 10px; background: rgba(var(--template-background-color-1-rgb), 0.9); margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; }

@media screen and (min-width:1350px) { .fpwelbox { background-image: url('https://static.wikia.nocookie.net/overwatch_gamepedia/images/5/5c/Mp_tracer.png/revision/latest'); /* */ background-repeat: no-repeat; background-position: right; background-size: contain; border: 0px; width: 100%; } }

.fpwelbox .welcome, .fpbox .welcome { color: var(--theme-body-dynamic-color-1); font-weight: bold; font-variant: small-caps; text-shadow: 1px 1px 1px rgba(var(--theme-accent-dynamic-color-1--rgb), 0.5); transform: skew(-0.25rad); font-size: 175%; margin: 0 0 10px 0; padding: 0 0 5px 0; }

.fpbox .heading { font-size: 132%; background:var(--theme-body-background-color); border:1px solid var(--theme-accent-color); padding:1px; text-align:center; }

.fpimagelinks { text-align: center; margin: 0 auto; padding: 0 0 0 24px; overflow: hidden; }

.fpimagelink { display: inline-block; position: relative; border-radius: 2px; margin: 0 5px 10px -19px; padding: 0; width: 112px; max-width: 112px; height: 100px; max-height: 100px; }

.fpimagelink .image { position: absolute; left: 0; top: 0; width: 112px; height: 100px; z-index: 0; }

.hero-portrait-image-mask { display: inline-block; width: 70px; margin:0em 0.8em 0.4em; transform: skew(25rad); vertical-align:top; }

.hero-portrait-image-mask .fpimagelink { width: 70px; height: 84px; border: 3px solid var(--theme-body-dynamic-color-1); border-left-width: 0; border-right-width: 0; border-radius: 7px; transition: 0.15s; background-color: rgba(65,65,65,.8); background-clip: padding-box; overflow:hidden; margin: 2.4px 6px; }

.hero-portrait-image-mask img { transform: none; position:relative; left:-20%; }

.hero-portrait-image-mask .fpimagelink:hover { transform: scale(1.16); background-color: #ffc466 }

.hero-label { position:relative; left:calc(36px - 4em); width:9em; font-style: italic; font-weight: bold; white-space: nowrap; text-align: center; text-transform: uppercase; transform: scale(0.65,1); color: var(--theme-body-text-color); text-shadow: -1px -1px 1px rgba(var(--theme-page-background-color--rgb), 0.8), 1px 1px 1px var(--theme-page-background-color); }

.fpimagelink .text { position: absolute; left: 0; bottom: 0; font-weight: bold; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8), 1px 1px 1px #000000; text-align: center; width: 88px; margin: 0 24px 0 0; z-index: 1; }

.fpimagelink .text a { color: #ffffff; }

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

.fpvideo { display: inline-block; margin: 0 5px; }

/*************************
 * End front page styling *