Widget:MapStyles

From ARK: Survival Evolved Wiki
Jump to: navigation, search
<div class="mobileonly">Mobile App users need to view this page in a browser to use the map fully.</div>
<style>
.full-container {
  display: inline-block;
  padding: 5px;
  border: 1px solid #000;
  background: linear-gradient(white, lightgray);
  
}
.resourcemap {
  width:100%;
  height:100%;
}
table.resourcemaptable {
  margin:0;
}
.legend-container {
  display: inline-block;
  padding-right: 10px;
  float: left;
  max-width: 225px;
}

.map-container {
  position: relative;
}

.legend {
  display: inline-block;
  position: relative;
  padding: 0;
  border-radius: 50%;
  margin-left: 3px;
}
.map-legend .dots {
  text-align: right;
  vertical-align: top;
}
.map-legend input[type=checkbox] + label {
  color: #3c0000;
  text-shadow: 0 0 0.05em lightsalmon;
}
.map-legend input[type=checkbox]:checked + label {
  color: #003c00;
  text-shadow: 0 0 0.1em lightgreen;
}

.legend-container select {
  margin-left: 0.5em;
}
.legend-container .details-toggle {
  display: block;
}
ul.groups-legend, ul.groups-legend ul {
  list-style: none;
}
ul.groups-legend {
  margin-left: 0;
}

.map-container .dot {
  position: absolute;
  line-height: 0;
  padding: 0;
  border-radius: 50%;
}

.map-container .square {
  position: absolute;
  background-color: rgba(255,0,0,0.7);
  border-radius: 5px;
  border: 2px solid black;
}

.map-container .point {
  width: 7px;
  height: 7px;
  background-color: rgba(255,0,0,0.7);
  border: 1px solid black;
}

#top-notice {
  padding: 5px;
  vertical-align: middle;
  border-radius: 15px;
  width: 1060px;
  max-width:100%;
  overflow:auto;
  display:block;
}
.top-notice-image {
  position: relative;
  top: -100px;
  height: 0;
  z-index: 1;
}
.top-notice-text {
  vertical-align: middle;
  white-space:normal;
  color:#4f6d68;
  font-size:22px;
  padding-left:10px;
}
.top-notice-text a {
  font-weight: bold;
}
#legend-notice {
  padding: 10px;
  width: 210px;
}
.notice {
  display: inline-block;
  margin-bottom: 10px;
  border: 1px solid #000;
  background: linear-gradient(white, lightyellow);
}

/* Responsive styling for interactive maps when siderail is present to prevent overlap. */
.map-legend td:first-child {
  width:25px;
  text-align:center;
}

@media only screen and (max-width:1700px){ /* for users with the siderail ad */
  div#global-wrapper.with-siderail table.map-legend tr {
    display:inline-block;
    width:13em;
  }

  div#global-wrapper.with-siderail .legend-container {
    max-width:unset;
  }

  div#global-wrapper.with-siderail table.resourcemaptable {
    clear: left;
  }
}

@media only screen and (max-width:1300px){ /* for everyone */
  table.map-legend tr {
    display:inline-block;
    width:13em;
  }

  .legend-container {
    max-width:unset;
  }
}

/**********
* Markers *
***********/

.hide-cave .map-container .cave {
  display: none;
}

.obelisk-red {
  width:20px;
  height:20px; 
  background-color:#f70102;
  border:2px solid #812f1a;
}
.hide-obelisk-red .obelisk-red {
  display: none;
}
.obelisk-green {
  width:20px;
  height:20px;
  background-color:#14e800;
  border:2px solid #207203;
  margin-left:3px;
}
.hide-obelisk-green .obelisk-green {
  display: none;
}
.obelisk-blue {
  width:20px;
  height:20px;
  background-color:#00a5ff;
  border:2px solid #266dbf;
}
.hide-obelisk-blue .obelisk-blue {
  display: none;
}
/* for Mod:Ebenus Astrum */
.obelisk-yellow {
  width:20px;
  height:20px;
  background-color:#EAE42C;
  border:2px solid #207203;
}
.hide-obelisk-yellow .obelisk-yellow {
  display: none;
}

.terminal {
  width:20px;
  height:20px;
  background-color:#B477FF;
  border:2px solid #266dbf;
}
.hide-terminal .terminal {
  display: none;
}

.water-vein,
.oil-rock,
.oil-vein,
.salt,
.sulfur,
.clay,
.crystal,
.obsidian,
.silica,
.black-pearl,
.river-rock,
.metal,
.metal-rich,
.metal-underwater,
.rare-flower,
.rockarrot,
.savoroot,
.silk,
.polymer,
.keratin,
.element-ore,
.dust-rich,
.gem-blue,
.gem-green,
.gem-red,
.charge-node,
.hyper-charge-node,
.gas-node,
.city-terminal,
.plant-z,
.wyvern-nest,
.drake-nest,
.cave-loot,
.deinonychus-nest {
   height:7px;
   width:7px;
}

.water-vein {
  background-color: cyan;
  border: 1px solid black;
}
.hide-water-vein .water-vein {
  display: none;
}

.oil-rock, .oil-vein {
  background-color: #3B3131;
  border: 1px solid black;
}
.hide-oil-rock .oil-rock, .hide-oil-vein .oil-vein {
  display: none;
}

.salt {
  background-color: #679dae;
  border: 1px solid black;
}
.hide-salt .salt {
  display: none;
}

.sulfur {
  background-color: yellow;
  border: 1px solid black;
}
.hide-sulfur .sulfur {
  display: none;
}

.clay {
  background-color: #FFD800;
  border: 1px solid black;
}
.hide-clay .clay {
  display: none;
}

.cactus {
  width: 4px;
  height: 4px;
  background-color: lightgreen;
  border: 1px solid green;
}
.hide-cactus .cactus {
  display: none;
}

.crystal {
  background-color: white;
  border: 1px solid black;
}
.hide-crystal .crystal {
  display: none;
}

.obsidian {
  background-color: #2F30A2;
  border: 1px solid black;
}
.hide-obsidian .obsidian {
  display: none;
}

.silica {
  background-color: pink;
  border: 1px solid black;
}
.hide-silica .silica {
  display: none;
}

.black-pearl {
  background-color: magenta;
  border: 1px solid black;
}
.hide-black-pearl .black-pearl {
  display: none;
}

.river-rock {
  background-color: brown;
  border: 1px solid black;
}
.hide-river-rock .river-rock {
  display: none;
}

.metal {
  background-color: silver;
  border: 1px solid black;
}
.hide-metal .metal {
  display: none;
}

.metal-rich {
  background-color: goldenrod;
  border: 1px solid black;
}
.hide-metal-rich .metal-rich {
  display: none;
}

.metal-underwater {
  background-color: teal;
  border: 1px solid black;
}
.hide-metal-underwater .metal-underwater {
  display: none;
}

.rare-flower {
  background-color: #ADD8E6;
  border: 1px solid black;
}
.hide-rare-flower .rare-flower {
  display: none;
}

.rockarrot {
  background-color: #3BD319;
  border: 1px solid black;
}
.hide-rockarrot .rockarrot {
  display: none;
}

.savoroot {
  background-color: #2B9111;
  border: 1px solid black;
}
.hide-savoroot .savoroot {
  display: none;
}

.silk {
  background-color: #9B31E2;
  border: 1px solid black;
}
.hide-silk .silk {
  display: none;
}

.polymer {
  background-color: #678396;
  border: 1px solid black;
}
.hide-polymer .polymer {
  display: none;
}

.keratin {
  background-color: #CBB195;
  border: 1px solid black;
}
.hide-keratin .keratin {
  display: none;
}

.element-ore {
  background-color: #E577DF;
  border: 1px solid black;
}
.hide-element-ore .element-ore {
  display: none;
}

.dust-rich {
  background-color: #E577DF;
  border: 1px solid black;
}
.hide-dust-rich .dust-rich {
  display: none;
}

.gem-blue {
  background-color: #5091CD;
  border: 1px solid black;
}
.hide-gem-blue .gem-blue {
  display: none;
}

.gem-green {
  background-color: #60AF33;
  border: 1px solid black;
}
.hide-gem-green .gem-green {
  display: none;
}

.gem-red {
  background-color: #E26F78;
  border: 1px solid black;
}
.hide-gem-red .gem-red {
  display: none;
}

.charge-node {
  background-color: #77FF97;
  border: 1px solid black;
}
.hide-charge-node .charge-node {
  display: none;
}

.hyper-charge-node {
  background-color: #63D0FF;
  border: 1px solid black;
}
.hide-hyper-charge-node .hyper-charge-node {
  display: none;
}

.gas-node {
  background-color: #FF93E6;
  border: 1px solid black;
}
.hide-gas-node .gas-node {
  display: none;
}

.element-node {
  width: 14px;
  height: 14px;
  background-color: #99004D;
  border: 1px solid black;
}
.hide-element-node .element-node {
  display: none;
}

.geyser {
  width: 14px;
  height: 14px;
  background-color: #0066FF;
  border: 1px solid black;
}
.hide-geyser .geyser {
  display: none;
}

.city-terminal {
  background-color: #c0c0c0;
  border: 1px solid black;
}
.hide-city-terminal .city-terminal {
  display: none;
}

.plant-z {
  background-color: #FF2B23;
  border: 1px solid black;
}
.hide-plant-z .plant-z {
  display: none;
}

.wyvern-nest {
  background-color: #0094FF;
  border: 1px solid black;
}
.hide-wyvern-nest .wyvern-nest {
  display: none;
}

.drake-nest {
  background-color: #FFAA00;
  border: 1px solid black;
}
.hide-drake-nest .drake-nest {
  display: none;
}

.dossier {
  width: 10px;
  height: 10px;
  background-color: #00cccc;
  border: 1px solid black;
}
.hide-dossier .dossier {
  display: none;
}

.note {
  width: 10px;
  height: 10px;
  background-color: #cca8cc;
  border: 1px solid black;
}
.hide-note .note {
  display: none;
}

.artifact {
  width: 12px;
  height: 12px;
  background-color: yellow;
  border: 1px solid black;
}
.hide-artifact .artifact {
  display: none;
}

.underwater-dome {
  width: 24px;
  height: 24px;
  background-color: white;
  border: 1px solid black;
}
.hide-underwater-dome .underwater-dome {
  display: none;
}

.cave-entrance {
  width: 10px;
  height: 10px;
  background-color: white;
  border: 1px solid black;
}
.hide-cave-entrance .cave-entrance {
  display: none;
}

.poi {
  width: 14px;
  height: 14px;
  background-color: #dda0dd;
  border: 1px solid black;
}
.hide-poi .poi {
  display: none;
}

.cave-loot {
  background-color: lime;
  border: 1px solid black;
}
.hide-cave-loot .cave-loot {
  display: none;
}

.sea-loot {
  width: 10px;
  height: 10px;
  background-color: red;
  border: 1px solid black;
}
.hide-sea-loot .sea-loot {
  display: none;
}

.deinonychus-nest {
  background-color: #d900ff;
  border: 1px solid black;
}
.hide-deinonychus-nest .deinonychus-nest {
  display: none;
}

.crate, .crateCave, .crateDungeon, .crateSurface {
  width: 15px;
  height: 15px;
}
<!--{if isset($crate)}-->
<!--{foreach from=$crate key=class item=path name=crates}-->
.crate.<!--{$class}--> {
  background-image: url(//gamepedia.cursecdn.com/<!--{$path|regex_replace:'/^https?:\/\/gamepedia.cursecdn.com\//':''|escape:'urlpathinfo'}-->);
  background-size: 100% 100%;
  border-radius: 0;
}
<!--{if $smarty.foreach.crates.last}-->
.legend.crate {
  background-image: url(//gamepedia.cursecdn.com/<!--{$path|regex_replace:'/^https?:\/\/gamepedia.cursecdn.com\//':''|escape:'urlpathinfo'}-->);
  background-size: 100% 100%;
  border-radius: 0;
}
<!--{/if}-->
<!--{/foreach}-->
<!--{/if}-->

<!--{if isset($crateCave)}-->
<!--{foreach from=$crateCave key=class item=path name=crates}-->
.crateCave.<!--{$class}--> {
  background-image: url(//gamepedia.cursecdn.com/<!--{$path|regex_replace:'/^https?:\/\/gamepedia.cursecdn.com\//':''|escape:'urlpathinfo'}-->);
  background-size: 100% 100%;
  border-radius: 0;
}
<!--{if $smarty.foreach.crates.last}-->
.legend.crateCave {
  background-image: url(//gamepedia.cursecdn.com/<!--{$path|regex_replace:'/^https?:\/\/gamepedia.cursecdn.com\//':''|escape:'urlpathinfo'}-->);
  background-size: 100% 100%;
  border-radius: 0;
}
<!--{/if}-->
<!--{/foreach}-->
<!--{/if}-->

<!--{if isset($crateDungeon)}-->
<!--{foreach from=$crateDungeon key=class item=path name=crates}-->
.crateDungeon.<!--{$class}--> {
  background-image: url(//gamepedia.cursecdn.com/<!--{$path|regex_replace:'/^https?:\/\/gamepedia.cursecdn.com\//':''|escape:'urlpathinfo'}-->);
  background-size: 100% 100%;
  border-radius: 0;
}
<!--{if $smarty.foreach.crates.last}-->
.legend.crateDungeon {
  background-image: url(//gamepedia.cursecdn.com/<!--{$path|regex_replace:'/^https?:\/\/gamepedia.cursecdn.com\//':''|escape:'urlpathinfo'}-->);
  background-size: 100% 100%;
  border-radius: 0;
}
<!--{/if}-->
<!--{/foreach}-->
<!--{/if}-->

<!--{if isset($crateSurface)}-->
<!--{foreach from=$crateSurface key=class item=path name=crates}-->
.crateSurface.<!--{$class}--> {
  background-image: url(//gamepedia.cursecdn.com/<!--{$path|regex_replace:'/^https?:\/\/gamepedia.cursecdn.com\//':''|escape:'urlpathinfo'}-->);
  background-size: 100% 100%;
  border-radius: 0;
}
<!--{if $smarty.foreach.crates.last}-->
.legend.crateSurface {
  background-image: url(//gamepedia.cursecdn.com/<!--{$path|regex_replace:'/^https?:\/\/gamepedia.cursecdn.com\//':''|escape:'urlpathinfo'}-->);
  background-size: 100% 100%;
  border-radius: 0;
}
<!--{/if}-->
<!--{/foreach}-->
<!--{/if}-->

.hide-crate .crate, .hide-crateCave .crateCave, .hide-crateDungeon .crateDungeon, .hide-crateSurface .crateSurface {
  display: none;
}

.test {
  width: 14px;
  height: 14px;
  background-color: #000080;
  border: 1px solid black;
}
.hide-test .test {
  display: none;
}

</style>