Widget:MapStyles

From Dark and Light Wiki
Jump to: navigation, search
Mobile App users need to view this page in a browser to use the map fully.

<style> .full-container {

 display: inline-block;
 padding: 5px;
 border: 1px solid #505050;
 background-color: #282828;
 width: 1050px;

}

.legend-container {

 display: inline-block;
 padding-right: 10px;
 float: left;
 max-width: 210px;

}

.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: white;
   text-shadow: 0 0 0.1em #86e1ff;

}

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

}

  1. top-notice {
 padding: 5px;
 vertical-align: middle;
 width: 1060px;
 min-height:115px;
 overflow:visible;

} .top-notice-image {

 position: relative;
 top: -100px;
 height: 0;
 z-index: 1;

} .top-notice-text {

 vertical-align: middle;
 white-space:normal;
 font-size:22px;
 padding-left:10px;

} .top-notice-text a {

 font-weight: bold;

}

  1. legend-notice {
 padding: 10px;
 width: 210px;

} .notice {

 display: inline-block;
 margin-bottom: 10px;
 border: 1px solid #505050;
 background-color: #282828;

} .hide-cave .map-container .cave {

 display: none;

}

.city-red {

 width:20px;
 height:20px; 
 background-color:#f70102;
 border:2px solid #812f1a;

} .hide-city-red .city-red {

 display: none;

} .city-green {

 width:20px;
 height:20px;
 background-color:#14e800;
 border:2px solid #207203;
 margin-left:3px;

} .hide-city-green .city-green {

 display: none;

} .city-blue {

 width:20px;
 height:20px;
 background-color:#00a5ff;
 border:2px solid #266dbf;

} .hide-city-blue .city-blue {

 display: none;

}

.water-vein {

 width: 7px;
 height: 7px;
 background-color: cyan;
 border: 1px solid black;

} .hide-water-vein .water-vein {

 display: none;

}

.oil-rock, .oil-vein {

 width: 7px;
 height: 7px;
 background-color: #3B3131;
 border: 1px solid black;

} .hide-oil-rock .oil-rock, .hide-oil-vein .oil-vein {

 display: none;

}

.salt {

 width: 7px;
 height: 7px;
 background-color: #679dae;
 border: 1px solid black;

} .hide-salt .salt {

 display: none;

}

.sulfur {

 width: 7px;
 height: 7px;
 background-color: yellow;
 border: 1px solid black;

} .hide-sulfur .sulfur {

 display: none;

}

.cactus {

 width: 4px;
 height: 4px;
 background-color: lightgreen;
 border: 1px solid green;

} .hide-cactus .cactus {

 display: none;

}

.mithril {

 width: 7px;
 height: 7px;
 background-color: white;
 border: 1px solid black;

} .hide-mithril .mithril {

 display: none;

}

.lightstone {

 width: 7px;
 height: 7px;
 background-color: #2F30A2;
 border: 1px solid black;

} .hide-lightstone .lightstone {

 display: none;

}

.silica {

 width: 7px;
 height: 7px;
 background-color: pink;
 border: 1px solid black;

} .hide-silica .silica {

 display: none;

}

.black-pearl {

 width: 7px;
 height: 7px;
 background-color: magenta;
 border: 1px solid black;

} .hide-black-pearl .black-pearl {

 display: none;

}

.darkstone {

 width: 7px;
 height: 7px;
 background-color: brown;
 border: 1px solid black;

} .hide-darkstone .darkstone {

 display: none;

}

.iron {

 width: 7px;
 height: 7px;
 background-color: silver;
 border: 1px solid black;

} .hide-iron .iron {

 display: none;

}

.copper {

 width: 7px;
 height: 7px;
 background-color: goldenrod;
 border: 1px solid black;

} .hide-copper .copper {

 display: none;

}

.metal-underwater {

 width: 7px;
 height: 7px;
 background-color: teal;
 border: 1px solid black;

} .hide-metal-underwater .metal-underwater {

 display: none;

}

.rare-flower {

 width: 7px;
 height: 7px;
 background-color: #ADD8E6;
 border: 1px solid black;

} .hide-rare-flower .rare-flower {

 display: none;

}

.rockarrot {

 width: 7px;
 height: 7px;
 background-color: #FFA62F;
 border: 1px solid black;

} .hide-rockarrot .rockarrot {

 display: none;

}

.savoroot {

 width: 7px;
 height: 7px;
 background-color: #C68E17;
 border: 1px solid black;

} .hide-savoroot .savoroot {

 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 {

 width: 7px;
 height: 7px;
 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;

}

.crate {

 width: 15px;
 height: 15px;

} .crate. {

 background-image: url(//ark.gamepedia.com/);
 background-size: 100% 100%;
 border-radius: 0;

} .legend.crate {

 background-image: url(//ark.gamepedia.com/);
 background-size: 100% 100%;
 border-radius: 0;

}

.hide-crate .crate {

 display: none;

}

.test {

 width: 14px;
 height: 14px;
 background-color: #000080;
 border: 1px solid black;

} .hide-test .test {

 display: none;

} </style>