Files
REM-Mod/EXE/remui/chathistory.rml

59 lines
3.4 KiB
Plaintext

<rml>
<head>
<title>Chat history</title>
<link type="text/rcss" href="rem.rcss"/>
<style>
.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; }
.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; }
.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; }
.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; }
.tg.ch { font-family: "Saira SemiCondensed"; font-weight: 600; letter-spacing: 0.6dp; }
</style>
</head>
<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="spacer"></span>
<span class="chip">Targets <span class="v">{{ count }}</span></span>
<img class="gear" src="img/gear.png" data-action="settings"/>
<span class="close" data-action="close">&#215;</span>
</div>
<div class="win-main">
<div class="content" style="display: flex; flex-direction: column;">
<div class="cols">
<div class="histcol">
<div class="ctabs">
<div class="ct" data-for="t : tabs" data-class-on="t.on" data-action="tab" data-attr-data-arg="t.key">{{ t.label }}</div>
</div>
<div id="hist">
<div class="hint" data-if="lines.size == 0">No messages yet.</div>
<div class="hl" data-for="l : lines" data-class-mention="l.mention"><span class="tm" data-if="stamps">{{ l.time }}</span><span data-rml="l.rml"></span></div>
</div>
</div>
<div class="targets">
<h3>Write to</h3>
<div class="tl">
<div class="tg" data-for="t : targets" data-class-cur="t.current" data-class-ch="t.channel" data-action="target" data-ctx="target" data-attr-data-arg="t.key" data-rml="t.name"></div>
</div>
</div>
</div>
<div class="hint" style="margin-top: 10dp;">Pick whom to write to, then press Enter in flight or on a base to type.</div>
</div>
</div>
</body>
</rml>