REM-Client 10ceb4ab: smooth Sirius map zoom with a sharp grid and starfield

EXE/remui/navmap.rml

@@ -27,6 +27,8 @@
         #map { position: relative; width: 760dp; height: 760dp; overflow: hidden; border: 1dp #24405c; cursor: pointer; background-color: #03070d; transition: background-color 0.3s cubic-out; }
         /* the map art (drawn under the window) shows once the window stands: it fades in inside the box */
         #map.revealed { background-color: #03070d00; }
+        /* REM: pixel-independent sector background, below all markers and non-interactive. */
+        #sector-detail { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
         .side { flex: 1; margin: 0 2dp 2dp 0; padding: 18dp; decorator: ninepatch(fbr, fbr-i); display: flex; flex-direction: column; min-width: 0; }
         .tbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10dp; }
         .tbar .btn { display: block; margin: 0 6dp 6dp 0; }
@@ -289,6 +291,7 @@
         <div class="content">
             <div class="split">
                 <div class="mapframe"><div id="map" data-class-blank="universe &amp;&amp; uncharted" data-class-sectorview="sector" data-class-galaxyview="galaxy">
+                    <sectordetail id="sector-detail"></sectordetail>
                     <div class="region" data-for="r : regions" data-style-left="r.left" data-style-top="r.top">{{ r.name }}</div>
                     <div class="gl v fine" data-for="g : grid_fv" data-style-left="g.left" data-style-top="g.top" data-style-height="g.name"></div>
                     <div class="gl h fine" data-for="g : grid_fh" data-style-top="g.top" data-style-left="g.left" data-style-width="g.name"></div>