New REM client: REM-Client bcdd352, 64-bit (module bases: Modules tab in the base manager - slots, building, delivering wares; docking at player-built stations with Deck and Bar, the top bar after the modules, the commodity dealer opens the station's market; themes reach every element, theme designer with ini import / export; Galactic Market in the base manager opens the market window; countermeasures drop by themselves on a REM server; nav map tool menu and bookmarks on the server; mouse buttons bind again in the options; HUD editor fixes; PM tabs stay one when the partner goes AFK)

EXE/remui/base.rml

@@ -119,8 +119,7 @@
         <div class="nav">
             <div class="item" data-class-active="page == 0" data-action="page" data-arg="0"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/><span>Depot</span><span class="badge" data-if="depot.size &gt; 0">{{ depot.size }}</span></div>
             <div class="item" data-class-active="page == 1" data-action="page" data-arg="1"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/><span>All depots</span></div>
-            <div class="item" data-class-active="page == 2" data-action="page" data-arg="2"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/><span>Market</span></div>
+            <div class="item" data-action="open-market"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/><span>Galactic Market</span><div class="tip">Buy and sell orders, the order book, prices and their history (opens the market window).</div></div>
-            <div class="item" data-class-active="page == 3" data-action="page" data-arg="3"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/><span>Sell</span></div>
             <div class="sep"></div>
             <div class="item" data-class-active="page == 4" data-action="page" data-arg="4"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_crafting.3db"/><span>Crafting</span><span class="badge" data-if="craft_jobs.size &gt; 0">{{ craft_jobs.size }}</span></div>
             <div class="item" data-class-active="page == 5" data-action="page" data-arg="5"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_rank.3db"/><span>Research</span><span class="badge" data-if="research_jobs.size &gt; 0">{{ research_jobs.size }}</span></div>
@@ -401,10 +400,11 @@
                             <div class="hint">{{ obj_line }}</div>
                             <div class="bar" data-if="obj_bar &gt;= 0" style="margin-top: 8dp;"><div class="fill" data-style-width="obj_bar + '%'"></div></div>
                         </div>
-                        <div class="subtabs" data-if="obj_picked &amp;&amp; (obj_site || obj_edit)">
+                        <div class="subtabs" data-if="obj_picked &amp;&amp; (obj_site || obj_edit || mod_has)">
                             <div class="tab" data-if="obj_site" data-class-active="sys_view == 0" data-action="sys-view" data-arg="0">Wares</div>
                             <div class="tab" data-class-active="sys_view == 1" data-action="sys-view" data-arg="1">Rules</div>
                             <div class="tab" data-if="!obj_site &amp;&amp; obj_edit" data-class-active="sys_view == 2" data-action="sys-view" data-arg="2">Loadout</div>
+                            <div class="tab" data-if="!obj_site &amp;&amp; mod_has" data-class-active="sys_view == 3" data-action="sys-view" data-arg="3">Modules</div>
                         </div>
                         <!-- wares of a site -->
                         <div class="pane" data-if="obj_site &amp;&amp; sys_view == 0">
@@ -444,6 +444,53 @@
                                 </div>
                             </div>
                         </div>
+                        <!-- modules of a station with slots -->
+                        <div class="page" data-if="obj_picked &amp;&amp; !obj_site &amp;&amp; mod_has &amp;&amp; sys_view == 3">
+                            <div class="colm gap">
+                                <div class="table grow">
+                                    <div class="head"><span class="c1">Slot</span><span class="c2">Module</span><span class="c3">State</span></div>
+                                    <div class="body">
+                                        <div class="row" data-for="r : mslots" data-class-selected="r.selected" data-action="pick-mslot" data-attr-data-arg="r.key"><span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span><span class="c3">{{ r.c }}</span></div>
+                                    </div>
+                                </div>
+                                <div class="hint" style="margin-top: 8dp;">{{ mod_hint }}</div>
+                            </div>
+                            <div class="colm">
+                                <div class="panel">
+                                    <div class="t">{{ mod_title }}</div>
+                                    <div class="hint">{{ mod_line }}</div>
+                                    <div class="bar" data-if="mod_bar &gt;= 0" style="margin-top: 8dp;"><div class="fill" data-style-width="mod_bar + '%'"></div></div>
+                                </div>
+                                <!-- an empty slot: the modules that fit -->
+                                <div class="colm" data-if="mod_mode == 1">
+                                    <div class="table grow">
+                                        <div class="head"><span class="c1">Module</span><span class="c2">Price</span><span class="c3"></span></div>
+                                        <div class="body">
+                                            <div class="empty" data-if="mtypes.size == 0">Nothing fits this slot.</div>
+                                            <div class="row" data-for="r : mtypes" data-class-selected="r.selected" data-class-short="r.short" data-action="pick-mtype" data-attr-data-arg="r.key"><span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span><span class="c3">{{ r.c }}</span></div>
+                                        </div>
+                                    </div>
+                                    <div class="label" style="margin-top: 8dp;">Wares</div>
+                                    <div class="hint" data-if="mtype_wares.size == 0">No wares needed.</div>
+                                    <div class="ware" data-for="w : mtype_wares"><span>{{ w.a }}</span><span class="n">{{ w.b }}</span></div>
+                                    <div class="actions" data-if="obj_edit"><div class="btn" data-class-primary="mod_can_build" data-action="mod-build">{{ mod_build_text }}<div class="tip">Puts the module into the slot (the price from your money); then deliver its wares.</div></div></div>
+                                </div>
+                                <!-- a module waiting for wares -->
+                                <div class="colm" data-if="mod_mode == 2">
+                                    <div class="table grow">
+                                        <div class="head"><span class="c1">Ware</span><span class="c2">Delivered</span><span class="c3">In hold</span></div>
+                                        <div class="body">
+                                            <div class="row" data-for="r : mneeds" data-class-selected="r.selected" data-action="pick-mneed" data-attr-data-arg="r.key"><span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span><span class="c3">{{ r.c }}</span></div>
+                                        </div>
+                                    </div>
+                                    <div data-if="mod_can_deliver">
+                                        <div class="amount"><span class="label">Amount</span><input class="range" type="range" min="1" step="1" data-attr-max="mod_qty_max" data-value="mod_qty"/><span class="v">{{ mod_qty_text }}</span></div>
+                                        <div class="actions"><div class="btn primary" data-action="mod-deliver">Deliver<div class="tip">Hands the amount of the picked ware from your hold to the module.</div></div></div>
+                                    </div>
+                                </div>
+                                <div class="actions" data-if="obj_edit &amp;&amp; mod_mode &gt;= 2"><div class="btn danger" data-class-primary="mod_remove_armed" data-action="mod-remove">{{ mod_remove_text }}<div class="tip">Takes the module out of the slot. Modules are no wares yet: what went into it is lost.</div></div></div>
+                            </div>
+                        </div>
                         <!-- loadout of a built object (its owner) -->
                         <div class="page" data-if="obj_picked &amp;&amp; !obj_site &amp;&amp; obj_edit &amp;&amp; sys_view == 2">
                             <div class="colm gap">

EXE/remui/chatfeed.rml

@@ -15,9 +15,12 @@
         .gear:hover { image-color: #f2b13c; }
         .caret { color: #f2d23c; animation: 1s steps(1) infinite blink; }
         @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
+        .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="feed" data-model="chatfeed">
+<body class="feed movable" data-model="chatfeed">
+    <div class="win-head edit-grip">Chat &#10021;</div>
     <div class="lines" data-if="feed_shown" data-rml="feed"></div>
     <div class="line" data-if="typing">
         <span class="p" data-rml="prefix"></span><span class="t">{{ text }}<span class="caret">|</span></span>

EXE/remui/hud.rml

@@ -83,11 +83,12 @@
         .grp.gone { display: none; }
         .grp.faded { opacity: 0.35; }
         .editing .fp { border-color: #f2b13c; background-color: #2a1f0ae6; 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; }
         .tag .eye { margin-right: 8dp; padding: 0 6dp; background-color: #05080d; color: #f2b13c; border-radius: 2dp; }
         .tag .eye:hover { color: #ffffff; }
-        .edbar { position: absolute; left: 50%; margin-left: -300dp; top: 190dp; width: 600dp; padding: 14dp 18dp; background-color: #070b12f2; border: 2dp #f2b13c; border-radius: 6dp; text-align: center; }
+        .edbar { position: absolute; left: 50%; margin-left: -300dp; top: 190dp; width: 600dp; padding: 14dp 18dp; background-color: #070b12f2; border: 2dp #f2b13c; border-radius: 6dp; text-align: center; pointer-events: auto; }
         .edbar .et { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 20dp; letter-spacing: 2dp; color: #f2b13c; }
         .edbar .eh { margin: 6dp 0 12dp 0; font-size: 14dp; color: #b9cbe0; }
         .edbar .eb { display: flex; flex-direction: row; justify-content: center; }
@@ -182,10 +183,9 @@
     <!-- the HUD editor's bar -->
     <div class="edbar" data-if="editing">
         <div class="et">CUSTOMIZE HUD</div>
-        <div class="eh">Drag a part to move it &#183; mouse wheel over it to size it &#183; Hide / Show on its label. Parts snap to their home place.</div>
+        <div class="eh">Drag a part or its label to move it &#183; mouse wheel over it to size it &#183; Hide / Show on its label &#183; the REM bars, the radar and the chat by their tags. Parts snap to their home place.</div>
         <div class="eb">
-            <div class="btn" data-action="ed_reset">Reset HUD</div>
+            <div class="btn" data-action="ed_reset">Reset all</div>
-            <div class="btn" data-action="ed_resetwin">Reset window places</div>
             <div class="btn" data-action="ed_cancel">Cancel</div>
             <div class="btn primary" data-action="ed_save">Save</div>
         </div>

EXE/remui/navmap.rml

@@ -59,6 +59,11 @@
         .hit .hk { font-size: 12dp; color: #8197ad; }
         .bookmark .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; background-color: #f2b13c; border: 2dp #05080d; border-radius: 6dp; }
         .bookmark .lbl { color: #f2b13c; }
+        .bookmark.locked .s { border-color: #f2b13c; background-color: #8a6420; }
+        .bookmark.sel .s { border-color: #ffffff; }
+        .hit .mk { margin-left: 6dp; padding: 0 6dp; font-size: 11dp; color: #8197ad; border: 1dp #24405c; border-radius: 2dp; }
+        .hit .mk:hover { color: #f2b13c; border-color: #f2b13c; }
+        .hit .mk.del:hover { color: #ef6a5b; border-color: #ef6a5b; }
         .waypoint .s { left: -7dp; top: -7dp; width: 14dp; height: 14dp; border: 2dp #f2b13c; border-radius: 2dp; }
         .waypoint .lbl, .bestpath .lbl { left: -4dp; top: -7dp; font-family: "IBM Plex Mono"; font-size: 10dp; color: #f2b13c; }
         .bestpath .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; border: 2dp #5cc8f0; border-radius: 6dp; }
@@ -116,6 +121,9 @@
                         <div class="pb" data-if="can_target" data-action="tool" data-arg="target">Target</div>
                         <div class="pb" data-if="can_info" data-action="tool" data-arg="info">Info</div>
                         <div class="pb" data-if="can_clear" data-action="tool" data-arg="clearwp">Remove waypoint</div>
+                        <div class="pb" data-if="can_mark" data-action="bookmark">Set bookmark</div>
+                        <div class="pb" data-if="pick_mark" data-action="mark_lock">{{ mark_locked ? 'Unlock bookmark' : 'Lock bookmark' }}</div>
+                        <div class="pb" data-if="pick_mark &amp;&amp; !mark_locked" data-action="mark_del">Delete bookmark</div>
                     </div>
                     <div class="zoom">
                         <span class="v">{{ zoom }}</span>
@@ -153,7 +161,7 @@
                     </div>
                     <div class="marks" data-if="bookmarks.size &gt; 0 &amp;&amp; search == ''">
                         <h3>Bookmarks</h3>
-                        <div class="hit" data-for="b : bookmarks" data-action="gomark" data-ctx="mark" data-attr-data-arg="b.key"><span class="hn">{{ b.name }}</span></div>
+                        <div class="hit" data-for="b : bookmarks" data-action="gomark" data-ctx="mark" data-attr-data-arg="b.key"><span class="hn">{{ b.name }}</span><span class="mk" data-action="mark_lock" data-attr-data-arg="b.key">{{ b.kind == 'locked' ? 'Unlock' : 'Lock' }}<span class="tip">{{ b.kind == 'locked' ? 'Locked: it can be neither moved nor deleted. Click to unlock.' : 'Lock it in place: no moving, no deleting.' }}</span></span><span class="mk del" data-if="b.kind != 'locked'" data-action="mark_del" data-attr-data-arg="b.key">&#215;</span></div>
                     </div>
                     <div class="pcard" data-if="!has_pick"><div class="k">Click the map to pick a place. Wheel zooms, drag moves, double click opens a system.</div></div>
                     <div class="objs" data-if="objectives.size &gt; 0">

EXE/remui/nnbar.rml

@@ -16,9 +16,12 @@
         .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; }
+        .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" data-model="nnbar">
+<body class="nnstrip movable" data-model="nnbar">
+    <div class="win-head edit-grip">NeuroNet bar &#10021;</div>
     <div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 12 + 'dp'">
         <div class="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"/>

EXE/remui/options.rml

@@ -98,6 +98,7 @@
                                     <span class="v">{{ r.value }}</span>
                                 </div>
                                 <span class="v" data-if="r.kind == 3">{{ r.value }}</span>
+                                <div class="btn" data-if="r.kind == 4" data-action="open-window" data-attr-data-arg="r.value">Open</div>
                             </div>
                         </div>
                     </div>

EXE/remui/radar.rml

@@ -21,9 +21,12 @@
         radar { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
         .lbl { position: absolute; font-size: 12dp; white-space: nowrap; pointer-events: none; }
         .fwd { position: absolute; left: 50%; margin-left: -4dp; top: 4dp; font-family: "IBM Plex Mono"; font-size: 10dp; color: #f2b13c; pointer-events: none; }
+        .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="radar" data-model="radar">
+<body class="radar movable" data-model="radar">
+    <div class="win-head edit-grip">Radar &#10021;</div>
     <div class="frame">
         <div class="head">
             <span class="title">RADAR</span><span class="count">{{ count }}</span>

EXE/remui/rembar.rml

@@ -16,9 +16,12 @@
         .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; }
+        .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" data-model="rembar">
+<body class="nnstrip movable" data-model="rembar">
+    <div class="win-head edit-grip">REM bar &#10021;</div>
     <div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 12 + 'dp'">
         <div class="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"/>

EXE/remui/themes.rml

@@ -0,0 +1,100 @@
+<rml>
+<head>
+    <title>Interface colours</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.window.themes { left: 50%; margin-left: -470dp; top: 8%; width: 940dp; height: 720dp; }
+        .cols { flex: 1; min-height: 0; display: flex; flex-direction: row; }
+        .left { width: 430dp; margin-right: 18dp; overflow-y: auto; }
+        .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:hover { background-color: #122033; }
+        .role.sel { border-color: #f2b13c; }
+        .role .c { width: 34dp; height: 16dp; border: 1dp #ffffff40; border-radius: 3dp; margin-right: 10dp; }
+        .role .l { flex: 1; font-size: 15dp; }
+        .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; }
+        .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; }
+        .sw:hover { border-color: #f2b13c; }
+        .line { display: flex; flex-direction: row; align-items: center; margin-top: 8dp; }
+        .line .label { width: 110dp; font-size: 14dp; color: #8197ad; }
+        .line input.text { flex: 1; }
+        .line input.range { flex: 1; }
+        .line .v { width: 56dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 14dp; }
+        .line .btn { margin: 0 0 0 8dp; }
+        .preview { display: flex; flex-direction: row; height: 46dp; margin-top: 8dp; border-radius: 3dp; overflow: hidden; }
+        .preview div { flex: 1; }
+        .file { display: flex; flex-direction: row; align-items: center; padding: 5dp 8dp; border-bottom: 1dp #ffffff10; cursor: pointer; font-size: 14dp; }
+        .file:hover { background-color: #122033; }
+        .file .l { flex: 1; }
+        .foot2 { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; margin-top: 10dp; padding-top: 10dp; border-top: 1dp #24405c; }
+        .foot2 .hint { flex: 1; font-size: 13dp; color: #8197ad; }
+        .foot2 .btn { margin: 0 0 0 8dp; }
+        .muted { font-size: 13dp; color: #8197ad; }
+    </style>
+</head>
+<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="spacer"></span>
+        <span class="close" data-action="close">&#215;</span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="cols">
+                <div class="left">
+                    <h3>Colour roles</h3>
+                    <div class="role" data-for="r : roles" data-class-sel="r.sel" data-action="pick" data-attr-data-arg="r.key">
+                        <div class="c" data-style-background-color="r.hex"></div>
+                        <span class="l">{{ r.label }}</span>
+                        <span class="h">{{ r.hex }}</span>
+                    </div>
+                </div>
+                <div class="right">
+                  <div class="scroll">
+                    <div class="sec">
+                        <h3>Start from</h3>
+                        <div class="chips"><div class="chip2" data-for="s : starts" data-action="start" data-attr-data-arg="s.key">{{ s.label }}</div></div>
+                    </div>
+                    <div class="sec">
+                        <h3>All colours</h3>
+                        <div class="line"><span class="label">Hue</span><input class="range" type="range" min="-180" max="180" step="2" data-value="hue"/><span class="v">{{ hue }}&#176;</span></div>
+                        <div class="line"><span class="label">Saturation</span><input class="range" type="range" min="0" max="200" step="2" data-value="sat"/><span class="v">{{ sat }} %</span></div>
+                        <div class="line"><span class="label">Lightness</span><input class="range" type="range" min="-30" max="30" step="1" data-value="light"/><span class="v">{{ light }}</span></div>
+                        <div class="preview"><div data-for="r : roles" data-style-background-color="r.hex"></div></div>
+                    </div>
+                    <div class="sec">
+                        <h3>{{ sel_label }}</h3>
+                        <div class="line"><span class="label">Colour (hex)</span><input class="text" type="text" data-value="hex" maxlength="9"/><div class="btn" data-action="darker">Darker</div><div class="btn" data-action="lighter">Lighter</div></div>
+                        <div class="sws"><div class="sw" data-for="w : swatches" data-action="swatch" data-attr-data-arg="w.key"><div class="c" data-style-background-color="w.hex"></div></div></div>
+                    </div>
+                    <div class="sec">
+                        <h3>Theme file</h3>
+                        <div class="line"><span class="label">Name</span><input class="text" type="text" data-value="name" maxlength="40"/><div class="btn" data-action="export">Export</div></div>
+                        <div class="muted" style="margin-top: 8dp;">Import (SAVE\themes):</div>
+                        <div class="file" data-for="f : files" data-action="import" data-attr-data-arg="f.key"><span class="l">{{ f.label }}</span><span class="muted">import</span></div>
+                        <div class="muted" data-if="files.size == 0">No theme files yet - export one, or put a friend's .ini into the folder.</div>
+                        <div class="line"><div class="btn" style="margin-left: 0;" data-action="folder">Open folder</div><div class="btn" data-action="refresh">Refresh</div></div>
+                    </div>
+                  </div>
+                    <div class="foot2">
+                        <span class="hint" data-if="status != ''">{{ status }}</span>
+                        <span class="hint" data-if="status == ''">{{ active ? 'Your theme is in use.' : 'Apply makes it your interface colours.' }}{{ dirty ? ' Changes not applied yet.' : '' }}</span>
+                        <div class="btn" data-action="reset">REM colours</div>
+                        <div class="btn" data-action="close">Close</div>
+                        <div class="btn primary" data-action="apply">Apply</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>