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

552 lines
51 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; min-height: 0; }
/* REM: fixed navigation above a scrollable task panel; secondary tools stay compact. */
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 5dp; }
.crumbs { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 8dp; font-size: 12dp; color: #8197ad; }
.crumb { color: #5cc8f0; padding: 2dp 3dp; cursor: pointer; }
.crumb:hover { color: #f2b13c; }
.crumb.current { color: #dbe6f0; }
.search-label { font-size: 12dp; color: #8197ad; margin: 6dp 0 4dp; }
.section-toggle { display: flex; flex-direction: row; align-items: center; padding: 9dp 10dp; background-color: #122033; border-bottom: 1dp #24405c; cursor: pointer; }
.section-toggle:hover { color: #5cc8f0; }
.section-toggle .title { flex: 1; font-family: "Saira SemiCondensed"; font-weight: bold; letter-spacing: 1dp; }
.section-toggle .count { color: #8197ad; margin-right: 8dp; }
.filter-panel { padding: 8dp; background-color: #0d1622; margin-bottom: 8dp; }
.filter-row { display: flex; flex-direction: row; flex-wrap: wrap; }
.filter-row .tl { margin: 3dp; padding: 4dp 7dp; font-size: 12dp; }
.legend { border-top: 1dp #24405c; margin-top: 8dp; padding-top: 8dp; color: #8197ad; font-size: 12dp; line-height: 1.6; }
.legend .selected { color: #f2b13c; }
.legend .ship { color: #5cc8f0; }
.legend .group { color: #6fd08c; }
.legend .gate { color: #b98cf2; }
.legend .hole { color: #ef6a5b; }
.pcard .size { font-family: "IBM Plex Mono"; color: #8197ad; font-size: 11dp; margin-bottom: 8dp; }
.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; }
/* REM: numbered route markers stay readable over real planet/station models. */
.waypoint .s { left: -12dp; top: -12dp; width: 20dp; height: 20dp; border: 2dp #f2b13c; border-radius: 4dp; background-color: #0d1622; }
.waypoint .lbl, .bestpath .lbl { width: 28dp; text-align: center; font-family: "IBM Plex Mono"; font-size: 11dp; font-weight: bold; color: #f2b13c; }
.bestpath .s { left: -10dp; top: -10dp; width: 16dp; height: 16dp; border: 2dp #5cc8f0; border-radius: 10dp; background-color: #0d1622; }
.bestpath .lbl { color: #5cc8f0; }
.mi.route-next .s { border-color: #fff0c2; background-color: #493718; }
.mi.route-end .s { border-width: 3dp; margin: -1dp; }
.route-tag { position: absolute; left: 17dp; top: -9dp; padding: 2dp 5dp; background-color: #0d1622; color: #f2b13c; font-size: 10dp; white-space: nowrap; pointer-events: none; }
.route-card { padding: 10dp 12dp; margin-bottom: 10dp; border-left: 3dp #f2b13c; background-color: #1f2935; }
.route-card .name { color: #fff0c2; font-weight: bold; }
.route-card .detail { color: #b9cbe0; font-size: 12dp; margin: 5dp 0 8dp; }
.route-card .btn { display: block; margin: 0; text-align: center; }
.route-edge { position: absolute; width: 28dp; height: 28dp; margin: -14dp 0 0 -14dp; border: 1dp #f2b13c; border-radius: 14dp; background-color: #0d1622; cursor: pointer; }
.route-edge .arrow { position: absolute; left: 9dp; top: 8dp; width: 0; height: 0; border-left: 10dp #fff0c2; border-top: 6dp transparent; border-bottom: 6dp transparent; transform-origin: 5dp 6dp; }
.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: 2dp #dba64c; }
.ln.wayactive { border-top: 3dp #ffd47a; }
.ln.routeactive { border-top: 3dp #b7eaff; }
.ln.route .ra, .ln.routeactive .ra, .ln.waypath .ra, .ln.wayactive .ra { position: absolute; left: 50%; top: -6dp; width: 0; height: 0; border-left: 7dp #cfe6f8; border-top: 4dp transparent; border-bottom: 4dp transparent; }
.ln.waypath .ra, .ln.wayactive .ra { border-left-color: #ffd47a; }
.ln.waypath .lp, .ln.wayactive .lp { background-color: #fff0c2; }
.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; }
/* REM: outrank the generic .own .mi .s below, including the planet's opaque icon. */
#map.own .mi.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: atmospheric image beneath sharp, animated geometry stars. No unsupported gradient decorators. */
#map.galaxyview, #map.galaxyview.revealed, #map.galaxyview.own.revealed,
#map.plainsec, #map.plainsec.revealed, #map.plainsec.own.revealed { background-color: #030914; }
.galaxy-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.72; pointer-events: none; }
.galaxy-caption { position: absolute; left: 24dp; top: 22dp; pointer-events: none; }
.galaxy-caption .eyebrow { font-family: "IBM Plex Mono"; font-size: 10dp; letter-spacing: 3dp; color: #81afca; }
.galaxy-caption .heading { font-family: "Saira SemiCondensed"; font-size: 23dp; font-weight: 700; letter-spacing: 2dp; color: #dceafa; margin-top: 3dp; }
.galaxy-caption .sub { font-size: 12dp; color: #8197ad; margin-top: 2dp; }
.galaxy-key { position: absolute; left: 214dp; bottom: 52dp; color: #8197ad; font-size: 11dp; pointer-events: none; }
.galaxy-key .lit { color: #9cd7ef; }
#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.galaxyview .gstar .s { left: -1.5dp; top: -1.5dp; width: 3dp; height: 3dp; border-radius: 2dp; background-color: #b7c9df; }
#map.galaxyview .gstar .lbl { left: 7dp; top: -7dp; font-size: 11dp; color: #8195ad; font-effect: shadow(1dp 1dp #030914); }
#map.galaxyview .gsector .s { width: 0; height: 0; border-width: 0; background-color: #00000000; }
#map.galaxyview .gsector sunglow { left: -27dp; top: -27dp; width: 54dp; height: 54dp; }
#map.galaxyview .gsector .lbl { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 20dp; letter-spacing: 2dp; color: #e6f0fa;
font-effect: shadow(1dp 1dp #03070d); }
#map.galaxyview .gsector.here .lbl { color: #b3e8d5; margin-left: 10dp; }
#map.galaxyview .gsector.binary .b2 { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; animation: 30s infinite linear spin; }
#map.galaxyview .gsector .b2 .bb { position: absolute; left: 22dp; top: -3dp; width: 5dp; height: 5dp; border-radius: 3dp;
background-color: #e1efff; border: 1dp #8fbbeb80; }
#map.galaxyview .gsector.here .ring3 { display: block; position: absolute; left: -49dp; top: -49dp; width: 96dp; height: 96dp; border-radius: 50dp;
border: 1dp #89d8bd70; }
#map.galaxyview .gdot .s { left: -1.5dp; top: -1.5dp; width: 3dp; height: 3dp; border-radius: 2dp; background-color: #3a4f68; }
#map.galaxyview .gdot.on .s { background-color: #9cd7ef; }
#map.galaxyview .gdist .lbl { width: 60dp; padding: 2dp 3dp; text-align: center; font-family: "IBM Plex Mono"; font-size: 11dp; color: #a0bacf;
background-color: #030914c0; }
#map.galaxyview .sshape { border: 1dp #7ba6ce1c; background-color: transparent; pointer-events: none; }
#map.galaxyview .gmeasure .lbl { font-family: "IBM Plex Mono"; font-size: 10dp; color: #63809a; background-color: #030914b0; padding: 1dp 4dp; }
#map .ln.gline { border-top: 1dp #8fb8d84c; }
.ginset { position: absolute; left: 16dp; bottom: 16dp; width: 180dp; height: 180dp; border: 1dp #42627b70; background-color: #02040ac0; pointer-events: none; }
.ginset img { position: absolute; left: 0; top: 0; width: 180dp; height: 180dp; opacity: 0.8; }
.ginset .ghere { position: absolute; left: 83dp; top: 125dp; width: 8dp; height: 8dp; border-radius: 5dp; border: 1dp #b3e8d5; }
.ginset .gcap { position: absolute; left: 0; right: 0; bottom: 7dp; text-align: center; font-size: 10dp; letter-spacing: 2dp; color: #b3e8d5;
text-transform: uppercase; }
.ginset .gname { position: absolute; left: 0; right: 0; top: 7dp; text-align: center; font-size: 10dp; letter-spacing: 2dp; color: #8197ad;
text-transform: uppercase; }
.galaxy-section { margin: 12dp 0 8dp 0; font-size: 11dp; letter-spacing: 2dp; color: #8197ad; text-transform: uppercase; }
.galaxy-cards { max-height: 380dp; overflow-y: auto; }
.gcard { padding: 14dp 16dp; margin-bottom: 10dp; background-color: #091626d9; border: 1dp #42627b60; border-left: 2dp #7098c0; }
.gcard.own { border-left-color: #89d8bd; }
.gcard .head { display: flex; align-items: center; margin-bottom: 10dp; }
.gcard .star { position: relative; width: 44dp; height: 44dp; margin-right: 10dp; }
.gcard sunglow { left: -4dp; top: -4dp; width: 52dp; height: 52dp; pointer-events: none; }
.gcard .n { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 24dp; letter-spacing: 1dp; }
.gcard .type { font-family: "IBM Plex Mono"; font-size: 10dp; color: #8197ad; }
.gcard .k { font-size: 12dp; color: #9bb1c7; margin-bottom: 10dp; }
.gcard.own .k { color: #b3e8d5; }
.gcard .survey { font-size: 11dp; color: #8197ad; margin-bottom: 6dp; }
.gcard .track { height: 2dp; background-color: #253b50; margin-bottom: 14dp; }
.gcard .fill { height: 2dp; background-color: #9cc8ff; }
.gcard.own .fill { background-color: #89d8bd; }
.gcard .btn { display: block; text-align: center; padding: 6dp 10dp; margin: 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>
<img class="galaxy-art" data-if="galaxy" src="img/galaxy-dust.png"/>
<div class="galaxy-caption" data-if="galaxy"><div class="eyebrow">GALACTIC CARTOGRAPHY</div><div class="heading">The local stars</div><div class="sub">Galactic plane / distance rings from Sol</div></div>
<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-gline="l.cls == 'gline'" 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-wayactive="l.cls == 'wayactive'" data-class-routeactive="l.cls == 'routeactive'" 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="ra"></div><div class="lp" data-if="l.pulses > 0" data-style-animation="l.anim0 != '' ? l.anim0 : 'none'"></div><div class="lp" data-if="l.pulses > 1" data-style-animation="l.anim1 != '' ? l.anim1 : 'none'"></div><div class="lp" data-if="l.pulses > 2" data-style-animation="l.anim2 != '' ? l.anim2 : 'none'"></div></div>
<div class="mi" data-for="i : items" data-attr-class="'mi ' + i.cls + (i.selected ? ' sel' : '') + (i.real ? ' real' : '') + (i.route_next ? ' route-next' : '') + (i.route_end ? ' route-end' : '')" data-style-left="i.left" data-style-top="i.top">
<div class="ring2" data-if="i.selected" data-style-left="i.ring_left" data-style-top="i.ring_left" data-style-width="i.ring_size" data-style-height="i.ring_size" data-style-border-radius="i.ring_size"></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 != '' ? i.color : '#f2b13c'"></div>
<div class="route-tag" data-if="i.route_next || i.route_end">{{ i.route_end ? 'DEST' : 'NEXT' }}</div>
<div class="lbl" data-if="i.label != ''" data-style-left="i.lleft" data-style-top="i.ltop">{{ i.label }}</div>
</div>
<div class="route-edge" data-if="route_edge &amp;&amp; !sector &amp;&amp; !galaxy" data-action="routefit" data-style-left="route_edge_left" data-style-top="route_edge_top"><div class="arrow" data-style-transform="route_edge_rot"></div><span class="tip">{{ route_title }} outside view. Click to show route.</span></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">Local neighbourhood</div></div>
<div class="galaxy-key" data-if="galaxy"><span class="lit">&#8226; Discovered systems</span><br/>Rings show sector exploration</div>
<div class="zoom">
<span class="v">{{ zoom }}</span>
<div class="btn" data-if="can_parent" data-action="parent">Up</div>
<div class="btn" data-if="!galaxy" data-action="zoomall">Fit view</div>
<div class="btn" data-action="zoomship">My ship</div>
<div class="btn" data-if="!galaxy" data-action="zoomout">-</div>
<div class="btn" data-if="!galaxy" data-action="zoomin">+</div>
</div>
</div><div class="mapfill"></div></div>
<div class="side">
<div class="crumbs">
<span class="crumb" data-action="galaxy">Galaxy</span>
<span data-if="crumb_sector != ''"> / </span><span class="crumb" data-if="crumb_sector != ''" data-action="crumb_sector">{{ crumb_sector }}</span>
<span data-if="crumb_system != ''"> / </span><span class="crumb current" data-if="crumb_system != ''">{{ crumb_system }}</span>
</div>
<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-if="!galaxy &amp;&amp; (!sector || sec_card)" data-action="view_system">System</div>
</div>
<div class="tools">
<div class="tl" data-action="labels">{{ label_caption }}</div>
<div class="tl" data-class-on="filters_open" data-action="filters">Map options</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="side-scroll">
<div class="filter-panel" data-if="filters_open">
<div class="filter-row" data-if="!galaxy &amp;&amp; !sector">
<div class="tl" data-class-on="show_planets" data-action="layer" data-arg="planets">Planets / moons</div>
<div class="tl" data-class-on="show_stations" data-action="layer" data-arg="stations">Stations / objects</div>
<div class="tl" data-class-on="show_lanes" data-action="layer" data-arg="lanes">Trade lanes</div>
<div class="tl" data-class-on="show_zones" data-action="layer" data-arg="zones">Fields / nebulae</div>
</div>
<div class="filter-row" data-if="!galaxy">
<div class="tl" data-class-on="show_jumps" data-action="layer" data-arg="jumps">Jump connections</div>
<div class="tl" data-if="sector" data-class-on="show_borders" data-action="layer" data-arg="borders">System borders</div>
</div>
<div class="legend">
<span class="selected">Amber: selection / waypoints</span><br/>
<span class="ship">Cyan: your ship / route</span><br/>
<span class="group">Green: group / shared waypoints</span><br/>
<span class="gate">Violet: jump gates</span> / <span class="hole">Red: jump holes</span>
</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 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="size" data-if="pick_size != ''">{{ pick_size }}</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>
<div class="route-card" data-if="route_present &amp;&amp; !sector &amp;&amp; !galaxy">
<div class="name">{{ route_title }}</div>
<div class="detail">{{ route_detail }}</div>
<div class="btn" data-action="routefit">Show entire route</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="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="search-label">{{ search_hint }}</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">No matching discovered entries in this view.</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 data-if="galaxy &amp;&amp; search == ''">
<div class="galaxy-section">Known sectors / {{ gal_cards.size }}</div>
<div class="galaxy-cards"><div class="gcard" data-for="g : gal_cards" data-class-own="g.own">
<div class="head"><div class="star"><sunglow data-attr-inner="g.inner" data-attr-outer="g.outer"></sunglow></div><div><div class="n">{{ g.name }}</div><div class="type">{{ g.star }}</div></div></div>
<div class="k">{{ g.info }}</div>
<div class="survey">{{ g.survey }}</div>
<div class="track"><div class="fill" data-style-width="g.progress"></div></div>
<div class="btn" data-action="gal_open" data-attr-data-arg="g.key">Open sector</div>
</div>
</div>
<div class="scard hintc">Click a sector star to explore it. Scroll out of a sector to return here. Visiting a system reveals its sector.</div>
</div>
<div class="scard hintc" data-if="sector &amp;&amp; !sec_card &amp;&amp; search == ''">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="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 == ''">
<div class="section-toggle" data-action="marks_toggle"><span class="title">Bookmarks</span><span>{{ marks_open ? '-' : '+' }}</span></div>
<div data-if="marks_open">
<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 != '' ? b.color : '#f2b13c'"></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>
<div class="marks" data-if="search == ''">
<div class="section-toggle" data-action="group_toggle"><span class="title">Group route</span><span class="count">{{ group_wps.size }}</span><span>{{ group_open ? '-' : '+' }}</span></div>
<div data-if="group_open">
<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>
<div class="pcard" data-if="!has_pick &amp;&amp; !sector &amp;&amp; !galaxy"><div class="k">Click an object to select it. Wheel zooms, drag moves. Up returns to the sector.</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><!-- REM: side-scroll -->
<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>