zbin

zbin/assets/show.css
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 box-sizing: border-box;
52 flex-shrink: 0;
53 padding: 1rem;
54 width: 30rem;
55 height: 100%;
56 border: 1px solid #40363a;
57 display: flex;
58 flex-direction: column;
59
60 h3 {
61 margin-top: 0;
62 text-align: center;
63 }
64
65 form {
66 align-self: center;
67 }
68
69 }
70}
71
72audio {
73 max-width: 40rem;
74 min-width: 0;
75 flex-grow: 1;
76 align-self: center;
77}
78
79img,
80video {
81 object-fit: scale-down;
82}
83
84dialog {
85 background-color: #120c0e;
86 color: #d9d8dc;
87 border-color: #eb99a1;
88
89 form {
90 display: flex;
91 flex-direction: column;
92 align-items: center;
93 }
94}