MediaWiki:FandomMobile.css

.pseudo-link { color:var(--fandommobile-link-color); }

/************************* /*** mobile front page collapse ***/ .fpbox.mobilecollapsible .fpheading a.togglecollapse { display: block; padding: 0 0 0 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; }

/*****************************
 * 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: #fff; border: 1px solid #fff; 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: #fff; }

.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 { /*! display:table; */ margin:auto; width: 100%; max-width: 410px; }

/* arkitexure individual module (sub-container) */ .info-module { display:inline-block; min-width:333px; width:97%; 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; align-items:top; 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, 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 { display:inline-block; min-width:93px; width:33%; max-width:116px; min-height:24px; height:auto; margin:1px; background:#fff; 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 *