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
9#logo {
10 z-index: 20;
11 align-self: flex-start;
12 padding: 0.4rem 1rem;
13 color: inherit;
14 font-weight: bold;
15 /* Override sakura's link styling: normal (white) text, and no underline —
16 which it draws as a border-bottom on hover, not text-decoration. */
17 border-bottom: none;
18
19 &:hover {
20 color: inherit;
21 border-bottom: none;
22 }
23}
24
25body {
26 box-sizing: border-box;
27 width: 100%;
28 height: 100vh;
29 max-width: 100%;
30 max-height: 100vh;
31
32 display: flex;
33 flex-direction: column;
34}
35
36#main {
37 display: flex;
38 flex-direction: row;
39 flex-grow: 1;
40 min-height: 0;
41 width: 100%;
42
43 #content {
44 box-sizing: border-box;
45 flex-grow: 1;
46 height: 100%;
47 overflow: auto;
48 border: 1px solid #40363a;
49 border-right: unset;
50 display: flex;
51 flex-direction: column;
52
53 #filename {
54 padding-left: 1rem;
55 }
56
57 pre {
58 box-sizing: border-box;
59 margin: 0;
60 flex-grow: 1;
61 overflow: auto;
62 max-width: 100%;
63 max-height: 100%;
64 }
65
66 #mediabox {
67 flex-grow: 1;
68 display: flex;
69 justify-content: center;
70 }
71 }
72
73 #sidebar {
74 box-sizing: border-box;
75 flex-shrink: 0;
76 padding: 1rem;
77 width: 30rem;
78 height: 100%;
79 border: 1px solid #40363a;
80 display: flex;
81 flex-direction: column;
82
83 h3 {
84 margin-top: 0;
85 text-align: center;
86 }
87
88 form {
89 align-self: center;
90 }
91 }
92}
93
94/* Portrait (taller than wide): stack the sidebar below the content instead of
95 beside it. */
96@media (orientation: portrait) {
97 #main {
98 flex-direction: column;
99
100 #content {
101 /* The shared divider is now the bottom edge; restore the right border
102 the row layout dropped and drop the bottom one. */
103 border-right: 1px solid #40363a;
104 border-bottom: unset;
105 }
106
107 #sidebar {
108 width: 100%;
109 height: auto;
110 }
111 }
112}
113
114audio {
115 max-width: 40rem;
116 min-width: 0;
117 flex-grow: 1;
118 align-self: center;
119}
120
121img,
122video {
123 object-fit: scale-down;
124}
125
126#decrypt-overlay {
127 position: fixed;
128 inset: 0;
129 z-index: 10;
130 box-sizing: border-box;
131 padding: 1rem;
132 display: flex;
133 flex-direction: column;
134 align-items: center;
135 justify-content: center;
136 background-color: #120c0e;
137 color: #d9d8dc;
138 text-align: center;
139
140 h1 {
141 max-width: 100%;
142 margin-top: 0;
143 /* Shrink the heading on narrow screens and let a long filename wrap
144 instead of overflowing. */
145 font-size: clamp(1.5rem, 6vw, 2.5rem);
146 overflow-wrap: anywhere;
147 }
148
149 /* biome-ignore lint/style/noDescendingSpecificity: targets the overlay form only, disjoint from the #sidebar form rule */
150 form {
151 display: flex;
152 flex-direction: column;
153 align-items: center;
154
155 /* The radio group: left-align so the two buttons line up vertically
156 instead of inheriting the overlay's centering. */
157 div {
158 text-align: left;
159
160 label {
161 display: block;
162 }
163 }
164 }
165}
166