29 lines
1.8 KiB
Plaintext
29 lines
1.8 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Messages</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
/* the open conversations docked at the right edge, above the HUD's right panel */
|
|
body.pmdock { position: absolute; right: 16dp; bottom: 360dp; width: 220dp; height: 300dp; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; }
|
|
.tab { display: flex; flex-direction: row; align-items: center; margin-top: 6dp; padding: 7dp 10dp; background-color: #070b12eb; border: 2dp #3d6d96; border-left: 4dp #87c3e0; border-radius: 4dp; }
|
|
.tab:hover { background-color: #122033; }
|
|
.tab.open { border-color: #f2b13c; }
|
|
.tab .ic { font-size: 15dp; margin-right: 8dp; color: #87c3e0; }
|
|
.tab .n { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; white-space: nowrap; overflow: hidden; }
|
|
.tab .u { min-width: 20dp; height: 20dp; line-height: 20dp; text-align: center; border-radius: 10dp; background-color: #ef6a5b; color: #ffffff; font-size: 12dp; margin-right: 6dp; }
|
|
.tab .x { color: #8197ad; padding: 0 4dp; }
|
|
.tab .x:hover { color: #ef6a5b; }
|
|
.tab.new { animation: 1.2s sine-in-out infinite pulse; }
|
|
@keyframes pulse { 0% { border-left-color: #87c3e0; } 50% { border-left-color: #f2b13c; } 100% { border-left-color: #87c3e0; } }
|
|
</style>
|
|
</head>
|
|
<body class="pmdock" data-model="pmdock">
|
|
<div class="tab" data-for="t : tabs" data-class-open="t.open" data-class-new="t.unread > 0" data-action="open" data-attr-data-arg="t.key">
|
|
<span class="ic">PM</span>
|
|
<span class="n">{{ t.name }}</span>
|
|
<span class="u" data-if="t.unread > 0">{{ t.unread }}</span>
|
|
<span class="x" data-action="close" data-attr-data-arg="t.key">×</span>
|
|
</div>
|
|
</body>
|
|
</rml>
|