Got it to work and look okay. Only for map-editor

1 files changed, 42 insertions, 19 deletions

diff --git a/src/map-editor/www/style.css b/src/map-editor/www/style.css
index b286a10..8e758fe 100644
--- a/src/map-editor/www/style.css
+++ b/src/map-editor/www/style.css
@@ -334,7 +334,8 @@
    background-color: #917C6F;
 }
 
-.map-tiled
+.map-tiled,
+.map-tiled *
 {
    height: 32px;
    width: 32px;
@@ -343,29 +344,51 @@
    /* max-width: 32px; */
 }
 
-.map-tile-variant-0  {background-position: 0    0;}
-.map-tile-variant-1  {background-position: 100% 0;}
-.map-tile-variant-2  {background-position: 200% 0;}
-.map-tile-variant-3  {background-position: 300% 0;}
+.map-tile-variant-0, .map-tile-variant-0 *  {background-position: 0    0;}
+.map-tile-variant-1, .map-tile-variant-1 *  {background-position: 100% 0;}
+.map-tile-variant-2, .map-tile-variant-2 *  {background-position: 200% 0;}
+.map-tile-variant-3, .map-tile-variant-3 *  {background-position: 300% 0;}
 
-.map-tile-variant-4  {background-position: 0    100%;}
-.map-tile-variant-5  {background-position: 100% 100%;}
-.map-tile-variant-6  {background-position: 200% 100%;}
-.map-tile-variant-7  {background-position: 300% 100%;}
+.map-tile-variant-4, .map-tile-variant-4 *  {background-position: 0    100%;}
+.map-tile-variant-5, .map-tile-variant-5 *  {background-position: 100% 100%;}
+.map-tile-variant-6, .map-tile-variant-6 *  {background-position: 200% 100%;}
+.map-tile-variant-7, .map-tile-variant-7 *  {background-position: 300% 100%;}
 
-.map-tile-variant-8  {background-position: 0    200%;}
-.map-tile-variant-9  {background-position: 100% 200%;}
-.map-tile-variant-10 {background-position: 200% 200%;}
-.map-tile-variant-11 {background-position: 300% 200%;}
+.map-tile-variant-8, .map-tile-variant-8 *  {background-position: 0    200%;}
+.map-tile-variant-9, .map-tile-variant-9 *  {background-position: 100% 200%;}
+.map-tile-variant-10, .map-tile-variant-10 * {background-position: 200% 200%;}
+.map-tile-variant-11, .map-tile-variant-11 * {background-position: 300% 200%;}
 
-.map-tile-variant-12 {background-position: 0    300%;}
-.map-tile-variant-13 {background-position: 100% 300%;}
-.map-tile-variant-14 {background-position: 200% 300%;}
-.map-tile-variant-15 {background-position: 300% 300%;}
+.map-tile-variant-12, .map-tile-variant-12 * {background-position: 0    300%;}
+.map-tile-variant-13, .map-tile-variant-13 * {background-position: 100% 300%;}
+.map-tile-variant-14, .map-tile-variant-14 * {background-position: 200% 300%;}
+.map-tile-variant-15, .map-tile-variant-15 * {background-position: 300% 300%;}
 
-.map-tile-icon       {z-index: 0; position: absolute; background-size: 400%;}
+.map-tile-icon, .map-tile-icon * {
+   z-index: 0;
+   position: absolute;
+   background-size: 400%;
+}
+
+.map-tile-icon-bg {
+   z-index: 0;
+}
+
+.map-tile-icon-f-0 { z-index: 1; }
+.map-tile-icon-f-1 { z-index: 2; }
+.map-tile-icon-f-2 { z-index: 3; }
+.map-tile-icon-f-3 { z-index: 4; }
+.map-tile-icon-f-4 { z-index: 5; }
+.map-tile-icon-f-5 { z-index: 6; }
+.map-tile-icon-f-6 { z-index: 7; }
+.map-tile-icon-f-7 { z-index: 8; }
+
+.map-tile-icon-dt {
+   z-index: 9;
+}
 
-.map-tile {background-size: 400%;}
+.map-tile, .map-tile * {background-size: 400%;}
+.map-tile * {position: absolute;}
 
 .map-tabmenu-tiles-tab
 {