file-view.html
HTML document, ASCII text
1<x-hbox style="align-items: center;"> 2<h1 style="display: flex; align-items: center; text-overflow: ellipsis; overflow: hidden;" title="{{ basename }}"><iconify-icon icon="{{ icon }}"></iconify-icon> {{ basename }}</h1> 3<div class="flexible-space"></div> 4<x-buttonbox> 5<a href="{{ file }}" class="button">View raw</a> 6<a href="{{ file }}" download class="button">Download</a> 7</x-buttonbox> 8</x-hbox> 9{{ mimetype }} • {{ size[0] }} {{ size[1] }} 10<br> 11{{ detailedtype }} 12 13<style> 14.code-view { 15white-space: normal; 16padding: 0; 17} 18.code-view::before { 19counter-reset: line-number; 20} 21.code-view > code { 22white-space: pre-wrap; 23font: inherit; 24color: inherit; 25background: inherit; 26display: block; 27padding: 0; 28margin: 0; 29counter-increment: line-number; 30} 31.code-view > code::before { 32display: inline-block; 33width: var(--line-chars) * 1ch; 34background: var(--color-callout); 35content: counter(line-number); 36padding: 0 1ch; 37text-align: end; 38margin-right: 1ch; 39} 40.code-view > code:first-child::before { 41padding-top: 1em; 42} 43.code-view > code:last-child::before { 44padding-bottom: 1em; 45} 46</style> 47 48{% if mode == "text" %} 49<pre class="code-view" style="--line-chars: {{ contents | split('\n') | length | string | length }}"> 50{% for i in contents | split("\n") %} 51<code>{{ i }}</code> 52{% endfor %} 53</pre> 54{% elif mode == "image" %} 55<img src="{{ file }}"> 56{% elif mode == "audio" %} 57<audio controls src="{{ file }}" style="width: 100%;"> 58Your browser does not support HTML5 multimedia. 59<a href="{{ file }}">Download file</a> 60</audio> 61{% elif mode == "video" %} 62<video controls src="{{ file }}" style="width: 100%;"> 63Your browser does not support HTML5 multimedia. 64<a href="{{ file }}">Download file</a> 65</video> 66{% endif %}