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:
2026-11-03 23:36:50 +01:00
co-authored by Claude Opus 5.5
parent 1029764985
commit 8e334d06da
78 changed files with 411 additions and 349 deletions
Binary file not shown.
BIN
View File
Binary file not shown.
Regular → Executable
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
Binary file not shown.
BIN
View File
Binary file not shown.
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
Binary file not shown.
BIN
View File
Binary file not shown.
Binary file not shown.
Binary file not shown.
+2 -2
View File
@@ -3,13 +3,13 @@
<title>Account</title> <title>Account</title>
<link type="text/rcss" href="rem.rcss"/> <link type="text/rcss" href="rem.rcss"/>
<style> <style>
.explain { white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 14dp; } .explain { white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 12dp; margin-bottom: 14dp; background-color: #5cc8f008; }
.label { margin-bottom: 6dp; } .label { margin-bottom: 6dp; }
</style> </style>
</head> </head>
<body class="window small" data-model="account"> <body class="window small" data-model="account">
<div class="win-head"> <div class="win-head">
<span class="title">MULTIPLAYER ACCOUNT</span> <span class="title">MULTIPLAYER ACCOUNT</span><span class="sl">\\\</span>
</div> </div>
<div class="win-main"> <div class="win-main">
<div class="content"> <div class="content">
+3 -3
View File
@@ -5,12 +5,12 @@
<style> <style>
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; } .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
.side { flex: 0 0 38%; display: flex; flex-direction: column; min-height: 0; margin-right: 18dp; } .side { flex: 0 0 38%; display: flex; flex-direction: column; min-height: 0; margin-right: 18dp; }
.list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; } .list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.row { padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; font-family: "IBM Plex Mono"; font-size: 14dp; } .row { padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; font-family: "IBM Plex Mono"; font-size: 14dp; }
.row:hover { background-color: #122033; } .row:hover { background-color: #122033; }
.row.selected { background-color: #f2b13c24; border-left-color: #f2b13c; } .row.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
.detail { flex: 1; display: flex; flex-direction: column; min-width: 0; } .detail { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.help { padding: 12dp 14dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; line-height: 1.5; margin-bottom: 14dp; } .help { padding: 12dp 14dp; line-height: 1.5; margin-bottom: 14dp; background-color: #5cc8f008; }
.cmd { font-family: "IBM Plex Mono"; font-size: 18dp; color: #f2b13c; margin-bottom: 8dp; } .cmd { font-family: "IBM Plex Mono"; font-size: 18dp; color: #f2b13c; margin-bottom: 8dp; }
.runline { display: flex; flex-direction: row; align-items: center; } .runline { display: flex; flex-direction: row; align-items: center; }
.runline input { flex: 1; margin-right: 10dp; } .runline input { flex: 1; margin-right: 10dp; }
@@ -22,7 +22,7 @@
<body class="window medium" data-model="admin"> <body class="window medium" data-model="admin">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_player.3db"/> <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_player.3db"/>
<span class="title">ADMIN</span> <span class="title">ADMIN</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">{{ commands.size }} commands</span> <span class="chip">{{ commands.size }} commands</span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
+12 -14
View File
@@ -13,7 +13,7 @@
.col-h .hint { margin-left: auto; } .col-h .hint { margin-left: auto; }
.grow { flex: 1; min-height: 0; } .grow { flex: 1; min-height: 0; }
.search { margin-bottom: 8dp; } .search { margin-bottom: 8dp; }
.panel { border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 12dp; margin-bottom: 12dp; } .panel { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f010; }
.panel .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; margin-bottom: 4dp; } .panel .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; margin-bottom: 4dp; }
.amount { display: flex; flex-direction: row; align-items: center; margin: 8dp 0 10dp 0; } .amount { display: flex; flex-direction: row; align-items: center; margin: 8dp 0 10dp 0; }
.amount .label { margin-right: 10dp; } .amount .label { margin-right: 10dp; }
@@ -23,7 +23,7 @@
.jobs .line { display: flex; flex-direction: row; font-size: 14dp; margin-bottom: 3dp; } .jobs .line { display: flex; flex-direction: row; font-size: 14dp; margin-bottom: 3dp; }
.jobs .line .left { margin-left: auto; font-family: "IBM Plex Mono"; color: #8197ad; } .jobs .line .left { margin-left: auto; font-family: "IBM Plex Mono"; color: #8197ad; }
.slots { display: flex; flex-direction: row; margin-bottom: 12dp; } .slots { display: flex; flex-direction: row; margin-bottom: 12dp; }
.slot { flex: 1; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 10dp; margin-right: 10dp; } .slot { flex: 1; padding: 10dp; margin-right: 10dp; background-color: #5cc8f010; }
.slot.last { margin-right: 0; } .slot.last { margin-right: 0; }
.slot .v { font-family: "Saira SemiCondensed"; font-size: 16dp; margin: 4dp 0 8dp 0; } .slot .v { font-family: "Saira SemiCondensed"; font-size: 16dp; margin: 4dp 0 8dp 0; }
.row.short .c2, .row.short .c3 { color: #ef6a5b; } .row.short .c2, .row.short .c3 { color: #ef6a5b; }
@@ -32,7 +32,7 @@
.sys-head { display: flex; flex-direction: row; align-items: center; } .sys-head { display: flex; flex-direction: row; align-items: center; }
.sys-head .sys-claim { margin-left: auto; } .sys-head .sys-claim { margin-left: auto; }
.sys-view { display: flex; flex-direction: row; margin-bottom: 8dp; } .sys-view { display: flex; flex-direction: row; margin-bottom: 8dp; }
.model { flex: 0 0 55%; height: 260dp; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); margin-right: 14dp; } .model { flex: 0 0 55%; height: 260dp; decorator: vertical-gradient(#0a1424 #05080d); margin-right: 14dp; }
.sys-type { flex: 1; min-width: 0; } .sys-type { flex: 1; min-width: 0; }
.sys-type .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; } .sys-type .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; }
.sys-type .p { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; } .sys-type .p { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
@@ -52,12 +52,11 @@
align-items: center; align-items: center;
padding: 9dp 10dp; padding: 9dp 10dp;
margin-bottom: 6dp; margin-bottom: 6dp;
border: 1dp #24405c; border-left: 3dp #24405c;
border-radius: 3dp; background-color: #5cc8f010;
background-color: #122033;
} }
.drone:hover { border-color: #5cc8f0; } .drone:hover { border-left-color: #5cc8f0; }
.drone.selected { border-color: #f2b13c; } .drone.selected { border-left-color: #f2b13c; }
.drone .ico .drone .ico
{ {
width: 34dp; width: 34dp;
@@ -79,14 +78,13 @@
{ {
text-align: center; text-align: center;
padding: 9dp; padding: 9dp;
border: 2dp #3d6d96;
border-radius: 3dp;
color: #5cc8f0; color: #5cc8f0;
font-family: "Saira SemiCondensed"; font-family: "Saira SemiCondensed";
letter-spacing: 1.1dp; letter-spacing: 1.1dp;
text-transform: uppercase; text-transform: uppercase;
font-size: 14dp; font-size: 14dp;
margin-top: 4dp; margin-top: 4dp;
decorator: ninepatch(fs, fs-i);
} }
.add:hover { background-color: #122033; } .add:hover { background-color: #122033; }
.d-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 12dp; } .d-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 12dp; }
@@ -94,21 +92,21 @@
.pane { flex: 1; display: flex; flex-direction: column; min-height: 0; } .pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pane .table { flex: 1; margin: 8dp 0 10dp 0; } .pane .table { flex: 1; margin: 8dp 0 10dp 0; }
.route { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; } .route { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
.stop { flex: 1; border: 1dp #24405c; border-radius: 3dp; padding: 8dp 10dp; background-color: #122033; } .stop { flex: 1; padding: 8dp 10dp; background-color: #5cc8f010; }
.stop .v { font-family: "Saira SemiCondensed"; font-size: 16dp; margin-bottom: 4dp; } .stop .v { font-family: "Saira SemiCondensed"; font-size: 16dp; margin-bottom: 4dp; }
.arrow { color: #f2b13c; font-family: "IBM Plex Mono"; margin: 0 10dp; } .arrow { color: #f2b13c; font-family: "IBM Plex Mono"; margin: 0 10dp; }
.namefield { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; } .namefield { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
.namefield .label { margin-right: 10dp; } .namefield .label { margin-right: 10dp; }
.namefield input.text { flex: 1; } .namefield input.text { flex: 1; }
.note { border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 8dp 10dp; margin-bottom: 8dp; font-size: 13dp; color: #8197ad; } .note { padding: 8dp 10dp; margin-bottom: 8dp; font-size: 13dp; color: #8197ad; border-left: 3dp #24405c; background-color: #5cc8f010; }
.note.warn { border-color: #f2b13c; color: #f2b13c; } .note.warn { color: #f2b13c; border-left-color: #f2b13c; }
.coins { font-size: 12dp; color: #8197ad; margin-top: 6dp; } .coins { font-size: 12dp; color: #8197ad; margin-top: 6dp; }
.stats .v.txt { font-family: "Saira SemiCondensed"; font-size: 15dp; white-space: nowrap; overflow: hidden; } .stats .v.txt { font-family: "Saira SemiCondensed"; font-size: 15dp; white-space: nowrap; overflow: hidden; }
</style> </style>
</head> </head>
<body class="window" data-model="base"> <body class="window" data-model="base">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_base.3db"/><span class="title">BASE MANAGER</span> <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_base.3db"/><span class="title">BASE MANAGER</span><span class="sl">\\\</span>
<span class="loc">{{ base_name }}</span> <span class="loc">{{ base_name }}</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Credits <span class="v">{{ money }}</span></span> <span class="chip">Credits <span class="v">{{ money }}</span></span>
+6 -6
View File
@@ -8,13 +8,13 @@
.colm.list { flex: 1; } .colm.list { flex: 1; }
.colm.side { flex: 0 0 32%; margin-left: 18dp; } .colm.side { flex: 0 0 32%; margin-left: 18dp; }
.colm.fig { flex: 0 0 24%; margin-left: 18dp; } .colm.fig { flex: 0 0 24%; margin-left: 18dp; }
#figure { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; } #figure { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
.fig .hint { text-align: center; margin-top: 6dp; } .fig .hint { text-align: center; margin-top: 6dp; }
.starts { flex: 1; overflow-y: auto; } .starts { flex: 1; overflow-y: auto; }
.region { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 10dp 0 6dp 0; } .region { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 10dp 0 6dp 0; }
.start { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; } .start { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; margin-bottom: 6dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
.start:hover { border-color: #5cc8f0; } .start:hover { border-left-color: #5cc8f0; }
.start.selected { border-color: #f2b13c; background-color: #f2b13c1a; } .start.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
.start img { width: 38dp; height: 38dp; margin-right: 12dp; } .start img { width: 38dp; height: 38dp; margin-right: 12dp; }
.start .txt { flex: 1; min-width: 0; } .start .txt { flex: 1; min-width: 0; }
.start .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; } .start .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
@@ -23,7 +23,7 @@
.start .m { font-family: "IBM Plex Mono"; color: #f2b13c; } .start .m { font-family: "IBM Plex Mono"; color: #f2b13c; }
.namebox { margin-bottom: 14dp; } .namebox { margin-bottom: 14dp; }
.namebox .label { margin-bottom: 6dp; } .namebox .label { margin-bottom: 6dp; }
.detail { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; flex: 1; display: flex; flex-direction: column; min-height: 0; } .detail { padding: 12dp; flex: 1; display: flex; flex-direction: column; min-height: 0; background-color: #5cc8f008; }
.detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; } .detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; }
.detail .k { font-size: 14dp; color: #8197ad; margin-top: 2dp; } .detail .k { font-size: 14dp; color: #8197ad; margin-top: 2dp; }
.detail .facts { display: flex; flex-direction: row; margin: 10dp 0; } .detail .facts { display: flex; flex-direction: row; margin: 10dp 0; }
@@ -34,7 +34,7 @@
</head> </head>
<body class="window" data-model="charcreate"> <body class="window" data-model="charcreate">
<div class="win-head"> <div class="win-head">
<span class="title">NEW PILOT</span> <span class="title">NEW PILOT</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Starts <span class="v">{{ count }}</span></span> <span class="chip">Starts <span class="v">{{ count }}</span></span>
</div> </div>
+7 -7
View File
@@ -8,12 +8,12 @@
.colm.list { flex: 1; } .colm.list { flex: 1; }
.colm.side { flex: 0 0 32%; margin-left: 18dp; } .colm.side { flex: 0 0 32%; margin-left: 18dp; }
.colm.fig { flex: 0 0 22%; margin-left: 18dp; } .colm.fig { flex: 0 0 22%; margin-left: 18dp; }
#figure { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; } #figure { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
.fig .hint { text-align: center; margin-top: 6dp; } .fig .hint { text-align: center; margin-top: 6dp; }
.roster { flex: 1; overflow-y: auto; } .roster { flex: 1; overflow-y: auto; }
.pilot { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; } .pilot { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
.pilot:hover { border-color: #5cc8f0; } .pilot:hover { border-left-color: #5cc8f0; }
.pilot.selected { border-color: #f2b13c; background-color: #f2b13c1a; } .pilot.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
.pilot img { width: 44dp; height: 44dp; margin-right: 14dp; } .pilot img { width: 44dp; height: 44dp; margin-right: 14dp; }
.pilot .txt { flex: 1; min-width: 0; } .pilot .txt { flex: 1; min-width: 0; }
.pilot .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; } .pilot .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
@@ -22,17 +22,17 @@
.pilot .r { text-align: right; } .pilot .r { text-align: right; }
.pilot .m { font-family: "IBM Plex Mono"; color: #f2b13c; } .pilot .m { font-family: "IBM Plex Mono"; color: #f2b13c; }
.pilot .lv { font-family: "IBM Plex Mono"; font-size: 12dp; color: #5cc8f0; margin-top: 2dp; } .pilot .lv { font-family: "IBM Plex Mono"; font-size: 12dp; color: #5cc8f0; margin-top: 2dp; }
.detail { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 12dp; } .detail { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f008; }
.detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 4dp; } .detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 4dp; }
.detail .k { font-size: 14dp; color: #8197ad; } .detail .k { font-size: 14dp; color: #8197ad; }
.detail .s { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; margin-top: 8dp; } .detail .s { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; margin-top: 8dp; }
.motd { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .motd { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; background-color: #5cc8f008; }
.empty-roster { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .empty-roster { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
</style> </style>
</head> </head>
<body class="window" data-model="charselect"> <body class="window" data-model="charselect">
<div class="win-head"> <div class="win-head">
<span class="title">{{ server }}</span> <span class="title">{{ server }}</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Characters <span class="v">{{ chars.size }}</span> / <span class="v">5</span></span> <span class="chip">Characters <span class="v">{{ chars.size }}</span> / <span class="v">5</span></span>
</div> </div>
+1 -1
View File
@@ -8,7 +8,7 @@
target panel below reaches 341dp): at 67 % of the height it ran into that panel */ target panel below reaches 341dp): at 67 % of the height it ran into that panel */
body.feed { position: absolute; left: 16dp; bottom: 420dp; width: 46%; height: 40%; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; font-family: "Saira SemiCondensed"; font-size: 19dp; color: #dbe6f0; } body.feed { position: absolute; left: 16dp; bottom: 420dp; width: 46%; height: 40%; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; font-family: "Saira SemiCondensed"; font-size: 19dp; color: #dbe6f0; }
.lines { pointer-events: none; overflow: hidden; line-height: 1.25; font-effect: shadow(1dp 1dp #000000d0); } .lines { pointer-events: none; overflow: hidden; line-height: 1.25; font-effect: shadow(1dp 1dp #000000d0); }
.line { margin-top: 8dp; padding: 5dp 10dp; background-color: #050a18d9; border: 2dp #3f9ad6; border-radius: 6dp; display: flex; flex-direction: row; } .line { margin-top: 8dp; padding: 5dp 10dp; display: flex; flex-direction: row; decorator: ninepatch(fw, fw-i); }
.line .p { white-space: nowrap; margin-right: 6dp; } .line .p { white-space: nowrap; margin-right: 6dp; }
.line .t { flex: 1; white-space: pre; overflow: hidden; } .line .t { flex: 1; white-space: pre; overflow: hidden; }
.gear { width: 22dp; height: 22dp; margin-left: 8dp; image-color: #8fb8d8; } .gear { width: 22dp; height: 22dp; margin-left: 8dp; image-color: #8fb8d8; }
+6 -6
View File
@@ -6,17 +6,17 @@
.cols { flex: 1; display: flex; flex-direction: row; min-height: 0; } .cols { flex: 1; display: flex; flex-direction: row; min-height: 0; }
.histcol { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .histcol { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ctabs { display: flex; flex-direction: row; margin-bottom: 8dp; } .ctabs { display: flex; flex-direction: row; margin-bottom: 8dp; }
.ct { padding: 4dp 12dp; margin-right: 4dp; border: 1dp #24405c; border-radius: 3dp; font-size: 13dp; color: #8197ad; } .ct { padding: 4dp 12dp; margin-right: 4dp; font-size: 13dp; color: #8197ad; border-bottom: 2dp #00000000; }
.ct:hover { color: #dbe6f0; border-color: #3d6d96; } .ct:hover { color: #dbe6f0; border-bottom-color: #3d6d96; }
.ct.on { color: #f2b13c; border-color: #f2b13c; background-color: #f2b13c1a; } .ct.on { color: #f2b13c; background-color: #f2b13c1a; border-bottom-color: #f2b13c; }
.hl { padding: 1dp 4dp; border-radius: 2dp; } .hl { padding: 1dp 4dp; border-radius: 2dp; }
.hl.mention { background-color: #f2b13c26; border-left: 2dp #f2b13c; } .hl.mention { background-color: #f2b13c26; border-left: 2dp #f2b13c; }
.hl .tm { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-right: 8dp; } .hl .tm { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-right: 8dp; }
#hist { flex: 1; overflow-y: auto; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; font-size: 16dp; line-height: 1.35; } #hist { flex: 1; overflow-y: auto; padding: 12dp; font-size: 16dp; line-height: 1.35; background-color: #5cc8f008; }
.gear { width: 22dp; height: 22dp; margin: 0 10dp; image-color: #8fb8d8; } .gear { width: 22dp; height: 22dp; margin: 0 10dp; image-color: #8fb8d8; }
.gear:hover { image-color: #f2b13c; } .gear:hover { image-color: #f2b13c; }
.targets { width: 260dp; margin-left: 14dp; display: flex; flex-direction: column; min-height: 0; } .targets { width: 260dp; margin-left: 14dp; display: flex; flex-direction: column; min-height: 0; }
.tl { flex: 1; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .tl { flex: 1; overflow-y: auto; background-color: #5cc8f008; }
.tg { padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; white-space: nowrap; overflow: hidden; } .tg { padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; white-space: nowrap; overflow: hidden; }
.tg:hover { background-color: #122033; } .tg:hover { background-color: #122033; }
.tg.cur { border-left-color: #f2b13c; background-color: #f2b13c1a; } .tg.cur { border-left-color: #f2b13c; background-color: #f2b13c1a; }
@@ -26,7 +26,7 @@
<body class="window medium" data-model="chathistory"> <body class="window medium" data-model="chathistory">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Chat.3db"/> <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Chat.3db"/>
<span class="title">CHAT</span> <span class="title">CHAT</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Targets <span class="v">{{ count }}</span></span> <span class="chip">Targets <span class="v">{{ count }}</span></span>
<img class="gear" src="img/gear.png" data-action="settings"/> <img class="gear" src="img/gear.png" data-action="settings"/>
+2 -2
View File
@@ -5,7 +5,7 @@
<style> <style>
body.window.chatset { left: 50%; margin-left: -330dp; top: 12%; width: 660dp; height: 640dp; } body.window.chatset { left: 50%; margin-left: -330dp; top: 12%; width: 660dp; height: 640dp; }
.sec { margin-bottom: 16dp; } .sec { margin-bottom: 16dp; }
.tgl { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .tgl { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; background-color: #5cc8f008; }
.tgl:hover { background-color: #122033; } .tgl:hover { background-color: #122033; }
.tgl .box { width: 18dp; height: 18dp; border: 2dp #3d6d96; border-radius: 3dp; margin-right: 12dp; } .tgl .box { width: 18dp; height: 18dp; border: 2dp #3d6d96; border-radius: 3dp; margin-right: 12dp; }
.tgl .box.on { border-color: #f2b13c; background-color: #f2b13c; } .tgl .box.on { border-color: #f2b13c; background-color: #f2b13c; }
@@ -27,7 +27,7 @@
<body class="window chatset" data-model="chatsettings"> <body class="window chatset" data-model="chatsettings">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="img/gear.png"/> <img class="head-ico" src="img/gear.png"/>
<span class="title">CHAT SETTINGS</span> <span class="title">CHAT SETTINGS</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="close" data-action="cancel">&#215;</span> <span class="close" data-action="cancel">&#215;</span>
</div> </div>
+2 -2
View File
@@ -7,7 +7,7 @@
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.colm.gap { margin-right: 18dp; } .colm.gap { margin-right: 18dp; }
.colm.side { flex: 0 0 360dp; } .colm.side { flex: 0 0 360dp; }
.banner { height: 120dp; margin-bottom: 14dp; border: 1dp #24405c; border-radius: 3dp; decorator: image(3db:INTERFACE/REM/IMAGES/contracts_banner.3db cover); } .banner { height: 120dp; margin-bottom: 14dp; decorator: image(3db:INTERFACE/REM/IMAGES/contracts_banner.3db cover); }
.target { display: flex; flex-direction: row; align-items: center; margin-bottom: 14dp; } .target { display: flex; flex-direction: row; align-items: center; margin-bottom: 14dp; }
.target img { width: 34dp; height: 34dp; margin-right: 12dp; } .target img { width: 34dp; height: 34dp; margin-right: 12dp; }
.target.off img { opacity: 0.3; } .target.off img { opacity: 0.3; }
@@ -20,7 +20,7 @@
<body class="window medium" data-model="contracts"> <body class="window medium" data-model="contracts">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_contracts.3db"/> <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_contracts.3db"/>
<span class="title">CONTRACT NETWORK</span> <span class="title">CONTRACT NETWORK</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Bounties <span class="v">{{ bounties.size }}</span></span> <span class="chip">Bounties <span class="v">{{ bounties.size }}</span></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
+1 -1
View File
@@ -5,7 +5,7 @@
<style> <style>
/* the whole screen: a click beside the menu closes it */ /* the whole screen: a click beside the menu closes it */
body.ctx { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent; } body.ctx { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent; }
.menu { position: absolute; width: 220dp; padding: 4dp; background-color: #070b12f2; border: 2dp #3d6d96; border-radius: 4dp; } .menu { position: absolute; width: 220dp; padding: 4dp; decorator: ninepatch(fw, fw-i); }
.menu .t { font-size: 12dp; color: #f2b13c; padding: 4dp 8dp 6dp 8dp; white-space: nowrap; overflow: hidden; border-bottom: 1dp #24405c; margin-bottom: 3dp; } .menu .t { font-size: 12dp; color: #f2b13c; padding: 4dp 8dp 6dp 8dp; white-space: nowrap; overflow: hidden; border-bottom: 1dp #24405c; margin-bottom: 3dp; }
.menu .r { padding: 6dp 10dp; font-size: 15dp; border-radius: 3dp; } .menu .r { padding: 6dp 10dp; font-size: 15dp; border-radius: 3dp; }
.menu .r:hover { background-color: #122033; color: #5cc8f0; } .menu .r:hover { background-color: #122033; color: #5cc8f0; }
+2 -5
View File
@@ -11,11 +11,8 @@
width: 520dp; width: 520dp;
margin-left: -260dp; margin-left: -260dp;
margin-top: -140dp; margin-top: -140dp;
background-color: #0d1622f5;
border: 2dp #3d6d96;
border-top: 2dp #f2b13c;
border-radius: 4dp;
display: block; display: block;
decorator: ninepatch(fw, fw-i);
} }
.box-head { display: flex; flex-direction: row; align-items: center; padding: 12dp 18dp; border-bottom: 1dp #24405c; } .box-head { display: flex; flex-direction: row; align-items: center; padding: 12dp 18dp; border-bottom: 1dp #24405c; }
.box-head .title { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; letter-spacing: 1.2dp; text-transform: uppercase; flex: 1; } .box-head .title { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; letter-spacing: 1.2dp; text-transform: uppercase; flex: 1; }
@@ -28,7 +25,7 @@
</head> </head>
<body class="box" data-model="dialog"> <body class="box" data-model="dialog">
<div class="box-head"> <div class="box-head">
<span class="title">{{ title }}</span> <span class="title">{{ title }}</span><span class="sl">\\\</span>
<span class="close" data-action="button" data-arg="-1">&#215;</span> <span class="close" data-action="button" data-arg="-1">&#215;</span>
</div> </div>
<div class="box-body"> <div class="box-body">
+3 -3
View File
@@ -4,15 +4,15 @@
<link type="text/rcss" href="rem.rcss"/> <link type="text/rcss" href="rem.rcss"/>
<style> <style>
.members { margin-bottom: 14dp; } .members { margin-bottom: 14dp; }
.member { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 3dp #5cc8f0; border-radius: 3dp; background-color: #122033; font-size: 15dp; } .member { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; margin-bottom: 6dp; font-size: 15dp; border-left: 3dp #5cc8f0; background-color: #5cc8f010; }
.request { padding: 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 10dp; } .request { padding: 12dp; margin-bottom: 10dp; border-left: 3dp #f2b13c; background-color: #5cc8f008; }
.request .t { white-space: pre-line; line-height: 1.5; font-size: 15dp; } .request .t { white-space: pre-line; line-height: 1.5; font-size: 15dp; }
.request .w { font-size: 12dp; color: #8197ad; margin-top: 6dp; } .request .w { font-size: 12dp; color: #8197ad; margin-top: 6dp; }
</style> </style>
</head> </head>
<body class="window small" data-model="group"> <body class="window small" data-model="group">
<div class="win-head"> <div class="win-head">
<span class="title">GROUP</span> <span class="title">GROUP</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Members <span class="v">{{ members.size }}</span></span> <span class="chip">Members <span class="v">{{ members.size }}</span></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
+2 -2
View File
@@ -3,13 +3,13 @@
<title>Information</title> <title>Information</title>
<link type="text/rcss" href="rem.rcss"/> <link type="text/rcss" href="rem.rcss"/>
<style> <style>
.card { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 14dp 16dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .card { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 14dp 16dp; background-color: #5cc8f008; }
</style> </style>
</head> </head>
<body class="window small" data-model="help"> <body class="window small" data-model="help">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/> <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
<span class="title">{{ title }}</span> <span class="title">{{ title }}</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
</div> </div>
+117 -75
View File
@@ -4,75 +4,104 @@
<link type="text/rcss" href="rem.rcss"/> <link type="text/rcss" href="rem.rcss"/>
<style> <style>
/* the flight HUD in the shape of FL's own (bottom left / centre / right, the maneuver bar): /* the flight HUD in the shape of FL's own (bottom left / centre / right, the maneuver bar):
FL's panels, icons and bar colours, drawn by RmlUi */ panels with cut corners (the hudframes sprites, rem.rcss), FL's icons,
labelled bars, drawn by RmlUi */
body.hud { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent; pointer-events: none; font-family: "Saira SemiCondensed"; font-size: 15dp; color: #dbe6f0; } body.hud { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent; pointer-events: none; font-family: "Saira SemiCondensed"; font-size: 15dp; color: #dbe6f0; }
.fp { position: absolute; box-sizing: border-box; background-color: #050a18e6; border: 3dp #3f9ad6; border-radius: 8dp; } .fp { position: absolute; box-sizing: border-box; decorator: ninepatch(fa, fa-i); }
.fp.inner { border-color: #2b6f9e; } .fp.all { decorator: ninepatch(fb, fb-i); }
.fp.small { decorator: ninepatch(fs, fs-i); }
.ico { width: 40dp; height: 40dp; margin: 0 3dp; } .ico { width: 40dp; height: 40dp; margin: 0 3dp; }
.ib { display: inline-block; padding: 1dp; border: 2dp #00000000; border-radius: 4dp; } .ib { display: inline-block; padding: 1dp; border-radius: 4dp; }
.ib:hover { background-color: #f2b13c14; } .ib:hover { background-color: #f2b13c14; }
.ib:hover .ico, .ib.on .ico { image-color: #f2b13c; } .ib:hover .ico, .ib.on .ico { image-color: #f2b13c; }
.ib.on { border-color: #f2b13c; background-color: #f2b13c1f; } .ib.on { background-color: #f2b13c1f; }
.ib.off { opacity: 0.35; } .ib.off { opacity: 0.35; }
/* a panel's title: caps, spaced, three slashes after it */
.ttl { font-weight: 600; font-size: 16dp; letter-spacing: 2dp; color: #e8f4ff; white-space: nowrap; }
.ttl .sl { margin-left: 10dp; color: #5cc8f0; letter-spacing: -1dp; }
.sp { flex: 1; }
/* --- the maneuver bar, top centre ------------------------------------------------- */ /* --- the maneuver bar, top centre: icon over its name, the active one amber ----------- */
.mans { left: 50%; margin-left: -240dp; top: 8dp; width: 480dp; height: 88dp; padding: 0 10dp; display: flex; flex-direction: row; justify-content: center; align-items: center; } .mans { left: 50%; margin-left: -300dp; top: 8dp; width: 600dp; height: 76dp; padding: 0 18dp; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.mans .ico { width: 64dp; height: 64dp; margin: 0 8dp; } .mans .ib { flex: 1; display: flex; flex-direction: column; align-items: center; height: 62dp; padding: 6dp 4dp 0 4dp; border-left: 1dp #2b6f9e; border-radius: 0; }
.cruise { left: 50%; margin-left: -206dp; top: 99dp; width: 74dp; height: 70dp; display: flex; justify-content: center; align-items: center; } .mans .ib:first-child { border-left-width: 0; }
.cruise .ico { width: 52dp; height: 52dp; } .mans .ib.on { border-left-width: 0; }
.mans .ico { width: 34dp; height: 34dp; margin: 0; }
.mans .lb { margin-top: 2dp; font-weight: 600; font-size: 12dp; letter-spacing: 1dp; color: #b9d4ea; white-space: nowrap; text-transform: uppercase; }
.mans .ib.on .lb { color: #f2b13c; }
.cruise { left: 50%; margin-left: -300dp; top: 90dp; width: 64dp; height: 56dp; display: flex; justify-content: center; align-items: center; }
.cruise .ico { width: 40dp; height: 40dp; }
/* --- bottom centre: thrust | bars | speed ------------------------------------------- */ /* --- bottom centre: thrust | shield / hull / power | speed, one panel ----------------- */
.thrust, .speed { bottom: 17dp; width: 78dp; height: 38dp; text-align: center; line-height: 38dp; font-size: 22dp; } .core { left: 50%; margin-left: -240dp; bottom: 8dp; width: 480dp; height: 66dp; padding: 0 16dp; display: flex; flex-direction: row; align-items: center; }
.thrust { left: 50%; margin-left: -222dp; } .core .val { width: 76dp; text-align: center; font-weight: 600; font-size: 22dp; color: #e8f4ff; }
.thrust.low { color: #ef6a5b; } .core .val .u { font-weight: 400; font-size: 11dp; color: #8fb3d0; margin-left: 4dp; }
.speed { left: 50%; margin-left: 144dp; } .core .cap { display: block; font-weight: 600; font-size: 9dp; letter-spacing: 1.5dp; color: #8fb3d0; }
.bars { left: 50%; margin-left: -132dp; bottom: 8dp; width: 264dp; height: 56dp; padding: 0 8dp; display: flex; flex-direction: column; justify-content: center; } .core .thrust.low { color: #ef6a5b; }
.bar { position: relative; width: 242dp; height: 11dp; margin: 2dp 0; } .core .sep { width: 1dp; height: 42dp; background-color: #2b6f9e; margin: 0 10dp; }
.chips { position: absolute; left: 0; top: 0; width: 242dp; height: 11dp; display: flex; flex-direction: row; } .bars { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.sg { flex: 1; height: 11dp; margin-right: 2dp; } .brow { display: flex; flex-direction: row; align-items: center; height: 15dp; }
.brow .l { width: 52dp; font-weight: 600; font-size: 10dp; letter-spacing: 1.5dp; color: #b9d4ea; }
.bar { position: relative; flex: 1; height: 8dp; }
.chips { position: absolute; left: 0; top: 0; right: 0; height: 8dp; display: flex; flex-direction: row; }
.sg { flex: 1; height: 8dp; margin-right: 2dp; }
.sg:last-child { margin-right: 0; } .sg:last-child { margin-right: 0; }
/* each segment lit by the value (no clipped fill row: the HUD's scaled parts are not clipped) */ /* each segment lit by the value (no clipped fill row: the HUD's scaled parts are not clipped) */
.power .sg { background-color: #a7a15e33; } .power .sg { background-color: #f0943c26; }
.power .sg.lit { background-color: #c9c272; } .power .sg.lit { background-color: #f0943c; }
.shield .sg { background-color: #3e3db544; } .shield .sg { background-color: #4fc6ee26; }
.shield .sg.lit { background-color: #5856dc; } .shield .sg.lit { background-color: #4fc6ee; }
.hull .sg { background-color: #782a3355; } .hull .sg { background-color: #e0484e26; }
.hull .sg.lit { background-color: #b53844; } .hull .sg.lit { background-color: #e0484e; }
/* --- bottom left: target / contacts --------------------------------------------------- */ /* --- bottom left: target / contacts --------------------------------------------------- */
.lhead { left: 46dp; bottom: 289dp; width: 291dp; height: 52dp; display: flex; flex-direction: row; align-items: center; padding: 0 6dp 0 10dp; } .lhead { left: 8dp; bottom: 290dp; width: 310dp; height: 42dp; display: flex; flex-direction: row; align-items: center; padding: 0 8dp 0 22dp; }
.lhead .sp { flex: 1; } .lhead .ico { width: 30dp; height: 30dp; }
.lbody { left: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 10dp 12dp; } .lbody { left: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 12dp 16dp; }
.filters { display: flex; flex-direction: row; justify-content: center; margin-bottom: 4dp; } .filters { display: flex; flex-direction: row; justify-content: center; margin-bottom: 6dp; padding-bottom: 6dp; border-bottom: 1dp #2b6f9e; }
.filters .ico { width: 36dp; height: 36dp; margin: 0 4dp; } .filters .ico { width: 32dp; height: 32dp; margin: 0 4dp; }
.rows { height: 200dp; } .rows { height: 196dp; margin-right: 22dp; }
.c { display: flex; flex-direction: row; align-items: center; height: 25dp; padding: 0 2dp; } .c { display: flex; flex-direction: row; align-items: center; height: 25dp; padding: 0 2dp; border-bottom: 1dp #24405c66; }
.c:hover { background-color: #3a8fc822; } .c:hover { background-color: #3a8fc822; }
.c img { width: 22dp; height: 22dp; margin-right: 6dp; } .c img { width: 20dp; height: 20dp; margin-right: 8dp; }
.c .r { width: 52dp; text-align: right; margin-right: 10dp; font-size: 19dp; } .c .n { flex: 1; white-space: nowrap; overflow: hidden; font-weight: 500; font-size: 16dp; letter-spacing: 1dp; text-transform: uppercase; }
.c .n { flex: 1; white-space: nowrap; overflow: hidden; font-size: 19dp; } .c .r { width: 64dp; text-align: right; margin-left: 8dp; font-size: 16dp; }
.scroll { position: absolute; right: 6dp; bottom: 4dp; } /* a scroll bar at the right of the rows: the arrows and a click on the track above / below
.scroll .btn { padding: 0 8dp; font-size: 14dp; margin-left: 4dp; } the middle step a row (the classic list's own scroll); the thumb's place and size come from
.tname { font-size: 26dp; color: #e8f1fa; } the list (thumb_top / thumb_size), dragged it scrolls the list (rem_ui_hud.cpp) */
.tsub { font-size: 18dp; color: #8fb3d0; margin-bottom: 8dp; } .sbar { position: absolute; right: 6dp; top: 66dp; bottom: 12dp; width: 20dp; display: flex; flex-direction: column; align-items: center; }
.tbar { display: flex; flex-direction: row; align-items: center; margin: 3dp 0; } .sbar .ar { width: 20dp; height: 20dp; line-height: 20dp; text-align: center; font-size: 11dp; color: #5cc8f0; }
.tbar .l { width: 70dp; font-size: 17dp; color: #8fb3d0; } .sbar .ar:hover { color: #f2b13c; background-color: #f2b13c1f; }
.tbtns { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 8dp; } .sbar .ar.off { color: #2b6f9e; }
.tbtns .ico { width: 44dp; height: 44dp; } .sbar .ar.off:hover { color: #2b6f9e; background-color: transparent; }
.sbar .track { position: relative; flex: 1; width: 20dp; margin: 2dp 0; }
.sbar .rail { position: absolute; left: 8dp; top: 0; bottom: 0; width: 4dp; background-color: #24405c; }
.sbar .thumb { position: absolute; left: 7dp; width: 6dp; background-color: #5cc8f0; drag: drag; }
.sbar .zu, .sbar .zd { position: absolute; left: 0; right: 0; height: 50%; }
.sbar .zu { top: 0; }
.sbar .zd { top: 50%; }
.sbar .track:hover .thumb { background-color: #f2b13c; }
.tname { font-weight: 600; font-size: 22dp; letter-spacing: 1dp; color: #e8f1fa; text-transform: uppercase; }
.tsub { font-size: 15dp; letter-spacing: 1dp; color: #8fb3d0; margin-bottom: 10dp; }
.tbar { display: flex; flex-direction: row; align-items: center; height: 20dp; margin: 3dp 0; }
.tbar .l { width: 74dp; font-weight: 600; font-size: 13dp; letter-spacing: 2dp; color: #b9d4ea; }
.tbtns { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 10dp; }
.tbtns .ico { width: 40dp; height: 40dp; }
/* --- bottom right: status ------------------------------------------------------------- */ /* --- bottom right: status ------------------------------------------------------------- */
.rhead { right: 46dp; bottom: 289dp; width: 291dp; height: 52dp; display: flex; flex-direction: row; align-items: center; padding: 0 10dp 0 8dp; } .rhead { right: 8dp; bottom: 290dp; width: 310dp; height: 42dp; display: flex; flex-direction: row; align-items: center; padding: 0 12dp 0 22dp; }
.rhead .ico { width: 36dp; height: 36dp; margin: 0 4dp 0 10dp; } .rhead .ico { width: 26dp; height: 26dp; margin: 0 4dp 0 10dp; }
.rhead .cnt { font-size: 22dp; margin-right: 10dp; } .rhead .cnt { font-weight: 600; font-size: 18dp; }
.rbody { right: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 10dp 16dp; } .rbody { right: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 12dp 16dp; }
.w { display: flex; flex-direction: row; height: 26dp; font-size: 23dp; color: #dbe6f0; } .w { display: flex; flex-direction: row; align-items: center; height: 28dp; padding: 0 6dp 0 8dp; border-left: 3dp #00000000; border-bottom: 1dp #24405c66; font-weight: 500; font-size: 16dp; letter-spacing: 1dp; color: #8197ad; text-transform: uppercase; }
.w:hover { background-color: #3a8fc822; } .w:hover { background-color: #3a8fc822; }
.w.on { color: #7cf27c; } .w.on { color: #e8f4ff; border-left-color: #5cc8f0; background-color: #5cc8f014; }
.w .k { width: 30dp; font-size: 14dp; color: #5cc8f0; }
.w .n { flex: 1; white-space: nowrap; overflow: hidden; } .w .n { flex: 1; white-space: nowrap; overflow: hidden; }
.w .a { margin-left: 8dp; } .w .a { margin-left: 8dp; color: #b9d4ea; }
.w.cloak { border-top: 1dp #24405c; margin-top: 4dp; color: #8fb8d8; } .w.cloak { margin-top: 4dp; color: #8fb8d8; }
.w.cloak.on { color: #b98cf2; } .w.cloak.on { color: #b98cf2; border-left-color: #b98cf2; }
.special { color: #f2d23c; font-size: 18dp; margin-top: 6dp; } .special { color: #f2d23c; font-size: 16dp; letter-spacing: 1dp; margin-top: 8dp; }
/* the HUD editor: four layers over the whole screen, each moved / sized as one */ /* the HUD editor: four layers over the whole screen, each moved / sized as one */
.grp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .grp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.grp .fp, .grp .tag { pointer-events: auto; } .grp .fp, .grp .tag { pointer-events: auto; }
@@ -82,7 +111,7 @@
.g3 { transform-origin: 100% 100%; } .g3 { transform-origin: 100% 100%; }
.grp.gone { display: none; } .grp.gone { display: none; }
.grp.faded { opacity: 0.35; } .grp.faded { opacity: 0.35; }
.editing .fp { border-color: #f2b13c; background-color: #2a1f0ae6; drag: drag; cursor: move; } .editing .fp { decorator: ninepatch(fed, fed-i); drag: drag; cursor: move; }
.editing .tag { drag: drag; cursor: move; } .editing .tag { drag: drag; cursor: move; }
.editing .fp * { pointer-events: none; } .editing .fp * { pointer-events: none; }
.tag { position: absolute; padding: 3dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; border-radius: 3dp; white-space: nowrap; } .tag { position: absolute; padding: 3dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; border-radius: 3dp; white-space: nowrap; }
@@ -98,35 +127,41 @@
<body class="hud" data-model="hud" data-class-editing="editing" data-style-opacity="opacity"> <body class="hud" data-model="hud" data-class-editing="editing" data-style-opacity="opacity">
<!-- maneuvers --> <!-- maneuvers -->
<div class="grp g0" data-grp="0" data-style-transform="grp[0].tf" data-class-gone="!grp[0].shown && !editing" data-class-faded="!grp[0].shown && editing"> <div class="grp g0" data-grp="0" data-style-transform="grp[0].tf" data-class-gone="!grp[0].shown && !editing" data-class-faded="!grp[0].shown && editing">
<div class="tag" data-if="editing" style="left: 50%; margin-left: 250dp; top: 40dp;"><span class="eye" data-action="eye" data-arg="0">{{ grp[0].shown ? 'Hide' : 'Show' }}</span>Maneuvers</div> <div class="tag" data-if="editing" style="left: 50%; margin-left: 310dp; top: 40dp;"><span class="eye" data-action="eye" data-arg="0">{{ grp[0].shown ? 'Hide' : 'Show' }}</span>Maneuvers</div>
<div class="fp mans" data-if="maneuvers_shown || editing"> <div class="fp all mans" data-if="maneuvers_shown || editing">
<div class="ib" data-for="m : maneuvers" data-class-on="m.active" data-class-off="m.disabled" data-action="maneuver" data-attr-data-arg="m.key"><img class="ico" data-attr-src="m.icon"/></div> <div class="ib" data-for="m : maneuvers" data-class-on="m.active" data-class-off="m.disabled" data-action="maneuver" data-attr-data-arg="m.key"><img class="ico" data-attr-src="m.icon"/><span class="lb">{{ m.label }}</span></div>
</div> </div>
<div class="fp cruise" data-if="(maneuvers_shown && has_cruise) || editing" data-action="maneuver" data-arg="4"> <div class="fp small cruise" data-if="(maneuvers_shown && has_cruise) || editing" data-action="maneuver" data-arg="4">
<div class="ib" data-class-on="cruise_on"><img class="ico" src="3db:interface/HUD/hud_mnvrwarp.3db"/></div> <div class="ib" data-class-on="cruise_on"><img class="ico" src="3db:interface/HUD/hud_mnvrwarp.3db"/></div>
</div> </div>
</div> </div>
<!-- bottom centre --> <!-- bottom centre -->
<div class="grp g1" data-grp="1" data-style-transform="grp[1].tf" data-class-gone="!grp[1].shown && !editing" data-class-faded="!grp[1].shown && editing"> <div class="grp g1" data-grp="1" data-style-transform="grp[1].tf" data-class-gone="!grp[1].shown && !editing" data-class-faded="!grp[1].shown && editing">
<div class="tag" data-if="editing" style="left: 50%; margin-left: -132dp; bottom: 74dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div> <div class="tag" data-if="editing" style="left: 50%; margin-left: -240dp; bottom: 82dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div>
<div data-if="core || editing"> <div data-if="core || editing">
<div class="fp inner thrust" data-class-low="thrust_low">{{ thrust }}</div> <div class="fp all core">
<div class="fp bars"> <div class="val thrust" data-class-low="thrust_low"><span class="cap">THRUST</span>{{ thrust }}</div>
<div class="bar power"><div class="chips"><div class="sg" data-class-lit="power_n > 0"></div><div class="sg" data-class-lit="power_n > 1"></div><div class="sg" data-class-lit="power_n > 2"></div><div class="sg" data-class-lit="power_n > 3"></div><div class="sg" data-class-lit="power_n > 4"></div><div class="sg" data-class-lit="power_n > 5"></div><div class="sg" data-class-lit="power_n > 6"></div><div class="sg" data-class-lit="power_n > 7"></div><div class="sg" data-class-lit="power_n > 8"></div><div class="sg" data-class-lit="power_n > 9"></div><div class="sg" data-class-lit="power_n > 10"></div><div class="sg" data-class-lit="power_n > 11"></div><div class="sg" data-class-lit="power_n > 12"></div><div class="sg" data-class-lit="power_n > 13"></div><div class="sg" data-class-lit="power_n > 14"></div><div class="sg" data-class-lit="power_n > 15"></div></div></div> <div class="sep"></div>
<div class="bar shield"><div class="chips"><div class="sg" data-class-lit="shield_n > 0"></div><div class="sg" data-class-lit="shield_n > 1"></div><div class="sg" data-class-lit="shield_n > 2"></div><div class="sg" data-class-lit="shield_n > 3"></div><div class="sg" data-class-lit="shield_n > 4"></div><div class="sg" data-class-lit="shield_n > 5"></div><div class="sg" data-class-lit="shield_n > 6"></div><div class="sg" data-class-lit="shield_n > 7"></div><div class="sg" data-class-lit="shield_n > 8"></div><div class="sg" data-class-lit="shield_n > 9"></div><div class="sg" data-class-lit="shield_n > 10"></div><div class="sg" data-class-lit="shield_n > 11"></div><div class="sg" data-class-lit="shield_n > 12"></div><div class="sg" data-class-lit="shield_n > 13"></div><div class="sg" data-class-lit="shield_n > 14"></div><div class="sg" data-class-lit="shield_n > 15"></div></div></div> <div class="bars">
<div class="bar hull"><div class="chips"><div class="sg" data-class-lit="hull_n > 0"></div><div class="sg" data-class-lit="hull_n > 1"></div><div class="sg" data-class-lit="hull_n > 2"></div><div class="sg" data-class-lit="hull_n > 3"></div><div class="sg" data-class-lit="hull_n > 4"></div><div class="sg" data-class-lit="hull_n > 5"></div><div class="sg" data-class-lit="hull_n > 6"></div><div class="sg" data-class-lit="hull_n > 7"></div><div class="sg" data-class-lit="hull_n > 8"></div><div class="sg" data-class-lit="hull_n > 9"></div><div class="sg" data-class-lit="hull_n > 10"></div><div class="sg" data-class-lit="hull_n > 11"></div><div class="sg" data-class-lit="hull_n > 12"></div><div class="sg" data-class-lit="hull_n > 13"></div><div class="sg" data-class-lit="hull_n > 14"></div><div class="sg" data-class-lit="hull_n > 15"></div></div></div> <div class="brow power"><span class="l">POWER</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="power_n > 0"></div><div class="sg" data-class-lit="power_n > 1"></div><div class="sg" data-class-lit="power_n > 2"></div><div class="sg" data-class-lit="power_n > 3"></div><div class="sg" data-class-lit="power_n > 4"></div><div class="sg" data-class-lit="power_n > 5"></div><div class="sg" data-class-lit="power_n > 6"></div><div class="sg" data-class-lit="power_n > 7"></div><div class="sg" data-class-lit="power_n > 8"></div><div class="sg" data-class-lit="power_n > 9"></div><div class="sg" data-class-lit="power_n > 10"></div><div class="sg" data-class-lit="power_n > 11"></div><div class="sg" data-class-lit="power_n > 12"></div><div class="sg" data-class-lit="power_n > 13"></div><div class="sg" data-class-lit="power_n > 14"></div><div class="sg" data-class-lit="power_n > 15"></div></div></div></div>
<div class="brow shield"><span class="l">SHIELD</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="shield_n > 0"></div><div class="sg" data-class-lit="shield_n > 1"></div><div class="sg" data-class-lit="shield_n > 2"></div><div class="sg" data-class-lit="shield_n > 3"></div><div class="sg" data-class-lit="shield_n > 4"></div><div class="sg" data-class-lit="shield_n > 5"></div><div class="sg" data-class-lit="shield_n > 6"></div><div class="sg" data-class-lit="shield_n > 7"></div><div class="sg" data-class-lit="shield_n > 8"></div><div class="sg" data-class-lit="shield_n > 9"></div><div class="sg" data-class-lit="shield_n > 10"></div><div class="sg" data-class-lit="shield_n > 11"></div><div class="sg" data-class-lit="shield_n > 12"></div><div class="sg" data-class-lit="shield_n > 13"></div><div class="sg" data-class-lit="shield_n > 14"></div><div class="sg" data-class-lit="shield_n > 15"></div></div></div></div>
<div class="brow hull"><span class="l">HULL</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="hull_n > 0"></div><div class="sg" data-class-lit="hull_n > 1"></div><div class="sg" data-class-lit="hull_n > 2"></div><div class="sg" data-class-lit="hull_n > 3"></div><div class="sg" data-class-lit="hull_n > 4"></div><div class="sg" data-class-lit="hull_n > 5"></div><div class="sg" data-class-lit="hull_n > 6"></div><div class="sg" data-class-lit="hull_n > 7"></div><div class="sg" data-class-lit="hull_n > 8"></div><div class="sg" data-class-lit="hull_n > 9"></div><div class="sg" data-class-lit="hull_n > 10"></div><div class="sg" data-class-lit="hull_n > 11"></div><div class="sg" data-class-lit="hull_n > 12"></div><div class="sg" data-class-lit="hull_n > 13"></div><div class="sg" data-class-lit="hull_n > 14"></div><div class="sg" data-class-lit="hull_n > 15"></div></div></div></div>
</div>
<div class="sep"></div>
<div class="val speed"><span class="cap">SPEED</span>{{ speed }}<span class="u">m/s</span></div>
</div> </div>
<div class="fp inner speed">{{ speed }}</div>
</div> </div>
</div> </div>
<!-- bottom left: contacts / target --> <!-- bottom left: contacts / target -->
<div class="grp g2" data-grp="2" data-style-transform="grp[2].tf" data-class-gone="!grp[2].shown && !editing" data-class-faded="!grp[2].shown && editing"> <div class="grp g2" data-grp="2" data-style-transform="grp[2].tf" data-class-gone="!grp[2].shown && !editing" data-class-faded="!grp[2].shown && editing">
<div class="tag" data-if="editing" style="left: 46dp; bottom: 350dp;"><span class="eye" data-action="eye" data-arg="2">{{ grp[2].shown ? 'Hide' : 'Show' }}</span>Contacts &amp; target</div> <div class="tag" data-if="editing" style="left: 8dp; bottom: 340dp;"><span class="eye" data-action="eye" data-arg="2">{{ grp[2].shown ? 'Hide' : 'Show' }}</span>Contacts &amp; target</div>
<div data-if="panel || editing"> <div data-if="panel || editing">
<div class="fp lhead"> <div class="fp lhead">
<span class="ttl">{{ mode == 1 ? 'TARGET' : 'CONTACTS' }}<span class="sl">\\\</span></span>
<span class="sp"></span>
<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 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>
<div class="fp lbody"> <div class="fp lbody">
@@ -135,8 +170,8 @@
<div data-if="has_target"> <div data-if="has_target">
<div class="tname">{{ target_name }}</div> <div class="tname">{{ target_name }}</div>
<div class="tsub">{{ target_sub }} {{ target_rank }} {{ target_range }}</div> <div class="tsub">{{ target_sub }} {{ target_rank }} {{ target_range }}</div>
<div class="tbar hull"><span class="l">Hull</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="target_hull_n > 0"></div><div class="sg" data-class-lit="target_hull_n > 1"></div><div class="sg" data-class-lit="target_hull_n > 2"></div><div class="sg" data-class-lit="target_hull_n > 3"></div><div class="sg" data-class-lit="target_hull_n > 4"></div><div class="sg" data-class-lit="target_hull_n > 5"></div><div class="sg" data-class-lit="target_hull_n > 6"></div><div class="sg" data-class-lit="target_hull_n > 7"></div><div class="sg" data-class-lit="target_hull_n > 8"></div><div class="sg" data-class-lit="target_hull_n > 9"></div><div class="sg" data-class-lit="target_hull_n > 10"></div><div class="sg" data-class-lit="target_hull_n > 11"></div><div class="sg" data-class-lit="target_hull_n > 12"></div><div class="sg" data-class-lit="target_hull_n > 13"></div><div class="sg" data-class-lit="target_hull_n > 14"></div><div class="sg" data-class-lit="target_hull_n > 15"></div></div></div></div> <div class="tbar hull"><span class="l">HULL</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="target_hull_n > 0"></div><div class="sg" data-class-lit="target_hull_n > 1"></div><div class="sg" data-class-lit="target_hull_n > 2"></div><div class="sg" data-class-lit="target_hull_n > 3"></div><div class="sg" data-class-lit="target_hull_n > 4"></div><div class="sg" data-class-lit="target_hull_n > 5"></div><div class="sg" data-class-lit="target_hull_n > 6"></div><div class="sg" data-class-lit="target_hull_n > 7"></div><div class="sg" data-class-lit="target_hull_n > 8"></div><div class="sg" data-class-lit="target_hull_n > 9"></div><div class="sg" data-class-lit="target_hull_n > 10"></div><div class="sg" data-class-lit="target_hull_n > 11"></div><div class="sg" data-class-lit="target_hull_n > 12"></div><div class="sg" data-class-lit="target_hull_n > 13"></div><div class="sg" data-class-lit="target_hull_n > 14"></div><div class="sg" data-class-lit="target_hull_n > 15"></div></div></div></div>
<div class="tbar shield" data-if="target_has_shield"><span class="l">Shield</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="target_shield_n > 0"></div><div class="sg" data-class-lit="target_shield_n > 1"></div><div class="sg" data-class-lit="target_shield_n > 2"></div><div class="sg" data-class-lit="target_shield_n > 3"></div><div class="sg" data-class-lit="target_shield_n > 4"></div><div class="sg" data-class-lit="target_shield_n > 5"></div><div class="sg" data-class-lit="target_shield_n > 6"></div><div class="sg" data-class-lit="target_shield_n > 7"></div><div class="sg" data-class-lit="target_shield_n > 8"></div><div class="sg" data-class-lit="target_shield_n > 9"></div><div class="sg" data-class-lit="target_shield_n > 10"></div><div class="sg" data-class-lit="target_shield_n > 11"></div><div class="sg" data-class-lit="target_shield_n > 12"></div><div class="sg" data-class-lit="target_shield_n > 13"></div><div class="sg" data-class-lit="target_shield_n > 14"></div><div class="sg" data-class-lit="target_shield_n > 15"></div></div></div></div> <div class="tbar shield" data-if="target_has_shield"><span class="l">SHIELD</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="target_shield_n > 0"></div><div class="sg" data-class-lit="target_shield_n > 1"></div><div class="sg" data-class-lit="target_shield_n > 2"></div><div class="sg" data-class-lit="target_shield_n > 3"></div><div class="sg" data-class-lit="target_shield_n > 4"></div><div class="sg" data-class-lit="target_shield_n > 5"></div><div class="sg" data-class-lit="target_shield_n > 6"></div><div class="sg" data-class-lit="target_shield_n > 7"></div><div class="sg" data-class-lit="target_shield_n > 8"></div><div class="sg" data-class-lit="target_shield_n > 9"></div><div class="sg" data-class-lit="target_shield_n > 10"></div><div class="sg" data-class-lit="target_shield_n > 11"></div><div class="sg" data-class-lit="target_shield_n > 12"></div><div class="sg" data-class-lit="target_shield_n > 13"></div><div class="sg" data-class-lit="target_shield_n > 14"></div><div class="sg" data-class-lit="target_shield_n > 15"></div></div></div></div>
<div class="tbtns"> <div class="tbtns">
<div class="ib" data-for="b : target_buttons" data-action="tbutton" data-attr-data-arg="b.key"><img class="ico" data-attr-src="b.icon"/></div> <div class="ib" data-for="b : target_buttons" data-action="tbutton" data-attr-data-arg="b.key"><img class="ico" data-attr-src="b.icon"/></div>
</div> </div>
@@ -148,12 +183,17 @@
</div> </div>
<div class="rows"> <div class="rows">
<div class="c" data-for="c : contacts" data-style-color="c.colour" data-action="row" data-ctx="contact" data-attr-data-arg="c.key"> <div class="c" data-for="c : contacts" data-style-color="c.colour" data-action="row" data-ctx="contact" data-attr-data-arg="c.key">
<img data-attr-src="c.icon" data-style-image-color="c.colour"/><span class="r">{{ c.range }}</span><span class="n">{{ c.name }}</span> <img data-attr-src="c.icon" data-style-image-color="c.colour"/><span class="n">{{ c.name }}</span><span class="r">{{ c.range }}</span>
</div> </div>
</div> </div>
<div class="scroll"> <div class="sbar" data-if="more_up || more_down">
<div class="btn" data-if="more_up" data-action="up">&#9650;</div> <div class="ar" data-class-off="!more_up" data-action="up">&#9650;</div>
<div class="btn" data-if="more_down" data-action="down">&#9660;</div> <div class="track">
<div class="rail"></div>
<div class="zu" data-action="up"></div><div class="zd" data-action="down"></div>
<div class="thumb" data-style-top="thumb_top" data-style-height="thumb_size"></div>
</div>
<div class="ar" data-class-off="!more_down" data-action="down">&#9660;</div>
</div> </div>
</div> </div>
</div> </div>
@@ -163,18 +203,20 @@
<!-- bottom right: the player's ship --> <!-- bottom right: the player's ship -->
<div class="grp g3" data-grp="3" data-style-transform="grp[3].tf" data-class-gone="!grp[3].shown && !editing" data-class-faded="!grp[3].shown && editing"> <div class="grp g3" data-grp="3" data-style-transform="grp[3].tf" data-class-gone="!grp[3].shown && !editing" data-class-faded="!grp[3].shown && editing">
<div class="tag" data-if="editing" style="right: 46dp; bottom: 350dp;"><span class="eye" data-action="eye" data-arg="3">{{ grp[3].shown ? 'Hide' : 'Show' }}</span>Weapons &amp; equipment</div> <div class="tag" data-if="editing" style="right: 8dp; bottom: 340dp;"><span class="eye" data-action="eye" data-arg="3">{{ grp[3].shown ? 'Hide' : 'Show' }}</span>Weapons &amp; equipment</div>
<div data-if="status || editing"> <div data-if="status || editing">
<div class="fp rhead"> <div class="fp rhead">
<span class="ttl">WEAPONS<span class="sl">\\\</span></span>
<span class="sp"></span>
<div class="ib" data-if="has_repair" data-action="repair"><img class="ico" src="3db:interface/hud/HUD_repairactivate.3db"/></div><span class="cnt" data-if="has_repair">{{ repair }}</span> <div class="ib" data-if="has_repair" data-action="repair"><img class="ico" src="3db:interface/hud/HUD_repairactivate.3db"/></div><span class="cnt" data-if="has_repair">{{ repair }}</span>
<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="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 class="ib" data-if="loot" data-action="loot"><img class="ico" src="3db:interface/HUD/HUD_loot_bw.3db"/></div>
</div> </div>
<div class="fp rbody"> <div class="fp rbody">
<div class="w" data-for="w : weapons" data-class-on="w.active" data-action="weapon" data-attr-data-arg="w.key"> <div class="w" data-for="w : weapons" data-class-on="w.active" data-action="weapon" data-attr-data-arg="w.key">
<span class="n">{{ w.key + 1 }} {{ w.name }}</span><span class="a">{{ w.ammo }}</span> <span class="k">{{ w.key + 1 }}</span><span class="n">{{ w.name }}</span><span class="a">{{ w.ammo }}</span>
</div> </div>
<div class="w cloak" data-if="has_cloak" data-class-on="cloak_on" data-action="cloak"><span class="n">{{ cloak_name }}</span><span class="a">{{ cloak_on ? 'ON' : 'OFF' }}</span></div> <div class="w cloak" data-if="has_cloak" data-class-on="cloak_on" data-action="cloak"><span class="k"></span><span class="n">{{ cloak_name }}</span><span class="a">{{ cloak_on ? 'ON' : 'OFF' }}</span></div>
<div class="special" data-if="special != ''">{{ special }}</div> <div class="special" data-if="special != ''">{{ special }}</div>
</div> </div>
</div> </div>
Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

+4 -4
View File
@@ -6,7 +6,7 @@
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; } .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.colm.list-col { flex: 0 0 38%; margin-right: 18dp; } .colm.list-col { flex: 0 0 38%; margin-right: 18dp; }
.list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; } .list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.inv { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; } .inv { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
.inv:hover { background-color: #122033; } .inv:hover { background-color: #122033; }
.inv.selected { background-color: #f2b13c24; border-left-color: #f2b13c; } .inv.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
@@ -15,8 +15,8 @@
.inv .n { font-size: 14dp; } .inv .n { font-size: 14dp; }
.inv .note { font-size: 12dp; color: #8197ad; } .inv .note { font-size: 12dp; color: #8197ad; }
.inv .c { font-family: "IBM Plex Mono"; color: #8197ad; margin-left: 8dp; } .inv .c { font-family: "IBM Plex Mono"; color: #8197ad; margin-left: 8dp; }
#ship { flex: 1; min-height: 200dp; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); margin-bottom: 12dp; } #ship { flex: 1; min-height: 200dp; decorator: vertical-gradient(#0a1424 #05080d); margin-bottom: 12dp; }
.card { height: 180dp; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .card { height: 180dp; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; background-color: #5cc8f008; }
.pick-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; } .pick-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
.pick-head img { width: 40dp; height: 40dp; margin-right: 12dp; } .pick-head img { width: 40dp; height: 40dp; margin-right: 12dp; }
.pick-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; } .pick-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
@@ -28,7 +28,7 @@
<body class="window" data-model="inventory"> <body class="window" data-model="inventory">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/> <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
<span class="title">INVENTORY</span> <span class="title">INVENTORY</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Hold <span class="v">{{ hold }}</span></span> <span class="chip">Hold <span class="v">{{ hold }}</span></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
+3 -3
View File
@@ -5,13 +5,13 @@
<style> <style>
body.window.lg { left: 50%; margin-left: -460dp; top: 12%; width: 920dp; height: 600dp; } body.window.lg { left: 50%; margin-left: -460dp; top: 12%; width: 920dp; height: 600dp; }
.cols { flex: 1; display: flex; flex-direction: row; min-height: 0; } .cols { flex: 1; display: flex; flex-direction: row; min-height: 0; }
.savelist { flex: 1; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .savelist { flex: 1; overflow-y: auto; background-color: #5cc8f008; }
.sv { display: flex; flex-direction: row; align-items: center; padding: 9dp 12dp; border-bottom: 1dp #ffffff08; border-left: 3dp #00000000; } .sv { display: flex; flex-direction: row; align-items: center; padding: 9dp 12dp; border-bottom: 1dp #ffffff08; border-left: 3dp #00000000; }
.sv:hover { background-color: #122033; } .sv:hover { background-color: #122033; }
.sv.sel { border-left-color: #f2b13c; background-color: #f2b13c1a; } .sv.sel { border-left-color: #f2b13c; background-color: #f2b13c1a; }
.sv .n { flex: 1; font-size: 16dp; white-space: nowrap; overflow: hidden; } .sv .n { flex: 1; font-size: 16dp; white-space: nowrap; overflow: hidden; }
.sv .t { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-left: 12dp; } .sv .t { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-left: 12dp; }
.det { width: 300dp; margin-left: 16dp; padding: 14dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .det { width: 300dp; margin-left: 16dp; padding: 14dp; background-color: #5cc8f008; }
.det .row { display: flex; flex-direction: row; padding: 7dp 0; border-bottom: 1dp #ffffff08; } .det .row { display: flex; flex-direction: row; padding: 7dp 0; border-bottom: 1dp #ffffff08; }
.det .row .k { width: 90dp; color: #8197ad; font-size: 13dp; text-transform: uppercase; letter-spacing: 1dp; } .det .row .k { width: 90dp; color: #8197ad; font-size: 13dp; text-transform: uppercase; letter-spacing: 1dp; }
.det .row .v { flex: 1; font-size: 15dp; } .det .row .v { flex: 1; font-size: 15dp; }
@@ -21,7 +21,7 @@
</head> </head>
<body class="window lg" data-model="loadgame"> <body class="window lg" data-model="loadgame">
<div class="win-head"> <div class="win-head">
<span class="title">LOAD GAME</span> <span class="title">LOAD GAME</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Saves <span class="v">{{ saves.size }}</span></span> <span class="chip">Saves <span class="v">{{ saves.size }}</span></span>
</div> </div>
+1 -1
View File
@@ -4,7 +4,7 @@
<link type="text/rcss" href="rem.rcss"/> <link type="text/rcss" href="rem.rcss"/>
<style> <style>
body.loaddoc { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; background-color: transparent; pointer-events: none; } body.loaddoc { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; background-color: transparent; pointer-events: none; }
.load { position: absolute; left: 50%; bottom: 60dp; transform: translateX(-50%); width: 420dp; padding: 10dp 16dp 12dp 16dp; background-color: #070b12d9; border: 2dp #3d6d96; border-top: 2dp #f2b13c; border-radius: 4dp; } .load { position: absolute; left: 50%; bottom: 60dp; transform: translateX(-50%); width: 420dp; padding: 10dp 16dp 12dp 16dp; decorator: ninepatch(fw, fw-i); }
.load .t { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 18dp; letter-spacing: 4dp; color: #dbe6f0; text-align: center; margin-bottom: 8dp; } .load .t { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 18dp; letter-spacing: 4dp; color: #dbe6f0; text-align: center; margin-bottom: 8dp; }
.load .track { position: relative; height: 4dp; background-color: #24405c; border-radius: 2dp; } .load .track { position: relative; height: 4dp; background-color: #24405c; border-radius: 2dp; }
.load .sweep { position: absolute; top: 0; width: 25%; height: 4dp; background-color: #f2b13c; border-radius: 2dp; } .load .sweep { position: absolute; top: 0; width: 25%; height: 4dp; background-color: #f2b13c; border-radius: 2dp; }
+2 -2
View File
@@ -8,7 +8,7 @@
.colm.list { flex: 1; } .colm.list { flex: 1; }
.colm.side { flex: 0 0 36%; margin-left: 18dp; } .colm.side { flex: 0 0 36%; margin-left: 18dp; }
.table .c2 { width: 40%; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; text-align: right; } .table .c2 { width: 40%; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; text-align: right; }
.detail { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 12dp; } .detail { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f008; }
.detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; margin-bottom: 6dp; } .detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; margin-bottom: 6dp; }
.detail .s { white-space: pre; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.6; } .detail .s { white-space: pre; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.6; }
.namebox { margin-bottom: 12dp; } .namebox { margin-bottom: 12dp; }
@@ -18,7 +18,7 @@
</head> </head>
<body class="window medium" data-model="loadsave"> <body class="window medium" data-model="loadsave">
<div class="win-head"> <div class="win-head">
<span class="title">{{ title }}</span> <span class="title">{{ title }}</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Saves <span class="v">{{ saves.size }}</span></span> <span class="chip">Saves <span class="v">{{ saves.size }}</span></span>
</div> </div>
+2 -2
View File
@@ -22,8 +22,8 @@
.brand { margin-top: 30dp; margin-bottom: 30dp; } .brand { margin-top: 30dp; margin-bottom: 30dp; }
.brand .t { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 46dp; letter-spacing: 6dp; color: #dbe6f0; } .brand .t { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 46dp; letter-spacing: 6dp; color: #dbe6f0; }
.brand .s { font-family: "Saira SemiCondensed"; font-size: 15dp; letter-spacing: 4dp; text-transform: uppercase; color: #f2b13c; margin-top: -4dp; } .brand .s { font-family: "Saira SemiCondensed"; font-size: 15dp; letter-spacing: 4dp; text-transform: uppercase; color: #f2b13c; margin-top: -4dp; }
.entry { padding: 13dp 16dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #0d1622; } .entry { padding: 13dp 16dp; margin-bottom: 8dp; border-left: 3dp #3d6d96; background-color: #5cc8f008; }
.entry:hover { border-color: #5cc8f0; background-color: #122033; } .entry:hover { border-left-color: #5cc8f0; background-color: #5cc8f010; }
.entry.primary { border-left-color: #f2b13c; } .entry.primary { border-left-color: #f2b13c; }
.entry .l { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; letter-spacing: 2dp; text-transform: uppercase; } .entry .l { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; letter-spacing: 2dp; text-transform: uppercase; }
.entry.primary .l { color: #f2b13c; } .entry.primary .l { color: #f2b13c; }
+6 -6
View File
@@ -6,7 +6,7 @@
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; } .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
.goods { flex: 0 0 31%; display: flex; flex-direction: column; min-height: 0; margin-right: 18dp; } .goods { flex: 0 0 31%; display: flex; flex-direction: column; min-height: 0; margin-right: 18dp; }
.detail { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; } .detail { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }
.list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; } .list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.g { display: flex; flex-direction: row; align-items: center; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; font-size: 14dp; } .g { display: flex; flex-direction: row; align-items: center; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; font-size: 14dp; }
.g:hover { background-color: #122033; } .g:hover { background-color: #122033; }
.g.selected { background-color: #f2b13c24; border-left-color: #f2b13c; } .g.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
@@ -21,8 +21,8 @@
.ghead .v { width: 62dp; text-align: right; } .ghead .v { width: 62dp; text-align: right; }
.tools { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; } .tools { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
.tools input { flex: 1; margin-right: 8dp; } .tools input { flex: 1; margin-right: 8dp; }
.toggle { font-size: 13dp; color: #8197ad; padding: 4dp 8dp; border: 1dp #24405c; border-radius: 3dp; } .toggle { font-size: 13dp; color: #8197ad; padding: 4dp 8dp; border-bottom: 2dp #00000000; }
.toggle.on { color: #f2b13c; border-color: #f2b13c; } .toggle.on { color: #f2b13c; border-bottom-color: #f2b13c; }
.toggle:hover { color: #5cc8f0; } .toggle:hover { color: #5cc8f0; }
.ihead { display: flex; flex-direction: row; align-items: flex-end; margin-bottom: 8dp; } .ihead { display: flex; flex-direction: row; align-items: flex-end; margin-bottom: 8dp; }
.ihead .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; color: #dbe6f0; flex: 1; } .ihead .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; color: #dbe6f0; flex: 1; }
@@ -31,7 +31,7 @@
.chartbar .toggle { margin-right: 6dp; } .chartbar .toggle { margin-right: 6dp; }
.legend { margin-left: auto; font-size: 12dp; color: #8197ad; } .legend { margin-left: auto; font-size: 12dp; color: #8197ad; }
.legend .k { display: inline-block; width: 10dp; height: 10dp; margin: 0 4dp 0 12dp; border-radius: 2dp; } .legend .k { display: inline-block; width: 10dp; height: 10dp; margin: 0 4dp 0 12dp; border-radius: 2dp; }
.chart { position: relative; height: 190dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-left: 76dp; } .chart { position: relative; height: 190dp; margin-left: 76dp; background-color: #5cc8f008; }
.chart .grid { position: absolute; left: 0; right: 0; height: 1dp; background-color: #24405c66; } .chart .grid { position: absolute; left: 0; right: 0; height: 1dp; background-color: #24405c66; }
.chart .col { position: absolute; top: 0; bottom: 0; } .chart .col { position: absolute; top: 0; bottom: 0; }
.chart .col:hover { background-color: #5cc8f014; } .chart .col:hover { background-color: #5cc8f014; }
@@ -51,7 +51,7 @@
.book .table { flex: 1; height: 160dp; } .book .table { flex: 1; height: 160dp; }
.table .c2 { width: 60dp; text-align: right; font-family: "IBM Plex Mono"; } .table .c2 { width: 60dp; text-align: right; font-family: "IBM Plex Mono"; }
.table .mine .c1 { color: #5cc8f0; } .table .mine .c1 { color: #5cc8f0; }
.panel { margin-top: 12dp; padding: 10dp 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; } .panel { margin-top: 12dp; padding: 10dp 12dp; background-color: #5cc8f010; }
.panel .row2 { display: flex; flex-direction: row; align-items: center; } .panel .row2 { display: flex; flex-direction: row; align-items: center; }
.panel .label { width: 120dp; } .panel .label { width: 120dp; }
.panel input.text { width: 120dp; margin-right: 10dp; } .panel input.text { width: 120dp; margin-right: 10dp; }
@@ -71,7 +71,7 @@
<body class="window" data-model="market"> <body class="window" data-model="market">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/> <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/>
<span class="title">MARKET</span> <span class="title">MARKET</span><span class="sl">\\\</span>
<span class="loc">{{ here }}</span> <span class="loc">{{ here }}</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">{{ fees }}<div class="tip">Broker fee: from your bank when you place an order or give it a new price. Sales tax: from what you get for a sale. Orders end after their days: goods back into the depot, escrow back to the bank.</div></span> <span class="chip">{{ fees }}<div class="tip">Broker fee: from your bank when you place an order or give it a new price. Sales tax: from what you get for a sale. Orders end after their days: goods back into the depot, escrow back to the bank.</div></span>
+6 -6
View File
@@ -7,9 +7,9 @@
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.colm.side { flex: 0 0 46%; margin-right: 18dp; } .colm.side { flex: 0 0 46%; margin-right: 18dp; }
.list { flex: 1; overflow-y: auto; } .list { flex: 1; overflow-y: auto; }
.offer { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; } .offer { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
.offer:hover { border-color: #5cc8f0; } .offer:hover { border-left-color: #5cc8f0; }
.offer.selected { border-color: #f2b13c; } .offer.selected { border-left-color: #f2b13c; }
.offer img { width: 40dp; height: 40dp; margin-right: 12dp; } .offer img { width: 40dp; height: 40dp; margin-right: 12dp; }
.offer .mid { flex: 1; min-width: 0; } .offer .mid { flex: 1; min-width: 0; }
.offer .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; } .offer .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; }
@@ -20,8 +20,8 @@
.brief-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; } .brief-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; }
.brief-head .r { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; } .brief-head .r { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
/* the offer's picture (NN_MissionVendor's video screen) */ /* the offer's picture (NN_MissionVendor's video screen) */
.photo { display: block; width: 280dp; height: 280dp; margin: 0 0 10dp 0; border: 2dp #3d6d96; border-radius: 3dp; } .photo { display: block; width: 280dp; height: 280dp; margin: 0 0 10dp 0; }
.briefing { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .briefing { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; background-color: #5cc8f008; }
.empty-board { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .empty-board { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.empty-board img { width: 64dp; height: 64dp; margin-bottom: 12dp; opacity: 0.6; } .empty-board img { width: 64dp; height: 64dp; margin-bottom: 12dp; opacity: 0.6; }
</style> </style>
@@ -29,7 +29,7 @@
<body class="window medium" data-model="missionboard"> <body class="window medium" data-model="missionboard">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/> <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
<span class="title">MISSION BOARD</span> <span class="title">MISSION BOARD</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Offers <span class="v">{{ all_count }}</span></span> <span class="chip">Offers <span class="v">{{ all_count }}</span></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
+12 -8
View File
@@ -3,27 +3,31 @@
<title>Mission log</title> <title>Mission log</title>
<link type="text/rcss" href="rem.rcss"/> <link type="text/rcss" href="rem.rcss"/>
<style> <style>
/* accents at the left instead of boxes in the window's box */
.cap { display: block; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 2dp; color: #8fb3d0; margin-bottom: 8dp; }
.cap .sl { margin-left: 8dp; color: #5cc8f0; letter-spacing: -1dp; }
.colm { flex: 1; display: flex; flex-direction: column; min-height: 0; } .colm { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.now { border: 1dp #f2b13c; border-radius: 3dp; background-color: #f2b13c14; padding: 12dp 14dp; margin-bottom: 14dp; } .now { border-left: 3dp #f2b13c; background-color: #f2b13c14; padding: 10dp 14dp; margin-bottom: 18dp; }
.now .t { font-size: 16dp; line-height: 1.45; white-space: pre-line; margin-top: 4dp; } .now .cap { color: #f2b13c; margin-bottom: 4dp; }
.now .t { font-size: 16dp; line-height: 1.45; white-space: pre-line; color: #e8f4ff; }
.list { flex: 1; overflow-y: auto; } .list { flex: 1; overflow-y: auto; }
.entry { padding: 8dp 12dp; margin-bottom: 6dp; border-left: 2dp #24405c; white-space: pre-line; line-height: 1.4; font-size: 14dp; color: #8197ad; } .entry { padding: 8dp 12dp; border-left: 3dp #00000000; border-bottom: 1dp #24405c66; white-space: pre-line; line-height: 1.4; font-size: 14dp; color: #8197ad; }
.entry.objective { border-left-color: #5cc8f0; color: #dbe6f0; background-color: #122033; } .entry.objective { border-left-color: #5cc8f0; color: #dbe6f0; background-color: #5cc8f00f; }
</style> </style>
</head> </head>
<body class="window medium" data-model="missionlog"> <body class="window medium" data-model="missionlog">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/> <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
<span class="title">MISSION LOG</span> <span class="title">MISSION LOG</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Entries <span class="v">{{ entries.size }}</span></span> <span class="chip">ENTRIES <span class="v">{{ entries.size }}</span></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
</div> </div>
<div class="win-main"> <div class="win-main">
<div class="content"> <div class="content">
<div class="colm"> <div class="colm">
<div class="now" data-if="current != ''"><div class="label">Current objective</div><div class="t">{{ current }}</div></div> <div class="now" data-if="current != ''"><span class="cap">CURRENT OBJECTIVE</span><div class="t">{{ current }}</div></div>
<h3 style="margin-bottom: 8dp;">History</h3> <span class="cap">HISTORY<span class="sl">\\\</span></span>
<div class="list"> <div class="list">
<div class="hint" data-if="entries.size == 0">Nothing logged yet.</div> <div class="hint" data-if="entries.size == 0">Nothing logged yet.</div>
<div class="entry" data-for="e : entries" data-class-objective="e.objective">{{ e.text }}</div> <div class="entry" data-for="e : entries" data-class-objective="e.objective">{{ e.text }}</div>
+2 -2
View File
@@ -4,7 +4,7 @@
<link type="text/rcss" href="rem.rcss"/> <link type="text/rcss" href="rem.rcss"/>
<style> <style>
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.panel { border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 12dp; margin-bottom: 12dp; } .panel { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f010; }
.panel .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; margin-bottom: 4dp; } .panel .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; margin-bottom: 4dp; }
.row .c1 img { width: 16dp; height: 16dp; margin-right: 8dp; } .row .c1 img { width: 16dp; height: 16dp; margin-right: 8dp; }
</style> </style>
@@ -12,7 +12,7 @@
<body class="window medium" data-model="missions"> <body class="window medium" data-model="missions">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/> <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
<span class="title">MISSIONS</span> <span class="title">MISSIONS</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Story <span class="v">{{ story.size }}</span></span> <span class="chip">Story <span class="v">{{ story.size }}</span></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
+9 -8
View File
@@ -14,19 +14,20 @@
display: block; display: block;
background-color: transparent; background-color: transparent;
} }
.navbar { display: flex; flex-direction: row; align-items: center; padding: 3dp 6dp; background-color: #070b12e6; border: 2dp #3d6d96; border-radius: 4dp; } /* in the flight HUD's design: one frame with cut corners (rem.rcss, hudframes), no box per button */
.nb { display: flex; flex-direction: row; align-items: center; padding: 4dp 10dp 4dp 6dp; margin: 0 2dp; border: 1dp #00000000; border-radius: 3dp; } .navbar { display: flex; flex-direction: row; align-items: center; height: 48dp; box-sizing: border-box; padding: 0 18dp; decorator: ninepatch(fb, fb-i); }
.nb:hover { border-color: #5cc8f0; background-color: #122033; } .nb { display: flex; flex-direction: row; align-items: center; height: 36dp; padding: 0 12dp 0 8dp; margin: 0 1dp; border-radius: 3dp; }
.nb.active { border-color: #f2b13c; background-color: #f2b13c1f; } .nb:hover { background-color: #5cc8f01a; }
.nb.active { background-color: #f2b13c1f; }
.nb.disabled { opacity: 0.4; } .nb.disabled { opacity: 0.4; }
.nb.disabled:hover { border-color: #00000000; background-color: transparent; } .nb.disabled:hover { background-color: transparent; }
.nb img { width: 28dp; height: 28dp; margin-right: 6dp; } .nb img { width: 28dp; height: 28dp; margin-right: 6dp; }
.nb span { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1dp; text-transform: uppercase; color: #dbe6f0; } .nb span { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #e8f4ff; }
.nb.active span { color: #f2b13c; } .nb.active span { color: #f2b13c; }
.nb:hover span { color: #5cc8f0; } .nb:hover span { color: #5cc8f0; }
.nb.tab img { width: 22dp; height: 22dp; } .nb.tab img { width: 22dp; height: 22dp; }
.nb.tab span { font-size: 12dp; color: #8197ad; } .nb.tab span { font-size: 12dp; color: #b9d4ea; }
.sep { width: 1dp; height: 28dp; background-color: #3d6d96; margin: 0 8dp; } .sep { width: 1dp; height: 28dp; background-color: #2b6f9e; margin: 0 8dp; }
</style> </style>
</head> </head>
<body class="navstrip" data-model="navbar"> <body class="navstrip" data-model="navbar">
+13 -10
View File
@@ -6,10 +6,13 @@
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; } .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 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 window's colour is laid around it instead of under the whole body */
body.window { background-color: transparent; } /* the frame's edge alone over the whole window (hudframes fo); the head and the side bring
.win-head { background-color: #0d1622eb; } 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; } .win-main .content { padding: 0; }
.mapframe { display: flex; flex-direction: column; border: 18dp #0d1622eb; border-right-width: 0; border-bottom-width: 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; } .mapfill { flex: 1; min-height: 18dp; background-color: #0d1622eb; }
#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; } #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 */ /* uncharted space has no map art: the whole box dark, never the scene through it */
@@ -18,19 +21,19 @@
#map { position: relative; width: 760dp; height: 760dp; overflow: hidden; border: 1dp #24405c; cursor: pointer; background-color: #03070d; transition: background-color 0.3s cubic-out; } #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 */ /* the map art (drawn under the window) shows once the window stands: it fades in inside the box */
#map.revealed { background-color: #03070d00; } #map.revealed { background-color: #03070d00; }
.side { flex: 1; margin-left: 0; padding: 18dp; background-color: #0d1622eb; display: flex; flex-direction: column; min-width: 0; } .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 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10dp; }
.tbar .btn { display: block; margin: 0 6dp 6dp 0; } .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; } .sysname { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 24dp; letter-spacing: 2dp; margin-bottom: 8dp; }
.pcard { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 10dp; } .pcard { padding: 12dp; margin-bottom: 10dp; background-color: #5cc8f008; }
.pcard .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; } .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 .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; margin-bottom: 8dp; }
.pcard .btn { margin: 0 6dp 6dp 0; } .pcard .btn { margin: 0 6dp 6dp 0; }
.pcard .acts { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; } .pcard .acts { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.pcard .acts .btn { display: block; } .pcard .acts .btn { display: block; }
.objs { padding: 10dp 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 10dp; } .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; } .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; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .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 { 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 .btn { margin: 0 0 0 4dp; padding: 2dp 10dp; }
.zoom .v { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-right: 4dp; } .zoom .v { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-right: 4dp; }
@@ -51,7 +54,7 @@
.system .s { left: -7dp; top: -7dp; width: 14dp; height: 14dp; border-radius: 7dp; background-color: #f2c94c; border: 2dp #3d6d96; } .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; } .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; } .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; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; max-height: 220dp; overflow-y: auto; } .hits, .marks { margin-bottom: 10dp; max-height: 220dp; overflow-y: auto; background-color: #5cc8f008; }
.marks h3 { margin: 6dp 10dp 2dp 10dp; } .marks h3 { margin: 6dp 10dp 2dp 10dp; }
.hit { display: flex; flex-direction: row; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; } .hit { display: flex; flex-direction: row; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; }
.hit:hover { background-color: #122033; color: #5cc8f0; } .hit:hover { background-color: #122033; color: #5cc8f0; }
@@ -73,7 +76,7 @@
.sel .ring2 { position: absolute; left: -12dp; top: -12dp; width: 20dp; height: 20dp; border: 1dp #f2b13c; border-radius: 12dp; } .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) */ /* the tools at the click point (as the classic map's ring of tools) */
.pop { position: absolute; width: 150dp; padding: 4dp; background-color: #070b12f2; border: 2dp #3d6d96; border-radius: 3dp; } .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 .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 { padding: 4dp 6dp; font-size: 12dp; border-radius: 2dp; }
.pop .pb:hover { background-color: #122033; color: #5cc8f0; } .pop .pb:hover { background-color: #122033; color: #5cc8f0; }
@@ -96,7 +99,7 @@
<body class="window" data-model="navmap"> <body class="window" data-model="navmap">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Map.3db"/> <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Map.3db"/>
<span class="title">{{ briefing ? 'MISSION BRIEFING' : 'NAVIGATION' }}</span> <span class="title">{{ briefing ? 'MISSION BRIEFING' : 'NAVIGATION' }}</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Waypoints <span class="v">{{ waypoints }}</span></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> <span class="close" data-if="!briefing" data-action="tool" data-arg="close">&#215;</span>
+6 -6
View File
@@ -7,23 +7,23 @@
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.colm.side { flex: 0 0 40%; margin-right: 18dp; } .colm.side { flex: 0 0 40%; margin-right: 18dp; }
.list { flex: 1; overflow-y: auto; } .list { flex: 1; overflow-y: auto; }
.story { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; } .story { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
.story:hover { border-color: #5cc8f0; } .story:hover { border-left-color: #5cc8f0; }
.story.selected { border-color: #f2b13c; } .story.selected { border-left-color: #f2b13c; }
.story img { width: 34dp; height: 34dp; margin-right: 12dp; } .story img { width: 34dp; height: 34dp; margin-right: 12dp; }
.story .t { flex: 1; font-size: 14dp; } .story .t { flex: 1; font-size: 14dp; }
.head { display: flex; flex-direction: row; align-items: center; margin-bottom: 12dp; } .head { display: flex; flex-direction: row; align-items: center; margin-bottom: 12dp; }
.head img { width: 54dp; height: 54dp; margin-right: 14dp; } .head img { width: 54dp; height: 54dp; margin-right: 14dp; }
/* the story's picture (NN_News' video screen) */ /* the story's picture (NN_News' video screen) */
.photo { display: block; width: 320dp; height: 320dp; margin: 4dp 0 12dp 0; border: 2dp #3d6d96; border-radius: 3dp; } .photo { display: block; width: 320dp; height: 320dp; margin: 4dp 0 12dp 0; }
.head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; } .head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; }
.text { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; padding: 14dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; font-size: 16dp; } .text { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; padding: 14dp; font-size: 16dp; background-color: #5cc8f008; }
</style> </style>
</head> </head>
<body class="window medium" data-model="news"> <body class="window medium" data-model="news">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/> <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
<span class="title">NEWS</span> <span class="title">NEWS</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Stories <span class="v">{{ stories.size }}</span></span> <span class="chip">Stories <span class="v">{{ stories.size }}</span></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
+9 -8
View File
@@ -5,24 +5,25 @@
<style> <style>
/* only as big as the bar, at the top right: the mouse beside it goes to the game */ /* only as big as the bar, at the top right: the mouse beside it goes to the game */
body.nnstrip { position: absolute; right: 8dp; top: 4dp; width: 400dp; height: 60dp; display: block; background-color: transparent; pointer-events: none; } body.nnstrip { position: absolute; right: 8dp; top: 4dp; width: 400dp; height: 60dp; display: block; background-color: transparent; pointer-events: none; }
.nnbar { pointer-events: auto; position: absolute; top: 0; right: 0; display: flex; flex-direction: row; align-items: center; padding: 3dp 4dp; background-color: #070b12e6; border: 2dp #3d6d96; border-radius: 4dp; } /* in the flight HUD's design: one frame with cut corners (rem.rcss, hudframes), no box per icon */
.nb { width: 40dp; padding: 3dp 5dp; margin: 0 1dp; border: 1dp #00000000; border-radius: 3dp; position: relative; } .nnbar { pointer-events: auto; position: absolute; top: 0; right: 0; height: 52dp; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; padding: 0 16dp; decorator: ninepatch(fb, fb-i); }
.nb:hover { border-color: #5cc8f0; background-color: #122033; } .nb { width: 40dp; padding: 4dp 5dp; margin: 0 1dp; border-radius: 3dp; position: relative; }
.nb.active { border-color: #f2b13c; background-color: #f2b13c1f; } .nb:hover { background-color: #5cc8f01a; }
.nb img { width: 30dp; height: 30dp; display: block; image-color: #8fb8d8; } .nb.active { background-color: #f2b13c1f; }
.nb img { width: 30dp; height: 30dp; display: block; image-color: #b9d4ea; }
.nb:hover img { image-color: #5cc8f0; animation: 1.6s linear infinite nb-spin; } .nb:hover img { image-color: #5cc8f0; animation: 1.6s linear infinite nb-spin; }
/* REM: as FL's NeuroNet icons, the hovered one turns about its upright axis */ /* REM: as FL's NeuroNet icons, the hovered one turns about its upright axis */
.nb { transition: background-color border-color 0.15s cubic-out; } .nb { transition: background-color 0.15s cubic-out; }
.nb img { transform: perspective(240dp) rotateY(0deg) scale(1); transition: transform 0.2s cubic-out; } .nb img { transform: perspective(240dp) rotateY(0deg) scale(1); transition: transform 0.2s cubic-out; }
.nb.active img { image-color: #f2b13c; } .nb.active img { image-color: #f2b13c; }
.nb .tip { top: 40dp; right: 0; left: auto; bottom: auto; width: 230dp; white-space: normal; text-align: right; } .nb .tip { top: 46dp; right: 0; left: auto; bottom: auto; width: 230dp; white-space: normal; text-align: right; }
.edit-grip { display: none; position: absolute; left: 0; top: 0; padding: 2dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; border-radius: 3dp; white-space: nowrap; drag: drag; cursor: move; pointer-events: auto; z-index: 10; } .edit-grip { display: none; position: absolute; left: 0; top: 0; padding: 2dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; border-radius: 3dp; white-space: nowrap; drag: drag; cursor: move; pointer-events: auto; z-index: 10; }
.hud-editing .edit-grip { display: block; } .hud-editing .edit-grip { display: block; }
</style> </style>
</head> </head>
<body class="nnstrip movable" data-model="nnbar"> <body class="nnstrip movable" data-model="nnbar">
<div class="win-head edit-grip">NeuroNet bar &#10021;</div> <div class="win-head edit-grip">NeuroNet bar &#10021;</div>
<div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 12 + 'dp'"> <div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 32 + 'dp'">
<div class="nb" data-for="i : icons" data-class-active="i.active" data-action="nn" data-attr-data-arg="i.cmd"> <div class="nb" data-for="i : icons" data-class-active="i.active" data-action="nn" data-attr-data-arg="i.cmd">
<img data-attr-src="i.icon"/> <img data-attr-src="i.icon"/>
<div class="tip" data-if="i.label != ''">{{ i.label }}</div> <div class="tip" data-if="i.label != ''">{{ i.label }}</div>
+2 -2
View File
@@ -5,7 +5,7 @@
<style> <style>
/* cards at the right edge, above the HUD's right panel; the empty strip is the game's */ /* cards at the right edge, above the HUD's right panel; the empty strip is the game's */
body.notify { position: absolute; right: 16dp; top: 120dp; width: 340dp; height: 520dp; background-color: transparent; display: flex; flex-direction: column; } body.notify { position: absolute; right: 16dp; top: 120dp; width: 340dp; height: 520dp; background-color: transparent; display: flex; flex-direction: column; }
.card { margin-bottom: 8dp; padding: 9dp 12dp 9dp 14dp; background-color: #070b12eb; border: 2dp #3d6d96; border-left: 4dp #5cc8f0; border-radius: 4dp; } .card { margin-bottom: 8dp; padding: 9dp 12dp 9dp 14dp; decorator: ninepatch(fw, fw-i); }
.card:hover { background-color: #0d1622f5; } .card:hover { background-color: #0d1622f5; }
.card .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 0.6dp; } .card .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 0.6dp; }
.card .x { float: right; color: #8197ad; font-size: 13dp; } .card .x { float: right; color: #8197ad; font-size: 13dp; }
@@ -15,7 +15,7 @@
.card.group { border-left-color: #ff7efd; } .card.group { border-left-color: #ff7efd; }
.card.trade { border-left-color: #f2b13c; } .card.trade { border-left-color: #f2b13c; }
.card.mail { border-left-color: #87c3e0; } .card.mail { border-left-color: #87c3e0; }
.card { animation: 0.25s cubic-out slidein; } .card { animation: 0.25s cubic-out slidein; decorator: ninepatch(fw, fw-i); }
@keyframes slidein { from { opacity: 0; margin-left: 40dp; } to { opacity: 1; margin-left: 0; } } @keyframes slidein { from { opacity: 0; margin-left: 40dp; } to { opacity: 1; margin-left: 0; } }
</style> </style>
</head> </head>
+1 -4
View File
@@ -12,16 +12,13 @@
margin-top: 70dp; margin-top: 70dp;
max-width: 900dp; max-width: 900dp;
padding: 8dp 22dp; padding: 8dp 22dp;
background-color: #070b12d9;
border: 2dp #3d6d96;
border-top: 2dp #f2b13c;
border-radius: 4dp;
font-family: "Saira SemiCondensed"; font-family: "Saira SemiCondensed";
font-weight: 600; font-weight: 600;
font-size: 17dp; font-size: 17dp;
letter-spacing: 1.5dp; letter-spacing: 1.5dp;
color: #f2b13c; color: #f2b13c;
text-align: center; text-align: center;
decorator: ninepatch(fw, fw-i);
} }
</style> </style>
</head> </head>
+7 -7
View File
@@ -6,13 +6,13 @@
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; } .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
.side { flex: 0 0 200dp; margin-right: 18dp; display: flex; flex-direction: column; } .side { flex: 0 0 200dp; margin-right: 18dp; display: flex; flex-direction: column; }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.page { padding: 11dp 14dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 1.5dp; text-transform: uppercase; } .page { padding: 11dp 14dp; margin-bottom: 6dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 1.5dp; text-transform: uppercase; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
.page:hover { border-color: #5cc8f0; color: #5cc8f0; } .page:hover { color: #5cc8f0; border-left-color: #5cc8f0; }
.page.active { border-left-color: #f2b13c; color: #f2b13c; background-color: #f2b13c14; } .page.active { border-left-color: #f2b13c; color: #f2b13c; background-color: #f2b13c14; }
.subtabs { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 10dp; } .subtabs { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 10dp; }
.subtab { padding: 5dp 12dp; margin: 0 6dp 6dp 0; border: 1dp #24405c; border-radius: 12dp; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; } .subtab { padding: 5dp 12dp; margin: 0 6dp 6dp 0; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; border-bottom: 2dp #00000000; }
.subtab:hover { border-color: #5cc8f0; color: #5cc8f0; } .subtab:hover { color: #5cc8f0; border-bottom-color: #5cc8f0; }
.subtab.active { border-color: #f2b13c; color: #f2b13c; } .subtab.active { color: #f2b13c; border-bottom-color: #f2b13c; }
.rows { flex: 1; overflow-y: auto; } .rows { flex: 1; overflow-y: auto; }
.head { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 12dp 0 6dp 0; } .head { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 12dp 0 6dp 0; }
.opt { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; border-bottom: 1dp #ffffff08; } .opt { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; border-bottom: 1dp #ffffff08; }
@@ -37,7 +37,7 @@
.slide .track:hover .rail { background-color: #2e5378; } .slide .track:hover .rail { background-color: #2e5378; }
.slide .fill { height: 6dp; background-color: #f2b13c; border-radius: 3dp; } .slide .fill { height: 6dp; background-color: #f2b13c; border-radius: 3dp; }
.opt .v { width: 120dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-left: 10dp; } .opt .v { width: 120dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-left: 10dp; }
.ask { padding: 12dp; margin-bottom: 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #0d1622; display: flex; flex-direction: row; align-items: center; } .ask { padding: 12dp; margin-bottom: 12dp; display: flex; flex-direction: row; align-items: center; border-left: 3dp #f2b13c; background-color: #5cc8f008; }
.ask .t { flex: 1; } .ask .t { flex: 1; }
.ask .btn { margin: 0 0 0 8dp; } .ask .btn { margin: 0 0 0 8dp; }
.side .btn { display: block; margin: 0 0 8dp 0; text-align: center; } .side .btn { display: block; margin: 0 0 8dp 0; text-align: center; }
@@ -50,7 +50,7 @@
</head> </head>
<body class="window" data-model="options" data-class-settling="!settled"> <body class="window" data-model="options" data-class-settling="!settled">
<div class="win-head"> <div class="win-head">
<span class="title">{{ title }}</span> <span class="title">{{ title }}</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
</div> </div>
+7 -7
View File
@@ -8,7 +8,7 @@
.colm.mid { flex: 0 0 34%; margin: 0 18dp; } .colm.mid { flex: 0 0 34%; margin: 0 18dp; }
.col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; } .col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
.col-h .hint { margin-left: auto; } .col-h .hint { margin-left: auto; }
.list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; } .list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.good { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; } .good { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
.good:hover { background-color: #122033; } .good:hover { background-color: #122033; }
.good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; } .good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
@@ -19,8 +19,8 @@
.good .note { font-size: 12dp; color: #8197ad; } .good .note { font-size: 12dp; color: #8197ad; }
.good .c { font-family: "IBM Plex Mono"; width: 40dp; text-align: right; color: #8197ad; } .good .c { font-family: "IBM Plex Mono"; width: 40dp; text-align: right; color: #8197ad; }
.good .p { font-family: "IBM Plex Mono"; width: 100dp; text-align: right; color: #f2b13c; } .good .p { font-family: "IBM Plex Mono"; width: 100dp; text-align: right; color: #f2b13c; }
#ship { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); } #ship { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); }
.deal { margin-top: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; } .deal { margin-top: 14dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; background-color: #5cc8f010; }
.deal img { width: 48dp; height: 48dp; margin-right: 14dp; } .deal img { width: 48dp; height: 48dp; margin-right: 14dp; }
.deal .what { width: 300dp; } .deal .what { width: 300dp; }
.deal .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; } .deal .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
@@ -30,7 +30,7 @@
.deal .btn { margin: 0; } .deal .btn { margin: 0; }
.why { color: #ef6a5b; margin-right: 14dp; } .why { color: #ef6a5b; margin-right: 14dp; }
.search { margin-bottom: 8dp; } .search { margin-bottom: 8dp; }
.cmp { margin-top: 10dp; padding: 8dp 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .cmp { margin-top: 10dp; padding: 8dp 10dp; background-color: #5cc8f008; }
.cmp .ch, .cmp .cr { display: flex; flex-direction: row; padding: 2dp 0; } .cmp .ch, .cmp .cr { display: flex; flex-direction: row; padding: 2dp 0; }
.cmp .ch { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; border-bottom: 1dp #24405c; margin-bottom: 4dp; } .cmp .ch { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; border-bottom: 1dp #24405c; margin-bottom: 4dp; }
.cmp .cl { flex: 1; white-space: nowrap; overflow: hidden; } .cmp .cl { flex: 1; white-space: nowrap; overflow: hidden; }
@@ -48,12 +48,12 @@
.flag { display: flex; flex-direction: row; align-items: center; font-size: 13dp; color: #b8c4cc; } .flag { display: flex; flex-direction: row; align-items: center; font-size: 13dp; color: #b8c4cc; }
.flag .switch { width: 44dp; margin-right: 6dp; } .flag .switch { width: 44dp; margin-right: 6dp; }
.gear { font-size: 16dp; } .gear { font-size: 16dp; }
.panel { position: absolute; top: 60dp; width: 420dp; max-height: 70%; display: flex; flex-direction: column; padding: 14dp; border: 1dp #f2b13c; border-radius: 3dp; background-color: #0b1320f4; z-index: 10; } .panel { position: absolute; top: 60dp; width: 420dp; max-height: 70%; display: flex; flex-direction: column; padding: 14dp; z-index: 10; decorator: ninepatch(fw, fw-i); }
.panel.left { left: 24dp; } .panel.left { left: 24dp; }
.panel.right { right: 24dp; } .panel.right { right: 24dp; }
.panel h3 { margin-bottom: 4dp; } .panel h3 { margin-bottom: 4dp; }
.panel .pnote { font-size: 12dp; color: #8197ad; margin-bottom: 10dp; } .panel .pnote { font-size: 12dp; color: #8197ad; margin-bottom: 10dp; }
.panel .plist { flex: 1 1 auto; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; } .panel .plist { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.panel .prow { display: flex; flex-direction: row; align-items: center; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; } .panel .prow { display: flex; flex-direction: row; align-items: center; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; }
.panel .prow .n { flex: 1; min-width: 0; } .panel .prow .n { flex: 1; min-width: 0; }
.panel .pfoot { display: flex; flex-direction: row; margin-top: 10dp; } .panel .pfoot { display: flex; flex-direction: row; margin-top: 10dp; }
@@ -64,7 +64,7 @@
<body class="window" data-model="outfitter"> <body class="window" data-model="outfitter">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/> <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/>
<span class="title">EQUIPMENT DEALER</span> <span class="title">EQUIPMENT DEALER</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Hold <span class="v">{{ hold }}</span></span> <span class="chip">Hold <span class="v">{{ hold }}</span></span>
<span class="chip">Credits <span class="v">{{ credits }}</span></span> <span class="chip">Credits <span class="v">{{ credits }}</span></span>
+3 -3
View File
@@ -17,10 +17,10 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.menu { width: 440dp; background-color: #0d1622f5; border: 2dp #3d6d96; border-top: 2dp #f2b13c; border-radius: 4dp; padding: 18dp 22dp 12dp 22dp; } .menu { width: 440dp; padding: 18dp 22dp 12dp 22dp; decorator: ninepatch(fw, fw-i); }
.menu .title { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 26dp; letter-spacing: 4dp; text-transform: uppercase; margin-bottom: 14dp; } .menu .title { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 26dp; letter-spacing: 4dp; text-transform: uppercase; margin-bottom: 14dp; }
.row { padding: 11dp 14dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; } .row { padding: 11dp 14dp; margin-bottom: 8dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
.row:hover { border-color: #5cc8f0; background-color: #16283d; } .row:hover { border-left-color: #5cc8f0; background-color: #5cc8f01a; }
.row.primary { border-left-color: #f2b13c; } .row.primary { border-left-color: #f2b13c; }
.row.danger { border-left-color: #ef6a5b; } .row.danger { border-left-color: #ef6a5b; }
.row .l { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; letter-spacing: 1.5dp; text-transform: uppercase; } .row .l { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; letter-spacing: 1.5dp; text-transform: uppercase; }
+5 -5
View File
@@ -4,13 +4,13 @@
<link type="text/rcss" href="rem.rcss"/> <link type="text/rcss" href="rem.rcss"/>
<style> <style>
.grid { display: flex; flex-direction: row; flex-wrap: wrap; } .grid { display: flex; flex-direction: row; flex-wrap: wrap; }
.stat { display: flex; flex-direction: row; align-items: center; width: 30%; margin: 0 3% 12dp 0; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 10dp 12dp; } .stat { display: flex; flex-direction: row; align-items: center; width: 30%; margin: 0 3% 12dp 0; padding: 10dp 12dp; background-color: #5cc8f010; }
.stat .stat-ico { width: 34dp; height: auto; max-height: 34dp; margin-right: 12dp; } /* the icons' own colours, their own proportions (a blue tint and a forced square made them look washed out and squashed) */ .stat .stat-ico { width: 34dp; height: auto; max-height: 34dp; margin-right: 12dp; } /* the icons' own colours, their own proportions (a blue tint and a forced square made them look washed out and squashed) */
.stat .k { font-family: "Saira SemiCondensed"; font-size: 12dp; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; } .stat .k { font-family: "Saira SemiCondensed"; font-size: 12dp; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; }
.stat .v { font-family: "IBM Plex Mono"; font-size: 20dp; margin-top: 2dp; } .stat .v { font-family: "IBM Plex Mono"; font-size: 20dp; margin-top: 2dp; }
.skill { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; } .skill { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
.skill:hover { border-color: #5cc8f0; } .skill:hover { border-left-color: #5cc8f0; }
.skill.selected { border-color: #f2b13c; } .skill.selected { border-left-color: #f2b13c; }
.skill .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; width: 220dp; } .skill .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; width: 220dp; }
.skill .lvl { font-family: "IBM Plex Mono"; width: 60dp; text-align: right; margin-right: 14dp; color: #8197ad; } .skill .lvl { font-family: "IBM Plex Mono"; width: 60dp; text-align: right; margin-right: 14dp; color: #8197ad; }
.skill .bar { flex: 1; margin-right: 14dp; } .skill .bar { flex: 1; margin-right: 14dp; }
@@ -34,7 +34,7 @@
</head> </head>
<body class="window medium" data-model="player"> <body class="window medium" data-model="player">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_player.3db"/><span class="title">PLAYER</span> <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_player.3db"/><span class="title">PLAYER</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">XP <span class="v">{{ xp }}</span></span> <span class="chip">XP <span class="v">{{ xp }}</span></span>
<span class="chip">Bank <span class="v">{{ balance }}</span></span> <span class="chip">Bank <span class="v">{{ balance }}</span></span>
+6 -6
View File
@@ -7,13 +7,13 @@
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.colm.side { flex: 0 0 42%; margin-right: 18dp; overflow-y: auto; } .colm.side { flex: 0 0 42%; margin-right: 18dp; overflow-y: auto; }
.grid { display: block; margin-bottom: 8dp; } .grid { display: block; margin-bottom: 8dp; }
.stat { display: inline-block; box-sizing: border-box; width: 48%; margin: 0 2% 8dp 0; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 8dp 12dp; } .stat { display: inline-block; box-sizing: border-box; width: 48%; margin: 0 2% 8dp 0; padding: 8dp 12dp; background-color: #5cc8f010; }
.stat .k { font-family: "Saira SemiCondensed"; font-size: 12dp; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; } .stat .k { font-family: "Saira SemiCondensed"; font-size: 12dp; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; }
.stat .v { font-family: "IBM Plex Mono"; font-size: 17dp; margin-top: 2dp; } .stat .v { font-family: "IBM Plex Mono"; font-size: 17dp; margin-top: 2dp; }
.list { flex: 1; overflow-y: auto; } .list { flex: 1; overflow-y: auto; }
.faction { display: flex; flex-direction: row; align-items: center; padding: 7dp 10dp; margin-bottom: 5dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; } .faction { display: flex; flex-direction: row; align-items: center; padding: 7dp 10dp; margin-bottom: 5dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
.faction:hover { border-color: #5cc8f0; } .faction:hover { border-left-color: #5cc8f0; }
.faction.selected { border-color: #f2b13c; } .faction.selected { border-left-color: #f2b13c; }
.faction.own .n { color: #f2b13c; } .faction.own .n { color: #f2b13c; }
.faction .n { width: 40%; font-size: 14dp; } .faction .n { width: 40%; font-size: 14dp; }
.faction .rep { flex: 1; display: flex; flex-direction: row; height: 6dp; margin: 0 12dp; } .faction .rep { flex: 1; display: flex; flex-direction: row; height: 6dp; margin: 0 12dp; }
@@ -22,13 +22,13 @@
.faction .neg { height: 6dp; background-color: #ef6a5b; } .faction .neg { height: 6dp; background-color: #ef6a5b; }
.faction .pos { height: 6dp; background-color: #5fd08a; } .faction .pos { height: 6dp; background-color: #5fd08a; }
.faction .s { width: 90dp; text-align: right; font-size: 12dp; color: #8197ad; font-family: "Saira SemiCondensed"; text-transform: uppercase; letter-spacing: 1dp; } .faction .s { width: 90dp; text-align: right; font-size: 12dp; color: #8197ad; font-family: "Saira SemiCondensed"; text-transform: uppercase; letter-spacing: 1dp; }
.card { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .card { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; background-color: #5cc8f008; }
</style> </style>
</head> </head>
<body class="window medium" data-model="playerinfo"> <body class="window medium" data-model="playerinfo">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/stat_rating_icon.3db"/> <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/stat_rating_icon.3db"/>
<span class="title">PLAYER STATUS</span> <span class="title">PLAYER STATUS</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
</div> </div>
+2 -2
View File
@@ -4,7 +4,7 @@
<link type="text/rcss" href="rem.rcss"/> <link type="text/rcss" href="rem.rcss"/>
<style> <style>
body.window.pmwin { left: auto; right: 250dp; top: auto; bottom: 360dp; width: 480dp; height: 440dp; } body.window.pmwin { left: auto; right: 250dp; top: auto; bottom: 360dp; width: 480dp; height: 440dp; }
#pmhist { flex: 1; overflow-y: auto; padding: 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } #pmhist { flex: 1; overflow-y: auto; padding: 10dp; background-color: #5cc8f008; }
.ln { margin: 4dp 0; display: block; } .ln { margin: 4dp 0; display: block; }
.ln .b { display: block; width: 80%; padding: 6dp 10dp; border-radius: 6dp; background-color: #122033; font-size: 15dp; line-height: 1.3; text-align: left; } .ln .b { display: block; width: 80%; padding: 6dp 10dp; border-radius: 6dp; background-color: #122033; font-size: 15dp; line-height: 1.3; text-align: left; }
.ln.mine .b { margin-left: auto; } .ln.mine .b { margin-left: auto; }
@@ -17,7 +17,7 @@
</head> </head>
<body class="window pmwin" data-model="pm"> <body class="window pmwin" data-model="pm">
<div class="win-head"> <div class="win-head">
<span class="title" style="font-size: 18dp;">{{ name }}</span> <span class="title" style="font-size: 18dp;">{{ name }}</span><span class="sl">\\\</span>
<span class="loc">private</span> <span class="loc">private</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
+2 -2
View File
@@ -5,9 +5,9 @@
<style> <style>
/* the open conversations docked at the right edge, above the HUD's right panel */ /* the open conversations docked at the right edge, above the HUD's right panel */
body.pmdock { position: absolute; right: 16dp; bottom: 360dp; width: 220dp; height: 300dp; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; } body.pmdock { position: absolute; right: 16dp; bottom: 360dp; width: 220dp; height: 300dp; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; }
.tab { display: flex; flex-direction: row; align-items: center; margin-top: 6dp; padding: 7dp 10dp; background-color: #070b12eb; border: 2dp #3d6d96; border-left: 4dp #87c3e0; border-radius: 4dp; } .tab { display: flex; flex-direction: row; align-items: center; margin-top: 6dp; padding: 7dp 10dp; decorator: ninepatch(fw, fw-i); }
.tab:hover { background-color: #122033; } .tab:hover { background-color: #122033; }
.tab.open { border-color: #f2b13c; } .tab.open { ; }
.tab .ic { font-size: 15dp; margin-right: 8dp; color: #87c3e0; } .tab .ic { font-size: 15dp; margin-right: 8dp; color: #87c3e0; }
.tab .n { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; white-space: nowrap; overflow: hidden; } .tab .n { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; white-space: nowrap; overflow: hidden; }
.tab .u { min-width: 20dp; height: 20dp; line-height: 20dp; text-align: center; border-radius: 10dp; background-color: #ef6a5b; color: #ffffff; font-size: 12dp; margin-right: 6dp; } .tab .u { min-width: 20dp; height: 20dp; line-height: 20dp; text-align: center; border-radius: 10dp; background-color: #ef6a5b; color: #ffffff; font-size: 12dp; margin-right: 6dp; }
+12 -2
View File
@@ -8,8 +8,18 @@
.head .threat { margin-left: 8dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #ff3b30; font-weight: 700; } .head .threat { margin-left: 8dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #ff3b30; font-weight: 700; }
body.radar { position: absolute; left: 16dp; top: 31%; width: 320dp; height: 250dp; background-color: transparent; pointer-events: none; body.radar { position: absolute; left: 16dp; top: 31%; width: 320dp; height: 250dp; background-color: transparent; pointer-events: none;
font-family: "Saira SemiCondensed"; font-size: 14dp; color: #dbe6f0; } font-family: "Saira SemiCondensed"; font-size: 14dp; color: #dbe6f0; }
.frame { position: absolute; left: 0; top: 0; right: 0; bottom: 0; box-sizing: border-box; background-color: #050a18c0; .frame {
border: 1dp #3d6d96; border-radius: 4dp; pointer-events: auto; display: flex; flex-direction: column; } position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
pointer-events: auto;
display: flex;
flex-direction: column;
decorator: ninepatch(fw, fw-i);
}
.head { display: flex; flex-direction: row; align-items: center; height: 26dp; padding: 0 10dp; border-bottom: 1dp #24405c; } .head { display: flex; flex-direction: row; align-items: center; height: 26dp; padding: 0 10dp; border-bottom: 1dp #24405c; }
.head .title { font-weight: 600; letter-spacing: 1.5dp; font-size: 14dp; color: #f2b13c; } .head .title { font-weight: 600; letter-spacing: 1.5dp; font-size: 14dp; color: #f2b13c; }
.head .count { margin-left: 8dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; } .head .count { margin-left: 8dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; }
+63 -54
View File
@@ -34,9 +34,8 @@ body.window
width: 82%; width: 82%;
height: 86%; height: 86%;
max-width: 1680dp; max-width: 1680dp;
background-color: #0d1622eb; /* the flight HUD's frame: cut corners, one bright edge (hudframes, at the end of this file) */
border: 2dp #3d6d96; decorator: ninepatch(fw, fw-i);
border-radius: 4dp;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -59,8 +58,8 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 12dp 18dp; padding: 12dp 18dp 12dp 28dp; /* clear of the cut corner */
border-bottom: 1dp #24405c; border-bottom: 1dp #2b6f9e;
drag: drag; /* the grip: a window moves by its head (rem_ui_host.cpp, rem.ini win_<name>) */ drag: drag; /* the grip: a window moves by its head (rem_ui_host.cpp, rem.ini win_<name>) */
cursor: move; 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-family: "Saira SemiCondensed";
font-weight: 600; font-weight: 600;
font-size: 21dp; font-size: 20dp;
letter-spacing: 1.2dp; letter-spacing: 2dp;
color: #e8f4ff;
margin-right: 16dp; 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 .loc { color: #8197ad; font-size: 15dp; }
.win-head .spacer { flex: 1; } .win-head .spacer { flex: 1; }
.chip .chip
@@ -80,10 +82,8 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
font-size: 14dp; font-size: 14dp;
letter-spacing: 0.6dp; letter-spacing: 0.6dp;
color: #8197ad; color: #8197ad;
padding: 2dp 11dp; padding: 2dp 4dp;
border: 2dp #3d6d96; margin-left: 14dp;
border-radius: 11dp;
margin-left: 10dp;
} }
.chip .v { font-family: "IBM Plex Mono"; color: #dbe6f0; } .chip .v { font-family: "IBM Plex Mono"; color: #dbe6f0; }
.close .close
@@ -93,12 +93,10 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
line-height: 26dp; line-height: 26dp;
text-align: center; text-align: center;
margin-left: 14dp; margin-left: 14dp;
border: 2dp #3d6d96;
border-radius: 3dp;
color: #8197ad; color: #8197ad;
font-size: 17dp; font-size: 20dp;
} }
.close:hover { color: #5cc8f0; border-color: #5cc8f0; } .close:hover { color: #5cc8f0; }
.win-main .win-main
{ {
@@ -111,7 +109,7 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
.nav .nav
{ {
width: 200dp; width: 200dp;
border-right: 1dp #24405c; border-right: 1dp #2b6f9e;
padding: 10dp 0; padding: 10dp 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -139,11 +137,11 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
border-radius: 3dp; border-radius: 3dp;
padding: 0 5dp; 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 img.ico { width: 20dp; height: 20dp; margin-right: 10dp; opacity: 0.7; }
.nav .item:hover img.ico, .nav .item.active img.ico { opacity: 1; } .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; } .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; } .nav .sep { height: 1dp; background-color: #24405c; margin: 8dp 18dp; }
.content .content
@@ -160,8 +158,8 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border-top: 1dp #24405c; border-top: 1dp #2b6f9e;
padding: 8dp 18dp; padding: 8dp 28dp 10dp 18dp; /* clear of the cut corner */
font-size: 13dp; font-size: 13dp;
color: #8197ad; 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-family: "IBM Plex Mono";
font-size: 11dp; font-size: 11dp;
color: #dbe6f0; color: #dbe6f0;
border: 2dp #3d6d96; background-color: #24405c;
border-radius: 3dp; padding: 0 5dp;
padding: 0 4dp;
margin-right: 5dp; margin-right: 5dp;
} }
.win-foot .hint { margin-right: 18dp; } .win-foot .hint { margin-right: 18dp; }
@@ -236,22 +233,20 @@ h3, .label
letter-spacing: 1.1dp; letter-spacing: 1.1dp;
text-transform: uppercase; text-transform: uppercase;
color: #dbe6f0; color: #dbe6f0;
background-color: #122033; decorator: ninepatch(fs, fs-i); /* a small cut-corner frame */
border: 2dp #3d6d96;
border-radius: 3dp;
padding: 7dp 16dp; padding: 7dp 16dp;
margin-right: 8dp; margin-right: 8dp;
margin-bottom: 8dp; margin-bottom: 8dp;
position: relative; position: relative;
transition: color border-color 0.12s; transition: color border-color 0.12s;
} }
.btn:hover { color: #5cc8f0; border-color: #5cc8f0; } .btn:hover { color: #5cc8f0; }
.btn:active { background-color: #1a2d47; } .btn:active { color: #ffffff; }
.btn.primary { color: #f2b13c; border-color: #f2b13c; } .btn.primary { color: #f2b13c; decorator: ninepatch(fsa, fsa-i); }
.btn.primary:hover { color: #5cc8f0; border-color: #5cc8f0; } .btn.primary:hover { color: #ffd07a; }
.btn.danger { color: #ef6a5b; border-color: #7a3f3e; } .btn.danger { color: #ef6a5b; decorator: ninepatch(fsd, fsd-i); }
.btn.armed { color: #160604; background-color: #ef6a5b; border-color: #ef6a5b; } .btn.armed { color: #160604; decorator: none; background-color: #ef6a5b; }
.btn.disabled { color: #8197ad66; border-color: #24405c; } .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; } .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 */ /* a tooltip: a .tip child, shown while the button is hovered */
@@ -269,10 +264,8 @@ h3, .label
text-transform: none; text-transform: none;
letter-spacing: 0; letter-spacing: 0;
color: #dbe6f0; color: #dbe6f0;
background-color: #05090f; decorator: ninepatch(fw, fw-i);
border: 2dp #3d6d96; padding: 7dp 12dp;
border-radius: 3dp;
padding: 6dp 9dp;
} }
/* shown by the tool tip window over every window (rem_ui_tooltip.cpp), not here: inside its own /* shown by the tool tip window over every window (rem_ui_tooltip.cpp), not here: inside its own
document another window could cover it */ document another window could cover it */
@@ -315,20 +308,17 @@ input.text
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: 7dp 10dp; padding: 7dp 10dp;
border: 2dp #24405c; border-bottom: 1dp #3d6d96;
border-radius: 3dp; background-color: #12203399;
background-color: #122033;
color: #dbe6f0; color: #dbe6f0;
font-size: 14dp; font-size: 14dp;
cursor: text; cursor: text;
} }
input.text:focus { border-color: #5cc8f0; } input.text:focus { border-bottom-color: #5cc8f0; }
input.text .placeholder, input.text:placeholder { color: #8197ad; } input.text .placeholder, input.text:placeholder { color: #8197ad; }
.table .table
{ {
border: 2dp #24405c;
border-radius: 3dp;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 0; min-height: 0;
@@ -345,13 +335,12 @@ input.text .placeholder, input.text:placeholder { color: #8197ad; }
font-size: 12dp; font-size: 12dp;
letter-spacing: 1.2dp; letter-spacing: 1.2dp;
text-transform: uppercase; text-transform: uppercase;
color: #8197ad; color: #8fb3d0;
background-color: #0d1622; border-bottom: 1dp #2b6f9e;
border-bottom: 1dp #24405c;
} }
.table .body { flex: 1; overflow-y: auto; } .table .body { flex: 1; overflow-y: auto; }
.table .row { font-size: 14dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; } .table .row { font-size: 14dp; border-bottom: 1dp #24405c66; border-left: 3dp #00000000; }
.table .row:hover { background-color: #122033; } .table .row:hover { background-color: #5cc8f01a; }
.table .row.selected { background-color: #f2b13c24; border-left-color: #f2b13c; } .table .row.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
.table .row.current .c1 { color: #f2b13c; } .table .row.current .c1 { color: #f2b13c; }
.table .c1 { flex: 1; } .table .c1 { flex: 1; }
@@ -374,8 +363,8 @@ input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
{ {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border: 2dp #24405c; border-top: 1dp #2b6f9e;
border-radius: 3dp; border-bottom: 1dp #2b6f9e;
margin-bottom: 12dp; margin-bottom: 12dp;
} }
.stats .cell { flex: 1; padding: 8dp 12dp; border-right: 1dp #24405c; } .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 .card
{ {
flex: 1; flex: 1;
border: 2dp #24405c; border-left: 3dp #2b6f9e; /* an accent at the left, no box in the window's box */
border-radius: 3dp; background-color: #5cc8f00a;
background-color: #122033;
padding: 12dp; padding: 12dp;
margin-right: 10dp; 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-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-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; } } @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, .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 .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 .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) */ /* 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); } } @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;
}
+9 -8
View File
@@ -5,24 +5,25 @@
<style> <style>
/* only as big as the bar, at the top left: the mouse beside it goes to the game */ /* only as big as the bar, at the top left: the mouse beside it goes to the game */
body.nnstrip { position: absolute; left: 8dp; top: 4dp; width: 400dp; height: 60dp; display: block; background-color: transparent; pointer-events: none; } body.nnstrip { position: absolute; left: 8dp; top: 4dp; width: 400dp; height: 60dp; display: block; background-color: transparent; pointer-events: none; }
.nnbar { pointer-events: auto; position: absolute; top: 0; left: 0; display: flex; flex-direction: row; align-items: center; padding: 3dp 4dp; background-color: #070b12e6; border: 2dp #3d6d96; border-radius: 4dp; } /* in the flight HUD's design: one frame with cut corners (rem.rcss, hudframes), no box per icon */
.nb { width: 40dp; padding: 3dp 5dp; margin: 0 1dp; border: 1dp #00000000; border-radius: 3dp; position: relative; } .nnbar { pointer-events: auto; position: absolute; top: 0; left: 0; height: 52dp; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; padding: 0 16dp; decorator: ninepatch(fb, fb-i); }
.nb:hover { border-color: #5cc8f0; background-color: #122033; } .nb { width: 40dp; padding: 4dp 5dp; margin: 0 1dp; border-radius: 3dp; position: relative; }
.nb.active { border-color: #f2b13c; background-color: #f2b13c1f; } .nb:hover { background-color: #5cc8f01a; }
.nb img { width: 30dp; height: 30dp; display: block; image-color: #8fb8d8; } .nb.active { background-color: #f2b13c1f; }
.nb img { width: 30dp; height: 30dp; display: block; image-color: #b9d4ea; }
.nb:hover img { image-color: #5cc8f0; animation: 1.6s linear infinite nb-spin; } .nb:hover img { image-color: #5cc8f0; animation: 1.6s linear infinite nb-spin; }
/* REM: as FL's NeuroNet icons, the hovered one turns about its upright axis */ /* REM: as FL's NeuroNet icons, the hovered one turns about its upright axis */
.nb { transition: background-color border-color 0.15s cubic-out; } .nb { transition: background-color 0.15s cubic-out; }
.nb img { transform: perspective(240dp) rotateY(0deg) scale(1); transition: transform 0.2s cubic-out; } .nb img { transform: perspective(240dp) rotateY(0deg) scale(1); transition: transform 0.2s cubic-out; }
.nb.active img { image-color: #f2b13c; } .nb.active img { image-color: #f2b13c; }
.nb .tip { top: 40dp; left: 0; right: auto; bottom: auto; width: 230dp; white-space: normal; } .nb .tip { top: 46dp; left: 0; right: auto; bottom: auto; width: 230dp; white-space: normal; }
.edit-grip { display: none; position: absolute; left: 0; top: 0; padding: 2dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; border-radius: 3dp; white-space: nowrap; drag: drag; cursor: move; pointer-events: auto; z-index: 10; } .edit-grip { display: none; position: absolute; left: 0; top: 0; padding: 2dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; border-radius: 3dp; white-space: nowrap; drag: drag; cursor: move; pointer-events: auto; z-index: 10; }
.hud-editing .edit-grip { display: block; } .hud-editing .edit-grip { display: block; }
</style> </style>
</head> </head>
<body class="nnstrip movable" data-model="rembar"> <body class="nnstrip movable" data-model="rembar">
<div class="win-head edit-grip">REM bar &#10021;</div> <div class="win-head edit-grip">REM bar &#10021;</div>
<div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 12 + 'dp'"> <div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 32 + 'dp'">
<div class="nb" data-for="i : icons" data-class-active="i.active" data-action="nn" data-attr-data-arg="i.cmd"> <div class="nb" data-for="i : icons" data-class-active="i.active" data-action="nn" data-attr-data-arg="i.cmd">
<img data-attr-src="i.icon"/> <img data-attr-src="i.icon"/>
<div class="tip" data-if="i.label != ''">{{ i.label }}</div> <div class="tip" data-if="i.label != ''">{{ i.label }}</div>
+3 -3
View File
@@ -4,8 +4,8 @@
<link type="text/rcss" href="rem.rcss"/> <link type="text/rcss" href="rem.rcss"/>
<style> <style>
.colm { flex: 1; display: flex; flex-direction: column; min-height: 0; } .colm { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.item { display: flex; flex-direction: row; align-items: center; padding: 8dp 10dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; } .item { display: flex; flex-direction: row; align-items: center; padding: 8dp 10dp; margin-bottom: 6dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
.item:hover { border-color: #5cc8f0; } .item:hover { border-left-color: #5cc8f0; }
.item.selected { border-left-color: #f2b13c; } .item.selected { border-left-color: #f2b13c; }
.item .check { width: 16dp; height: 16dp; border: 2dp #3d6d96; border-radius: 3dp; margin-right: 12dp; } .item .check { width: 16dp; height: 16dp; border: 2dp #3d6d96; border-radius: 3dp; margin-right: 12dp; }
.item.selected .check { background-color: #f2b13c; border-color: #f2b13c; } .item.selected .check { background-color: #f2b13c; border-color: #f2b13c; }
@@ -25,7 +25,7 @@
<body class="window small" data-model="repair"> <body class="window small" data-model="repair">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_construction.3db"/> <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_construction.3db"/>
<span class="title">REPAIR</span> <span class="title">REPAIR</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Credits <span class="v">{{ credits }}</span></span> <span class="chip">Credits <span class="v">{{ credits }}</span></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
+2 -2
View File
@@ -7,7 +7,7 @@
.colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.colm.view { flex: 0 0 40%; margin-right: 18dp; } .colm.view { flex: 0 0 40%; margin-right: 18dp; }
.colm.list { flex: 1; } .colm.list { flex: 1; }
#ship { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; } #ship { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
.ship-name { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 6dp; } .ship-name { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 6dp; }
.items { flex: 1; overflow-y: auto; } .items { flex: 1; overflow-y: auto; }
.grp { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 8dp 0 6dp 0; } .grp { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 8dp 0 6dp 0; }
@@ -22,7 +22,7 @@
<body class="window medium" data-model="scanner"> <body class="window medium" data-model="scanner">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/> <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
<span class="title">SCAN</span> <span class="title">SCAN</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Value <span class="v">{{ total }}</span></span> <span class="chip">Value <span class="v">{{ total }}</span></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
+3 -3
View File
@@ -10,7 +10,7 @@
.bar .search { flex: 1; margin-right: 10dp; min-width: 0; } .bar .search { flex: 1; margin-right: 10dp; min-width: 0; }
.bar .search input.text { display: block; width: 100%; } .bar .search input.text { display: block; width: 100%; }
.bar .chip { margin-left: 6dp; } .bar .chip { margin-left: 6dp; }
.chip.on { border-color: #f2b13c; color: #f2b13c; } .chip.on { color: #f2b13c; border-left-color: #f2b13c; }
.table .c1 img { width: 14dp; height: 14dp; margin-left: 6dp; } .table .c1 img { width: 14dp; height: 14dp; margin-left: 6dp; }
.table .c2 { width: 26%; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; } .table .c2 { width: 26%; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; }
.table .c3 { width: 90dp; } .table .c3 { width: 90dp; }
@@ -22,13 +22,13 @@
.table .row.full .c3 { color: #e05a4f; } .table .row.full .c3 { color: #e05a4f; }
.table .row .tag { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5cc8f0; margin-left: 8dp; } .table .row .tag { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5cc8f0; margin-left: 8dp; }
.facts { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; color: #8197ad; margin-bottom: 10dp; } .facts { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; color: #8197ad; margin-bottom: 10dp; }
.desc { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .desc { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; background-color: #5cc8f008; }
.pick-name { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; margin-bottom: 6dp; } .pick-name { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; margin-bottom: 6dp; }
</style> </style>
</head> </head>
<body class="window" data-model="serverlist"> <body class="window" data-model="serverlist">
<div class="win-head"> <div class="win-head">
<span class="title">{{ title }}</span> <span class="title">{{ title }}</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Shown <span class="v">{{ rows.size }}</span> / <span class="v">{{ total }}</span></span> <span class="chip">Shown <span class="v">{{ rows.size }}</span> / <span class="v">{{ total }}</span></span>
</div> </div>
+7 -7
View File
@@ -8,9 +8,9 @@
.colm.side { flex: 0 0 30%; margin-right: 18dp; } .colm.side { flex: 0 0 30%; margin-right: 18dp; }
.colm.view { flex: 1; } .colm.view { flex: 1; }
.colm.facts { flex: 0 0 28%; margin-left: 18dp; } .colm.facts { flex: 0 0 28%; margin-left: 18dp; }
.scard { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; } .scard { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 8dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
.scard:hover { border-color: #5cc8f0; } .scard:hover { border-left-color: #5cc8f0; }
.scard.selected { border-color: #f2b13c; background-color: #f2b13c1a; } .scard.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
.scard.locked .n, .scard.locked .p { color: #8197ad; } .scard.locked .n, .scard.locked .p { color: #8197ad; }
.scard img { width: 48dp; height: 48dp; margin-right: 12dp; } .scard img { width: 48dp; height: 48dp; margin-right: 12dp; }
.scard .txt { flex: 1; min-width: 0; } .scard .txt { flex: 1; min-width: 0; }
@@ -20,15 +20,15 @@
.scard .lock { font-family: "IBM Plex Mono"; font-size: 11dp; color: #ef6a5b; text-align: right; margin-top: 2dp; } .scard .lock { font-family: "IBM Plex Mono"; font-size: 11dp; color: #ef6a5b; text-align: right; margin-top: 2dp; }
.scard.own { border-left-color: #5cc8f0; } .scard.own { border-left-color: #5cc8f0; }
.scard.own .p { color: #5cc8f0; } .scard.own .p { color: #5cc8f0; }
#ship { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); } #ship { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); }
.view-head { margin-bottom: 8dp; } .view-head { margin-bottom: 8dp; }
.view-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; } .view-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; }
.view-head .c { font-size: 13dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; } .view-head .c { font-size: 13dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; }
.info { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-top: 10dp; } .info { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 10dp; margin-top: 10dp; background-color: #5cc8f008; }
.stat { display: flex; flex-direction: row; padding: 3dp 0; border-bottom: 1dp #ffffff08; font-size: 13dp; } .stat { display: flex; flex-direction: row; padding: 3dp 0; border-bottom: 1dp #ffffff08; font-size: 13dp; }
.stat .l { flex: 1; color: #8197ad; } .stat .l { flex: 1; color: #8197ad; }
.stat .v { font-family: "IBM Plex Mono"; text-align: right; } .stat .v { font-family: "IBM Plex Mono"; text-align: right; }
.deal { margin-top: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; } .deal { margin-top: 14dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; background-color: #5cc8f010; }
.deal .txt { flex: 1; min-width: 0; } .deal .txt { flex: 1; min-width: 0; }
.deal .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; } .deal .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
.deal .d { font-size: 13dp; color: #8197ad; margin-top: 2dp; } .deal .d { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
@@ -39,7 +39,7 @@
<body class="window" data-model="shipdealer"> <body class="window" data-model="shipdealer">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/> <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/>
<span class="title">SHIP DEALER</span> <span class="title">SHIP DEALER</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Credits <span class="v">{{ credits }}</span></span> <span class="chip">Credits <span class="v">{{ credits }}</span></span>
<span class="chip">Worth <span class="v">{{ worth }}</span></span> <span class="chip">Worth <span class="v">{{ worth }}</span></span>
+12 -12
View File
@@ -15,9 +15,9 @@
.toolbar h3 { flex: 1; } .toolbar h3 { flex: 1; }
.toolbar input.text { width: 220dp; } .toolbar input.text { width: 220dp; }
.grid { flex: 1; overflow-y: auto; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; } .grid { flex: 1; overflow-y: auto; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
.icard { position: relative; width: 150dp; height: 186dp; margin: 0 10dp 10dp 0; padding: 10dp; border: 1dp #24405c; border-radius: 4dp; background-color: #122033; display: flex; flex-direction: column; align-items: center; } .icard { position: relative; width: 150dp; height: 186dp; margin: 0 10dp 10dp 0; padding: 10dp; display: flex; flex-direction: column; align-items: center; border-left: 3dp #24405c; background-color: #5cc8f010; }
.icard:hover { border-color: #5cc8f0; background-color: #16283f; } .icard:hover { border-left-color: #5cc8f0; background-color: #5cc8f01a; }
.icard.selected { border-color: #f2b13c; background-color: #f2b13c14; } .icard.selected { background-color: #f2b13c14; border-left-color: #f2b13c; }
.icard.out { opacity: 0.55; } .icard.out { opacity: 0.55; }
.icard .pic { width: 86dp; height: 86dp; margin: 4dp 0 8dp 0; display: flex; align-items: center; justify-content: center; border-radius: 4dp; decorator: vertical-gradient(#1a3150 #0b1524); } .icard .pic { width: 86dp; height: 86dp; margin: 4dp 0 8dp 0; display: flex; align-items: center; justify-content: center; border-radius: 4dp; decorator: vertical-gradient(#1a3150 #0b1524); }
.icard .pic img { width: 64dp; height: 64dp; } .icard .pic img { width: 64dp; height: 64dp; }
@@ -32,7 +32,7 @@
.pb.cr { color: #dbe6f0; border: 1dp #3d6d96; } .pb.cr { color: #dbe6f0; border: 1dp #3d6d96; }
.icard .note { font-size: 11dp; color: #8197ad; margin-top: 4dp; text-align: center; } .icard .note { font-size: 11dp; color: #8197ad; margin-top: 4dp; text-align: center; }
.icard .note.warn { color: #ef6a5b; } .icard .note.warn { color: #ef6a5b; }
.detail { padding: 12dp; border: 1dp #24405c; border-radius: 4dp; background-color: #0d1622; margin-bottom: 12dp; } .detail { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f008; }
.detail .top { display: flex; flex-direction: row; align-items: center; } .detail .top { display: flex; flex-direction: row; align-items: center; }
.detail .top .pic { width: 72dp; height: 72dp; margin-right: 12dp; display: flex; align-items: center; justify-content: center; border-radius: 4dp; decorator: vertical-gradient(#1a3150 #0b1524); } .detail .top .pic { width: 72dp; height: 72dp; margin-right: 12dp; display: flex; align-items: center; justify-content: center; border-radius: 4dp; decorator: vertical-gradient(#1a3150 #0b1524); }
.detail .top .pic img { width: 56dp; height: 56dp; } .detail .top .pic img { width: 56dp; height: 56dp; }
@@ -45,7 +45,7 @@
.stepper .sb { width: 26dp; text-align: center; padding: 2dp 0; border: 1dp #3d6d96; border-radius: 3dp; } .stepper .sb { width: 26dp; text-align: center; padding: 2dp 0; border: 1dp #3d6d96; border-radius: 3dp; }
.stepper .sb:hover { border-color: #5cc8f0; color: #5cc8f0; } .stepper .sb:hover { border-color: #5cc8f0; color: #5cc8f0; }
.stepper .v { width: 44dp; text-align: center; font-family: "IBM Plex Mono"; } .stepper .v { width: 44dp; text-align: center; font-family: "IBM Plex Mono"; }
.cart { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 12dp; border: 1dp #24405c; border-radius: 4dp; background-color: #0d1622; } .cart { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 12dp; background-color: #5cc8f008; }
.cart .lines { flex: 1; overflow-y: auto; min-height: 60dp; } .cart .lines { flex: 1; overflow-y: auto; min-height: 60dp; }
.cline { display: flex; flex-direction: row; align-items: center; padding: 5dp 0; border-bottom: 1dp #ffffff08; } .cline { display: flex; flex-direction: row; align-items: center; padding: 5dp 0; border-bottom: 1dp #ffffff08; }
.cline img { width: 26dp; height: 26dp; margin-right: 8dp; } .cline img { width: 26dp; height: 26dp; margin-right: 8dp; }
@@ -56,30 +56,30 @@
.sum .l { flex: 1; color: #8197ad; } .sum .l { flex: 1; color: #8197ad; }
.sum .v { font-family: "IBM Plex Mono"; } .sum .v { font-family: "IBM Plex Mono"; }
.sum .v.bad { color: #ef6a5b; } .sum .v.bad { color: #ef6a5b; }
.dpsel { display: flex; flex-direction: row; align-items: center; margin: 4dp 0 8dp 0; padding: 6dp 8dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; } .dpsel { display: flex; flex-direction: row; align-items: center; margin: 4dp 0 8dp 0; padding: 6dp 8dp; background-color: #5cc8f010; }
.dpsel .dn { flex: 1; font-size: 13dp; color: #f2b13c; min-width: 0; } .dpsel .dn { flex: 1; font-size: 13dp; color: #f2b13c; min-width: 0; }
.dpsel .btn { margin: 0; padding: 2dp 10dp; } .dpsel .btn { margin: 0; padding: 2dp 10dp; }
.dplist { flex: 1; display: flex; flex-direction: column; min-height: 0; } .dplist { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dplist input.text { margin-bottom: 6dp; } .dplist input.text { margin-bottom: 6dp; }
.dprows { flex: 1; overflow-y: auto; min-height: 60dp; border: 1dp #24405c; border-radius: 3dp; } .dprows { flex: 1; overflow-y: auto; min-height: 60dp; }
.dprow { display: flex; flex-direction: row; font-size: 13dp; padding: 5dp 8dp; border-bottom: 1dp #ffffff08; } .dprow { display: flex; flex-direction: row; font-size: 13dp; padding: 5dp 8dp; border-bottom: 1dp #ffffff08; }
.dprow:hover { background-color: #122033; color: #5cc8f0; } .dprow:hover { background-color: #122033; color: #5cc8f0; }
.dprow.selected { color: #f2b13c; background-color: #f2b13c14; } .dprow.selected { color: #f2b13c; background-color: #f2b13c14; }
.dprow .n { flex: 1; } .dprow .n { flex: 1; }
.dprow .here { font-size: 11dp; color: #5fd08a; } .dprow .here { font-size: 11dp; color: #5fd08a; }
.sellrow { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 8dp; border: 1dp #24405c; border-radius: 4dp; background-color: #122033; } .sellrow { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 8dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
.sellrow:hover { border-color: #5cc8f0; } .sellrow:hover { border-left-color: #5cc8f0; }
.sellrow.selected { border-color: #f2b13c; background-color: #f2b13c14; } .sellrow.selected { background-color: #f2b13c14; border-left-color: #f2b13c; }
.sellrow img { width: 44dp; height: 44dp; margin-right: 12dp; } .sellrow img { width: 44dp; height: 44dp; margin-right: 12dp; }
.sellrow .n { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; } .sellrow .n { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; }
.sellrow .s { font-size: 12dp; color: #8197ad; margin-right: 14dp; text-align: right; } .sellrow .s { font-size: 12dp; color: #8197ad; margin-right: 14dp; text-align: right; }
.banner { padding: 10dp 12dp; margin-bottom: 10dp; border: 1dp #3d6d96; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #122033; font-size: 13dp; } .banner { padding: 10dp 12dp; margin-bottom: 10dp; font-size: 13dp; border-left: 3dp #f2b13c; background-color: #5cc8f010; }
</style> </style>
</head> </head>
<body class="window" data-model="shop"> <body class="window" data-model="shop">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/nn_traderequest.3db"/> <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/nn_traderequest.3db"/>
<span class="title">SHOP</span> <span class="title">SHOP</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">REM Coin <span class="v">{{ coins }}</span></span> <span class="chip">REM Coin <span class="v">{{ coins }}</span></span>
<span class="chip">Bank <span class="v">{{ credits }}</span></span> <span class="chip">Bank <span class="v">{{ credits }}</span></span>
+5 -5
View File
@@ -4,10 +4,10 @@
<link type="text/rcss" href="rem.rcss"/> <link type="text/rcss" href="rem.rcss"/>
<style> <style>
.tabs { display: flex; flex-direction: row; margin-bottom: 10dp; } .tabs { display: flex; flex-direction: row; margin-bottom: 10dp; }
.tab { padding: 5dp 14dp; margin-right: 6dp; border: 1dp #24405c; border-radius: 12dp; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; } .tab { padding: 5dp 14dp; margin-right: 6dp; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; border-bottom: 2dp #00000000; }
.tab:hover { border-color: #5cc8f0; color: #5cc8f0; } .tab:hover { color: #5cc8f0; border-bottom-color: #5cc8f0; }
.tab.primary { border-color: #f2b13c; color: #f2b13c; } .tab.primary { color: #f2b13c; border-bottom-color: #f2b13c; }
.story { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .story { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 12dp; background-color: #5cc8f008; }
.dead { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 26dp; letter-spacing: 3dp; color: #ef6a5b; margin-bottom: 10dp; } .dead { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 26dp; letter-spacing: 3dp; color: #ef6a5b; margin-bottom: 10dp; }
.acts { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 12dp; } .acts { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 12dp; }
.acts .btn { margin: 0 8dp 8dp 0; } .acts .btn { margin: 0 8dp 8dp 0; }
@@ -16,7 +16,7 @@
<body class="window medium" data-model="storystar"> <body class="window medium" data-model="storystar">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_storystar.3db"/> <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_storystar.3db"/>
<span class="title">{{ dead ? 'SHIP LOST' : 'MISSION LOG' }}</span> <span class="title">{{ dead ? 'SHIP LOST' : 'MISSION LOG' }}</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="close" data-if="can_close" data-action="btn" data-arg="8">&#215;</span> <span class="close" data-if="can_close" data-action="btn" data-arg="8">&#215;</span>
</div> </div>
+4 -4
View File
@@ -9,7 +9,7 @@
.right { flex: 1; min-width: 0; display: flex; flex-direction: column; } .right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.right .scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 8dp; } .right .scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 8dp; }
h3 { margin: 0 0 8dp 0; } h3 { margin: 0 0 8dp 0; }
.role { display: flex; flex-direction: row; align-items: center; padding: 3dp 8dp; border: 1dp #24405c; border-radius: 3dp; margin-bottom: 3dp; background-color: #0d1622; cursor: pointer; } .role { display: flex; flex-direction: row; align-items: center; padding: 3dp 8dp; margin-bottom: 3dp; cursor: pointer; background-color: #5cc8f008; }
.role:hover { background-color: #122033; } .role:hover { background-color: #122033; }
.role.sel { border-color: #f2b13c; } .role.sel { border-color: #f2b13c; }
.role .c { width: 34dp; height: 16dp; border: 1dp #ffffff40; border-radius: 3dp; margin-right: 10dp; } .role .c { width: 34dp; height: 16dp; border: 1dp #ffffff40; border-radius: 3dp; margin-right: 10dp; }
@@ -17,8 +17,8 @@
.role .h { font-family: "IBM Plex Mono"; font-size: 14dp; color: #8197ad; } .role .h { font-family: "IBM Plex Mono"; font-size: 14dp; color: #8197ad; }
.sec { margin-bottom: 12dp; } .sec { margin-bottom: 12dp; }
.chips { display: flex; flex-direction: row; flex-wrap: wrap; } .chips { display: flex; flex-direction: row; flex-wrap: wrap; }
.chip2 { padding: 5dp 10dp; margin: 0 6dp 6dp 0; border: 1dp #3d6d96; border-radius: 3dp; font-size: 14dp; cursor: pointer; } .chip2 { padding: 5dp 10dp; margin: 0 6dp 6dp 0; font-size: 14dp; cursor: pointer; border-left: 3dp #24405c; }
.chip2:hover { border-color: #f2b13c; } .chip2:hover { border-left-color: #f2b13c; }
.sws { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 8dp; } .sws { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 8dp; }
.sw { width: 24dp; height: 24dp; margin: 0 6dp 6dp 0; border: 2dp #00000000; border-radius: 4dp; cursor: pointer; } .sw { width: 24dp; height: 24dp; margin: 0 6dp 6dp 0; border: 2dp #00000000; border-radius: 4dp; cursor: pointer; }
.sw .c { width: 100%; height: 100%; border-radius: 2dp; } .sw .c { width: 100%; height: 100%; border-radius: 2dp; }
@@ -43,7 +43,7 @@
<body class="window themes" data-model="themes"> <body class="window themes" data-model="themes">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="img/gear.png"/> <img class="head-ico" src="img/gear.png"/>
<span class="title">INTERFACE COLOURS - THEME DESIGNER</span> <span class="title">INTERFACE COLOURS - THEME DESIGNER</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
</div> </div>
+7 -8
View File
@@ -9,23 +9,22 @@
{ {
position: absolute; position: absolute;
max-width: 380dp; max-width: 380dp;
padding: 5dp 9dp; padding: 6dp 14dp;
background-color: #0d1622f2; decorator: ninepatch(fw, fw-i); /* the flight HUD's frame (rem.rcss) */
border: 2dp #3d6d96;
border-left: 2dp #f2b13c;
border-radius: 3dp;
font-size: 13dp; font-size: 13dp;
color: #dbe6f0; color: #dbe6f0;
white-space: nowrap; white-space: nowrap;
} }
.ftip.roll { border-left-color: #5cc8f0; font-size: 14dp; white-space: pre-line; } /* the rollover help ("Click on a character ..."): centred under the nav bar at the top, in the
flight HUD's frame -- not at the classic point, where it lay over the nav bar */
.ftip.roll { left: 50%; top: 58dp; transform: translateX(-50%); max-width: 640dp; padding: 8dp 20dp; font-size: 14dp; text-align: center; white-space: pre-line; }
/* a REM window's .tip (the hovered element's), drawn here so no other window covers it */ /* a REM window's .tip (the hovered element's), drawn here so no other window covers it */
.ftip.hov { width: 260dp; white-space: normal; font-family: Barlow; background-color: #05090f; border-left: 2dp #3d6d96; } .ftip.hov { width: 260dp; white-space: normal; font-family: Barlow; }
</style> </style>
</head> </head>
<body class="tipdoc" data-model="tooltip"> <body class="tipdoc" data-model="tooltip">
<div class="ftip" data-if="tip_shown" data-style-left="tip_left" data-style-top="tip_top">{{ tip_text }}</div> <div class="ftip" data-if="tip_shown" data-style-left="tip_left" data-style-top="tip_top">{{ tip_text }}</div>
<div class="ftip roll" data-if="roll_shown" data-style-left="roll_left" data-style-top="roll_top">{{ roll_text }}</div> <div class="ftip roll" data-if="roll_shown">{{ roll_text }}</div>
<div class="ftip hov" data-if="hov_shown" data-style-left="hov_left" data-style-top="hov_top" data-rml="hov_rml"></div> <div class="ftip hov" data-if="hov_shown" data-style-left="hov_left" data-style-top="hov_top" data-rml="hov_rml"></div>
</body> </body>
</rml> </rml>
+3 -3
View File
@@ -9,7 +9,7 @@
.col h3 { margin-bottom: 6dp; } .col h3 { margin-bottom: 6dp; }
.state { font-size: 12dp; margin-bottom: 6dp; color: #ef6a5b; } .state { font-size: 12dp; margin-bottom: 6dp; color: #ef6a5b; }
.state.ok { color: #7cf27c; } .state.ok { color: #7cf27c; }
.lst { flex: 1; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; } .lst { flex: 1; overflow-y: auto; background-color: #5cc8f008; }
.it { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; } .it { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
.it:hover { background-color: #122033; } .it:hover { background-color: #122033; }
.it.picked { border-left-color: #f2b13c; background-color: #f2b13c1a; } .it.picked { border-left-color: #f2b13c; background-color: #f2b13c1a; }
@@ -17,7 +17,7 @@
.it img { width: 28dp; height: 28dp; margin-right: 8dp; } .it img { width: 28dp; height: 28dp; margin-right: 8dp; }
.it .n { flex: 1; min-width: 0; font-size: 14dp; } .it .n { flex: 1; min-width: 0; font-size: 14dp; }
.it .c { font-family: "IBM Plex Mono"; font-size: 12dp; color: #f2b13c; } .it .c { font-family: "IBM Plex Mono"; font-size: 12dp; color: #f2b13c; }
.move { margin-top: 12dp; padding: 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; } .move { margin-top: 12dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; border-left: 3dp #f2b13c; background-color: #5cc8f010; }
.move .t { flex: 1; } .move .t { flex: 1; }
.move .t .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; } .move .t .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
.move .t .a { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; } .move .t .a { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
@@ -30,7 +30,7 @@
<body class="window" data-model="trade"> <body class="window" data-model="trade">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/> <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
<span class="title">TRADE</span> <span class="title">TRADE</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="close" data-action="cancel">&#215;</span> <span class="close" data-action="cancel">&#215;</span>
</div> </div>
+3 -3
View File
@@ -8,7 +8,7 @@
.colm.gap { margin-right: 18dp; } .colm.gap { margin-right: 18dp; }
.col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; } .col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
.col-h .hint { margin-left: auto; } .col-h .hint { margin-left: auto; }
.list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; } .list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.good { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; } .good { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
.good:hover { background-color: #122033; } .good:hover { background-color: #122033; }
.good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; } .good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
@@ -18,7 +18,7 @@
.good .note { font-size: 12dp; color: #8197ad; margin-right: 10dp; } .good .note { font-size: 12dp; color: #8197ad; margin-right: 10dp; }
.good .c { font-family: "IBM Plex Mono"; width: 80dp; text-align: right; color: #8197ad; } .good .c { font-family: "IBM Plex Mono"; width: 80dp; text-align: right; color: #8197ad; }
.good .p { font-family: "IBM Plex Mono"; width: 110dp; text-align: right; color: #f2b13c; } .good .p { font-family: "IBM Plex Mono"; width: 110dp; text-align: right; color: #f2b13c; }
.deal { margin-top: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; } .deal { margin-top: 14dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; background-color: #5cc8f010; }
.deal img { width: 48dp; height: 48dp; margin-right: 14dp; } .deal img { width: 48dp; height: 48dp; margin-right: 14dp; }
.deal .what { width: 260dp; } .deal .what { width: 260dp; }
.deal .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; } .deal .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
@@ -33,7 +33,7 @@
<body class="window" data-model="trader"> <body class="window" data-model="trader">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/> <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/>
<span class="title">COMMODITY TRADER</span> <span class="title">COMMODITY TRADER</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Hold <span class="v">{{ hold }}</span></span> <span class="chip">Hold <span class="v">{{ hold }}</span></span>
<span class="chip">Credits <span class="v">{{ credits }}</span></span> <span class="chip">Credits <span class="v">{{ credits }}</span></span>
+2 -2
View File
@@ -5,7 +5,7 @@
<style> <style>
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.state-line { display: flex; flex-direction: row; margin-bottom: 12dp; } .state-line { display: flex; flex-direction: row; margin-bottom: 12dp; }
.state-box { flex: 1; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 10dp 12dp; margin-right: 10dp; display: flex; flex-direction: row; align-items: center; } .state-box { flex: 1; padding: 10dp 12dp; margin-right: 10dp; display: flex; flex-direction: row; align-items: center; background-color: #5cc8f010; }
.state-box.last { margin-right: 0; } .state-box.last { margin-right: 0; }
.state-box img { width: 30dp; height: 30dp; margin-right: 10dp; } .state-box img { width: 30dp; height: 30dp; margin-right: 10dp; }
.state-box .v { font-family: "Saira SemiCondensed"; font-size: 17dp; } .state-box .v { font-family: "Saira SemiCondensed"; font-size: 17dp; }
@@ -16,7 +16,7 @@
<body class="window small" data-model="waypoints"> <body class="window small" data-model="waypoints">
<div class="win-head"> <div class="win-head">
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_waypoints.3db"/> <img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_waypoints.3db"/>
<span class="title">GROUP WAYPOINTS</span> <span class="title">GROUP WAYPOINTS</span><span class="sl">\\\</span>
<span class="spacer"></span> <span class="spacer"></span>
<span class="chip">Mine <span class="v">{{ my_count }}</span></span> <span class="chip">Mine <span class="v">{{ my_count }}</span></span>
<span class="close" data-action="close">&#215;</span> <span class="close" data-action="close">&#215;</span>
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.
BIN
View File
Binary file not shown.