New REM client: REM-Client 86c9052, 64-bit (the whole modern UI in the flight HUD's look: cut-corner frames with one outline, no box in the box, caps titles with three slashes, labelled maneuver bar, one compact status panel power / shield / hull; contacts list with a real scroll bar - dragged, the wheel; the nav map without the veil and only as big as map and side; windows take clicks again after a colour theme change)
Built on the FLAtlas VM (VS 2022 Build Tools, Release|x64); DLSS not rebuilt (rem_dlss.dll unchanged). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
+63
-54
@@ -34,9 +34,8 @@ body.window
|
||||
width: 82%;
|
||||
height: 86%;
|
||||
max-width: 1680dp;
|
||||
background-color: #0d1622eb;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 4dp;
|
||||
/* the flight HUD's frame: cut corners, one bright edge (hudframes, at the end of this file) */
|
||||
decorator: ninepatch(fw, fw-i);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -59,8 +58,8 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 12dp 18dp;
|
||||
border-bottom: 1dp #24405c;
|
||||
padding: 12dp 18dp 12dp 28dp; /* clear of the cut corner */
|
||||
border-bottom: 1dp #2b6f9e;
|
||||
drag: drag; /* the grip: a window moves by its head (rem_ui_host.cpp, rem.ini win_<name>) */
|
||||
cursor: move;
|
||||
}
|
||||
@@ -68,10 +67,13 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-weight: 600;
|
||||
font-size: 21dp;
|
||||
letter-spacing: 1.2dp;
|
||||
font-size: 20dp;
|
||||
letter-spacing: 2dp;
|
||||
color: #e8f4ff;
|
||||
margin-right: 16dp;
|
||||
}
|
||||
/* three slashes after a window's title, as the HUD's panel titles */
|
||||
.win-head .sl { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; letter-spacing: -1dp; color: #5cc8f0; margin: 0 16dp 0 -6dp; }
|
||||
.win-head .loc { color: #8197ad; font-size: 15dp; }
|
||||
.win-head .spacer { flex: 1; }
|
||||
.chip
|
||||
@@ -80,10 +82,8 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
font-size: 14dp;
|
||||
letter-spacing: 0.6dp;
|
||||
color: #8197ad;
|
||||
padding: 2dp 11dp;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 11dp;
|
||||
margin-left: 10dp;
|
||||
padding: 2dp 4dp;
|
||||
margin-left: 14dp;
|
||||
}
|
||||
.chip .v { font-family: "IBM Plex Mono"; color: #dbe6f0; }
|
||||
.close
|
||||
@@ -93,12 +93,10 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
line-height: 26dp;
|
||||
text-align: center;
|
||||
margin-left: 14dp;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
color: #8197ad;
|
||||
font-size: 17dp;
|
||||
font-size: 20dp;
|
||||
}
|
||||
.close:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
||||
.close:hover { color: #5cc8f0; }
|
||||
|
||||
.win-main
|
||||
{
|
||||
@@ -111,7 +109,7 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
.nav
|
||||
{
|
||||
width: 200dp;
|
||||
border-right: 1dp #24405c;
|
||||
border-right: 1dp #2b6f9e;
|
||||
padding: 10dp 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -139,11 +137,11 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
border-radius: 3dp;
|
||||
padding: 0 5dp;
|
||||
}
|
||||
.nav .item:hover { color: #5cc8f0; background-color: #122033; }
|
||||
.nav .item:hover { color: #5cc8f0; background-color: #5cc8f01a; }
|
||||
.nav .item img.ico { width: 20dp; height: 20dp; margin-right: 10dp; opacity: 0.7; }
|
||||
.nav .item:hover img.ico, .nav .item.active img.ico { opacity: 1; }
|
||||
.win-head img.head-ico { width: 26dp; height: 26dp; margin-right: 10dp; image-color: #f2b13c; }
|
||||
.nav .item.active { color: #f2b13c; border-left-color: #f2b13c; background-color: #122033; }
|
||||
.nav .item.active { color: #f2b13c; border-left-color: #f2b13c; background-color: #f2b13c14; }
|
||||
.nav .sep { height: 1dp; background-color: #24405c; margin: 8dp 18dp; }
|
||||
|
||||
.content
|
||||
@@ -160,8 +158,8 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-top: 1dp #24405c;
|
||||
padding: 8dp 18dp;
|
||||
border-top: 1dp #2b6f9e;
|
||||
padding: 8dp 28dp 10dp 18dp; /* clear of the cut corner */
|
||||
font-size: 13dp;
|
||||
color: #8197ad;
|
||||
}
|
||||
@@ -170,9 +168,8 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
font-family: "IBM Plex Mono";
|
||||
font-size: 11dp;
|
||||
color: #dbe6f0;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
padding: 0 4dp;
|
||||
background-color: #24405c;
|
||||
padding: 0 5dp;
|
||||
margin-right: 5dp;
|
||||
}
|
||||
.win-foot .hint { margin-right: 18dp; }
|
||||
@@ -236,22 +233,20 @@ h3, .label
|
||||
letter-spacing: 1.1dp;
|
||||
text-transform: uppercase;
|
||||
color: #dbe6f0;
|
||||
background-color: #122033;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
decorator: ninepatch(fs, fs-i); /* a small cut-corner frame */
|
||||
padding: 7dp 16dp;
|
||||
margin-right: 8dp;
|
||||
margin-bottom: 8dp;
|
||||
position: relative;
|
||||
transition: color border-color 0.12s;
|
||||
}
|
||||
.btn:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
||||
.btn:active { background-color: #1a2d47; }
|
||||
.btn.primary { color: #f2b13c; border-color: #f2b13c; }
|
||||
.btn.primary:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
||||
.btn.danger { color: #ef6a5b; border-color: #7a3f3e; }
|
||||
.btn.armed { color: #160604; background-color: #ef6a5b; border-color: #ef6a5b; }
|
||||
.btn.disabled { color: #8197ad66; border-color: #24405c; }
|
||||
.btn:hover { color: #5cc8f0; }
|
||||
.btn:active { color: #ffffff; }
|
||||
.btn.primary { color: #f2b13c; decorator: ninepatch(fsa, fsa-i); }
|
||||
.btn.primary:hover { color: #ffd07a; }
|
||||
.btn.danger { color: #ef6a5b; decorator: ninepatch(fsd, fsd-i); }
|
||||
.btn.armed { color: #160604; decorator: none; background-color: #ef6a5b; }
|
||||
.btn.disabled { color: #8197ad66; opacity: 0.6; }
|
||||
.btn .small { font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; text-transform: none; letter-spacing: 0; margin-left: 6dp; }
|
||||
|
||||
/* a tooltip: a .tip child, shown while the button is hovered */
|
||||
@@ -269,10 +264,8 @@ h3, .label
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
color: #dbe6f0;
|
||||
background-color: #05090f;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
padding: 6dp 9dp;
|
||||
decorator: ninepatch(fw, fw-i);
|
||||
padding: 7dp 12dp;
|
||||
}
|
||||
/* shown by the tool tip window over every window (rem_ui_tooltip.cpp), not here: inside its own
|
||||
document another window could cover it */
|
||||
@@ -315,20 +308,17 @@ input.text
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 7dp 10dp;
|
||||
border: 2dp #24405c;
|
||||
border-radius: 3dp;
|
||||
background-color: #122033;
|
||||
border-bottom: 1dp #3d6d96;
|
||||
background-color: #12203399;
|
||||
color: #dbe6f0;
|
||||
font-size: 14dp;
|
||||
cursor: text;
|
||||
}
|
||||
input.text:focus { border-color: #5cc8f0; }
|
||||
input.text:focus { border-bottom-color: #5cc8f0; }
|
||||
input.text .placeholder, input.text:placeholder { color: #8197ad; }
|
||||
|
||||
.table
|
||||
{
|
||||
border: 2dp #24405c;
|
||||
border-radius: 3dp;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
@@ -345,13 +335,12 @@ input.text .placeholder, input.text:placeholder { color: #8197ad; }
|
||||
font-size: 12dp;
|
||||
letter-spacing: 1.2dp;
|
||||
text-transform: uppercase;
|
||||
color: #8197ad;
|
||||
background-color: #0d1622;
|
||||
border-bottom: 1dp #24405c;
|
||||
color: #8fb3d0;
|
||||
border-bottom: 1dp #2b6f9e;
|
||||
}
|
||||
.table .body { flex: 1; overflow-y: auto; }
|
||||
.table .row { font-size: 14dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
|
||||
.table .row:hover { background-color: #122033; }
|
||||
.table .row { font-size: 14dp; border-bottom: 1dp #24405c66; border-left: 3dp #00000000; }
|
||||
.table .row:hover { background-color: #5cc8f01a; }
|
||||
.table .row.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
||||
.table .row.current .c1 { color: #f2b13c; }
|
||||
.table .c1 { flex: 1; }
|
||||
@@ -374,8 +363,8 @@ input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 2dp #24405c;
|
||||
border-radius: 3dp;
|
||||
border-top: 1dp #2b6f9e;
|
||||
border-bottom: 1dp #2b6f9e;
|
||||
margin-bottom: 12dp;
|
||||
}
|
||||
.stats .cell { flex: 1; padding: 8dp 12dp; border-right: 1dp #24405c; }
|
||||
@@ -394,9 +383,8 @@ input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
|
||||
.card
|
||||
{
|
||||
flex: 1;
|
||||
border: 2dp #24405c;
|
||||
border-radius: 3dp;
|
||||
background-color: #122033;
|
||||
border-left: 3dp #2b6f9e; /* an accent at the left, no box in the window's box */
|
||||
background-color: #5cc8f00a;
|
||||
padding: 12dp;
|
||||
margin-right: 10dp;
|
||||
}
|
||||
@@ -429,7 +417,7 @@ input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 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; }
|
||||
.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; }
|
||||
@@ -442,3 +430,24 @@ input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
|
||||
|
||||
/* 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); } }
|
||||
|
||||
/* the flight HUD's frames (every window, the HUD, the bars): panels with cut corners and one bright edge, as
|
||||
ninepatch sprites -- img/hud_frames.png, drawn by tools/rem/make_hud_frames.py (2x: 1 dp = 2 px).
|
||||
fa: top left + bottom right cut, fb: all four, fs: all four (small), fed: the HUD editor's,
|
||||
fw: as fa but nearly opaque, for windows and tips; fsa / fsd: the primary / danger button;
|
||||
fo / fh / fbr: a window with a clear hole (navmap.rml): the edge alone, the head's fill (top left
|
||||
cut), the side's fill (bottom right cut) */
|
||||
@spritesheet hudframes {
|
||||
src: img/hud_frames.png;
|
||||
resolution: 2x;
|
||||
fa: 0px 0px 96px 96px; fa-i: 32px 32px 32px 32px;
|
||||
fb: 96px 0px 96px 96px; fb-i: 128px 32px 32px 32px;
|
||||
fs: 192px 0px 96px 96px; fs-i: 224px 32px 32px 32px;
|
||||
fed: 288px 0px 96px 96px; fed-i: 320px 32px 32px 32px;
|
||||
fw: 384px 0px 96px 96px; fw-i: 416px 32px 32px 32px;
|
||||
fsa: 480px 0px 96px 96px; fsa-i: 512px 32px 32px 32px;
|
||||
fsd: 576px 0px 96px 96px; fsd-i: 608px 32px 32px 32px;
|
||||
fo: 672px 0px 96px 96px; fo-i: 704px 32px 32px 32px;
|
||||
fh: 768px 0px 96px 96px; fh-i: 800px 32px 32px 32px;
|
||||
fbr: 864px 0px 96px 96px; fbr-i: 896px 32px 32px 32px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user