64 lines
3.8 KiB
Plaintext
64 lines
3.8 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Repair</title>
|
|
<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.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; }
|
|
.item img { width: 34dp; height: 34dp; margin-right: 12dp; }
|
|
.item .mid { flex: 1; min-width: 0; }
|
|
.item .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; margin-bottom: 5dp; }
|
|
.item .hp { font-family: "IBM Plex Mono"; color: #8197ad; width: 60dp; text-align: right; margin-right: 14dp; }
|
|
.item .cost { font-family: "IBM Plex Mono"; color: #f2b13c; width: 130dp; text-align: right; }
|
|
.list { flex: 1; overflow-y: auto; }
|
|
.sum { display: flex; flex-direction: row; align-items: center; border-top: 1dp #24405c; padding-top: 12dp; margin-top: 8dp; }
|
|
.sum .k { font-family: "Saira SemiCondensed"; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; margin-right: 10dp; }
|
|
.sum .v { font-family: "IBM Plex Mono"; font-size: 20dp; color: #f2b13c; margin-right: 24dp; }
|
|
.sum .btn { margin: 0 0 0 auto; }
|
|
.warn { color: #ef6a5b; margin-right: 14dp; }
|
|
</style>
|
|
</head>
|
|
<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="spacer"></span>
|
|
<span class="chip">Credits <span class="v">{{ credits }}</span></span>
|
|
<span class="close" data-action="close">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="colm">
|
|
<div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp;"><h3>What needs repair</h3><div class="btn" style="margin: 0 0 0 auto;" data-action="all">All / none</div></div>
|
|
<div class="list">
|
|
<div class="hint" data-if="rows.size == 0">Your ship is in perfect shape.</div>
|
|
<div class="item" data-for="r : rows" data-class-selected="r.selected" data-action="toggle" data-attr-data-arg="r.key">
|
|
<div class="check"></div>
|
|
<img data-attr-src="r.icon"/>
|
|
<div class="mid">
|
|
<div class="n">{{ r.name }}</div>
|
|
<div class="bar"><div class="fill" data-class-warn="r.health < 75" data-class-bad="r.health < 40" data-style-width="r.health + '%'"></div></div>
|
|
</div>
|
|
<span class="hp">{{ r.health }} %</span>
|
|
<span class="cost">{{ r.cost }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="sum">
|
|
<span class="k">Total</span><span class="v">{{ total }}</span>
|
|
<span class="warn" data-if="too_much">Not enough credits</span>
|
|
<div class="btn primary" data-class-disabled="too_much || nothing" data-action="repair">Repair<div class="tip">Repairs the checked parts and pays the total.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="win-foot">
|
|
<span class="key">Esc</span><span class="hint">close</span>
|
|
<span class="status">{{ status }}</span>
|
|
</div>
|
|
</body>
|
|
</rml>
|