101 lines
6.9 KiB
Plaintext
101 lines
6.9 KiB
Plaintext
<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">×</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 }}°</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>
|