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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user