REM-Client 970fe751: systems tab in the HUD contacts, nav map suns in their star's colours (system and sector map), moving trade lanes, a fainter grid
This commit is contained in:
+26
-14
@@ -123,11 +123,12 @@
|
||||
the picked system ringed */
|
||||
#map.sectorview .sshape { border-color: #5cc8f030; background-color: #5cc8f006; }
|
||||
#map.sectorview .sshape.own { border-color: #7cf27c70; }
|
||||
#map.sectorview .system .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%, #fff3b8 16%, #f2c94cd8 30%, #f2a93c55 56%, #f2a93c00 100%);
|
||||
transition: transform 0.25s cubic-out; }
|
||||
#map.sectorview .system.hot .s { transform: scale(1.45); }
|
||||
#map.sectorview .system.unvisited .s { opacity: 0.55; }
|
||||
/* 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; }
|
||||
@@ -195,18 +196,29 @@
|
||||
#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 #5cc8f024; }
|
||||
.gl.h.fine { border-top: 1dp #5cc8f024; }
|
||||
/* REM nav map: the 8 x 8 grid clear over the darkened backdrop */
|
||||
.gl.v.sect { border-left: 2dp #5cc8f090; }
|
||||
.gl.h.sect { border-top: 2dp #5cc8f090; }
|
||||
.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%); }
|
||||
#map.own .sun .s { left: -17dp; top: -17dp; width: 34dp; height: 34dp; border-radius: 17dp; border-width: 0; background-color: #00000000;
|
||||
decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #fff3b8 18%, #f2c94cd0 34%, #f2a93c50 60%, #f2a93c00 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%); }
|
||||
@@ -286,11 +298,11 @@
|
||||
<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>
|
||||
<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"><div class="s" data-style-transform="i.rot"></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>
|
||||
|
||||
Reference in New Issue
Block a user