112 lines
8.3 KiB
Plaintext
112 lines
8.3 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Options</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
.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.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; }
|
|
.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; }
|
|
.opt:hover { background-color: #122033; }
|
|
.opt .l { flex: 1; min-width: 0; font-size: 16dp; }
|
|
.opt.locked .l, .opt.locked .v { color: #5d6e80; }
|
|
.opt.changed { border-left: 2dp #f2b13c; }
|
|
.opt.changed .l { color: #f2b13c; }
|
|
/* nothing of the window's content until NN_Preferences stands on its page */
|
|
.win-main, .win-head .title { transition: opacity 0.18s; }
|
|
.settling .win-main, .settling .win-head .title { opacity: 0; }
|
|
.rows.settle { opacity: 0; transition: opacity 0.15s; }
|
|
.rows.settle.shown { opacity: 1; }
|
|
.switch { width: 58dp; padding: 3dp 0; text-align: center; border: 2dp #3d6d96; border-radius: 4dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1dp; color: #8197ad; }
|
|
.switch.on { border-color: #f2b13c; color: #f2b13c; background-color: #f2b13c1f; }
|
|
.switch:hover { border-color: #5cc8f0; }
|
|
.slide { display: flex; flex-direction: row; align-items: center; width: 330dp; }
|
|
.slide .step { width: 26dp; padding: 2dp 0; text-align: center; border: 1dp #24405c; border-radius: 3dp; color: #dbe6f0; }
|
|
.slide .step:hover { border-color: #5cc8f0; color: #5cc8f0; }
|
|
.slide .track { flex: 1; height: 6dp; margin: 0 8dp; background-color: #24405c; border-radius: 3dp; }
|
|
.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 .t { flex: 1; }
|
|
.ask .btn { margin: 0 0 0 8dp; }
|
|
.side .btn { display: block; margin: 0 0 8dp 0; text-align: center; }
|
|
.kb { width: 150dp; margin-left: 10dp; padding: 4dp 8dp; text-align: center; font-family: "IBM Plex Mono"; font-size: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
|
.kb:hover { border-color: #5cc8f0; color: #5cc8f0; }
|
|
.kb.fixed { color: #5d6e80; }
|
|
.kb.fixed:hover { border-color: #24405c; color: #5d6e80; }
|
|
.credits { flex: 1; overflow-y: auto; white-space: pre-line; text-align: center; line-height: 1.6; font-size: 14dp; padding: 12dp; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="options" data-class-settling="!settled">
|
|
<div class="win-head">
|
|
<span class="title">{{ title }}</span>
|
|
<span class="spacer"></span>
|
|
<span class="close" data-action="close">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="split">
|
|
<div class="side">
|
|
<div class="page" data-for="p : pages" data-class-active="p.active" data-action="page" data-attr-data-arg="p.key">{{ p.label }}</div>
|
|
<div style="flex: 1;"></div>
|
|
<div class="btn primary" data-if="can_save" data-class-disabled="!unsaved" data-action="save">Save settings<div class="tip">Applies and keeps the changed settings (marked).</div></div>
|
|
<div class="btn" data-if="can_defaults" data-action="defaults">Defaults<div class="tip">Every setting of this page back to its default.</div></div>
|
|
<div class="btn" data-class-disabled="!can_cancel" data-action="cancel">Undo changes<div class="tip">Back to the values the page opened with.</div></div>
|
|
<div class="btn primary" data-action="close">{{ in_game ? 'Back to the game' : 'Main menu' }}</div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="ask" data-if="asking">
|
|
<span class="t">{{ question }}</span>
|
|
<div class="btn primary" data-if="can_yes" data-action="yes">{{ yes_label }}</div>
|
|
<div class="btn" data-action="no">{{ no_label }}</div>
|
|
</div>
|
|
<div class="subtabs" data-if="is_rem">
|
|
<div class="subtab" data-for="t : subtabs" data-class-active="t.active" data-action="subtab" data-attr-data-arg="t.key">{{ t.label }}</div>
|
|
</div>
|
|
<div class="subtabs" data-if="is_keys">
|
|
<div class="subtab" data-for="t : keygroups" data-class-active="t.active" data-action="keygroup" data-attr-data-arg="t.key">{{ t.label }}</div>
|
|
</div>
|
|
<div class="rows" data-if="is_keys">
|
|
<div class="opt keyrow" data-for="k : keys" data-class-locked="!k.editable">
|
|
<span class="l">{{ k.name }}</span>
|
|
<span class="kb" data-class-fixed="!k.editable" data-action="bind" data-attr-data-arg="k.row">{{ k.key == '' ? '-' : k.key }}</span>
|
|
<span class="kb" data-class-fixed="!k.editable" data-action="bindalt" data-attr-data-arg="k.row">{{ k.alt == '' ? '-' : k.alt }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="credits" data-if="is_credits">{{ credits }}</div>
|
|
<div class="rows settle" data-if="!is_keys && !is_credits" data-class-shown="settled">
|
|
<div data-for="r : rows">
|
|
<div class="head" data-if="r.kind == 0">{{ r.label }}</div>
|
|
<div class="opt" data-if="r.kind != 0" data-class-locked="r.kind == 3" data-class-changed="r.changed">
|
|
<span class="l">{{ r.label }}</span>
|
|
<div class="switch" data-if="r.kind == 1" data-class-on="r.on" data-action="toggle" data-attr-data-arg="r.key">{{ r.value }}</div>
|
|
<div class="slide" data-if="r.kind == 2">
|
|
<span class="step" data-action="dec" data-attr-data-arg="r.key">-</span>
|
|
<div class="track"><div class="fill" data-style-width="r.fill + '%'"></div></div>
|
|
<span class="step" data-action="inc" data-attr-data-arg="r.key">+</span>
|
|
<span class="v">{{ r.value }}</span>
|
|
</div>
|
|
<span class="v" data-if="r.kind == 3">{{ r.value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="win-foot">
|
|
<span class="key">Esc</span><span class="hint">back</span>
|
|
<span class="status">{{ unsaved ? 'Settings changed - not saved yet.' : 'Settings marked * take effect after a restart.' }}</span>
|
|
</div>
|
|
</body>
|
|
</rml>
|