show.css
Raw
1@import "normalize.css";
2@import "sakura-vader.css";
3@import "highlight.css";
4
5hr {
6 width: 100%;
7}
8
9body {
10 box-sizing: border-box;
11 width: 100%;
12 height: 100vh;
13 max-width: 100%;
14 max-height: 100vh;
15
16 display: flex;
17 flex-direction: row;
18
19 #content {
20 box-sizing: border-box;
21 flex-grow: 1;
22 height: 100%;
23 overflow: auto;
24 border: 1px solid #40363a;
25 border-right: unset;
26 display: flex;
27 flex-direction: column;
28
29 #filename {
30 padding-left: 1rem;
31 }
32
33 pre {
34 box-sizing: border-box;
35 margin: 0;
36 flex-grow: 1;
37 overflow: auto;
38 max-width: 100%;
39 max-height: 100%;
40 }
41
42 #mediabox {
43 flex-grow: 1;
44 display: flex;
45 justify-content: center;
46 }
47 }
48
49 #sidebar {
50 box-sizing: border-box;
51 flex-shrink: 0;
52 padding: 1rem;
53 width: 30rem;
54 height: 100%;
55 border: 1px solid #40363a;
56 display: flex;
57 flex-direction: column;
58
59 h3 {
60 margin-top: 0;
61 text-align: center;
62 }
63
64 form {
65 align-self: center;
66 }
67 }
68}
69
70audio {
71 max-width: 40rem;
72 min-width: 0;
73 flex-grow: 1;
74 align-self: center;
75}
76
77img,
78video {
79 object-fit: scale-down;
80}
81
82dialog {
83 background-color: #120c0e;
84 color: #d9d8dc;
85 border-color: #eb99a1;
86
87 /* biome-ignore lint/style/noDescendingSpecificity: targets dialog forms only, disjoint from the #sidebar form rule */
88 form {
89 display: flex;
90 flex-direction: column;
91 align-items: center;
92 }
93}
94