31 lines
1.9 KiB
Plaintext
31 lines
1.9 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>NeuroNet</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
/* only as big as the bar, at the top right: the mouse beside it goes to the game */
|
|
body.nnstrip { position: absolute; right: 8dp; top: 4dp; width: 400dp; height: 60dp; display: block; background-color: transparent; pointer-events: none; }
|
|
.nnbar { pointer-events: auto; position: absolute; top: 0; right: 0; display: flex; flex-direction: row; align-items: center; padding: 3dp 4dp; background-color: #070b12e6; border: 2dp #3d6d96; border-radius: 4dp; }
|
|
.nb { width: 40dp; padding: 3dp 5dp; margin: 0 1dp; border: 1dp #00000000; border-radius: 3dp; position: relative; }
|
|
.nb:hover { border-color: #5cc8f0; background-color: #122033; }
|
|
.nb.active { border-color: #f2b13c; background-color: #f2b13c1f; }
|
|
.nb img { width: 30dp; height: 30dp; display: block; image-color: #8fb8d8; }
|
|
.nb:hover img { image-color: #5cc8f0; animation: 1.6s linear infinite nb-spin; }
|
|
/* REM: as FL's NeuroNet icons, the hovered one turns about its upright axis */
|
|
.nb { transition: background-color border-color 0.15s cubic-out; }
|
|
.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; }
|
|
.nb:hover .tip { display: block; }
|
|
</style>
|
|
</head>
|
|
<body class="nnstrip" data-model="nnbar">
|
|
<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"/>
|
|
<div class="tip" data-if="i.label != ''">{{ i.label }}</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</rml>
|