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:
Binary file not shown.
Binary file not shown.
Regular → Executable
BIN
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -3,13 +3,13 @@
|
||||
<title>Account</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<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; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window small" data-model="account">
|
||||
<div class="win-head">
|
||||
<span class="title">MULTIPLAYER ACCOUNT</span>
|
||||
<span class="title">MULTIPLAYER ACCOUNT</span><span class="sl">\\\</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
|
||||
+3
-3
@@ -5,12 +5,12 @@
|
||||
<style>
|
||||
.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; }
|
||||
.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:hover { background-color: #122033; }
|
||||
.row.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
||||
.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; }
|
||||
.runline { display: flex; flex-direction: row; align-items: center; }
|
||||
.runline input { flex: 1; margin-right: 10dp; }
|
||||
@@ -22,7 +22,7 @@
|
||||
<body class="window medium" data-model="admin">
|
||||
<div class="win-head">
|
||||
<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="chip">{{ commands.size }} commands</span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
|
||||
+12
-14
@@ -13,7 +13,7 @@
|
||||
.col-h .hint { margin-left: auto; }
|
||||
.grow { flex: 1; min-height: 0; }
|
||||
.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; }
|
||||
.amount { display: flex; flex-direction: row; align-items: center; margin: 8dp 0 10dp 0; }
|
||||
.amount .label { margin-right: 10dp; }
|
||||
@@ -23,7 +23,7 @@
|
||||
.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; }
|
||||
.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 .v { font-family: "Saira SemiCondensed"; font-size: 16dp; margin: 4dp 0 8dp 0; }
|
||||
.row.short .c2, .row.short .c3 { color: #ef6a5b; }
|
||||
@@ -32,7 +32,7 @@
|
||||
.sys-head { display: flex; flex-direction: row; align-items: center; }
|
||||
.sys-head .sys-claim { margin-left: auto; }
|
||||
.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 .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; }
|
||||
.sys-type .p { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
|
||||
@@ -52,12 +52,11 @@
|
||||
align-items: center;
|
||||
padding: 9dp 10dp;
|
||||
margin-bottom: 6dp;
|
||||
border: 1dp #24405c;
|
||||
border-radius: 3dp;
|
||||
background-color: #122033;
|
||||
border-left: 3dp #24405c;
|
||||
background-color: #5cc8f010;
|
||||
}
|
||||
.drone:hover { border-color: #5cc8f0; }
|
||||
.drone.selected { border-color: #f2b13c; }
|
||||
.drone:hover { border-left-color: #5cc8f0; }
|
||||
.drone.selected { border-left-color: #f2b13c; }
|
||||
.drone .ico
|
||||
{
|
||||
width: 34dp;
|
||||
@@ -79,14 +78,13 @@
|
||||
{
|
||||
text-align: center;
|
||||
padding: 9dp;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
color: #5cc8f0;
|
||||
font-family: "Saira SemiCondensed";
|
||||
letter-spacing: 1.1dp;
|
||||
text-transform: uppercase;
|
||||
font-size: 14dp;
|
||||
margin-top: 4dp;
|
||||
decorator: ninepatch(fs, fs-i);
|
||||
}
|
||||
.add:hover { background-color: #122033; }
|
||||
.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 .table { flex: 1; margin: 8dp 0 10dp 0; }
|
||||
.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; }
|
||||
.arrow { color: #f2b13c; font-family: "IBM Plex Mono"; margin: 0 10dp; }
|
||||
.namefield { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
||||
.namefield .label { margin-right: 10dp; }
|
||||
.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.warn { border-color: #f2b13c; color: #f2b13c; }
|
||||
.note { padding: 8dp 10dp; margin-bottom: 8dp; font-size: 13dp; color: #8197ad; border-left: 3dp #24405c; background-color: #5cc8f010; }
|
||||
.note.warn { color: #f2b13c; border-left-color: #f2b13c; }
|
||||
.coins { font-size: 12dp; color: #8197ad; margin-top: 6dp; }
|
||||
.stats .v.txt { font-family: "Saira SemiCondensed"; font-size: 15dp; white-space: nowrap; overflow: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="base">
|
||||
<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="spacer"></span>
|
||||
<span class="chip">Credits <span class="v">{{ money }}</span></span>
|
||||
|
||||
@@ -8,13 +8,13 @@
|
||||
.colm.list { flex: 1; }
|
||||
.colm.side { flex: 0 0 32%; 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; }
|
||||
.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; }
|
||||
.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:hover { border-color: #5cc8f0; }
|
||||
.start.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
.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-left-color: #5cc8f0; }
|
||||
.start.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
|
||||
.start img { width: 38dp; height: 38dp; margin-right: 12dp; }
|
||||
.start .txt { flex: 1; min-width: 0; }
|
||||
.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; }
|
||||
.namebox { margin-bottom: 14dp; }
|
||||
.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 .k { font-size: 14dp; color: #8197ad; margin-top: 2dp; }
|
||||
.detail .facts { display: flex; flex-direction: row; margin: 10dp 0; }
|
||||
@@ -34,7 +34,7 @@
|
||||
</head>
|
||||
<body class="window" data-model="charcreate">
|
||||
<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="chip">Starts <span class="v">{{ count }}</span></span>
|
||||
</div>
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
.colm.list { flex: 1; }
|
||||
.colm.side { flex: 0 0 32%; 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; }
|
||||
.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:hover { border-color: #5cc8f0; }
|
||||
.pilot.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
.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-left-color: #5cc8f0; }
|
||||
.pilot.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
|
||||
.pilot img { width: 44dp; height: 44dp; margin-right: 14dp; }
|
||||
.pilot .txt { flex: 1; min-width: 0; }
|
||||
.pilot .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
|
||||
@@ -22,17 +22,17 @@
|
||||
.pilot .r { text-align: right; }
|
||||
.pilot .m { font-family: "IBM Plex Mono"; color: #f2b13c; }
|
||||
.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 .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; }
|
||||
.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; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="charselect">
|
||||
<div class="win-head">
|
||||
<span class="title">{{ server }}</span>
|
||||
<span class="title">{{ server }}</span><span class="sl">\\\</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Characters <span class="v">{{ chars.size }}</span> / <span class="v">5</span></span>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
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; }
|
||||
.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 .t { flex: 1; white-space: pre; overflow: hidden; }
|
||||
.gear { width: 22dp; height: 22dp; margin-left: 8dp; image-color: #8fb8d8; }
|
||||
|
||||
@@ -6,17 +6,17 @@
|
||||
.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; }
|
||||
.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:hover { color: #dbe6f0; border-color: #3d6d96; }
|
||||
.ct.on { color: #f2b13c; border-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
.ct { padding: 4dp 12dp; margin-right: 4dp; font-size: 13dp; color: #8197ad; border-bottom: 2dp #00000000; }
|
||||
.ct:hover { color: #dbe6f0; border-bottom-color: #3d6d96; }
|
||||
.ct.on { color: #f2b13c; background-color: #f2b13c1a; border-bottom-color: #f2b13c; }
|
||||
.hl { padding: 1dp 4dp; border-radius: 2dp; }
|
||||
.hl.mention { background-color: #f2b13c26; border-left: 2dp #f2b13c; }
|
||||
.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:hover { image-color: #f2b13c; }
|
||||
.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:hover { background-color: #122033; }
|
||||
.tg.cur { border-left-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
@@ -26,7 +26,7 @@
|
||||
<body class="window medium" data-model="chathistory">
|
||||
<div class="win-head">
|
||||
<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="chip">Targets <span class="v">{{ count }}</span></span>
|
||||
<img class="gear" src="img/gear.png" data-action="settings"/>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<style>
|
||||
body.window.chatset { left: 50%; margin-left: -330dp; top: 12%; width: 660dp; height: 640dp; }
|
||||
.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 .box { width: 18dp; height: 18dp; border: 2dp #3d6d96; border-radius: 3dp; margin-right: 12dp; }
|
||||
.tgl .box.on { border-color: #f2b13c; background-color: #f2b13c; }
|
||||
@@ -27,7 +27,7 @@
|
||||
<body class="window chatset" data-model="chatsettings">
|
||||
<div class="win-head">
|
||||
<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="close" data-action="cancel">×</span>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.gap { margin-right: 18dp; }
|
||||
.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 img { width: 34dp; height: 34dp; margin-right: 12dp; }
|
||||
.target.off img { opacity: 0.3; }
|
||||
@@ -20,7 +20,7 @@
|
||||
<body class="window medium" data-model="contracts">
|
||||
<div class="win-head">
|
||||
<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="chip">Bounties <span class="v">{{ bounties.size }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<style>
|
||||
/* 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; }
|
||||
.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 .r { padding: 6dp 10dp; font-size: 15dp; border-radius: 3dp; }
|
||||
.menu .r:hover { background-color: #122033; color: #5cc8f0; }
|
||||
|
||||
@@ -11,11 +11,8 @@
|
||||
width: 520dp;
|
||||
margin-left: -260dp;
|
||||
margin-top: -140dp;
|
||||
background-color: #0d1622f5;
|
||||
border: 2dp #3d6d96;
|
||||
border-top: 2dp #f2b13c;
|
||||
border-radius: 4dp;
|
||||
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 .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>
|
||||
<body class="box" data-model="dialog">
|
||||
<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">×</span>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
|
||||
+3
-3
@@ -4,15 +4,15 @@
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.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; }
|
||||
.request { padding: 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 10dp; }
|
||||
.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; margin-bottom: 10dp; border-left: 3dp #f2b13c; background-color: #5cc8f008; }
|
||||
.request .t { white-space: pre-line; line-height: 1.5; font-size: 15dp; }
|
||||
.request .w { font-size: 12dp; color: #8197ad; margin-top: 6dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window small" data-model="group">
|
||||
<div class="win-head">
|
||||
<span class="title">GROUP</span>
|
||||
<span class="title">GROUP</span><span class="sl">\\\</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Members <span class="v">{{ members.size }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
|
||||
+2
-2
@@ -3,13 +3,13 @@
|
||||
<title>Information</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<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>
|
||||
</head>
|
||||
<body class="window small" data-model="help">
|
||||
<div class="win-head">
|
||||
<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="close" data-action="close">×</span>
|
||||
</div>
|
||||
|
||||
+117
-75
@@ -4,75 +4,104 @@
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* 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; }
|
||||
.fp { position: absolute; box-sizing: border-box; background-color: #050a18e6; border: 3dp #3f9ad6; border-radius: 8dp; }
|
||||
.fp.inner { border-color: #2b6f9e; }
|
||||
.fp { position: absolute; box-sizing: border-box; decorator: ninepatch(fa, fa-i); }
|
||||
.fp.all { decorator: ninepatch(fb, fb-i); }
|
||||
.fp.small { decorator: ninepatch(fs, fs-i); }
|
||||
.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 .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; }
|
||||
/* 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 ------------------------------------------------- */
|
||||
.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 .ico { width: 64dp; height: 64dp; margin: 0 8dp; }
|
||||
.cruise { left: 50%; margin-left: -206dp; top: 99dp; width: 74dp; height: 70dp; display: flex; justify-content: center; align-items: center; }
|
||||
.cruise .ico { width: 52dp; height: 52dp; }
|
||||
/* --- the maneuver bar, top centre: icon over its name, the active one amber ----------- */
|
||||
.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 .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; }
|
||||
.mans .ib:first-child { border-left-width: 0; }
|
||||
.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 ------------------------------------------- */
|
||||
.thrust, .speed { bottom: 17dp; width: 78dp; height: 38dp; text-align: center; line-height: 38dp; font-size: 22dp; }
|
||||
.thrust { left: 50%; margin-left: -222dp; }
|
||||
.thrust.low { color: #ef6a5b; }
|
||||
.speed { left: 50%; margin-left: 144dp; }
|
||||
.bars { left: 50%; margin-left: -132dp; bottom: 8dp; width: 264dp; height: 56dp; padding: 0 8dp; display: flex; flex-direction: column; justify-content: center; }
|
||||
.bar { position: relative; width: 242dp; height: 11dp; margin: 2dp 0; }
|
||||
.chips { position: absolute; left: 0; top: 0; width: 242dp; height: 11dp; display: flex; flex-direction: row; }
|
||||
.sg { flex: 1; height: 11dp; margin-right: 2dp; }
|
||||
/* --- bottom centre: thrust | shield / hull / power | speed, one panel ----------------- */
|
||||
.core { left: 50%; margin-left: -240dp; bottom: 8dp; width: 480dp; height: 66dp; padding: 0 16dp; display: flex; flex-direction: row; align-items: center; }
|
||||
.core .val { width: 76dp; text-align: center; font-weight: 600; font-size: 22dp; color: #e8f4ff; }
|
||||
.core .val .u { font-weight: 400; font-size: 11dp; color: #8fb3d0; margin-left: 4dp; }
|
||||
.core .cap { display: block; font-weight: 600; font-size: 9dp; letter-spacing: 1.5dp; color: #8fb3d0; }
|
||||
.core .thrust.low { color: #ef6a5b; }
|
||||
.core .sep { width: 1dp; height: 42dp; background-color: #2b6f9e; margin: 0 10dp; }
|
||||
.bars { flex: 1; display: flex; flex-direction: column; justify-content: center; }
|
||||
.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; }
|
||||
/* 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.lit { background-color: #c9c272; }
|
||||
.shield .sg { background-color: #3e3db544; }
|
||||
.shield .sg.lit { background-color: #5856dc; }
|
||||
.hull .sg { background-color: #782a3355; }
|
||||
.hull .sg.lit { background-color: #b53844; }
|
||||
.power .sg { background-color: #f0943c26; }
|
||||
.power .sg.lit { background-color: #f0943c; }
|
||||
.shield .sg { background-color: #4fc6ee26; }
|
||||
.shield .sg.lit { background-color: #4fc6ee; }
|
||||
.hull .sg { background-color: #e0484e26; }
|
||||
.hull .sg.lit { background-color: #e0484e; }
|
||||
|
||||
/* --- 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 .sp { flex: 1; }
|
||||
.lbody { left: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 10dp 12dp; }
|
||||
.filters { display: flex; flex-direction: row; justify-content: center; margin-bottom: 4dp; }
|
||||
.filters .ico { width: 36dp; height: 36dp; margin: 0 4dp; }
|
||||
.rows { height: 200dp; }
|
||||
.c { display: flex; flex-direction: row; align-items: center; height: 25dp; padding: 0 2dp; }
|
||||
.lhead { left: 8dp; bottom: 290dp; width: 310dp; height: 42dp; display: flex; flex-direction: row; align-items: center; padding: 0 8dp 0 22dp; }
|
||||
.lhead .ico { width: 30dp; height: 30dp; }
|
||||
.lbody { left: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 12dp 16dp; }
|
||||
.filters { display: flex; flex-direction: row; justify-content: center; margin-bottom: 6dp; padding-bottom: 6dp; border-bottom: 1dp #2b6f9e; }
|
||||
.filters .ico { width: 32dp; height: 32dp; margin: 0 4dp; }
|
||||
.rows { height: 196dp; margin-right: 22dp; }
|
||||
.c { display: flex; flex-direction: row; align-items: center; height: 25dp; padding: 0 2dp; border-bottom: 1dp #24405c66; }
|
||||
.c:hover { background-color: #3a8fc822; }
|
||||
.c img { width: 22dp; height: 22dp; margin-right: 6dp; }
|
||||
.c .r { width: 52dp; text-align: right; margin-right: 10dp; font-size: 19dp; }
|
||||
.c .n { flex: 1; white-space: nowrap; overflow: hidden; font-size: 19dp; }
|
||||
.scroll { position: absolute; right: 6dp; bottom: 4dp; }
|
||||
.scroll .btn { padding: 0 8dp; font-size: 14dp; margin-left: 4dp; }
|
||||
.tname { font-size: 26dp; color: #e8f1fa; }
|
||||
.tsub { font-size: 18dp; color: #8fb3d0; margin-bottom: 8dp; }
|
||||
.tbar { display: flex; flex-direction: row; align-items: center; margin: 3dp 0; }
|
||||
.tbar .l { width: 70dp; font-size: 17dp; color: #8fb3d0; }
|
||||
.tbtns { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 8dp; }
|
||||
.tbtns .ico { width: 44dp; height: 44dp; }
|
||||
.c img { width: 20dp; height: 20dp; margin-right: 8dp; }
|
||||
.c .n { flex: 1; white-space: nowrap; overflow: hidden; font-weight: 500; font-size: 16dp; letter-spacing: 1dp; text-transform: uppercase; }
|
||||
.c .r { width: 64dp; text-align: right; margin-left: 8dp; font-size: 16dp; }
|
||||
/* a scroll bar at the right of the rows: the arrows and a click on the track above / below
|
||||
the middle step a row (the classic list's own scroll); the thumb's place and size come from
|
||||
the list (thumb_top / thumb_size), dragged it scrolls the list (rem_ui_hud.cpp) */
|
||||
.sbar { position: absolute; right: 6dp; top: 66dp; bottom: 12dp; width: 20dp; display: flex; flex-direction: column; align-items: center; }
|
||||
.sbar .ar { width: 20dp; height: 20dp; line-height: 20dp; text-align: center; font-size: 11dp; color: #5cc8f0; }
|
||||
.sbar .ar:hover { color: #f2b13c; background-color: #f2b13c1f; }
|
||||
.sbar .ar.off { color: #2b6f9e; }
|
||||
.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 ------------------------------------------------------------- */
|
||||
.rhead { right: 46dp; bottom: 289dp; width: 291dp; height: 52dp; display: flex; flex-direction: row; align-items: center; padding: 0 10dp 0 8dp; }
|
||||
.rhead .ico { width: 36dp; height: 36dp; margin: 0 4dp 0 10dp; }
|
||||
.rhead .cnt { font-size: 22dp; margin-right: 10dp; }
|
||||
.rbody { right: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 10dp 16dp; }
|
||||
.w { display: flex; flex-direction: row; height: 26dp; font-size: 23dp; color: #dbe6f0; }
|
||||
.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: 26dp; height: 26dp; margin: 0 4dp 0 10dp; }
|
||||
.rhead .cnt { font-weight: 600; font-size: 18dp; }
|
||||
.rbody { right: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 12dp 16dp; }
|
||||
.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.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 .a { margin-left: 8dp; }
|
||||
.w.cloak { border-top: 1dp #24405c; margin-top: 4dp; color: #8fb8d8; }
|
||||
.w.cloak.on { color: #b98cf2; }
|
||||
.special { color: #f2d23c; font-size: 18dp; margin-top: 6dp; }
|
||||
.w .a { margin-left: 8dp; color: #b9d4ea; }
|
||||
.w.cloak { margin-top: 4dp; color: #8fb8d8; }
|
||||
.w.cloak.on { color: #b98cf2; border-left-color: #b98cf2; }
|
||||
.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 */
|
||||
.grp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
|
||||
.grp .fp, .grp .tag { pointer-events: auto; }
|
||||
@@ -82,7 +111,7 @@
|
||||
.g3 { transform-origin: 100% 100%; }
|
||||
.grp.gone { display: none; }
|
||||
.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 .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; }
|
||||
@@ -98,35 +127,41 @@
|
||||
<body class="hud" data-model="hud" data-class-editing="editing" data-style-opacity="opacity">
|
||||
<!-- 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="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="fp 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="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 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"/><span class="lb">{{ m.label }}</span></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>
|
||||
</div>
|
||||
|
||||
<!-- 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="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 class="fp inner thrust" data-class-low="thrust_low">{{ thrust }}</div>
|
||||
<div class="fp bars">
|
||||
<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="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="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="fp all core">
|
||||
<div class="val thrust" data-class-low="thrust_low"><span class="cap">THRUST</span>{{ thrust }}</div>
|
||||
<div class="sep"></div>
|
||||
<div class="bars">
|
||||
<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 class="fp inner speed">{{ speed }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 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="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 & 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 & target</div>
|
||||
<div data-if="panel || editing">
|
||||
<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>
|
||||
<div class="fp lbody">
|
||||
@@ -135,8 +170,8 @@
|
||||
<div data-if="has_target">
|
||||
<div class="tname">{{ target_name }}</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 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 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="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>
|
||||
@@ -148,12 +183,17 @@
|
||||
</div>
|
||||
<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">
|
||||
<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 class="scroll">
|
||||
<div class="btn" data-if="more_up" data-action="up">▲</div>
|
||||
<div class="btn" data-if="more_down" data-action="down">▼</div>
|
||||
<div class="sbar" data-if="more_up || more_down">
|
||||
<div class="ar" data-class-off="!more_up" data-action="up">▲</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">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -163,18 +203,20 @@
|
||||
|
||||
<!-- 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="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 & 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 & equipment</div>
|
||||
<div data-if="status || editing">
|
||||
<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_battery" data-action="battery"><img class="ico" src="3db:interface/hud/HUD_shieldgaugeicon.3db"/></div><span class="cnt" data-if="has_battery">{{ battery }}</span>
|
||||
<div class="ib" data-if="loot" data-action="loot"><img class="ico" src="3db:interface/HUD/HUD_loot_bw.3db"/></div>
|
||||
</div>
|
||||
<div class="fp rbody">
|
||||
<div class="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 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>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -6,7 +6,7 @@
|
||||
.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.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:hover { background-color: #122033; }
|
||||
.inv.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
||||
@@ -15,8 +15,8 @@
|
||||
.inv .n { font-size: 14dp; }
|
||||
.inv .note { font-size: 12dp; color: #8197ad; }
|
||||
.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; }
|
||||
.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; }
|
||||
#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; background-color: #5cc8f008; }
|
||||
.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 .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
|
||||
@@ -28,7 +28,7 @@
|
||||
<body class="window" data-model="inventory">
|
||||
<div class="win-head">
|
||||
<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="chip">Hold <span class="v">{{ hold }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
|
||||
@@ -5,13 +5,13 @@
|
||||
<style>
|
||||
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; }
|
||||
.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:hover { background-color: #122033; }
|
||||
.sv.sel { border-left-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
.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; }
|
||||
.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 .k { width: 90dp; color: #8197ad; font-size: 13dp; text-transform: uppercase; letter-spacing: 1dp; }
|
||||
.det .row .v { flex: 1; font-size: 15dp; }
|
||||
@@ -21,7 +21,7 @@
|
||||
</head>
|
||||
<body class="window lg" data-model="loadgame">
|
||||
<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="chip">Saves <span class="v">{{ saves.size }}</span></span>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
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 .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; }
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
.colm.list { flex: 1; }
|
||||
.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; }
|
||||
.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 .s { white-space: pre; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.6; }
|
||||
.namebox { margin-bottom: 12dp; }
|
||||
@@ -18,7 +18,7 @@
|
||||
</head>
|
||||
<body class="window medium" data-model="loadsave">
|
||||
<div class="win-head">
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="title">{{ title }}</span><span class="sl">\\\</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Saves <span class="v">{{ saves.size }}</span></span>
|
||||
</div>
|
||||
|
||||
@@ -22,8 +22,8 @@
|
||||
.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 .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:hover { border-color: #5cc8f0; background-color: #122033; }
|
||||
.entry { padding: 13dp 16dp; margin-bottom: 8dp; border-left: 3dp #3d6d96; background-color: #5cc8f008; }
|
||||
.entry:hover { border-left-color: #5cc8f0; background-color: #5cc8f010; }
|
||||
.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.primary .l { color: #f2b13c; }
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
.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; }
|
||||
.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:hover { background-color: #122033; }
|
||||
.g.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
||||
@@ -21,8 +21,8 @@
|
||||
.ghead .v { width: 62dp; text-align: right; }
|
||||
.tools { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
||||
.tools input { flex: 1; margin-right: 8dp; }
|
||||
.toggle { font-size: 13dp; color: #8197ad; padding: 4dp 8dp; border: 1dp #24405c; border-radius: 3dp; }
|
||||
.toggle.on { color: #f2b13c; border-color: #f2b13c; }
|
||||
.toggle { font-size: 13dp; color: #8197ad; padding: 4dp 8dp; border-bottom: 2dp #00000000; }
|
||||
.toggle.on { color: #f2b13c; border-bottom-color: #f2b13c; }
|
||||
.toggle:hover { color: #5cc8f0; }
|
||||
.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; }
|
||||
@@ -31,7 +31,7 @@
|
||||
.chartbar .toggle { margin-right: 6dp; }
|
||||
.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; }
|
||||
.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 .col { position: absolute; top: 0; bottom: 0; }
|
||||
.chart .col:hover { background-color: #5cc8f014; }
|
||||
@@ -51,7 +51,7 @@
|
||||
.book .table { flex: 1; height: 160dp; }
|
||||
.table .c2 { width: 60dp; text-align: right; font-family: "IBM Plex Mono"; }
|
||||
.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 .label { width: 120dp; }
|
||||
.panel input.text { width: 120dp; margin-right: 10dp; }
|
||||
@@ -71,7 +71,7 @@
|
||||
<body class="window" data-model="market">
|
||||
<div class="win-head">
|
||||
<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="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>
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.side { flex: 0 0 46%; margin-right: 18dp; }
|
||||
.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:hover { border-color: #5cc8f0; }
|
||||
.offer.selected { border-color: #f2b13c; }
|
||||
.offer { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
|
||||
.offer:hover { border-left-color: #5cc8f0; }
|
||||
.offer.selected { border-left-color: #f2b13c; }
|
||||
.offer img { width: 40dp; height: 40dp; margin-right: 12dp; }
|
||||
.offer .mid { flex: 1; min-width: 0; }
|
||||
.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 .r { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
|
||||
/* 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; }
|
||||
.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; }
|
||||
.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; background-color: #5cc8f008; }
|
||||
.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; }
|
||||
</style>
|
||||
@@ -29,7 +29,7 @@
|
||||
<body class="window medium" data-model="missionboard">
|
||||
<div class="win-head">
|
||||
<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="chip">Offers <span class="v">{{ all_count }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
|
||||
@@ -3,27 +3,31 @@
|
||||
<title>Mission log</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<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; }
|
||||
.now { border: 1dp #f2b13c; border-radius: 3dp; background-color: #f2b13c14; padding: 12dp 14dp; margin-bottom: 14dp; }
|
||||
.now .t { font-size: 16dp; line-height: 1.45; white-space: pre-line; margin-top: 4dp; }
|
||||
.now { border-left: 3dp #f2b13c; background-color: #f2b13c14; padding: 10dp 14dp; margin-bottom: 18dp; }
|
||||
.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; }
|
||||
.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.objective { border-left-color: #5cc8f0; color: #dbe6f0; background-color: #122033; }
|
||||
.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: #5cc8f00f; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="missionlog">
|
||||
<div class="win-head">
|
||||
<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="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">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="colm">
|
||||
<div class="now" data-if="current != ''"><div class="label">Current objective</div><div class="t">{{ current }}</div></div>
|
||||
<h3 style="margin-bottom: 8dp;">History</h3>
|
||||
<div class="now" data-if="current != ''"><span class="cap">CURRENT OBJECTIVE</span><div class="t">{{ current }}</div></div>
|
||||
<span class="cap">HISTORY<span class="sl">\\\</span></span>
|
||||
<div class="list">
|
||||
<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>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.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; }
|
||||
.row .c1 img { width: 16dp; height: 16dp; margin-right: 8dp; }
|
||||
</style>
|
||||
@@ -12,7 +12,7 @@
|
||||
<body class="window medium" data-model="missions">
|
||||
<div class="win-head">
|
||||
<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="chip">Story <span class="v">{{ story.size }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
|
||||
@@ -14,19 +14,20 @@
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navbar { display: flex; flex-direction: row; align-items: center; padding: 3dp 6dp; background-color: #070b12e6; border: 2dp #3d6d96; border-radius: 4dp; }
|
||||
.nb { display: flex; flex-direction: row; align-items: center; padding: 4dp 10dp 4dp 6dp; margin: 0 2dp; border: 1dp #00000000; border-radius: 3dp; }
|
||||
.nb:hover { border-color: #5cc8f0; background-color: #122033; }
|
||||
.nb.active { border-color: #f2b13c; background-color: #f2b13c1f; }
|
||||
/* in the flight HUD's design: one frame with cut corners (rem.rcss, hudframes), no box per button */
|
||||
.navbar { display: flex; flex-direction: row; align-items: center; height: 48dp; box-sizing: border-box; padding: 0 18dp; decorator: ninepatch(fb, fb-i); }
|
||||
.nb { display: flex; flex-direction: row; align-items: center; height: 36dp; padding: 0 12dp 0 8dp; margin: 0 1dp; border-radius: 3dp; }
|
||||
.nb:hover { background-color: #5cc8f01a; }
|
||||
.nb.active { background-color: #f2b13c1f; }
|
||||
.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 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:hover span { color: #5cc8f0; }
|
||||
.nb.tab img { width: 22dp; height: 22dp; }
|
||||
.nb.tab span { font-size: 12dp; color: #8197ad; }
|
||||
.sep { width: 1dp; height: 28dp; background-color: #3d6d96; margin: 0 8dp; }
|
||||
.nb.tab span { font-size: 12dp; color: #b9d4ea; }
|
||||
.sep { width: 1dp; height: 28dp; background-color: #2b6f9e; margin: 0 8dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="navstrip" data-model="navbar">
|
||||
|
||||
+13
-10
@@ -6,10 +6,13 @@
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
/* the map box is clear: the nav map draws its own backgrounds under it (DrawUnder), so
|
||||
the window's colour is laid around it instead of under the whole body */
|
||||
body.window { background-color: transparent; }
|
||||
.win-head { background-color: #0d1622eb; }
|
||||
/* the frame's edge alone over the whole window (hudframes fo); the head and the side bring
|
||||
their fills with the cut corners, just inside the edge -- no fill over the map. The map
|
||||
box is 760 dp (rem_ui_navmap.cpp kMapDp): the window only as big as map and side */
|
||||
body.window { decorator: ninepatch(fo, fo-i); left: 19%; top: 7%; width: 1180dp; height: 880dp; max-width: none; }
|
||||
.win-head { decorator: ninepatch(fh, fh-i); margin: 2dp 2dp 0 2dp; }
|
||||
.win-main .content { padding: 0; }
|
||||
.mapframe { display: flex; flex-direction: column; 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; }
|
||||
#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 */
|
||||
@@ -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; }
|
||||
/* the map art (drawn under the window) shows once the window stands: it fades in inside the box */
|
||||
#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 .btn { display: block; margin: 0 6dp 6dp 0; }
|
||||
.sysname { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 24dp; letter-spacing: 2dp; margin-bottom: 8dp; }
|
||||
.pcard { padding: 12dp; 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 .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; margin-bottom: 8dp; }
|
||||
.pcard .btn { margin: 0 6dp 6dp 0; }
|
||||
.pcard .acts { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
|
||||
.pcard .acts .btn { display: block; }
|
||||
.objs { padding: 10dp 12dp; 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; }
|
||||
.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 .btn { margin: 0 0 0 4dp; padding: 2dp 10dp; }
|
||||
.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 .lbl { font-size: 12dp; color: #dbe6f0; }
|
||||
.player .s { left: -8dp; top: -8dp; width: 0; height: 0; border-left: 8dp #00000000; border-right: 8dp #00000000; border-bottom: 16dp #7cf27c; }
|
||||
.hits, .marks { margin-bottom: 10dp; 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; }
|
||||
.hit { display: flex; flex-direction: row; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; }
|
||||
.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; }
|
||||
|
||||
/* 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 .pb { padding: 4dp 6dp; font-size: 12dp; border-radius: 2dp; }
|
||||
.pop .pb:hover { background-color: #122033; color: #5cc8f0; }
|
||||
@@ -96,7 +99,7 @@
|
||||
<body class="window" data-model="navmap">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Map.3db"/>
|
||||
<span class="title">{{ briefing ? 'MISSION BRIEFING' : 'NAVIGATION' }}</span>
|
||||
<span class="title">{{ briefing ? 'MISSION BRIEFING' : 'NAVIGATION' }}</span><span class="sl">\\\</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Waypoints <span class="v">{{ waypoints }}</span></span>
|
||||
<span class="close" data-if="!briefing" data-action="tool" data-arg="close">×</span>
|
||||
|
||||
+6
-6
@@ -7,23 +7,23 @@
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.side { flex: 0 0 40%; margin-right: 18dp; }
|
||||
.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:hover { border-color: #5cc8f0; }
|
||||
.story.selected { border-color: #f2b13c; }
|
||||
.story { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
|
||||
.story:hover { border-left-color: #5cc8f0; }
|
||||
.story.selected { border-left-color: #f2b13c; }
|
||||
.story img { width: 34dp; height: 34dp; margin-right: 12dp; }
|
||||
.story .t { flex: 1; font-size: 14dp; }
|
||||
.head { display: flex; flex-direction: row; align-items: center; margin-bottom: 12dp; }
|
||||
.head img { width: 54dp; height: 54dp; margin-right: 14dp; }
|
||||
/* 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; }
|
||||
.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>
|
||||
</head>
|
||||
<body class="window medium" data-model="news">
|
||||
<div class="win-head">
|
||||
<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="chip">Stories <span class="v">{{ stories.size }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
|
||||
+9
-8
@@ -5,24 +5,25 @@
|
||||
<style>
|
||||
/* 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; }
|
||||
.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; }
|
||||
.nb { width: 40dp; padding: 3dp 5dp; margin: 0 1dp; border: 1dp #00000000; border-radius: 3dp; position: relative; }
|
||||
.nb:hover { border-color: #5cc8f0; background-color: #122033; }
|
||||
.nb.active { border-color: #f2b13c; background-color: #f2b13c1f; }
|
||||
.nb img { width: 30dp; height: 30dp; display: block; image-color: #8fb8d8; }
|
||||
/* in the flight HUD's design: one frame with cut corners (rem.rcss, hudframes), no box per icon */
|
||||
.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 { width: 40dp; padding: 4dp 5dp; margin: 0 1dp; border-radius: 3dp; position: relative; }
|
||||
.nb:hover { background-color: #5cc8f01a; }
|
||||
.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; }
|
||||
/* 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.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; }
|
||||
.hud-editing .edit-grip { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="nnstrip movable" data-model="nnbar">
|
||||
<div class="win-head edit-grip">NeuroNet bar ✥</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">
|
||||
<img data-attr-src="i.icon"/>
|
||||
<div class="tip" data-if="i.label != ''">{{ i.label }}</div>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<style>
|
||||
/* 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; }
|
||||
.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 .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 0.6dp; }
|
||||
.card .x { float: right; color: #8197ad; font-size: 13dp; }
|
||||
@@ -15,7 +15,7 @@
|
||||
.card.group { border-left-color: #ff7efd; }
|
||||
.card.trade { border-left-color: #f2b13c; }
|
||||
.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; } }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -12,16 +12,13 @@
|
||||
margin-top: 70dp;
|
||||
max-width: 900dp;
|
||||
padding: 8dp 22dp;
|
||||
background-color: #070b12d9;
|
||||
border: 2dp #3d6d96;
|
||||
border-top: 2dp #f2b13c;
|
||||
border-radius: 4dp;
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-weight: 600;
|
||||
font-size: 17dp;
|
||||
letter-spacing: 1.5dp;
|
||||
color: #f2b13c;
|
||||
text-align: center;
|
||||
decorator: ninepatch(fw, fw-i);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
@@ -6,13 +6,13 @@
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.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; }
|
||||
.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:hover { border-color: #5cc8f0; color: #5cc8f0; }
|
||||
.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 { color: #5cc8f0; border-left-color: #5cc8f0; }
|
||||
.page.active { border-left-color: #f2b13c; color: #f2b13c; background-color: #f2b13c14; }
|
||||
.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:hover { border-color: #5cc8f0; color: #5cc8f0; }
|
||||
.subtab.active { border-color: #f2b13c; color: #f2b13c; }
|
||||
.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 { color: #5cc8f0; border-bottom-color: #5cc8f0; }
|
||||
.subtab.active { color: #f2b13c; border-bottom-color: #f2b13c; }
|
||||
.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; }
|
||||
.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 .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; }
|
||||
.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 .btn { margin: 0 0 0 8dp; }
|
||||
.side .btn { display: block; margin: 0 0 8dp 0; text-align: center; }
|
||||
@@ -50,7 +50,7 @@
|
||||
</head>
|
||||
<body class="window" data-model="options" data-class-settling="!settled">
|
||||
<div class="win-head">
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="title">{{ title }}</span><span class="sl">\\\</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
.colm.mid { flex: 0 0 34%; margin: 0 18dp; }
|
||||
.col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
||||
.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:hover { background-color: #122033; }
|
||||
.good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
||||
@@ -19,8 +19,8 @@
|
||||
.good .note { font-size: 12dp; 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; }
|
||||
#ship { flex: 1; border: 1dp #24405c; border-radius: 3dp; 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; }
|
||||
#ship { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); }
|
||||
.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 .what { width: 300dp; }
|
||||
.deal .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
|
||||
@@ -30,7 +30,7 @@
|
||||
.deal .btn { margin: 0; }
|
||||
.why { color: #ef6a5b; margin-right: 14dp; }
|
||||
.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 { 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; }
|
||||
@@ -48,12 +48,12 @@
|
||||
.flag { display: flex; flex-direction: row; align-items: center; font-size: 13dp; color: #b8c4cc; }
|
||||
.flag .switch { width: 44dp; margin-right: 6dp; }
|
||||
.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.right { right: 24dp; }
|
||||
.panel h3 { margin-bottom: 4dp; }
|
||||
.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 .n { flex: 1; min-width: 0; }
|
||||
.panel .pfoot { display: flex; flex-direction: row; margin-top: 10dp; }
|
||||
@@ -64,7 +64,7 @@
|
||||
<body class="window" data-model="outfitter">
|
||||
<div class="win-head">
|
||||
<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="chip">Hold <span class="v">{{ hold }}</span></span>
|
||||
<span class="chip">Credits <span class="v">{{ credits }}</span></span>
|
||||
|
||||
+3
-3
@@ -17,10 +17,10 @@
|
||||
align-items: 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; }
|
||||
.row { padding: 11dp 14dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; }
|
||||
.row:hover { border-color: #5cc8f0; background-color: #16283d; }
|
||||
.row { padding: 11dp 14dp; margin-bottom: 8dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
|
||||
.row:hover { border-left-color: #5cc8f0; background-color: #5cc8f01a; }
|
||||
.row.primary { border-left-color: #f2b13c; }
|
||||
.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; }
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.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 .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; }
|
||||
.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:hover { border-color: #5cc8f0; }
|
||||
.skill.selected { border-color: #f2b13c; }
|
||||
.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-left-color: #5cc8f0; }
|
||||
.skill.selected { border-left-color: #f2b13c; }
|
||||
.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 .bar { flex: 1; margin-right: 14dp; }
|
||||
@@ -34,7 +34,7 @@
|
||||
</head>
|
||||
<body class="window medium" data-model="player">
|
||||
<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="chip">XP <span class="v">{{ xp }}</span></span>
|
||||
<span class="chip">Bank <span class="v">{{ balance }}</span></span>
|
||||
|
||||
@@ -7,13 +7,13 @@
|
||||
.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; }
|
||||
.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 .v { font-family: "IBM Plex Mono"; font-size: 17dp; margin-top: 2dp; }
|
||||
.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:hover { border-color: #5cc8f0; }
|
||||
.faction.selected { border-color: #f2b13c; }
|
||||
.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-left-color: #5cc8f0; }
|
||||
.faction.selected { border-left-color: #f2b13c; }
|
||||
.faction.own .n { color: #f2b13c; }
|
||||
.faction .n { width: 40%; font-size: 14dp; }
|
||||
.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 .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; }
|
||||
.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>
|
||||
</head>
|
||||
<body class="window medium" data-model="playerinfo">
|
||||
<div class="win-head">
|
||||
<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="close" data-action="close">×</span>
|
||||
</div>
|
||||
|
||||
+2
-2
@@ -4,7 +4,7 @@
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
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 .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; }
|
||||
@@ -17,7 +17,7 @@
|
||||
</head>
|
||||
<body class="window pmwin" data-model="pm">
|
||||
<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="spacer"></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
<style>
|
||||
/* 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; }
|
||||
.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.open { border-color: #f2b13c; }
|
||||
.tab.open { ; }
|
||||
.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 .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
@@ -8,8 +8,18 @@
|
||||
.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;
|
||||
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;
|
||||
border: 1dp #3d6d96; border-radius: 4dp; pointer-events: auto; display: flex; flex-direction: column; }
|
||||
.frame {
|
||||
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 .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; }
|
||||
|
||||
+63
-54
@@ -34,9 +34,8 @@ body.window
|
||||
width: 82%;
|
||||
height: 86%;
|
||||
max-width: 1680dp;
|
||||
background-color: #0d1622eb;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 4dp;
|
||||
/* the flight HUD's frame: cut corners, one bright edge (hudframes, at the end of this file) */
|
||||
decorator: ninepatch(fw, fw-i);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -59,8 +58,8 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 12dp 18dp;
|
||||
border-bottom: 1dp #24405c;
|
||||
padding: 12dp 18dp 12dp 28dp; /* clear of the cut corner */
|
||||
border-bottom: 1dp #2b6f9e;
|
||||
drag: drag; /* the grip: a window moves by its head (rem_ui_host.cpp, rem.ini win_<name>) */
|
||||
cursor: move;
|
||||
}
|
||||
@@ -68,10 +67,13 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-weight: 600;
|
||||
font-size: 21dp;
|
||||
letter-spacing: 1.2dp;
|
||||
font-size: 20dp;
|
||||
letter-spacing: 2dp;
|
||||
color: #e8f4ff;
|
||||
margin-right: 16dp;
|
||||
}
|
||||
/* three slashes after a window's title, as the HUD's panel titles */
|
||||
.win-head .sl { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; letter-spacing: -1dp; color: #5cc8f0; margin: 0 16dp 0 -6dp; }
|
||||
.win-head .loc { color: #8197ad; font-size: 15dp; }
|
||||
.win-head .spacer { flex: 1; }
|
||||
.chip
|
||||
@@ -80,10 +82,8 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
font-size: 14dp;
|
||||
letter-spacing: 0.6dp;
|
||||
color: #8197ad;
|
||||
padding: 2dp 11dp;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 11dp;
|
||||
margin-left: 10dp;
|
||||
padding: 2dp 4dp;
|
||||
margin-left: 14dp;
|
||||
}
|
||||
.chip .v { font-family: "IBM Plex Mono"; color: #dbe6f0; }
|
||||
.close
|
||||
@@ -93,12 +93,10 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
line-height: 26dp;
|
||||
text-align: center;
|
||||
margin-left: 14dp;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
color: #8197ad;
|
||||
font-size: 17dp;
|
||||
font-size: 20dp;
|
||||
}
|
||||
.close:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
||||
.close:hover { color: #5cc8f0; }
|
||||
|
||||
.win-main
|
||||
{
|
||||
@@ -111,7 +109,7 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
.nav
|
||||
{
|
||||
width: 200dp;
|
||||
border-right: 1dp #24405c;
|
||||
border-right: 1dp #2b6f9e;
|
||||
padding: 10dp 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -139,11 +137,11 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
border-radius: 3dp;
|
||||
padding: 0 5dp;
|
||||
}
|
||||
.nav .item:hover { color: #5cc8f0; background-color: #122033; }
|
||||
.nav .item:hover { color: #5cc8f0; background-color: #5cc8f01a; }
|
||||
.nav .item img.ico { width: 20dp; height: 20dp; margin-right: 10dp; opacity: 0.7; }
|
||||
.nav .item:hover img.ico, .nav .item.active img.ico { opacity: 1; }
|
||||
.win-head img.head-ico { width: 26dp; height: 26dp; margin-right: 10dp; image-color: #f2b13c; }
|
||||
.nav .item.active { color: #f2b13c; border-left-color: #f2b13c; background-color: #122033; }
|
||||
.nav .item.active { color: #f2b13c; border-left-color: #f2b13c; background-color: #f2b13c14; }
|
||||
.nav .sep { height: 1dp; background-color: #24405c; margin: 8dp 18dp; }
|
||||
|
||||
.content
|
||||
@@ -160,8 +158,8 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-top: 1dp #24405c;
|
||||
padding: 8dp 18dp;
|
||||
border-top: 1dp #2b6f9e;
|
||||
padding: 8dp 28dp 10dp 18dp; /* clear of the cut corner */
|
||||
font-size: 13dp;
|
||||
color: #8197ad;
|
||||
}
|
||||
@@ -170,9 +168,8 @@ body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900
|
||||
font-family: "IBM Plex Mono";
|
||||
font-size: 11dp;
|
||||
color: #dbe6f0;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
padding: 0 4dp;
|
||||
background-color: #24405c;
|
||||
padding: 0 5dp;
|
||||
margin-right: 5dp;
|
||||
}
|
||||
.win-foot .hint { margin-right: 18dp; }
|
||||
@@ -236,22 +233,20 @@ h3, .label
|
||||
letter-spacing: 1.1dp;
|
||||
text-transform: uppercase;
|
||||
color: #dbe6f0;
|
||||
background-color: #122033;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
decorator: ninepatch(fs, fs-i); /* a small cut-corner frame */
|
||||
padding: 7dp 16dp;
|
||||
margin-right: 8dp;
|
||||
margin-bottom: 8dp;
|
||||
position: relative;
|
||||
transition: color border-color 0.12s;
|
||||
}
|
||||
.btn:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
||||
.btn:active { background-color: #1a2d47; }
|
||||
.btn.primary { color: #f2b13c; border-color: #f2b13c; }
|
||||
.btn.primary:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
||||
.btn.danger { color: #ef6a5b; border-color: #7a3f3e; }
|
||||
.btn.armed { color: #160604; background-color: #ef6a5b; border-color: #ef6a5b; }
|
||||
.btn.disabled { color: #8197ad66; border-color: #24405c; }
|
||||
.btn:hover { color: #5cc8f0; }
|
||||
.btn:active { color: #ffffff; }
|
||||
.btn.primary { color: #f2b13c; decorator: ninepatch(fsa, fsa-i); }
|
||||
.btn.primary:hover { color: #ffd07a; }
|
||||
.btn.danger { color: #ef6a5b; decorator: ninepatch(fsd, fsd-i); }
|
||||
.btn.armed { color: #160604; decorator: none; background-color: #ef6a5b; }
|
||||
.btn.disabled { color: #8197ad66; opacity: 0.6; }
|
||||
.btn .small { font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; text-transform: none; letter-spacing: 0; margin-left: 6dp; }
|
||||
|
||||
/* a tooltip: a .tip child, shown while the button is hovered */
|
||||
@@ -269,10 +264,8 @@ h3, .label
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
color: #dbe6f0;
|
||||
background-color: #05090f;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
padding: 6dp 9dp;
|
||||
decorator: ninepatch(fw, fw-i);
|
||||
padding: 7dp 12dp;
|
||||
}
|
||||
/* shown by the tool tip window over every window (rem_ui_tooltip.cpp), not here: inside its own
|
||||
document another window could cover it */
|
||||
@@ -315,20 +308,17 @@ input.text
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 7dp 10dp;
|
||||
border: 2dp #24405c;
|
||||
border-radius: 3dp;
|
||||
background-color: #122033;
|
||||
border-bottom: 1dp #3d6d96;
|
||||
background-color: #12203399;
|
||||
color: #dbe6f0;
|
||||
font-size: 14dp;
|
||||
cursor: text;
|
||||
}
|
||||
input.text:focus { border-color: #5cc8f0; }
|
||||
input.text:focus { border-bottom-color: #5cc8f0; }
|
||||
input.text .placeholder, input.text:placeholder { color: #8197ad; }
|
||||
|
||||
.table
|
||||
{
|
||||
border: 2dp #24405c;
|
||||
border-radius: 3dp;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
@@ -345,13 +335,12 @@ input.text .placeholder, input.text:placeholder { color: #8197ad; }
|
||||
font-size: 12dp;
|
||||
letter-spacing: 1.2dp;
|
||||
text-transform: uppercase;
|
||||
color: #8197ad;
|
||||
background-color: #0d1622;
|
||||
border-bottom: 1dp #24405c;
|
||||
color: #8fb3d0;
|
||||
border-bottom: 1dp #2b6f9e;
|
||||
}
|
||||
.table .body { flex: 1; overflow-y: auto; }
|
||||
.table .row { font-size: 14dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
|
||||
.table .row:hover { background-color: #122033; }
|
||||
.table .row { font-size: 14dp; border-bottom: 1dp #24405c66; border-left: 3dp #00000000; }
|
||||
.table .row:hover { background-color: #5cc8f01a; }
|
||||
.table .row.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
||||
.table .row.current .c1 { color: #f2b13c; }
|
||||
.table .c1 { flex: 1; }
|
||||
@@ -374,8 +363,8 @@ input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 2dp #24405c;
|
||||
border-radius: 3dp;
|
||||
border-top: 1dp #2b6f9e;
|
||||
border-bottom: 1dp #2b6f9e;
|
||||
margin-bottom: 12dp;
|
||||
}
|
||||
.stats .cell { flex: 1; padding: 8dp 12dp; border-right: 1dp #24405c; }
|
||||
@@ -394,9 +383,8 @@ input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
|
||||
.card
|
||||
{
|
||||
flex: 1;
|
||||
border: 2dp #24405c;
|
||||
border-radius: 3dp;
|
||||
background-color: #122033;
|
||||
border-left: 3dp #2b6f9e; /* an accent at the left, no box in the window's box */
|
||||
background-color: #5cc8f00a;
|
||||
padding: 12dp;
|
||||
margin-right: 10dp;
|
||||
}
|
||||
@@ -429,7 +417,7 @@ input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
|
||||
@keyframes run-right { 0% { top: 0%; opacity: 0; } 25% { top: 0%; opacity: 0; } 27% { opacity: 1; } 48% { opacity: 1; } 50% { top: 76%; opacity: 0; } 100% { top: 76%; opacity: 0; } }
|
||||
@keyframes run-bottom { 0% { left: 76%; opacity: 0; } 50% { left: 76%; opacity: 0; } 52% { opacity: 1; } 73% { opacity: 1; } 75% { left: 0%; opacity: 0; } 100% { left: 0%; opacity: 0; } }
|
||||
@keyframes run-left { 0% { top: 76%; opacity: 0; } 75% { top: 76%; opacity: 0; } 77% { opacity: 1; } 98% { opacity: 1; } 100% { top: 0%; opacity: 0; } }
|
||||
.runner { position: absolute; left: -1dp; top: -1dp; right: -1dp; bottom: -1dp; pointer-events: none; }
|
||||
.runner { position: absolute; left: -1dp; top: -1dp; right: -1dp; bottom: -1dp; pointer-events: none; display: none; }
|
||||
.runner .rt, .runner .rr, .runner .rb, .runner .rl { position: absolute; opacity: 0; }
|
||||
.runner .rt { top: 0; height: 3dp; width: 24%; left: 0%; decorator: horizontal-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-top; }
|
||||
.runner .rr { right: 0; width: 3dp; height: 24%; top: 0%; decorator: vertical-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-right; }
|
||||
@@ -442,3 +430,24 @@ input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
|
||||
|
||||
/* a hovered bar icon turning (nnbar, rembar) */
|
||||
@keyframes nb-spin { from { transform: perspective(240dp) rotateY(0deg) scale(1.12); } to { transform: perspective(240dp) rotateY(360deg) scale(1.12); } }
|
||||
|
||||
/* the flight HUD's frames (every window, the HUD, the bars): panels with cut corners and one bright edge, as
|
||||
ninepatch sprites -- img/hud_frames.png, drawn by tools/rem/make_hud_frames.py (2x: 1 dp = 2 px).
|
||||
fa: top left + bottom right cut, fb: all four, fs: all four (small), fed: the HUD editor's,
|
||||
fw: as fa but nearly opaque, for windows and tips; fsa / fsd: the primary / danger button;
|
||||
fo / fh / fbr: a window with a clear hole (navmap.rml): the edge alone, the head's fill (top left
|
||||
cut), the side's fill (bottom right cut) */
|
||||
@spritesheet hudframes {
|
||||
src: img/hud_frames.png;
|
||||
resolution: 2x;
|
||||
fa: 0px 0px 96px 96px; fa-i: 32px 32px 32px 32px;
|
||||
fb: 96px 0px 96px 96px; fb-i: 128px 32px 32px 32px;
|
||||
fs: 192px 0px 96px 96px; fs-i: 224px 32px 32px 32px;
|
||||
fed: 288px 0px 96px 96px; fed-i: 320px 32px 32px 32px;
|
||||
fw: 384px 0px 96px 96px; fw-i: 416px 32px 32px 32px;
|
||||
fsa: 480px 0px 96px 96px; fsa-i: 512px 32px 32px 32px;
|
||||
fsd: 576px 0px 96px 96px; fsd-i: 608px 32px 32px 32px;
|
||||
fo: 672px 0px 96px 96px; fo-i: 704px 32px 32px 32px;
|
||||
fh: 768px 0px 96px 96px; fh-i: 800px 32px 32px 32px;
|
||||
fbr: 864px 0px 96px 96px; fbr-i: 896px 32px 32px 32px;
|
||||
}
|
||||
|
||||
@@ -5,24 +5,25 @@
|
||||
<style>
|
||||
/* 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; }
|
||||
.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; }
|
||||
.nb { width: 40dp; padding: 3dp 5dp; margin: 0 1dp; border: 1dp #00000000; border-radius: 3dp; position: relative; }
|
||||
.nb:hover { border-color: #5cc8f0; background-color: #122033; }
|
||||
.nb.active { border-color: #f2b13c; background-color: #f2b13c1f; }
|
||||
.nb img { width: 30dp; height: 30dp; display: block; image-color: #8fb8d8; }
|
||||
/* in the flight HUD's design: one frame with cut corners (rem.rcss, hudframes), no box per icon */
|
||||
.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 { width: 40dp; padding: 4dp 5dp; margin: 0 1dp; border-radius: 3dp; position: relative; }
|
||||
.nb:hover { background-color: #5cc8f01a; }
|
||||
.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; }
|
||||
/* 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.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; }
|
||||
.hud-editing .edit-grip { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="nnstrip movable" data-model="rembar">
|
||||
<div class="win-head edit-grip">REM bar ✥</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">
|
||||
<img data-attr-src="i.icon"/>
|
||||
<div class="tip" data-if="i.label != ''">{{ i.label }}</div>
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.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:hover { border-color: #5cc8f0; }
|
||||
.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-left-color: #5cc8f0; }
|
||||
.item.selected { border-left-color: #f2b13c; }
|
||||
.item .check { width: 16dp; height: 16dp; border: 2dp #3d6d96; border-radius: 3dp; margin-right: 12dp; }
|
||||
.item.selected .check { background-color: #f2b13c; border-color: #f2b13c; }
|
||||
@@ -25,7 +25,7 @@
|
||||
<body class="window small" data-model="repair">
|
||||
<div class="win-head">
|
||||
<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="chip">Credits <span class="v">{{ credits }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
.colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.view { flex: 0 0 40%; margin-right: 18dp; }
|
||||
.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; }
|
||||
.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; }
|
||||
@@ -22,7 +22,7 @@
|
||||
<body class="window medium" data-model="scanner">
|
||||
<div class="win-head">
|
||||
<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="chip">Value <span class="v">{{ total }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
.bar .search { flex: 1; margin-right: 10dp; min-width: 0; }
|
||||
.bar .search input.text { display: block; width: 100%; }
|
||||
.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 .c2 { width: 26%; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; }
|
||||
.table .c3 { width: 90dp; }
|
||||
@@ -22,13 +22,13 @@
|
||||
.table .row.full .c3 { color: #e05a4f; }
|
||||
.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; }
|
||||
.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; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="serverlist">
|
||||
<div class="win-head">
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="title">{{ title }}</span><span class="sl">\\\</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Shown <span class="v">{{ rows.size }}</span> / <span class="v">{{ total }}</span></span>
|
||||
</div>
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
.colm.side { flex: 0 0 30%; margin-right: 18dp; }
|
||||
.colm.view { flex: 1; }
|
||||
.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:hover { border-color: #5cc8f0; }
|
||||
.scard.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
.scard { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 8dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
|
||||
.scard:hover { border-left-color: #5cc8f0; }
|
||||
.scard.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
|
||||
.scard.locked .n, .scard.locked .p { color: #8197ad; }
|
||||
.scard img { width: 48dp; height: 48dp; margin-right: 12dp; }
|
||||
.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.own { border-left-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 .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; }
|
||||
.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 .l { flex: 1; color: #8197ad; }
|
||||
.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 .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
|
||||
.deal .d { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
|
||||
@@ -39,7 +39,7 @@
|
||||
<body class="window" data-model="shipdealer">
|
||||
<div class="win-head">
|
||||
<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="chip">Credits <span class="v">{{ credits }}</span></span>
|
||||
<span class="chip">Worth <span class="v">{{ worth }}</span></span>
|
||||
|
||||
+12
-12
@@ -15,9 +15,9 @@
|
||||
.toolbar h3 { flex: 1; }
|
||||
.toolbar input.text { width: 220dp; }
|
||||
.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:hover { border-color: #5cc8f0; background-color: #16283f; }
|
||||
.icard.selected { border-color: #f2b13c; background-color: #f2b13c14; }
|
||||
.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-left-color: #5cc8f0; background-color: #5cc8f01a; }
|
||||
.icard.selected { background-color: #f2b13c14; border-left-color: #f2b13c; }
|
||||
.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 img { width: 64dp; height: 64dp; }
|
||||
@@ -32,7 +32,7 @@
|
||||
.pb.cr { color: #dbe6f0; border: 1dp #3d6d96; }
|
||||
.icard .note { font-size: 11dp; color: #8197ad; margin-top: 4dp; text-align: center; }
|
||||
.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 .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; }
|
||||
@@ -45,7 +45,7 @@
|
||||
.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 .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; }
|
||||
.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; }
|
||||
@@ -56,30 +56,30 @@
|
||||
.sum .l { flex: 1; color: #8197ad; }
|
||||
.sum .v { font-family: "IBM Plex Mono"; }
|
||||
.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 .btn { margin: 0; padding: 2dp 10dp; }
|
||||
.dplist { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
||||
.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:hover { background-color: #122033; color: #5cc8f0; }
|
||||
.dprow.selected { color: #f2b13c; background-color: #f2b13c14; }
|
||||
.dprow .n { flex: 1; }
|
||||
.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:hover { border-color: #5cc8f0; }
|
||||
.sellrow.selected { border-color: #f2b13c; background-color: #f2b13c14; }
|
||||
.sellrow { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 8dp; border-left: 3dp #24405c; background-color: #5cc8f010; }
|
||||
.sellrow:hover { border-left-color: #5cc8f0; }
|
||||
.sellrow.selected { background-color: #f2b13c14; border-left-color: #f2b13c; }
|
||||
.sellrow img { width: 44dp; height: 44dp; margin-right: 12dp; }
|
||||
.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; }
|
||||
.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>
|
||||
</head>
|
||||
<body class="window" data-model="shop">
|
||||
<div class="win-head">
|
||||
<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="chip">REM Coin <span class="v">{{ coins }}</span></span>
|
||||
<span class="chip">Bank <span class="v">{{ credits }}</span></span>
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.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:hover { border-color: #5cc8f0; color: #5cc8f0; }
|
||||
.tab.primary { border-color: #f2b13c; 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; }
|
||||
.tab { padding: 5dp 14dp; margin-right: 6dp; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; border-bottom: 2dp #00000000; }
|
||||
.tab:hover { color: #5cc8f0; border-bottom-color: #5cc8f0; }
|
||||
.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; background-color: #5cc8f008; }
|
||||
.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 .btn { margin: 0 8dp 8dp 0; }
|
||||
@@ -16,7 +16,7 @@
|
||||
<body class="window medium" data-model="storystar">
|
||||
<div class="win-head">
|
||||
<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="close" data-if="can_close" data-action="btn" data-arg="8">×</span>
|
||||
</div>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
.right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
||||
.right .scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 8dp; }
|
||||
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.sel { border-color: #f2b13c; }
|
||||
.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; }
|
||||
.sec { margin-bottom: 12dp; }
|
||||
.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:hover { border-color: #f2b13c; }
|
||||
.chip2 { padding: 5dp 10dp; margin: 0 6dp 6dp 0; font-size: 14dp; cursor: pointer; border-left: 3dp #24405c; }
|
||||
.chip2:hover { border-left-color: #f2b13c; }
|
||||
.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 .c { width: 100%; height: 100%; border-radius: 2dp; }
|
||||
@@ -43,7 +43,7 @@
|
||||
<body class="window themes" data-model="themes">
|
||||
<div class="win-head">
|
||||
<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="close" data-action="close">×</span>
|
||||
</div>
|
||||
|
||||
@@ -9,23 +9,22 @@
|
||||
{
|
||||
position: absolute;
|
||||
max-width: 380dp;
|
||||
padding: 5dp 9dp;
|
||||
background-color: #0d1622f2;
|
||||
border: 2dp #3d6d96;
|
||||
border-left: 2dp #f2b13c;
|
||||
border-radius: 3dp;
|
||||
padding: 6dp 14dp;
|
||||
decorator: ninepatch(fw, fw-i); /* the flight HUD's frame (rem.rcss) */
|
||||
font-size: 13dp;
|
||||
color: #dbe6f0;
|
||||
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 */
|
||||
.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>
|
||||
</head>
|
||||
<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 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>
|
||||
</body>
|
||||
</rml>
|
||||
|
||||
+3
-3
@@ -9,7 +9,7 @@
|
||||
.col h3 { margin-bottom: 6dp; }
|
||||
.state { font-size: 12dp; margin-bottom: 6dp; color: #ef6a5b; }
|
||||
.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:hover { background-color: #122033; }
|
||||
.it.picked { border-left-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
@@ -17,7 +17,7 @@
|
||||
.it img { width: 28dp; height: 28dp; margin-right: 8dp; }
|
||||
.it .n { flex: 1; min-width: 0; font-size: 14dp; }
|
||||
.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 .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
|
||||
.move .t .a { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
|
||||
@@ -30,7 +30,7 @@
|
||||
<body class="window" data-model="trade">
|
||||
<div class="win-head">
|
||||
<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="close" data-action="cancel">×</span>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
.colm.gap { margin-right: 18dp; }
|
||||
.col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
||||
.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:hover { background-color: #122033; }
|
||||
.good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
||||
@@ -18,7 +18,7 @@
|
||||
.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 .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 .what { width: 260dp; }
|
||||
.deal .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
|
||||
@@ -33,7 +33,7 @@
|
||||
<body class="window" data-model="trader">
|
||||
<div class="win-head">
|
||||
<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="chip">Hold <span class="v">{{ hold }}</span></span>
|
||||
<span class="chip">Credits <span class="v">{{ credits }}</span></span>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<style>
|
||||
.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-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 img { width: 30dp; height: 30dp; margin-right: 10dp; }
|
||||
.state-box .v { font-family: "Saira SemiCondensed"; font-size: 17dp; }
|
||||
@@ -16,7 +16,7 @@
|
||||
<body class="window small" data-model="waypoints">
|
||||
<div class="win-head">
|
||||
<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="chip">Mine <span class="v">{{ my_count }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
|
||||
Binary file not shown.
BIN
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user