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
<style>
14
.code-view {
15
white-space: normal;
16
padding: 0;
17
}
18
.code-view::before {
19
counter-reset: line-number;
20
}
21
.code-view > code {
22
white-space: pre-wrap;
23
font: inherit;
24
color: inherit;
25
background: inherit;
26
display: block;
27
padding: 0;
28
margin: 0;
29
counter-increment: line-number;
30
}
31
.code-view > code::before {
32
display: inline-block;
33
width: var(--line-chars) * 1ch;
34
background: var(--color-callout);
35
content: counter(line-number);
36
padding: 0 1ch;
37
text-align: end;
38
margin-right: 1ch;
39
}
40
.code-view > code:first-child::before {
41
padding-top: 1em;
42
}
43
.code-view > code:last-child::before {
44
padding-bottom: 1em;
45
}
46
</style>
47
{% 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%;">
58
Your 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%;">
63
Your browser does not support HTML5 multimedia.
64
<a href="{{ file }}">Download file</a>
65
</video>
66
{% endif %}