42 lines
2.7 KiB
Plaintext
42 lines
2.7 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Radar</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
/* the 3D radar (rem_ui_radar.cpp): the turnable sphere and symbols are the <radar> element's own geometry,
|
|
frame, title, range buttons and names are this document's */
|
|
body.radar { position: absolute; left: 16dp; top: 31%; width: 320dp; height: 346dp; background-color: transparent; pointer-events: none;
|
|
font-family: "Saira SemiCondensed"; font-size: 14dp; color: #dbe6f0; }
|
|
.frame { position: absolute; left: 0; top: 0; right: 0; bottom: 0; box-sizing: border-box; background-color: #050a18c0;
|
|
border: 1dp #3d6d96; border-radius: 4dp; pointer-events: auto; display: flex; flex-direction: column; }
|
|
.head { display: flex; flex-direction: row; align-items: center; height: 26dp; padding: 0 10dp; border-bottom: 1dp #24405c; }
|
|
.head .title { font-weight: 600; letter-spacing: 1.5dp; font-size: 14dp; color: #f2b13c; }
|
|
.head .count { margin-left: 8dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; }
|
|
.head .spacer { flex: 1; }
|
|
.rng { font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; padding: 1dp 5dp; margin-left: 3dp; border: 1dp #24405c; border-radius: 3dp; }
|
|
.rng:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
|
.rng.on { color: #f2b13c; border-color: #f2b13c; background-color: #f2b13c24; }
|
|
#scope { position: relative; flex: 1; }
|
|
radar { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; cursor: move; }
|
|
.lbl { position: absolute; font-size: 12dp; white-space: nowrap; pointer-events: none; }
|
|
.fwd { position: absolute; left: 50%; margin-left: -4dp; top: 4dp; font-family: "IBM Plex Mono"; font-size: 10dp; color: #f2b13c; pointer-events: none; }
|
|
</style>
|
|
</head>
|
|
<body class="radar" data-model="radar">
|
|
<div class="frame">
|
|
<div class="head">
|
|
<span class="title">RADAR</span><span class="count">{{ count }}</span>
|
|
<span class="spacer"></span>
|
|
<span class="rng" data-class-on="range == 0" data-action="range" data-arg="0">2.5K</span>
|
|
<span class="rng" data-class-on="range == 1" data-action="range" data-arg="1">5K</span>
|
|
<span class="rng" data-class-on="range == 2" data-action="range" data-arg="2">7.5K</span>
|
|
<span class="rng" data-class-on="range == 3" data-action="range" data-arg="3">15K</span>
|
|
</div>
|
|
<div id="scope">
|
|
<radar id="radar"></radar>
|
|
<div class="lbl" data-for="l : labels" data-style-left="l.left" data-style-top="l.top" data-style-color="l.colour">{{ l.text }}</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</rml>
|