54 lines
2.9 KiB
Plaintext
54 lines
2.9 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>News</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
|
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
|
.colm.side { flex: 0 0 40%; margin-right: 18dp; }
|
|
.list { flex: 1; overflow-y: auto; }
|
|
.story { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
|
|
.story:hover { border-color: #5cc8f0; }
|
|
.story.selected { border-color: #f2b13c; }
|
|
.story img { width: 34dp; height: 34dp; margin-right: 12dp; }
|
|
.story .t { flex: 1; font-size: 14dp; }
|
|
.head { display: flex; flex-direction: row; align-items: center; margin-bottom: 12dp; }
|
|
.head img { width: 54dp; height: 54dp; margin-right: 14dp; }
|
|
/* the story's picture (NN_News' video screen) */
|
|
.photo { display: block; width: 320dp; height: 320dp; margin: 4dp 0 12dp 0; border: 2dp #3d6d96; border-radius: 3dp; }
|
|
.head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; }
|
|
.text { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; padding: 14dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; font-size: 16dp; }
|
|
</style>
|
|
</head>
|
|
<body class="window medium" data-model="news">
|
|
<div class="win-head">
|
|
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
|
|
<span class="title">NEWS</span>
|
|
<span class="spacer"></span>
|
|
<span class="chip">Stories <span class="v">{{ stories.size }}</span></span>
|
|
<span class="close" data-action="close">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="hint" data-if="stories.size == 0">No news here.</div>
|
|
<div class="split" data-if="stories.size > 0">
|
|
<div class="colm side">
|
|
<h3 style="margin-bottom: 8dp;">Headlines</h3>
|
|
<div class="list">
|
|
<div class="story" data-for="s : stories" data-class-selected="s.selected" data-action="pick" data-attr-data-arg="s.key">
|
|
<img data-attr-src="s.icon"/><span class="t">{{ s.headline }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm" data-if="has_pick">
|
|
<div class="head"><img data-attr-src="pick.icon"/><div class="t">{{ pick.headline }}</div></div>
|
|
<img class="photo" data-if="photo != ''" data-attr-src="photo"/>
|
|
<div class="text">{{ story }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
|
|
</body>
|
|
</rml>
|