Files
REM-Mod/EXE/remui/navmap.rml
T

453 lines
41 KiB
Plaintext

<rml>
<head>
<title>Nav map</title>
<link type="text/rcss" href="rem.rcss"/>
<style>
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
/* the map box is clear: the nav map draws its own backgrounds under it (DrawUnder), so
the window's colour is laid around it instead of under the whole body */
/* the frame's edge alone over the whole window (hudframes fo); the head and the side bring
their fills with the cut corners, just inside the edge -- no fill over the map. The map
box is 760 dp (rem_ui_navmap.cpp kMapDp): the window only as big as map and side */
body.window { decorator: ninepatch(fo, fo-i); left: 19%; top: 7%; width: 1180dp; height: 880dp; max-width: none; }
.win-head { decorator: ninepatch(fh, fh-i); margin: 2dp 2dp 0 2dp; }
.win-main .content { padding: 0; }
.mapframe { display: flex; flex-direction: column; margin: 0 0 2dp 2dp; border: 18dp #0d1622eb; border-right-width: 0; border-bottom-width: 0; }
.mapfill { flex: 1; min-height: 18dp; background-color: #0d1622eb; }
/* REM nav map: the grid's letters and numbers, large and clear over the chart (a dark shadow keeps them
readable on nebulae and fields) */
#map .gcol, #map .gnum { position: absolute; font-family: "Saira SemiCondensed"; font-size: 20dp; font-weight: bold; letter-spacing: 1dp;
color: #cfe6f8; font-effect: shadow(1dp 1dp #03070d); }
#map .gcol { top: 6dp; width: 28dp; margin-left: -14dp; text-align: center; }
#map .gnum { left: 8dp; height: 24dp; margin-top: -12dp; line-height: 24dp; }
#map .region { position: absolute; width: 200dp; margin-left: -100dp; margin-top: -10dp; text-align: center; font-family: "Saira SemiCondensed"; font-size: 17dp; letter-spacing: 3dp; text-transform: uppercase; color: #dbe6f0b0; }
/* uncharted space has no map art: the whole box dark, never the scene through it */
#map.blank, #map.blank.revealed { background-color: #03070d; }
#map .uncharted-note { position: absolute; left: 0; right: 0; top: 360dp; text-align: center; color: #8197ad; font-size: 14dp; }
#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; }
.sysname { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 24dp; letter-spacing: 2dp; margin-bottom: 8dp; }
.pcard { padding: 12dp; margin-bottom: 10dp; background-color: #5cc8f008; }
.pcard .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
.pcard .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; margin-bottom: 8dp; }
.pcard .btn { margin: 0 6dp 6dp 0; }
.pcard .acts { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.pcard .acts .btn { display: block; }
.objs { padding: 10dp 12dp; margin-bottom: 10dp; border-left: 3dp #f2b13c; background-color: #5cc8f008; }
.obj { white-space: pre-line; font-size: 13dp; line-height: 1.4; padding: 4dp 0; border-bottom: 1dp #ffffff08; }
.info { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; background-color: #5cc8f008; }
.zoom { position: absolute; right: 8dp; bottom: 8dp; display: flex; flex-direction: row; align-items: center; }
.zoom .btn { margin: 0 0 0 4dp; padding: 2dp 10dp; }
.zoom .v { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-right: 4dp; }
/* map items: centred on their point */
.mi { position: absolute; width: 0; height: 0; }
.mi .s { position: absolute; }
/* REM nav map: the symbol scaled about the item's point (its real size, at least the class's least size) */
.mi .sz { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mi .lbl { position: absolute; left: 9dp; top: -8dp; white-space: nowrap; font-size: 11dp; color: #b9cbe0; }
.mi.sel .lbl { color: #f2b13c; }
.planet .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; border-radius: 6dp; background-color: #3d79b8; border: 1dp #8fc2ff; }
.sun .s { left: -8dp; top: -8dp; width: 16dp; height: 16dp; border-radius: 8dp; background-color: #f2c94c; border: 1dp #fff2b0; }
.station .s { left: -5dp; top: -5dp; width: 10dp; height: 10dp; background-color: #5cc8f0; border: 1dp #dbf3ff; }
.gate .s { left: -6dp; top: -6dp; width: 10dp; height: 10dp; border: 2dp #b98cf2; transform: rotate(45deg); }
.hole .s { left: -6dp; top: -6dp; width: 10dp; height: 10dp; border: 2dp #ef6a5b; border-radius: 6dp; }
.ring .s { left: -2dp; top: -2dp; width: 4dp; height: 4dp; border-radius: 2dp; background-color: #2f6d8f; }
.platform .s { left: -3dp; top: -3dp; width: 6dp; height: 6dp; background-color: #ef6a5b; }
.object .s { left: -3dp; top: -3dp; width: 6dp; height: 6dp; border-radius: 3dp; background-color: #8197ad; }
.system .s { left: -7dp; top: -7dp; width: 14dp; height: 14dp; border-radius: 7dp; background-color: #f2c94c; border: 2dp #3d6d96; }
.system .lbl { font-size: 12dp; color: #dbe6f0; }
.player .s { left: -8dp; top: -8dp; width: 0; height: 0; border-left: 8dp #00000000; border-right: 8dp #00000000; border-bottom: 16dp #7cf27c; }
.hits, .marks { margin-bottom: 10dp; max-height: 220dp; overflow-y: auto; background-color: #5cc8f008; }
.marks h3 { margin: 6dp 10dp 2dp 10dp; }
.hit { display: flex; flex-direction: row; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; }
.hit:hover { background-color: #122033; color: #5cc8f0; }
.hit .hn { flex: 1; white-space: nowrap; overflow: hidden; }
.hit .hk { font-size: 12dp; color: #8197ad; }
.bookmark .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; background-color: #f2b13c; border: 2dp #05080d; border-radius: 6dp; }
.bookmark .lbl { color: #f2b13c; }
.bookmark.locked .s { border-color: #f2b13c; background-color: #8a6420; }
.bookmark.sel .s { border-color: #ffffff; }
/* REM: a bookmark's own colour over its dot; the group's shared waypoints */
.mi .bc { position: absolute; left: -4dp; top: -4dp; width: 8dp; height: 8dp; border-radius: 4dp; }
.gwp .s { left: -5dp; top: -5dp; width: 10dp; height: 10dp; background-color: #6fd08c; border: 2dp #05080d; transform: rotate(45deg); }
.gwp .lbl { color: #6fd08c; }
.clanm .s { left: -5dp; top: -5dp; width: 10dp; height: 10dp; border-radius: 5dp; background-color: #5cc8f0; border: 2dp #05080d; }
.clanm .lbl { color: #5cc8f0; }
.hit.fold { padding: 6dp 10dp 2dp 10dp; color: #f2b13c; font-size: 12dp; border-bottom: 0; }
.hit .dot { width: 8dp; height: 8dp; border-radius: 4dp; margin: 5dp 8dp 0 0; }
.hit .hw { font-size: 11dp; color: #8197ad; margin-left: 6dp; white-space: nowrap; }
.mtools { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin: 2dp 10dp 4dp 10dp; }
.mtools .mk { margin: 0 6dp 0 0; padding: 0 6dp; font-size: 11dp; color: #8197ad; border: 1dp #24405c; border-radius: 2dp; }
.mtools .mk:hover, .mtools .mk.on { color: #f2b13c; border-color: #f2b13c; }
.sw { width: 14dp; height: 14dp; border-radius: 7dp; margin: 0 5dp 0 0; border: 1dp #24405c; }
.sw:hover { border-color: #ffffff; }
.hit .mk { margin-left: 6dp; padding: 0 6dp; font-size: 11dp; color: #8197ad; border: 1dp #24405c; border-radius: 2dp; }
.hit .mk:hover { color: #f2b13c; border-color: #f2b13c; }
.hit .mk.del:hover { color: #ef6a5b; border-color: #ef6a5b; }
.waypoint .s { left: -7dp; top: -7dp; width: 14dp; height: 14dp; border: 2dp #f2b13c; border-radius: 2dp; }
.waypoint .lbl, .bestpath .lbl { left: -4dp; top: -7dp; font-family: "IBM Plex Mono"; font-size: 10dp; color: #f2b13c; }
.bestpath .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; border: 2dp #5cc8f0; border-radius: 6dp; }
.bestpath .lbl { color: #5cc8f0; }
.group .s { left: -4dp; top: -4dp; width: 8dp; height: 8dp; border-radius: 4dp; background-color: #7cf27c; }
.mi.sel .s { border-color: #f2b13c; }
.sel .ring2 { position: absolute; left: -12dp; top: -12dp; width: 20dp; height: 20dp; border: 1dp #f2b13c; border-radius: 12dp; }
/* the tools at the click point (as the classic map's ring of tools) */
.pop { position: absolute; width: 150dp; padding: 4dp; decorator: ninepatch(fw, fw-i); }
.pop .pt { font-size: 11dp; color: #f2b13c; padding: 2dp 6dp 4dp 6dp; white-space: nowrap; overflow: hidden; }
.pop .pb { padding: 4dp 6dp; font-size: 12dp; border-radius: 2dp; }
.pop .pb:hover { background-color: #122033; color: #5cc8f0; }
/* lines: from their start, rotated */
.ln { position: absolute; height: 0; transform-origin: 0 0; }
.ln.jump { border-top: 2dp #3d6d96; }
.ln.lane { border-top: 3dp #2f6d8f; }
.ln.route { border-top: 3dp #5cc8f0; }
.ln.waypath { border-top: 3dp #f2b13c; }
.ln.hole { border-top: 2dp #ef6a5b90; }
/* REM nav map (step 5): the sector view - each visited system's chart at its true size (at least 10 dp) */
.sshape { position: absolute; border: 1dp #5cc8f080; background-color: #5cc8f00a; }
.sshape.own { border-color: #7cf27cc0; background-color: #7cf27c10; }
.sshape.goal { border: 2dp #f2b13c; background-color: #f2b13c14; }
.ln.course { border-top: 2dp #f2b13c; }
.ln.border { border-top: 1dp #5cc8f040; }
.sshape.range { border: 1dp #f2b13c70; background-color: transparent; }
#map.sectorview .ln { display: block; }
#map.sectorview .mi .s { opacity: 1; }
/* REM nav map: the sector view as a game's star map - suns with a glow, borders that light up under the mouse,
the picked system ringed */
#map.sectorview .sshape { border-color: #5cc8f030; background-color: #5cc8f006; }
#map.sectorview .sshape.own { border-color: #7cf27c70; }
/* REM nav map: a system is its sun, in that sun's colours (a <sunglow>, rem_ui_navmap SunsOf); the symbol stays,
clear, as what the mouse picks */
#map.sectorview .system .s { left: -12dp; top: -12dp; width: 24dp; height: 24dp; border-radius: 12dp; border-width: 0; background-color: #00000000; }
#map.sectorview .system sunglow { left: -30dp; top: -30dp; width: 60dp; height: 60dp; transition: transform 0.25s cubic-out; }
#map.sectorview .system.hot sunglow { transform: scale(1.45); }
#map.sectorview .system.unvisited sunglow { opacity: 0.55; }
#map.sectorview .system .lbl { left: 14dp; top: -10dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 1dp;
color: #cfe0f0; font-effect: shadow(1dp 1dp #03070d); transition: color 0.2s linear-in-out; }
#map.sectorview .system.own .lbl { color: #9df29d; }
#map.sectorview .system.hot .lbl { color: #ffffff; }
#map.sectorview .system.sel .lbl { color: #f2b13c; }
#map.sectorview .sel .ring2 { left: -20dp; top: -20dp; width: 36dp; height: 36dp; border-radius: 20dp; border: 2dp #f2b13c00;
border-top-color: #f2b13c; border-bottom-color: #f2b13c; animation: 3s infinite linear spin; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { from { opacity: 0.45; } to { opacity: 1; } }
.ln.border { border-top: 1dp #5cc8f066; }
.ln.bhot { border-top: 2dp #8fdcff; animation: 0.9s infinite alternate pulse; }
.ln.bsel { border-top: 2dp #f2b13c; }
/* REM nav map: the side - the view switch, the tools, the picked system's card with its jump */
.seg { display: flex; flex-direction: row; margin-bottom: 8dp; border: 1dp #24405c; }
.seg .sg { flex: 1; text-align: center; padding: 7dp 0; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; letter-spacing: 2dp;
text-transform: uppercase; color: #8fb8d8; background-color: #0d1622; transition: background-color 0.15s linear-in-out; }
.seg .sg:hover { background-color: #122a40; color: #dbf3ff; }
.seg .sg.on { background-color: #f2b13c; color: #10161d; }
.tools { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 10dp; }
.tools .tl { margin: 0 6dp 6dp 0; padding: 3dp 10dp; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8fb8d8; border: 1dp #24405c; }
.tools .tl:hover { color: #dbf3ff; border-color: #5cc8f0; }
.tools .tl.on { color: #f2b13c; border-color: #f2b13c; }
.tools .tl.warn:hover { color: #ef6a5b; border-color: #ef6a5b; }
.scard { padding: 14dp; margin-bottom: 10dp; background-color: #5cc8f00c; border-left: 3dp #f2b13c; }
.scard .sh { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
.scard .sun { width: 34dp; height: 34dp; border-radius: 17dp; margin-right: 12dp;
decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #fff3b8 18%, #f2c94cd0 36%, #f2a93c40 64%, #f2a93c00 100%); }
.scard .n { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 22dp; letter-spacing: 1dp; }
.scard .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; }
.scard .row { display: flex; flex-direction: row; font-size: 13dp; color: #8197ad; margin-bottom: 10dp; }
.scard .row .v { flex: 1; text-align: right; font-family: "IBM Plex Mono"; color: #dbe6f0; }
.scard .why { font-size: 12dp; color: #ef9a5b; margin: 6dp 0 2dp 0; }
.scard .acts { display: flex; flex-direction: row; margin-top: 8dp; }
.scard .acts .btn { display: block; margin: 0 6dp 0 0; }
.scard.hintc { border-left-color: #24405c; font-size: 13dp; color: #8197ad; }
.jumpbtn { padding: 9dp 0; text-align: center; font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 17dp; letter-spacing: 3dp;
color: #10161d; background-color: #f2b13c; transition: background-color 0.15s linear-in-out; }
.jumpbtn:hover { background-color: #ffd27a; }
.jumpbtn.off, .jumpbtn.off:hover { color: #6b7d90; background-color: #1a2533; }
.wcard { padding: 12dp 14dp; margin-bottom: 10dp; background-color: #5cc8f00c; border-left: 3dp #8197ad; }
.wcard.reach { border-left-color: #f2b13c; }
.wcard .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; }
.wcard .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; margin: 2dp 0; }
.wcard .v { font-size: 13dp; color: #9fb4c8; margin-bottom: 8dp; }
.wcard.reach .v { color: #f2b13c; }
/* the original's look (player's wish): lanes, jump links, the route and every marker are drawn by
the original map under the box (NeuroNetNavMap::RemDrawBackground); ours stay as names, the
selection ring and the bookmarks (REM's own) */
.ln { display: none; }
.mi .s { opacity: 0; }
.bookmark .s { opacity: 1; }
/* LARGE SKIES: a system view is drawn by this window alone (#map.own, set by the window): a dark
chart with a grid that follows the zoom, the lanes as lines, and markers of a fixed size on
the screen, shaded to look like bodies -- lit from the upper left */
/* the box is cleared and the real objects are drawn under it (rem_navmap_models): see-through
once the window stands */
#map.own { background-color: #03070d; }
#map.own.revealed { background-color: #03070d00; }
#map.own .real .s { opacity: 0; }
/* REM nav map (step 4): the chart's shape and edge are drawn under the box (rem_navmap_models DrawChartMask:
a square for Sirius, a circle for Sol); a square chart has its A..H / 1..8 again (a round one has none) */
#map.own .ln { display: block; }
#map.own .mi .s { opacity: 1; }
#map.own .ln.lane { border-top: 2dp #2a8fc2c0; }
/* REM nav map: the lanes move as on FL's map - pulses of light run along them (rem_ui_navmap FMapLine) */
@keyframes lanepulse {
0% { left: 0%; opacity: 0; }
12% { left: 12%; opacity: 1; }
88% { left: 88%; opacity: 1; }
100% { left: 100%; opacity: 0; }
}
.ln .lp { position: absolute; left: 0%; top: -2.5dp; width: 12dp; height: 3dp; margin-left: -6dp; border-radius: 1.5dp;
background-color: #c8eeff; opacity: 0; }
.gl { position: absolute; }
.gl.v { width: 0; }
.gl.h { height: 0; }
.gl.v.fine { border-left: 1dp #5cc8f018; }
.gl.h.fine { border-top: 1dp #5cc8f018; }
/* REM nav map: the 8 x 8 grid over the darkened backdrop - there, but under the lanes and objects */
.gl.v.sect { border-left: 2dp #5cc8f050; }
.gl.h.sect { border-top: 2dp #5cc8f050; }
#map.own .planet .s { left: -9dp; top: -9dp; width: 18dp; height: 18dp; border-radius: 9dp; border-width: 0; background-color: #3d79b8;
decorator: radial-gradient(circle at 34% 30%, #e4f2ff 0%, #6fb0ea 22%, #2f67a6 55%, #102744 85%, #050c16 100%); }
/* the sun: its glow is a <sunglow> (rem_ui_navmap ElementSunGlow - the REM UI renderer draws no gradient
decorators); the symbol itself stays, clear, as what the mouse picks and the selection ring's place */
sunglow { display: block; position: absolute; left: -40dp; top: -40dp; width: 80dp; height: 80dp; }
#map.own .sun .s { left: -13dp; top: -13dp; width: 26dp; height: 26dp; border-radius: 13dp; border-width: 0; background-color: #00000000; }
#map.own .station .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; background-color: #3f9fd0;
border-width: 2dp; border-top-color: #e6f7ff; border-left-color: #b9e6fb; border-right-color: #1f5f86; border-bottom-color: #0e3550;
decorator: linear-gradient(135deg, #8fd6f5 0%, #3f9fd0 50%, #1d6a94 100%); }
#map.own .gate .s { border-top-color: #e3ceff; border-left-color: #c9a8f5; border-right-color: #6a45a0; border-bottom-color: #432a6b; }
#map.own .hole .s { border-top-color: #ffc1b8; border-left-color: #f58e80; border-right-color: #9b3528; border-bottom-color: #5f1c14; }
#map.own .platform .s { left: -4dp; top: -4dp; width: 8dp; height: 8dp; background-color: #d9584a;
border-width: 1dp; border-top-color: #ffc9c2; border-left-color: #f59a8f; border-right-color: #8f2c21; border-bottom-color: #591710; }
#map.own .object .s { left: -4dp; top: -4dp; width: 8dp; height: 8dp; border-radius: 4dp; background-color: #8197ad;
decorator: radial-gradient(circle at 34% 30%, #f1f6fb 0%, #9db1c6 40%, #47586b 100%); }
#map.own .ring .s { left: -3dp; top: -3dp; width: 6dp; height: 6dp; border-radius: 3dp; background-color: #2a8fc2;
decorator: radial-gradient(circle at 34% 30%, #d6f1ff 0%, #2a8fc2 55%, #0f3f5c 100%); }
/* REM nav map: the own ship is drawn as its model (rem_navmap_models); the window rings it, a notch to its heading */
#map.own .player .s { left: -17dp; top: -17dp; width: 30dp; height: 30dp; border-radius: 17dp; border: 2dp #7cf27c55;
border-top-color: #7cf27c; border-bottom-color: #7cf27c55; }
#map.own .mi .lbl { color: #c9d9ea; font-size: 12dp; }
#map.own .planet .lbl, #map.own .sun .lbl { left: 14dp; top: -9dp; font-size: 13dp; color: #e6f0fa; }
/* REM nav map (step 6): the galaxy view - a dark sky (the Orion arm's veil), the nearest stars as scenery, each
sector as its main star (colour by spectral type; Sirius with its companion on its orbit), a ring of its
systems (the discovered ones lit), the distance between the sectors; the Milky Way small in the corner */
#map.galaxyview, #map.galaxyview.revealed, #map.galaxyview.own.revealed, #map.plainsec, #map.plainsec.revealed, #map.plainsec.own.revealed { background-color: #02040a;
decorator: radial-gradient(circle at 70% 85%, #1a2c5238 0%, #0b142a20 40%, #02040a00 75%); }
#map.galaxyview .ln, #map.galaxyview .mi .s, #map.galaxyview.own .mi .s { display: block; opacity: 1; }
#map .mi .b2, #map .mi .ring3 { display: none; }
#map .gstar .s { left: -2dp; top: -2dp; width: 4dp; height: 4dp; border-radius: 2dp; background-color: #cfe0f0; }
#map .gstar .lbl { left: 7dp; top: -7dp; font-size: 11dp; color: #6f8296; }
#map .gsector .s { left: -12dp; top: -12dp; width: 24dp; height: 24dp; border-radius: 12dp; border-width: 0; background-color: #00000000;
decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #fff6c8 16%, #f2c94cd0 32%, #f2a93c50 58%, #f2a93c00 100%); }
#map .gsector.sA .s, #map .gsector.sB .s { decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #e8f4ff 18%, #9cc8ffd8 34%, #5c8cf050 60%, #5c8cf000 100%); }
#map .gsector.sM .s, #map .gsector.sK .s { decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #ffd9b0 16%, #f28c4cd0 32%, #e0603c50 58%, #e0603c00 100%); }
#map .gsector .lbl { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 18dp; letter-spacing: 2dp; color: #e6f0fa;
font-effect: shadow(1dp 1dp #03070d); }
#map .gsector.here .lbl { color: #9df29d; }
#map .gsector.binary .b2 { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; animation: 14s infinite linear spin; }
#map .gsector .b2 .bb { position: absolute; left: 20dp; top: -3dp; width: 6dp; height: 6dp; border-radius: 3dp; background-color: #ffffff;
decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #dbeaff 50%, #9cc8ff00 100%); }
#map .gsector.here .ring3 { display: block; position: absolute; left: -46dp; top: -46dp; width: 88dp; height: 88dp; border-radius: 46dp;
border: 2dp #7cf27c; animation: 1.6s infinite alternate pulse; }
#map .gdot .s { left: -2dp; top: -2dp; width: 4dp; height: 4dp; border-radius: 2dp; background-color: #3d5a78; }
#map .gdot.on .s { background-color: #8fdcff; }
#map .gdist .lbl { width: 60dp; text-align: center; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8fb8d8; }
#map .ln.gline { border-top: 1dp #8fb8d870; }
.ginset { position: absolute; left: 10dp; bottom: 10dp; width: 180dp; height: 180dp; border: 1dp #24405c; background-color: #02040ae0; }
.ginset img { position: absolute; left: 0; top: 0; width: 180dp; height: 180dp; }
.ginset .ghere { position: absolute; left: 83dp; top: 125dp; width: 10dp; height: 10dp; border-radius: 6dp; border: 2dp #7cf27c;
animation: 1.2s infinite alternate pulse; }
.ginset .gcap { position: absolute; left: 0; right: 0; bottom: 4dp; text-align: center; font-size: 11dp; letter-spacing: 1dp; color: #9df29d;
text-transform: uppercase; }
.ginset .gname { position: absolute; left: 0; right: 0; top: 4dp; text-align: center; font-size: 11dp; letter-spacing: 2dp; color: #8197ad;
text-transform: uppercase; }
.gcard { padding: 12dp 14dp; margin-bottom: 8dp; background-color: #5cc8f00c; border-left: 3dp #8fb8d8; }
.gcard.own { border-left-color: #7cf27c; }
.gcard .n { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 19dp; letter-spacing: 1dp; }
.gcard .k { font-size: 12dp; color: #8197ad; margin: 2dp 0 8dp 0; }
/* the sector view has no models: the ship stays the green arrow there */
#map.sectorview.own .player .s { left: -8dp; top: -8dp; width: 0; height: 0; border-radius: 0; border-width: 0;
border-left: 8dp #00000000; border-right: 8dp #00000000; border-bottom: 16dp #7cf27c; }
</style>
</head>
<body class="window" data-model="navmap">
<div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Map.3db"/>
<span class="title">{{ briefing ? 'MISSION BRIEFING' : 'NAVIGATION' }}</span><span class="sl">\\\</span>
<span class="spacer"></span>
<span class="chip">Waypoints <span class="v">{{ waypoints }}</span></span>
<span class="close" data-if="!briefing" data-action="tool" data-arg="close">&#215;</span>
</div>
<div class="win-main">
<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>
<div class="gl v sect" data-for="g : grid_sv" data-style-left="g.left" data-style-top="g.top" data-style-height="g.name"></div>
<div class="gl h sect" data-for="g : grid_sh" data-style-top="g.top" data-style-left="g.left" data-style-width="g.name"></div>
<div class="gcol" data-for="g : grid_cols" data-style-left="g.left">{{ g.name }}</div>
<div class="gnum" data-for="g : grid_rows" data-style-top="g.top">{{ g.name }}</div>
<div class="uncharted-note" data-if="universe && uncharted && items.size == 0">No uncharted system visited yet.</div>
<div class="sshape" data-for="h : sector_shapes" data-class-own="h.own" data-class-goal="h.goal" data-class-range="h.range" data-style-left="h.left" data-style-top="h.top" data-style-width="h.size" data-style-height="h.size" data-style-border-radius="h.radius"></div>
<div class="ln" data-for="l : lines" data-class-jump="l.cls == 'jump'" data-class-lane="l.cls == 'lane'" data-class-route="l.cls == 'route'" data-class-waypath="l.cls == 'waypath'" data-class-hole="l.cls == 'hole'" data-class-course="l.cls == 'course'" data-class-border="l.cls == 'border'" data-class-bhot="l.cls == 'bhot'" data-class-bsel="l.cls == 'bsel'" data-style-left="l.left" data-style-top="l.top" data-style-width="l.width" data-style-transform="l.transform"><div class="lp" data-if="l.pulses > 0" data-style-animation="l.anim0"></div><div class="lp" data-if="l.pulses > 1" data-style-animation="l.anim1"></div><div class="lp" data-if="l.pulses > 2" data-style-animation="l.anim2"></div></div>
<div class="mi" data-for="i : items" data-attr-class="'mi ' + i.cls + (i.selected ? ' sel' : '') + (i.real ? ' real' : '')" data-style-left="i.left" data-style-top="i.top">
<div class="ring2" data-if="i.selected"></div>
<div class="ring3"></div><div class="b2"><div class="bb"></div></div>
<div class="sz" data-style-transform="i.scale"><sunglow data-if="i.sun_inner != ''" data-attr-inner="i.sun_inner" data-attr-outer="i.sun_outer"></sunglow><div class="s" data-style-transform="i.rot"></div></div>
<div class="bc" data-if="i.color != ''" data-style-background-color="i.color"></div>
<div class="lbl" data-if="i.label != ''" data-style-left="i.lleft" data-style-top="i.ltop">{{ i.label }}</div>
</div>
<div class="pop" data-if="popup" data-style-left="pop_left" data-style-top="pop_top">
<div class="pt">{{ pick_name }}</div>
<div class="pb" data-if="can_open" data-action="tool" data-arg="open">Open system</div>
<div class="pb" data-action="tool" data-arg="waypoint">Set waypoint</div>
<div class="pb" data-action="tool" data-arg="route">Plot route</div>
<div class="pb" data-if="can_target" data-action="tool" data-arg="target">Target</div>
<div class="pb" data-if="can_info" data-action="tool" data-arg="info">Info</div>
<div class="pb" data-if="can_clear" data-action="tool" data-arg="clearwp">Remove waypoint</div>
<div class="pb" data-if="can_mark" data-action="bookmark">Set bookmark</div>
<div class="pb" data-if="pick_mark" data-action="mark_lock">{{ mark_locked ? 'Unlock bookmark' : 'Lock bookmark' }}</div>
<div class="pb" data-if="pick_mark &amp;&amp; !mark_locked" data-action="mark_del">Delete bookmark</div>
</div>
<div class="pop" data-if="sec_pop &amp;&amp; sector" data-style-left="sec_pop_left" data-style-top="sec_pop_top">
<div class="pt">{{ sec_pick_name }}</div>
<div class="pt" style="color: #9fb4c8;" data-if="sec_pick_info != ''">{{ sec_pick_info }}</div>
<div class="pb" data-action="sec_open">Open system</div>
<div class="pb" data-if="sec_can_jump" data-action="sec_jump">Jump Drive here</div>
</div>
<div class="ginset" data-if="galaxy"><img src="img/galaxy.png"/><div class="gname">Milky Way</div><div class="ghere"></div><div class="gcap">You are here</div></div>
<div class="zoom">
<span class="v">{{ zoom }}</span>
<div class="btn" data-action="zoomall">All</div>
<div class="btn" data-action="zoomship">Ship</div>
<div class="btn" data-action="zoomout">-</div>
<div class="btn" data-action="zoomin">+</div>
</div>
</div><div class="mapfill"></div></div>
<div class="side">
<div class="sysname">{{ system }}</div>
<div class="seg">
<div class="sg" data-class-on="galaxy" data-action="galaxy">Galaxy</div>
<div class="sg" data-class-on="sector" data-action="sector">Sector</div>
<div class="sg" data-class-on="!universe &amp;&amp; !sector &amp;&amp; !galaxy" data-action="tool" data-arg="myship">System</div>
</div>
<div class="tools">
<div class="tl" data-class-on="labels" data-action="labels">Names</div>
<div class="tl warn" data-if="waypoints != '0'" data-action="tool" data-arg="clearall">Clear waypoints</div>
<div class="tl warn" data-if="can_abort" data-action="abort">Abort mission</div>
</div>
<div class="scard" data-if="sec_card">
<div class="sh"><div class="sun"></div><div><div class="n">{{ sec_pick_name }}</div><div class="k">{{ sec_pick_info }}</div></div></div>
<div class="row" data-if="sec_pick_dist != ''"><span>Distance</span><span class="v">{{ sec_pick_dist }}</span></div>
<div class="jumpbtn" data-class-off="!sec_can_jump" data-action="sec_jump">Jump drive</div>
<div class="why" data-if="!sec_can_jump">{{ sec_jump_why }}</div>
<div class="acts"><div class="btn" data-action="sec_open">Open system</div></div>
</div>
<div data-if="galaxy">
<div class="gcard" data-for="g : gal_cards" data-class-own="g.own">
<div class="n">{{ g.name }}</div>
<div class="k">{{ g.info }}</div>
<div class="btn" data-action="gal_open" data-attr-data-arg="g.key">Open sector</div>
</div>
<div class="scard hintc">Sectors show once you have been to one of their systems. Click a star or wheel in to open its sector; wheel out of a sector to come back here.</div>
</div>
<div class="scard hintc" data-if="sector &amp;&amp; !sec_card">Click a system to pick it - its jump is here and in the HUD (the jump drive key). Wheel zooms, drag moves, double click opens a system.</div>
<div class="wcard" data-if="wp_else" data-class-reach="wp_else_reach">
<div class="k">Waypoint in another system</div>
<div class="n">{{ wp_else_text }}</div>
<div class="v">{{ wp_else_dist }} - {{ wp_else_reach ? 'in jump range' : 'out of jump range' }}</div>
<div class="jumpbtn" data-if="wp_else_reach" data-action="wpjump">Jump to waypoint</div>
</div>
<div class="pcard" data-if="has_pick &amp;&amp; !sector &amp;&amp; !galaxy">
<div class="n">{{ pick_name }}</div>
<div class="k">{{ pick_kind }}</div>
<div class="acts">
<div class="btn" data-if="can_open" data-action="tool" data-arg="open">Open system</div>
<div class="btn primary" data-action="tool" data-arg="waypoint">Set waypoint</div>
<div class="btn" data-action="tool" data-arg="route">Plot route</div>
<div class="btn" data-if="can_target" data-action="tool" data-arg="target">Target</div>
<div class="btn" data-if="can_info" data-action="tool" data-arg="info">Info</div>
<div class="btn" data-if="can_clear" data-action="tool" data-arg="clearwp">Remove waypoint</div>
<div class="btn" data-if="can_mark" data-action="bookmark">Bookmark</div>
</div>
</div>
<input class="text" type="text" data-value="search" maxlength="40" style="margin-bottom: 6dp;"/>
<div class="hits" data-if="search != ''">
<div class="hint" style="padding: 6dp;" data-if="results.size == 0">Nothing on this map by that name.</div>
<div class="hit" data-for="r : results" data-action="result" data-attr-data-arg="r.key"><span class="hn">{{ r.name }}</span><span class="hk">{{ r.kind }}</span></div>
</div>
<div class="marks" data-if="universe &amp;&amp; uncharted_list.size &gt; 0 &amp;&amp; search == ''">
<h3>Known uncharted systems</h3>
<div class="hit" data-for="u : uncharted_list"><span class="hn">{{ u.name }}</span><span class="hk">{{ u.kind }}</span></div>
</div>
<div class="marks" data-if="search == ''">
<h3>Bookmarks</h3>
<div class="mtools">
<span class="mk" data-class-on="marks_all" data-action="marks_all">All systems<span class="tip">Every bookmark, of every system - a click goes there, a double click sets a waypoint (the route).</span></span>
<span class="mk" data-action="marks_export">Export<span class="tip">Copies the bookmarks as text (REM-BOOKMARK lines) - to paste into Discord or a file.</span></span>
<span class="mk" data-action="marks_import">Import<span class="tip">Adds the REM-BOOKMARK lines of the clipboard (someone's export).</span></span>
</div>
<div class="hint" style="padding: 2dp 10dp;" data-if="marks_note != ''">{{ marks_note }}</div>
<div class="hint" style="padding: 2dp 10dp;" data-if="bookmarks.size == 0">No bookmarks here. Pick a place and press Bookmark.</div>
<div data-for="b : bookmarks">
<div class="hit fold" data-if="b.kind == 'folder'">{{ b.name }}</div>
<div class="hit" data-if="b.kind != 'folder'" data-action="gomark" data-dbl="markroute" data-ctx="mark" data-attr-data-arg="b.key"><span class="dot" data-style-background-color="b.color"></span><span class="hn">{{ b.name }}</span><span class="hw" data-if="b.where != ''">{{ b.where }}</span><span class="mk" data-action="mark_lock" data-attr-data-arg="b.key">{{ b.kind == 'locked' ? 'Unlock' : 'Lock' }}<span class="tip">{{ b.kind == 'locked' ? 'Locked: it can be neither moved nor deleted. Click to unlock.' : 'Lock it in place: no moving, no deleting.' }}</span></span><span class="mk del" data-if="b.kind != 'locked'" data-action="mark_del" data-attr-data-arg="b.key">&#215;</span><span class="tip">Click: go there. Double click: a waypoint there (the route). Right click: more.</span></div>
</div>
<div data-if="pick_mark" style="margin: 6dp 10dp;">
<div style="display: flex; flex-direction: row; align-items: center;">
<span class="hint" style="margin-right: 6dp;">Folder</span>
<input class="text" type="text" data-value="mark_folder" maxlength="32" style="flex: 1; margin-right: 6dp;"/>
<div class="btn" style="margin: 0; padding: 1dp 8dp;" data-action="mark_folder_set">Set</div>
</div>
<div style="display: flex; flex-direction: row; align-items: center; margin-top: 6dp;">
<span class="hint" style="margin-right: 6dp;">Colour</span>
<span class="sw" style="background-color: #f2b13c;" data-action="mark_color" data-arg=""></span>
<span class="sw" style="background-color: #5cc8f0;" data-action="mark_color" data-arg="#5cc8f0"></span>
<span class="sw" style="background-color: #6fd08c;" data-action="mark_color" data-arg="#6fd08c"></span>
<span class="sw" style="background-color: #ef6a5b;" data-action="mark_color" data-arg="#ef6a5b"></span>
<span class="sw" style="background-color: #b48cf2;" data-action="mark_color" data-arg="#b48cf2"></span>
<span class="sw" style="background-color: #f2e85c;" data-action="mark_color" data-arg="#f2e85c"></span>
<span class="sw" style="background-color: #ffffff;" data-action="mark_color" data-arg="#ffffff"></span>
</div>
</div>
</div>
<div class="marks" data-if="search == ''">
<h3>Group route</h3>
<div class="mtools"><span class="mk" data-class-on="wp_sharing" data-action="wp_share">{{ wp_sharing ? 'Stop sharing' : 'Share my waypoints' }}<span class="tip">Your group sees your waypoints on its map (green diamonds) and can follow them.</span></span></div>
<div class="hint" style="padding: 2dp 10dp;">{{ wp_note }}</div>
<div class="hit" data-for="g : group_wps"><span class="hn">{{ g.name }}</span><span class="hw">{{ g.where }}</span><span class="mk" data-action="wp_follow" data-attr-data-arg="g.name">{{ g.kind == 'following' ? 'Stop following' : 'Follow' }}<span class="tip">Following: that pilot's waypoints become yours (and change with theirs) - the HUD shows them.</span></span></div>
</div>
<div class="pcard" data-if="!has_pick &amp;&amp; !sector &amp;&amp; !galaxy"><div class="k">Click the map to pick a place. Wheel zooms, drag moves, double click opens a system.</div></div>
<div class="objs" data-if="objectives.size &gt; 0">
<div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 4dp;">
<h3 style="flex: 1;">Route</h3>
<div class="btn" style="margin: 0 0 0 4dp; padding: 1dp 8dp;" data-action="objup">&#8593;</div>
<div class="btn" style="margin: 0 0 0 4dp; padding: 1dp 8dp;" data-action="objdown">&#8595;</div>
</div>
<div class="obj" data-for="o : objectives">{{ o }}</div>
</div>
<div class="info" data-if="show_info">{{ infocard }}</div>
<div class="tbar" data-if="show_info" style="margin-top: 8dp;">
<div class="btn" data-action="tool" data-arg="closeinfo">Close info</div>
</div>
<div style="flex: 1;" data-if="!show_info"></div>
<div class="btn primary" data-if="briefing" style="text-align: center;" data-action="tool" data-arg="continue">Continue</div>
</div>
</div>
</div>
</div>
</body>
</rml>