MediaWiki:Mobile.css

/* de:MediaWiki:Mobile.css * es:MediaWiki:Mobile.css * fr:MediaWiki:Mobile.css * it:MediaWiki:Mobile.css * ja:MediaWiki:Mobile.css * pl:MediaWiki:Mobile.css * pt-br:MediaWiki:Mobile.css * ru:MediaWiki:Mobile.css * th:มีเดียวิกิ:Mobile.css */ /* CSS placed here will affect users of the mobile site */ .nomobile { display: none; } .pseudo-link { color:var(--fandommobile-link-color); }

/************************* /*** mobile front page collapse ***/ .fpbox.mobilecollapsible .fpheading a.togglecollapse { display: block; padding: 0 0 2px 15px; }
 * Front/main page tweaks *

.fpbox.mobilecollapsible .fpheading a.togglecollapse:active, .fpbox.mobilecollapsible .fpheading a.togglecollapse:hover { text-decoration: none; }

.fpbox.mobilecollapsible.collapsed .fpheading { border: none; margin-bottom: -4px; }

.fpbox.mobilecollapsible .fpheading a.togglecollapse { position: relative; }

.fpbox.mobilecollapsible .fpheading a.togglecollapse:before { content: ""; width: 12px; height: 12px; background-image: url("/skins/Vector/images/arrow-down.png"); background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E %3Cpath d=%22M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5%22 fill=%22%23222%22/%3E %3C/svg%3E"); position: absolute; left: 0; top: 50%; margin-top: -6px; }

.fpbox.mobilecollapsible.collapsed .fpheading a.togglecollapse:before { transform: rotate(-90deg); }

.fpbox.mobilecollapsible.collapsed .fpbody { display: none; }

/* Invert colors for better visibility */ img[src*="/PS.svg/"] { filter: invert(100%); }

/*****************************
 * End front/main page tweaks *

/* photo displays */ ul.photo-nav { margin:0; text-align:center; }

li.photo-bg { margin:4px 0; padding: 5px; position: relative; display: inline-block; vertical-align: top; text-align: center; background: #ffffff25; border: 1px solid #ffffff30; box-shadow: 0 0 8px #333; }

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

/* 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: 1px solid black; border-radius: 15px; }

.tile_container:hover{ background: #ffffff25; }

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

.tile_inner br { display:none; }

.tile_inner figure { max-height:100%; margin:0; }

.tile_inner img { height:75px; width:auto; border:none; }

/* -- */ /* "ARKITEXURE"-STYLE INFOBOX */ /* -- */

/* arkitexure rounded borders */ .info-arkitex { border-radius: 10px; }

.info-arkitex-left { border-radius: 10px 0 0 10px; }

.info-arkitex-right { border-radius: 0 10px 10px 0; }

/* arkitexure full container */ .info-framework { margin:0 auto; width: 100%; max-width: 402px; }

/* arkitexure individual module (sub-container) */ .info-module { display:inline-block; min-width:333px; width:100%; /*! max-width:402px; */ text-align:right; margin:0; padding:4px 4px 0 4px; overflow:hidden; }

/* arkitexure "sub-module" component */ .info-unit { display:inline-block; width:100%; min-width:333px; max-width:402px; text-align:center; margin:0; padding:0; overflow:hidden; }

.info-unit-row { display:flex; flex-direction:row; justify-content: center; min-width:335px; width:100%; /*! max-width:402px; */ padding:0; margin:0; overflow:hidden; }

.info-unit-comment { display:flex; align-items:left; }

.info-unit-caption { text-align:center !important; padding:0 8px 0 8px !important; }

/* arkitexure cell, intended for one total column, 100% width */ .info-X1-100 { display:inline-block; min-width:330px; width:100%; max-width:396px; margin:1px; padding:5px 2px 5px 2px; }

.info-masthead { display:flex !important; align-items:center; justify-content:center; min-height:38px; height:auto; font-size:24px; }

.info-column { display:flex !important; flex-direction:column; align-items:center; }

.info-sound-div { margin:5px 0 -5px 0; }

/* arkitexure cell, intended for two total columns, 25% width */ .info-X2-25 { display:flex; align-items:center; justify-content:center; min-width:65px; width:25%; max-width:92px; min-height:40px; height:40px; max-height:40px; margin:1px; padding:5px 8px 5px 8px; }

/* arkitexure cell, intended for two total columns, 75% width */ .info-X2-75 { display:flex; align-items:center; justify-content:center; min-width:233px; width:75%; max-width:274px; margin:1px; padding:5px 8px 5px 8px; min-height:40px; height:auto; font-size:24px; }

/* arkitexure cell, intended for two total columns, 50% width */ .info-X2-50 { min-width:93px; width:50%; max-width:180px; min-height:24px; height:auto; margin:1px; background:#ffffff25; text-align:center; }

/* arkitexure cell, intended for two total columns, 40% width */ .info-X2-40 { display:inline-block; min-width:140px; width:40%; max-width:144px; min-height:24px; height:24px; max-height:24px; margin:1px; padding:5px 8px 5px 8px; text-align:right; }

/* arkitexure cell, intended for two total columns, 60% width */ .info-X2-60 { display:inline-block; min-width:158px; width:60%; max-width:222px; min-height:24px; height:auto; margin:1px; padding:5px 8px 5px 8px; text-align:left; }

/* arkitexure cell, intended for three total columns, 33% width */ .info-X3-33 { min-width:93px; width:33%; max-width:116px; min-height:24px; height:auto; margin:1px; background:#ffffff25; text-align:center; }

/* arkitexure cell, intended for four total columns, 25% width */ .info-X4-25 { min-width:93px; width:25%; max-width:97px; min-height:24px; height:auto; margin:1px; background:#ffffff25; text-align:center; }

/* Spawning map */ .info-arkitex .spawningMap-container { max-width:100%; height:unset; }

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

.info-arkitex .spawningMap-container figure { margin:0; }

/* END "ARKITEXURE"-STYLE INFOBOX */

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

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

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

/******************************* .map-container > figure { margin:0; z-index:1; }
 * Spawning/Resource map tweaks *

.map-container .dot, .map-container .spawn-group > div { z-index:2; }

.full-container { display:flex; flex-direction:column; }

.legend-container { order:2; }

.resourcemaptable { order:1; } /***********************************
 * End spawning/resource map tweaks *

/* Disable clear on to prevent layout disruption (ToC is floating   and hidden by default) */ .tocright { clear: none; }

/* Definition list header bold font & slight margin as there's no styling by default */ dl > dt { font-weight: 500; margin-top: 0.2em; } /* Template:PaintRegions */
 * root {

--ark-paintregion-background-color: #ffffff25; --ark-paintregion-border-color: #7D6C7A; } .paintregion { background: var(--ark-paintregion-background-color); border: 0.3em inset var(--ark-paintregion-border-color); margin-top: 2px; } .paintregion img.article-media-placeholder { border: none; } .paint-region-tabber > .tabber > dl { margin: 0.8em 0 -0.2em; } /* H3 top margins when under tabber boxes */ .tabber + h3, .paint-region-tabber + h3 { margin-top: 0.8em; } /* Color list */ .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; font-size: 0.8em; color: black; text-shadow: 0 0 3px white; }

/* Template:Achievement styling */ .achieve_container { width: 600px; padding-left: 10px; vertical-align: bottom; background: var(--ark-paintregion-background-color); border: 0.3em inset var(--ark-paintregion-border-color); }

.achieve_container .achieve_name { display: inline-block; position: relative; top: 7px; font-size: 1.25em; color: var(--theme-page-text-color); }

.achieve_icon { width: 64px; height: 64px; vertical-align: top; }

.achieve_avail { display: inline-block; height: 0px; margin-right: 5px; }

.achieve_unavail { display: inline-block; height: 0px; margin-right: 5px; overflow: wrap; }

.gray_circle { display: block; position: relative; top: -19px; background: lightgray; border-radius: 50%; height: 30px; width: 30px; }

/* Fix for Template:MapLocations */ .mapLocations figure > a { position:static; }

/* Template:AttackInfo */ .dino-attacks .article-table-wrapper { margin-bottom: 6px; } .dino-attack-info th { width: 140px; }