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

/* Template:FP link 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.25em; 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; }

/* Front page layout */

display: grid; grid-template-areas: "a" "b" "c"; grid-template-columns: 100%; } @media screen and (min-width:990px) { #fp-container { grid-template-areas: "a b" "c b"; grid-template-columns: 50% 50%; } } @media screen and (min-width:1350px) { #fp-container { grid-template-areas: "a b" "c b"; grid-template-columns: auto 520px; } }
 * 1) fp-container {

.fpbox { width: calc(100% - 2px); box-sizing: border-box; }

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

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

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

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

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

/***************************/ /* Custom Temtem CSS Begin */ /***************************/

position: relative; padding: 4px; border-radius: 4px; letter-spacing: 0.05em; }
 * 1) mw-panel.collapsible-nav .portal h3:not(#p-socialProfiles-label):not(#p-sitePromos-label),
 * 2) mw-panel.collapsible-nav .portal.collapsed h3 {

margin: 0 8px; }
 * 1) mw-panel.collapsible-nav .portal h3,
 * 2) mw-panel.collapsible-nav .portal.collapsed h3 {

margin-left: calc(1em + 4px); }
 * 1) mw-panel.collapsible-nav .portal h3 a,
 * 2) mw-panel.collapsible-nav .portal.collapsed h3 a {

content: ""; position: absolute; top: 50%; transform-origin: 50%; transform: translateY(-50%); transition: transform .2s; width: .75em; height: .75em; background: white; clip-path: polygon(50% 100%, 0 0, 100% 0); pointer-events:none; }
 * 1) mw-panel.collapsible-nav .portal h3:not(#p-socialProfiles-label):not(#p-sitePromos-label):before {

transform: translateY(-50%) rotate(-90deg); }
 * 1) mw-panel.collapsible-nav .portal.collapsed h3:not(#p-socialProfiles-label):not(#p-sitePromos-label):before {

div#mw-panel div.portal div.body ul li a, div#mw-panel div.portal div.body ul li a:visited { font-family: "Calibri", sans-serif; font-weight: bold; }

/* Header Style */

.mw-body h1 span:target, .mw-body h2 span:target, .mw-body h3 span:target, .mw-body h4 span:target, .mw-body h5 span:target, .mw-body h6 span:target { position: relative; padding-left: 36px; background: linear-gradient(to right, white, white 36px, transparent); border-radius: 4px 0 0 4px;

animation-name: header-text-rest; animation-duration: .25s; animation-timing-function: ease-in-out; animation-delay: 1s; animation-fill-mode: forwards; }

.mw-body h1 span:target:before, .mw-body h2 span:target:before, .mw-body h3 span:target:before, .mw-body h4 span:target:before, .mw-body h5 span:target:before, .mw-body h6 span:target:before { content: ""; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); width: .75em; height: .75em; background: black; clip-path: polygon(0 100%, 0 0, 100% 50%);

animation-name: header-pointer; animation-duration: .25s; animation-timing-function: ease-in; animation-direction: alternate; animation-iteration-count: 4; animation-fill-mode: forwards; }

@keyframes header-pointer { from {left: 4px;} to {left: 20px;} }

@keyframes header-text-rest { from {padding-left: 36px;} to {padding-left: 20px;} }

/* Table of Contents */

background: #FFF6; box-shadow: none; }
 * toc, .toc {

/*************************************** @supports (clip-path:polygon(1% 1%, 2% 2%, 3% 3%)) or (-webkit-clip-path:polygon(1% 1%, 2% 2%, 3% 3%)){ /*don't apply any of this if the browser doesn't support a necessary part*/ .temtemPortrait { position:relative; display:inline-block; text-align:center; vertical-align: middle; }
 * Used by Template:Temtem portrait *

.temtemPortrait:before { position:absolute; height:100%; width:100%; top:0; left:0; content:""; background:url(https://static.wikia.nocookie.net/temtem_gamepedia_en/images/9/98/Temtem_portrait_border.png/revision/latest) no-repeat top left; /**/ background-size:100%; pointer-events:none; z-index:2; }

.temtemPortrait.background { background:url(https://static.wikia.nocookie.net/temtem_gamepedia_en/images/7/76/Temtem_portrait_background.png/revision/latest) no-repeat 100% / 100%; /**/ }

.temtemPortrait img { vertical-align:top; -webkit-clip-path: polygon(51% 5%, 88% 28%, 89% 73%, 50% 92%, 14% 72%, 12% 29%); clip-path: polygon(51% 5%, 88% 28%, 89% 73%, 50% 92%, 14% 72%, 12% 29%); z-index:1; } } /*******************************
 * End Template:Temtem portrait *

/*********************************** .temtem-list td:nth-of-type(2){ text-align:left; white-space:nowrap; } /******************
 * Used by Template:Temtem list *
 * End Temtem list *

/********************************* .hover-gif .thumbinner { position: relative; opacity: 1; }
 * Used by Template:Hover gif *

.hover-gif .thumbinner:not(:hover) img { opacity:0; transition: opacity 0.5s; }

.hover-gif .thumbinner:before { position: absolute; background: url(https://static.wikia.nocookie.net/temtem_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 .thumbinner:hover:before { display: none; }

.hover-gif canvas { position: absolute; left: 3px; border: 1px solid #3C4258; border-radius: 4px; opacity: 1; transition: opacity 0.3s; }

.hover-gif .thumbinner:hover canvas { opacity: 0; }

/***********************
 * End hover gif styles *

/************************************ .koish-tabs .tabbernav { display:flex; flex-flow:row wrap; }
 * Used to help de-clutter Koish *

.koish-tabs .tabbernav li { flex-grow:1; max-width:8em; }

.koish-tabs .tabbernav li a:link { display:block; text-align:center; } /*****************
 * End Koish tabs *

/**************************************** .evobox-container { display:inline-flex; padding:2px; border-radius:10px; }
 * Formatting for Template:Evobox   *
 * Coloring found in specific skin files *

.evobox { border-radius:10px; padding:5px; }

.evobox-portrait { text-align:center; }

.evobox-name, .evobox-trait { text-align:center; }

.evobox-evolution { text-align:center; align-self:center; margin:5px; max-width:8em; } /**********************
 * End Template:Evobox *