30 lines
1.6 KiB
Plaintext
30 lines
1.6 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Notifications</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
/* cards at the right edge, above the HUD's right panel; the empty strip is the game's */
|
|
body.notify { position: absolute; right: 16dp; top: 120dp; width: 340dp; height: 520dp; background-color: transparent; display: flex; flex-direction: column; }
|
|
.card { margin-bottom: 8dp; padding: 9dp 12dp 9dp 14dp; background-color: #070b12eb; border: 2dp #3d6d96; border-left: 4dp #5cc8f0; border-radius: 4dp; }
|
|
.card:hover { background-color: #0d1622f5; }
|
|
.card .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 0.6dp; }
|
|
.card .x { float: right; color: #8197ad; font-size: 13dp; }
|
|
.card .b { margin-top: 2dp; font-size: 14dp; color: #b9cbe0; }
|
|
.card.good { border-left-color: #5fd08a; }
|
|
.card.warn { border-left-color: #ef6a5b; }
|
|
.card.group { border-left-color: #ff7efd; }
|
|
.card.trade { border-left-color: #f2b13c; }
|
|
.card.mail { border-left-color: #87c3e0; }
|
|
.card { animation: 0.25s cubic-out slidein; }
|
|
@keyframes slidein { from { opacity: 0; margin-left: 40dp; } to { opacity: 1; margin-left: 0; } }
|
|
</style>
|
|
</head>
|
|
<body class="notify" data-model="notify">
|
|
<div class="card" data-for="c : cards" data-attr-class="'card ' + c.kind" data-action="dismiss" data-attr-data-arg="c.key">
|
|
<span class="x">×</span>
|
|
<div class="t">{{ c.title }}</div>
|
|
<div class="b" data-if="c.text != ''">{{ c.text }}</div>
|
|
</div>
|
|
</body>
|
|
</rml>
|