REM-Freelancer/REM-Mod
5
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

New REM client: REM-Client 8905d9b7, 64-bit (interface themes Standard, Fire and Ice in the REM options, each with a calm animation in the windows and the flight HUD)

Browse Source
This commit is contained in:
flathack
2026-11-10 16:46:14 +01:00
parent c583a67be4
commit 9c19d1fbb6
28 changed files with 40 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
EXE/remui/hud.rml
+2 -2
View File
@@ -271,7 +271,7 @@
<div class="ib" data-action="rts" title="Tactical view (F9)"><img class="ico" src="3db:interface/HUD/HUD_contactgroup.3db"/></div>
<div class="ib" data-for="t : tabs" data-class-on="t.active" data-action="tab" data-attr-data-arg="t.key"><img class="ico" data-attr-src="t.icon"/></div>
</div>
<div class="fp lbody">
<div class="fp lbody"><div class="runner"><div class="p1"/><div class="p2"/><div class="p3"/><div class="p4"/><div class="p5"/><div class="p6"/></div>
<div data-if="mode == 1">
<div class="tsub" data-if="!has_target">No target</div>
<div data-if="has_target">
@@ -320,7 +320,7 @@
<div class="ib" data-if="has_battery" data-action="battery"><img class="ico" src="3db:interface/hud/HUD_shieldgaugeicon.3db"/></div><span class="cnt" data-if="has_battery">{{ battery }}</span>
<div class="ib" data-if="loot" data-action="loot"><img class="ico" src="3db:interface/HUD/HUD_loot_bw.3db"/></div>
</div>
<div class="fp rbody"><div class="wl">
<div class="fp rbody"><div class="runner"><div class="p1"/><div class="p2"/><div class="p3"/><div class="p4"/><div class="p5"/><div class="p6"/></div><div class="wl">
<div class="w" data-for="w : weapons" data-class-on="w.active" data-action="weapon" data-attr-data-arg="w.key">
<span class="k">{{ w.key + 1 }}</span><span class="n">{{ w.name }}</span><span class="a">{{ w.ammo }}</span>
</div>
EXE/remui/rem.rcss
+38 -17
View File
@@ -423,23 +423,44 @@ input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
}
.blocked .t { font-family: "Saira SemiCondensed"; font-size: 22dp; color: #dbe6f0; margin-bottom: 6dp; }
/* the running light along an open window's frame (FL's windows have one): four strips the host
adds to every body.window (rem_ui_host.cpp), each lit in turn -- top left to right, right top
to bottom, bottom right to left, left bottom to top */
@keyframes run-top { 0% { left: 0%; opacity: 0; } 2% { opacity: 1; } 23% { opacity: 1; } 25% { left: 76%; opacity: 0; } 100% { left: 76%; opacity: 0; } }
@keyframes run-right { 0% { top: 0%; opacity: 0; } 25% { top: 0%; opacity: 0; } 27% { opacity: 1; } 48% { opacity: 1; } 50% { top: 76%; opacity: 0; } 100% { top: 76%; opacity: 0; } }
@keyframes run-bottom { 0% { left: 76%; opacity: 0; } 50% { left: 76%; opacity: 0; } 52% { opacity: 1; } 73% { opacity: 1; } 75% { left: 0%; opacity: 0; } 100% { left: 0%; opacity: 0; } }
@keyframes run-left { 0% { top: 76%; opacity: 0; } 75% { top: 76%; opacity: 0; } 77% { opacity: 1; } 98% { opacity: 1; } 100% { top: 0%; opacity: 0; } }
.runner { position: absolute; left: -1dp; top: -1dp; right: -1dp; bottom: -1dp; pointer-events: none; display: none; }
.runner .rt, .runner .rr, .runner .rb, .runner .rl { position: absolute; opacity: 0; }
.runner .rt { top: 0; height: 3dp; width: 24%; left: 0%; decorator: horizontal-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-top; }
.runner .rr { right: 0; width: 3dp; height: 24%; top: 0%; decorator: vertical-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-right; }
.runner .rb { bottom: 0; height: 3dp; width: 24%; left: 76%; decorator: horizontal-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-bottom; }
.runner .rl { left: 0; width: 3dp; height: 24%; top: 76%; decorator: vertical-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-left; }
.runner .rt { top: 0; height: 3dp; width: 24%; left: -24%; decorator: horizontal-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-top; }
.runner .rr { right: 0; width: 3dp; height: 24%; top: -24%; decorator: vertical-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-right; }
.runner .rb { bottom: 0; height: 3dp; width: 24%; left: 100%; decorator: horizontal-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-bottom; }
.runner .rl { left: 0; width: 3dp; height: 24%; top: 100%; decorator: vertical-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-left; }
/* the windows' calm animation (rem_ui_host.cpp adds .runner with six lights .p1 .. .p6 to every body.window,
the HUD's side panels have their own in hud.rml; the document has its theme's class: theme1 fire, theme2 ice, else the
scan line). Over the window, taking no clicks. */
@keyframes win-glow { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes win-scan { 0% { top: -120dp; opacity: 0; } 8% { opacity: 1; } 55% { opacity: 1; } 60% { top: 100%; opacity: 0; } 100% { top: 100%; opacity: 0; } }
@keyframes win-ember { 0% { top: 100%; margin-left: 0dp; opacity: 0; } 10% { opacity: 1; } 50% { margin-left: 14dp; } 85% { opacity: 0.7; } 100% { top: 15%; margin-left: -6dp; opacity: 0; } }
@keyframes win-sheen { 0% { left: -40%; } 45% { left: 110%; } 100% { left: 110%; } }
@keyframes win-twinkle { 0% { opacity: 0; transform: scale(0.3); } 6% { opacity: 1; transform: scale(1); } 14% { opacity: 0; transform: scale(0.3); } 100% { opacity: 0; transform: scale(0.3); } }
.runner { position: absolute; left: 6dp; right: 6dp; top: 3dp; bottom: 3dp; overflow: hidden; pointer-events: none; }
.runner div { position: absolute; display: none; pointer-events: none; }
/* (two-colour gradients only: the renderer has no shaders for linear- / radial-gradient) */
/* standard: a faint line glides down, every 16 s */
.runner .p1 { display: block; left: 0; right: 0; height: 120dp; top: -120dp; border-bottom: 1dp #dcf6ff38;
decorator: vertical-gradient(#5cc8f000 #5cc8f014); animation: 16s linear infinite win-scan; }
.runner .p2 { display: block; left: 0; right: 0; top: 50%; bottom: 0; decorator: vertical-gradient(#5cc8f000 #5cc8f030);
animation: 6s sine-in-out infinite alternate win-glow; }
/* fire: a red glow from below, five embers rising and drifting */
.theme1 .runner div { display: block; width: 7dp; height: 7dp; top: 100%; opacity: 0; border-radius: 4dp;
background-color: #ffb040; border: 1dp #fff0c0; decorator: none; }
.theme1 .runner .p1 { left: 12%; right: auto; height: 7dp; border-bottom: 1dp #fff0c0; animation: 9s 0s sine-in-out infinite win-ember; }
.theme1 .runner .p2 { left: 0; right: 0; top: 40%; bottom: 0; width: auto; height: auto; opacity: 1; border-radius: 0; border: 0;
background-color: transparent; decorator: vertical-gradient(#ff3a0000 #ff5a1a50); animation: 6s sine-in-out infinite alternate win-glow; }
.theme1 .runner .p3 { left: 52%; animation: 10s 6s sine-in-out infinite win-ember; }
.theme1 .runner .p4 { left: 70%; width: 5dp; height: 5dp; animation: 13s 1.5s sine-in-out infinite win-ember; }
.theme1 .runner .p5 { left: 86%; animation: 11s 4.5s sine-in-out infinite win-ember; }
.theme1 .runner .p6 { left: 33%; width: 5dp; height: 5dp; animation: 12s 3s sine-in-out infinite win-ember; }
/* ice: a cold light from below, a light edge crossing the window every 10 s, sparkles */
.theme2 .runner div { display: block; width: 6dp; height: 6dp; opacity: 0; border-radius: 3dp; background-color: #ffffff;
border: 2dp #d6f4ff80; decorator: none; }
.theme2 .runner .p1 { top: 0; bottom: 0; height: auto; left: -40%; right: auto; width: 22%; opacity: 1; border-radius: 0; border: 0;
border-right: 2dp #ffffff50; background-color: transparent;
decorator: horizontal-gradient(#ffffff00 #ffffff22); animation: 10s 1s sine-in-out infinite win-sheen; }
.theme2 .runner .p2 { left: 18%; top: 22%; animation: 7s 0.5s linear infinite win-twinkle; }
.theme2 .runner .p3 { left: 64%; top: 12%; animation: 9s 2.5s linear infinite win-twinkle; }
.theme2 .runner .p4 { left: 82%; top: 58%; animation: 8s 4s linear infinite win-twinkle; }
.theme2 .runner .p5 { left: 38%; top: 74%; animation: 10s 6s linear infinite win-twinkle; }
.theme2 .runner .p6 { left: 0; right: 0; top: 50%; bottom: 0; width: auto; height: auto; opacity: 1; border-radius: 0; border: 0;
background-color: transparent; decorator: vertical-gradient(#cfefff00 #cfefff28); animation: 6s sine-in-out infinite alternate win-glow; }
/* a hovered bar icon turning (nnbar, rembar) */
@keyframes nb-spin { from { transform: perspective(240dp) rotateY(0deg) scale(1.12); } to { transform: perspective(240dp) rotateY(360deg) scale(1.12); } }