zbin

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