Files
REM-Mod/EXE/remui/navbar.rml
T

45 lines
2.2 KiB
Plaintext

<rml>
<head>
<title>Nav bar</title>
<link type="text/rcss" href="rem.rcss"/>
<style>
/* only as big as the bar, centred at the top: the mouse beside it goes to the game */
body.navstrip
{
position: absolute;
left: 50%;
top: 4dp;
width: auto;
transform: translateX(-50%);
display: block;
background-color: transparent;
}
/* in the flight HUD's design: one frame with cut corners (rem.rcss, hudframes), no box per button */
.navbar { display: flex; flex-direction: row; align-items: center; height: 48dp; box-sizing: border-box; padding: 0 18dp; decorator: ninepatch(fb, fb-i); }
.nb { display: flex; flex-direction: row; align-items: center; height: 36dp; padding: 0 12dp 0 8dp; margin: 0 1dp; border-radius: 3dp; }
.nb:hover { background-color: #5cc8f01a; }
.nb.active { background-color: #f2b13c1f; }
.nb.disabled { opacity: 0.4; }
.nb.disabled:hover { background-color: transparent; }
.nb img { width: 28dp; height: 28dp; margin-right: 6dp; }
.nb span { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #e8f4ff; }
.nb.active span { color: #f2b13c; }
.nb:hover span { color: #5cc8f0; }
.nb.tab img { width: 22dp; height: 22dp; }
.nb.tab span { font-size: 12dp; color: #b9d4ea; }
.sep { width: 1dp; height: 28dp; background-color: #2b6f9e; margin: 0 8dp; }
</style>
</head>
<body class="navstrip" data-model="navbar">
<div class="navbar" data-if="shown">
<div class="nb" data-for="b : rooms" data-class-active="b.active" data-class-disabled="b.disabled" data-action="click" data-attr-data-arg="b.key">
<img data-if="b.icon != ''" data-attr-src="b.icon"/><span>{{ b.label }}</span>
</div>
<div class="sep" data-if="tabs.size &gt; 0"></div>
<div class="nb tab" data-for="b : tabs" data-class-active="b.active" data-class-disabled="b.disabled" data-action="click" data-attr-data-arg="b.key">
<img data-if="b.icon != ''" data-attr-src="b.icon"/><span>{{ b.label }}</span>
</div>
</div>
</body>
</rml>