MediaWiki:Common.css

/* de:MediaWiki:Common.css * es:MediaWiki:Common.css * fr:MediaWiki:Common.css * it:MediaWiki:Common.css * ja:MediaWiki:Common.css * pl:MediaWiki:Common.css * pt-br:MediaWiki:Common.css * ru:MediaWiki:Common.css */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'); @font-face { font-family: 'FontAwesome'; src: local('FontAwesome'), local('FontAwesome'), url(/media/hydra/fonts/FontAwesome.otf) format('opentype'); }

/* For elements which only display in the mobile view */ .mobileonly { display: none !important; }

/* 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; } /* end community portal sections */

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

table .number { text-align: right; }

/* no external link icon for internal links */ background: rgba(0, 0, 0, 0) none repeat scroll 0 0; padding-right: 0; }
 * 1) content a.external[href^="http://ark.gamepedia.com"], #content a.external[href^="https://ark.gamepedia.com"], #content a.external[href^="//ark.gamepedia.com"] {

/* Gamepedia fixes */ .ghost { color: #666666; }

/* link-spanner */ .link-spanner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; }

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

/* Creature Region Map */ .cr-region-map-map img{ filter: sepia(60%) grayscale(30%); } .cr-region-map-marker{ font-size: 12px; font-weight: bold; position: absolute; border-radius: 2px; } .cr-region-map-markercave{ border: 1px solid black; }

/* three-colored tables: red, green, gray */ .yes-no-undef .yes { background-color: #9cee93; } .yes-no-undef .no { background-color: #e3a4a4; } .yes-no-undef .undef { background-color: #d3d3d3; }

/* marks spawning areas with untameable creatures*/ .stripes { background: repeating-linear-gradient( 45deg,  transparent,  transparent 5px,  rgba(0, 0, 0, 0.3) 5px,  rgba(0, 0, 0, 0.3) 10px  ); } .map-container .square.untameable:after{ content: ' '; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.6; background: repeating-linear-gradient( 45deg, #000, #000 5px, transparent 5px, transparent 10px ); }

.map-container .square.cave{ border-width: 4px; }

.cr-region-map-very-common{ filter: hue-rotate(120deg) brightness(400%); } .cr-region-map-common{ filter: hue-rotate(78deg) brightness(400%); } .cr-region-map-uncommon{ filter: hue-rotate(60deg) brightness(400%); } .cr-region-map-very-uncommon{ filter: hue-rotate(48deg) brightness(400%); } .cr-region-map-rare{ filter: hue-rotate(24deg) brightness(400%); }

.cr-region-map-cl-very-common{ background-color: hsl(120,100%,60%); } .cr-region-map-cl-common{ background-color: hsl(78,100%,60%); } .cr-region-map-cl-uncommon{ background-color: hsl(60,100%,63.3%); } .cr-region-map-cl-very-uncommon{ background-color: hsl(48,100%,63.3%); } .cr-region-map-cl-rare{ background-color: hsl(30,100%,56.7%); } .cr-region-map-cl-very-rare{ background-color: hsl(0,100%,56.7%); } .cr-region-map-cl-unknown{ background-color: #ccc; }

/*** spawning-maps, svg ***/ .spawningMap-map { filter: sepia(60%) grayscale(30%); }

.spawningMap-deuteranopia.spawningMap-map, .spawningMap-tritanopia.spawningMap-map { filter: grayscale(90%) contrast(80%); }

.spawningMap-very-common { fill: #0F0; background-color: #0F0; }

.spawningMap-common { fill: #B2FF00; background-color: #B2FF00; }

.spawningMap-uncommon { fill: #FF0; background-color: #FF0; }

.spawningMap-very-uncommon { fill: #FC0; background-color: #FC0; }

.spawningMap-rare { fill: #F60; background-color: #F60; }

.spawningMap-very-rare { fill: #F00; background-color: #F00; }

.spawning-map-point { stroke: black; stroke-width: 1; }

.spawningMap-deuteranopia .spawningMap-very-common { fill: #FFE126; background-color: #FFE126; }

.spawningMap-deuteranopia .spawningMap-common { fill: #F3D467; background-color: #F3D467; }

.spawningMap-deuteranopia .spawningMap-uncommon { fill: #D7C58B; background-color: #D7C58B; }

.spawningMap-deuteranopia .spawningMap-very-uncommon { fill: #9090F4; background-color: #9090F4; }

.spawningMap-deuteranopia .spawningMap-rare { fill: #3F3FD4; background-color: #3F3FD4; }

.spawningMap-deuteranopia .spawningMap-very-rare { fill: #2C2CD4; background-color: #2C2CD4; }

.spawningMap-tritanopia .spawningMap-very-common { fill: #00FED9; background-color: #00FED9; }

.spawningMap-tritanopia .spawningMap-common { fill: #008D9D; background-color: #008D9D; }

.spawningMap-tritanopia .spawningMap-uncommon { fill: #2B5B7B; background-color: #2B5B7B; }

.spawningMap-tritanopia .spawningMap-very-uncommon { fill: #7C4284; background-color: #7C4284; }

.spawningMap-tritanopia .spawningMap-rare { fill: #FF3068; background-color: #FF3068; }

.spawningMap-tritanopia .spawningMap-very-rare { fill: #FF0422; background-color: #FF0422; }

.spawningMap-legendBox { display: inline-block; border-radius: 2px; width: 1.3em; height: 1.3em; vertical-align: text-bottom; border: 1px solid gray; }

/*************************** .key { display:inline-block; white-space:nowrap; }
 * Used by Template:Key *

.key kbd { padding: 0.1em 0.6em 0.1em 0.6em; margin-right:2px; font-size:85%; font-family:inherit; font-style:normal; border-radius: .2em; }

/* Dark Wiki Variation */ .keysDark { color:black; border: 1px solid rgb(170, 170, 170); box-shadow: 0.1em 0.2em 0.2em rgb(221, 221, 221); background-image: linear-gradient(to bottom, rgb(238, 238, 238), rgb(249, 249, 249), rgb(238, 238, 238)); background-color: rgb(249, 249, 249); }

/* Light Wiki Variation */ .keysLight { color:white; border: 1px solid rgb(0, 0, 0); box-shadow: 0.1em 0.2em 0.2em rgb(0, 0, 0); background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(15, 15, 15), rgb(30, 30, 30)); background-color: rgb(30, 30, 30); }

/**************************
 * End Template:Key styles *

/* Survival of the Fittest */ .sotf-team { width: 20%; padding: 1em 1em 0 1em !important; background-color: #9cee93; }

.sotf-team-left-dead, .sotf-team-right-dead { background-color: #eeed93; }

.sotf-team-both-dead { background-color: #e3a4a4; }

.sotf-team-both-dead .sotf-image-left, .sotf-team-both-dead .sotf-image-right, .sotf-team-left-dead .sotf-image-left, .sotf-team-right-dead .sotf-image-right { opacity: 0.3; }

.sotf-team-both-dead a:first-child, .sotf-team-both-dead a:last-child, .sotf-team-left-dead a:first-child, .sotf-team-right-dead a:last-child { text-decoration: line-through; }

.sotf-image-left, .sotf-image-right { display: inline-block; width: 74px; height: 74px; border: 1px solid #000000; }

.sotf-image-left { background-position: left center; } .sotf-image-right { background-position: right center; }

.tournamentlive { background-color: #9cee93; }

.tournamentdead { background-color: #e3a4a4; text-decoration: line-through; }

/* Removes redundant purge button in menu */ div.menu li#ca-cargo-purge { display:none; }

/*for tabs on structure overview pages*/ .structureSelector{ float:right; max-width:28em; } .structureSelector ul.tabbernav{ width:100%; display: inline-block; margin:0 0 0 0; padding:3px 0; }

/********************* /* Front page styles * /*********************/ .fpmain { width: 100%; overflow: hidden; z-index: 1; }

min-height:calc(425px + 2.3em); }
 * 1) fptweets {

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

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

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

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

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

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

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

.fp3col { display:flex; flex-flow:row wrap; }

.fp3col > div { flex:1 0 33%; min-width:10em; }

.fpbox { border: 1px solid #82a8af; box-shadow: 0 2px 5px #687478; background: rgba(0, 0, 0, 0.10); color: #000000; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; overflow: auto; }

.fpbox .mainheading { border: none; border-bottom: 1px solid #82a8af; color: #82a8af; font-size: 150%; font-weight: bold; margin: 0 0 10px 0; padding: 0 0 5px 0; overflow: auto; }

.fpbox .heading { border: none; border-bottom: 1px solid #82a8af; color: #ffffff; font-size: 132%; margin: 0 0 10px 0; padding: 0 0 5px 0; overflow: auto; }

.fpmain .columns .leftcol { width: 100%; margin: 0; padding: 0; }

.fpmain .columns .rightcol { width: 100%; margin: 0; padding: 0; }

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

.fpimagelist ul { list-style-type: none; list-style-image: none; }

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

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

img.fpWideImage { max-width:100%; height:auto; }

.fpbox + p > br { display:none; }

/* Tweaks for infoboxes used within tabbers */ .infobox-tabber, .infobox-tabber-big{ float:right; }

.infobox-tabber .tabber { margin-left: 1em; margin-bottom: 0.5em; }

.infobox-tabber .tabbertab { padding:0; border:0; }

.infobox-tabber .infobox { margin:0; }

.infobox-tabber .tabbertab > p:first-child, .infobox-tabber .tabbertab > p:last-child{ display:none; }

.infobox-tabber .tabbernav { border-bottom:0; }

.infobox-tabber .tabbernav { display:flex; flex-flow:row wrap-reverse; }

.infobox-tabber ul.tabbernav > li:first-of-type { order:1; }

/* Tweaks for tables within tabbers */ .table-tabber { margin:1em 0; }

.table-tabber .tabbernav { border-bottom:0; margin-bottom:2px; }

.table-tabber .tabbertab { padding:0; border:0; }

.table-tabber .tabbertab > table { margin:0; }

.table-tabber .tabbertab > p:first-child, .table-tabber .tabbertab > p:last-child{ display:none; }

/* Tweaks for paint region templates within tabbers */ .paint-region-tabber { margin:1em 0; }

.paint-region-tabber .tabbernav { border-bottom:0; margin-bottom:-0.1px; }

.paint-region-tabber .tabbertab { padding:0; border:0; }

.paint-region-tabber .tabbertab > table { margin:0; }

.paint-region-tabber .tabbertab > p:first-child, .paint-region-tabber .tabbertab > p:last-child{ display:none; }

.paintregion-container { display:flex; flex-flow:row wrap; max-width:640px; text-align:center; }

.paintregion { flex:1 0 26%; min-width:calc(152px + 0.8em); /* image width + border + padding */ padding: 0.9em 0.4em 0.2em 0.4em; }

/* Used by Template:Color */ .color-container { display:flex; flex-wrap:wrap; justify-content:center; padding-bottom:10px; padding-top:10px; margin:-1px; } .color-square { margin:1px; border:1px solid black; }

/* Used by Template:CreatureTableHeader */ th span.long { display:initial; }

th.long, td.long { display:table-cell; }

th span.short { display:none; }

@media only screen and (max-width:1700px){ .with-siderail th span.long, .with-siderail th.long, .with-siderail td.long { display:none; } .with-siderail th span.short { display:initial; } table.cargo-creature-table th { font-size:80%; }

}

@media only screen and (max-width:1350px) { th span.long, th.long, td.long { display:none; } th span.short { display:initial; } table.cargo-creature-table th { font-size:60%; } }

/* Grid Filtering css */ .creature_roster { line-height: 0; /* Kills any vertical spacing between rows */ margin: 0 !important; padding: .5em 0 !important; border-bottom: 1px solid #333; text-align: center; } .creature_roster li { display: inline-block; margin: 0; overflow: hidden; }

/* Prevents Table of Breeding from conflicting with siderail */ @media only screen and (min-width:1350px) and (max-width:1560px) { div#global-wrapper.with-siderail table#breeding-table { font-size:0.85em; } div#global-wrapper.with-siderail table#breeding-table th { font-size:0.8em; } div#global-wrapper.with-siderail table#breeding-table .temperature-bar { width:8em !important; } }

/* vertical-align table cells */ table.valign-table > * > tr > td { vertical-align: top !important; }

dl { margin-bottom: 0; }

/* link break behavior tweak to help Chrome/Safari with wrapping */ .mw-parser-output a.external.free { word-break: break-all; }

/* Fix for popups sometimes overlapping their link, creating a loop */ .mwe-popups.flipped-y, .mwe-popups.flipped-x-y { margin-top: -30px; }

/* Fix for photo-nav tabbers on map pages flowing under region maps at narrow widths */ @media only screen and (max-width:1330px){ .photo-tabber { clear:right; } }

/* Used for tables that are too wide, and slip under ads or offscreen */ .widetable { overflow-x:auto; margin-top:1em; }

.widetable > table { margin-top:0; }

.skin-hydra-dark .widetable, .skin-hydra .widetable, .skin-hydra-dark .widetable > table, .skin-hydra .widetable > table { transform:rotateX(180deg); -ms-transform:rotateX(180deg); -webkit-transform:rotateX(180deg); }

/********************************************* .attack { text-align: right; table-layout: fixed; width:980px; }
 * Used by Template:CreatureStats/attacks *

.attack .attack-name { word-wrap: break-word; }

@media screen and (max-width:1735px) { .with-siderail .attack { width:unset; max-width:100%; } }

.attack-container + .attack-container { margin-top:-15px; }

.with-siderail .tabber .attack { width:unset; max-width:100%; } /*************************************
 * End Template:CreatureStats/attacks *

/******************************************** .level img { /* wikipoints level on profile */ max-width:100%; }
 * Improved responsiveness for narrow widths *

@media screen and (max-width:720px) { div#content, div#footer { border-left:none; }

/* vector tabs */ div#right-navigation { margin-right:10px; } div.vectorTabs li span, div#mw-head div.vectorMenu h3 { margin:0; }

div#right-navigation div#p-search { margin-right:0; margin-top:0.5em; } div#right-navigation div#simpleSearch { border-bottom:1px solid #7FE7FF; } /* end vector tabs */

/* sidebar (now underbar I guess)*/ div#mw-navigation div#mw-panel { width:100%; margin: 0; margin-top:2em; padding:0; padding-top:0.5em; top:0; } div#mw-panel div.portal h3:not(#p-socialProfiles-label):not(#p-sitePromos-label) { padding-right:20px; } div#mw-navigation div#mw-panel .portal { width:auto; text-align:center; margin:0 0.5em; } #mw-panel.collapsible-nav .portal .body { margin:5px; } #mw-panel.collapsible-nav .portal div.body ul { margin:0; } #mw-panel.collapsible-nav .portal div.body ul li, #mw-panel .portal div.body ul li { padding:0.25em; } /* end sidebar */ /* profile */ .curseprofile .leftcolumn, .curseprofile .rightcolumn { width:unset; } div.mainavatar { float:none; text-align:center; } .userinfo .headline { clear:left; text-align:center; } .headline h1 { float:none; }

.grouptags { clear:left } .stats dl { width:100%; max-width:16em; } /* end profile */ .wikitable { overflow-x: auto; display: block; } #mw-searchoptions table { float:none; } #mw-searchoptions table td { display:block; } .infobox { float:none; margin:auto; } }

/* For Template:SpawningMap at low widths */ .spawningMap { max-width:100%; }

.info-arkitex .spawningMap-container { max-width:100%; }

.info-arkitex .spawningMap-container img, .info-arkitex .spawningMap-map, .info-arkitex .svgCreatureMap { width:100%; height:auto; }

.info-spawn .tabber { width:100%; }

/******************************
 * end improved responsiveness *

/* Template:Mission */ .missions { display:flex; flex-wrap:wrap; }

.mission{ display:flex; flex-direction:column; width:25em; vertical-align:top; margin:1em; padding:3px; }

.mission-description { height:100%; text-align:justify; }

.mission-dif-gamma, .mission-dif-beta, .mission-dif-alpha, .mission-dif-none { font-size: larger; font-weight: bolder; }

/* Fix for embedded videos not pushing the content below it down when it is pushed down */ .embedvideowrap { overflow: hidden; } /*table like overview for Color ID page to be better visable and responsive */ .color-ids-wrapper{ column-count: auto; column-width: 28em; }

.color-ids-wrapper li { list-style: none; background-color: #9d9d9d2b; border: 1px solid black; padding: 0.1em 1em 0.1em 1em; text-align: center; margin: 0; }

.color-ids-wrapper ul { margin: 0 0 0 1.6em ; }

/* Tiles (Template:Tile) */ .tile_container { margin: 4px 0px 8px 8px; padding: 0; position: relative; display: inline-block; width: 105px; height: 105px; vertical-align: middle; text-align: center; border-radius: 15px; }

.tile_inner { position:relative; top:6px; left:0; font-size:14px; font-weight:bold; }

/* Image-specific tweak to get it to display with a height of 75px */ .tile_inner img[src*="PS.svg"] { height: 75px; } /*PaintRegion fixes*/ .paintregion-container{ max-width: 900px; }

.paintregion img[src*="PaintRegion"] { width: 100%; height: 100%; max-width: 256px; max-height: 256px; }