63 lines
3.6 KiB
Text
63 lines
3.6 KiB
Text
<rml>
|
|
<!--
|
|
Singe 3
|
|
Copyright (C) 2026 Scott Duensing <scott@kangaroopunch.com>
|
|
|
|
Forge's chrome. Only the panels are RmlUi; the canvas beside them is drawn
|
|
into the overlay, because that is where Singe already tracks a pointer against rectangles.
|
|
pointer-events keeps the canvas clickable through the document.
|
|
Licensed under the GNU General Public License, version 3 or later.
|
|
-->
|
|
<head>
|
|
<title>forge</title>
|
|
<link type="text/rcss" href="Singe/gui.rcss"/>
|
|
<style>
|
|
/* The body is the whole overlay, so the panel's 100% is a height: without it the panel
|
|
was nothing tall, everything in it overflow, and overflow: auto on it hid it all. */
|
|
body { pointer-events: none; width: 100%; height: 100%; font-family: FreeSans; font-size: 13px; color: #e6e6ee; }
|
|
/* Rows stay focusable: RmlUi delivers a click to the nearest focusable element under the
|
|
pointer, so a row that could not take focus could not be clicked either. ENTER and SPACE
|
|
on a focused element only become a click when its tab-index is auto, and no row's is. */
|
|
/* The panel is a column: the grip and the title, then the list and the fields box, which
|
|
share what is left and each scroll (the wheel, or the bar) rather than pushing the other
|
|
off the screen. */
|
|
#panel { pointer-events: auto; position: absolute; left: 0px; top: 0px; width: 190px; height: 100%; background-color: #161620ff; display: flex; flex-direction: column; }
|
|
#grip, #title { flex: 0 0 auto; }
|
|
#list { flex: 0 1 auto; min-height: 0px; overflow-y: auto; }
|
|
scrollbarvertical { width: 5px; }
|
|
scrollbarvertical slidertrack { background-color: #1b1b28ff; }
|
|
scrollbarvertical sliderbar { background-color: #6a5a9aff; }
|
|
#grip { pointer-events: auto; background-color: #2a2a3cff; padding: 6px 10px; color: #ffcf4a; font-size: 15px; }
|
|
#grip:hover { background-color: #3a3a52ff; }
|
|
#title { margin: 0px 10px 8px 10px; color: #9aa0b4; }
|
|
.row { margin: 2px 8px; padding: 4px 6px; background-color: #242433ff; }
|
|
.row:hover { background-color: #32324aff; }
|
|
.row.selected { background-color: #c03c96ff; color: #ffffff; }
|
|
.thumb { display: inline-block; vertical-align: middle; margin-right: 6px; width: 24px; text-align: center; color: #ffcf4a; }
|
|
.thumb.dim { color: #6a6a80; }
|
|
.thumb.swatch { height: 16px; width: 16px; margin-left: 4px; margin-right: 10px; }
|
|
.part { margin: 1px 8px 1px 18px; padding: 2px 5px; background-color: #1b1b28ff; color: #aeb4c8; font-size: 12px; }
|
|
.part:hover { background-color: #2a2a40ff; color: #e6e6ee; }
|
|
.picked { background-color: #6a5a9aff; color: #ffffff; }
|
|
#title:hover { color: #ffcf4a; }
|
|
.part.here { background-color: #4a3a6aff; color: #ffffff; }
|
|
/* A field's list, unfolded under its row and floating over the rows beneath, as a dropdown
|
|
does: absolute with no top or left takes the place it would have had in the flow. */
|
|
.drop { position: absolute; z-index: 2; clip: none; width: 140px; margin: 0px 0px 0px 26px; padding: 2px 0px; background-color: #0b0b12ff; border-width: 1px; border-color: #6a5a9aff; }
|
|
.choice { margin: 0px; padding: 2px 8px; color: #aeb4c8; font-size: 12px; }
|
|
.choice:hover { background-color: #32324aff; color: #e6e6ee; }
|
|
.choice.selected { background-color: #c03c96ff; color: #ffffff; }
|
|
.choice.more { color: #6a6a80; }
|
|
.choice.more:hover { background-color: #0b0b12ff; color: #6a6a80; }
|
|
#detail { flex: 0 1 auto; min-height: 0px; overflow-y: auto; margin: 14px 8px; padding: 6px; background-color: #10101aff; color: #b9bfd4; }
|
|
</style>
|
|
</head>
|
|
<body id="forge">
|
|
<div id="panel">
|
|
<div id="grip">≡ Entities</div>
|
|
<div id="title"></div>
|
|
<div id="list"></div>
|
|
<div id="detail"></div>
|
|
</div>
|
|
</body>
|
|
</rml>
|