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 overflow: hidden;
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 var(--app-border);
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 var(--app-border);
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: var(--app-bg);
137 color: var(--app-fg);
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