]> git.plutz.net Git - serve0/blob - style.css
8fea85dc1a9449bdcb134d0104d62939aa1a5999
[serve0] / style.css
1 * {
2   box-sizing: border-box;
3   margin: 0; padding: 0;
4   text-align: left;
5 }
6 button { padding: .125em .5em; }
7 a { color: inherit; text-decoration: none;}
8
9 input {
10   border: 1px solid;
11   padding: .25em .5em;
12   line-height: 1em;
13   vertical-align: bottom;
14 }
15 input[type=number] { padding-right: 0; }
16 input[type=radio], input[type=checkbox] { vertical-align: baseline; }
17 select {
18   border: 1px solid;
19   padding: .125em .5em;
20 }
21 select[multiple] { padding: 0; }
22 select[multiple] option { padding: .25em .5em; }
23
24 body {
25   color: white;
26   background-color: black;
27   min-height: 100%;
28 }
29
30
31 /* ###  Main Page Elements ### */
32
33 #navigation{
34   position: relative;
35   text-align: center;
36   border-bottom: 1px solid;
37   background-color: #333;
38 }
39
40 #editing,
41 #multitag {
42   position: fixed;
43   bottom: 0; width: 100%;
44   padding: .25em 0;
45   border-top: 1px solid;
46   background-color: #333;
47 }
48
49 #search { display: inline; }
50
51 a[href="#prefs"],
52 a[href="#bookmarks"] {
53   position: absolute;
54   top: 0;
55   margin: 0 .25em;
56   font-size: 1.5em;
57 }
58 a[href="#prefs"] { right: 0; }
59 a[href="#bookmarks"] { left: 0; }
60
61 a[href="#advsearch"] { margin-left: .5em; }
62 a[href="#advsearch"]:before {
63   content: '\25b8';
64   margin: 0 .5em;
65 }
66
67
68 /* ###  Expandable Drawers  ### */
69
70 #prefs, #bookmarks, #multitag, #advsearch {
71   display: block; position: absolute;
72   max-height: 0; width: 100%; max-width: 100%;
73   margin-top: -1px;
74   padding: 0 1em;
75   border: 1px none;
76   overflow: hidden;
77   background-color: #333;
78   transition: max-height .3s linear;
79   z-index: 1;
80 }
81 #bookmarks {
82   left: 0; width: 30%;
83   min-width: 300px;
84   margin-right: auto;
85 }
86 #prefs {
87   right: 0; width: 20%;
88   min-width: 200px;
89   margin-left: auto;
90 }
91 #advsearch {
92   text-align: center;
93 }
94
95 #advsearch:target, #multitag:target,
96 #prefs:target, #bookmarks:target {
97   max-height: 25em; overflow-y: scroll;
98 }
99 #advsearch:target { border-style: none none solid none; }
100 #prefs:target { border-style: none none solid solid; }
101 #bookmarks:target { border-style: none solid solid none; }
102 #multitag:target { border-style: solid none none none; }
103
104 #advsearch a[href="#"],
105 #multitag a[href="#"],
106 #bookmarks a[href="#"],
107 #prefs a[href="#"] {
108   display: block;
109   line-height: 2em;
110   font-weight: bold;
111   background-color: inherit;
112 }
113 -#prefs a[href="#"] { width: 2.5em; left: auto; }
114 -#bookmarks a[href="#"] { width: 2.5em; right: auto; }
115 #advsearch a[href="#"] { border-bottom: 1px solid; }
116
117
118 /* ###  Preferences Drawer  ### */
119
120 #prefs label[for=prefs_ps] {
121   font-weight: bold;
122 }
123 #prefs #prefs_ps {
124   max-width: 4em;
125   margin-bottom: 1em;
126 }
127 #prefs button {
128   margin: 1em 0;
129 }
130 #prefs input { vertical-align: top; }
131 #prefs input[type=radio] + label,
132 #prefs input[type=checkbox] + label {
133   display: inline-block;
134   margin-bottom: .5em;
135   max-width: 85%;
136 }
137
138
139 /* ###  Bookmarks Drawer  ### */
140
141 #bookmarks input,
142 #bookmarks button {
143   margin-bottom: 1.25em;
144 }
145 #bookmarks label {
146   display: block;
147   font-weight: bold;
148   word-break: break-word;
149   overflow: hidden;
150 }
151 #bookmarks a.link {
152   display: inline-block;
153   font-size: .75em;
154   text-decoration: underline;
155   margin: 0 1em 1.25em 0;
156 }
157
158
159 /* ###  Advance Search Drawer  ###*/
160
161 #advsearch .help {
162   display: block;
163   margin: 1em .5em 1em .5em;
164   padding: .5em 1em;
165   background-color: #444;
166   line-height: 1.5em;
167 }
168
169 #advsearch input.and {display: none;}
170 #advsearch input.and + label {display: none}
171 #advsearch input.and + label + .select {
172   display: inline-block;
173   position: relative;
174   width: 100%; min-width: 0; max-width: 0;
175   min-height: 12em;
176   overflow: hidden;
177   vertical-align: top;
178   border: none;
179   transition: max-width .3s linear;
180 }
181 #advsearch .submit {
182   display: inline-block;
183   width: 100%;
184   vertical-align: top;
185 }
186
187 #advsearch input.and + label:nth-of-type(2),
188 #advsearch input.and:checked + label + .select + input + label {
189   display: inline-block;
190   vertical-align: top;
191   margin: 0 .5% 1em .5%;
192   width: 4%; min-width: 4em;
193   padding: .5em 0;
194   text-align: center;
195   font-weight: bold;
196   border: 1px solid;
197 }
198
199 #advsearch input.and:checked + label + .select + input:checked + label,
200 #advsearch input.and:checked + label:nth-of-type(2),
201 #advsearch input.and:checked + label { display: none; }
202
203 #advsearch input.and + label + .select:first-of-type,
204 #advsearch input.and:checked + label + .select {
205   min-width: 200px; max-width: 100%;
206   margin: 0 .5% 1em .5%;
207   border: 1px solid;
208 }
209
210 @media (min-width: 460px){
211 #advsearch .submit,
212 #advsearch input.and + label + .select:first-of-type,
213 #advsearch input.and:checked + label + .select {
214   width: 49%;
215 } }
216 @media (min-width: 660px){
217 #advsearch .submit,
218 #advsearch input.and + label + .select:first-of-type,
219 #advsearch input.and:checked + label + .select {
220   width: 32%;
221 } }
222 @media (min-width: 860px){
223 #advsearch .submit,
224 #advsearch input.and + label + .select:first-of-type,
225 #advsearch input.and:checked + label + .select {
226   width: 24%;
227 } }
228 @media (min-width: 1060px){
229 #advsearch .submit,
230 #advsearch input.and + label + .select:first-of-type,
231 #advsearch input.and:checked + label + .select {
232   width: 19%;
233 } }
234
235 #advsearch .submit { min-height: 0; }
236 #advsearch .submit * { width: 50%; }
237
238 #advsearch .select input.pol {
239   margin: .5em .25em 0 .5em;
240 }
241 #advsearch .select input.pol + label {
242   font-weight: bold;
243 }
244 #advsearch .select label.head {
245   display: block;
246   font-weight: bold;
247   padding: .5em 0 0 .5em;
248   border-bottom: 1px solid;
249 }
250
251 #advsearch .select select {display: none;}
252 #advsearch .select input.cat { display: none; }
253 #advsearch .select input.cat + label {
254   display: block;
255   margin-right: 50%;
256   padding: .25em .5em;
257   font-size: 1.125em;
258   border-bottom: 1px solid;
259 }
260 #advsearch .select input.cat:checked + label {
261   background-color: #444;
262 }
263 #advsearch .select input.cat:checked + label + select {
264   display: block;
265   position: absolute;
266   top: 3.5em; bottom: 0;
267   right: 0; left: 50%;
268   width: 50%;
269 }
270
271
272 /* ###  Item Listing  ### */
273
274 .list {
275   position: relative;
276   display: inline-block;
277   width: 100%;
278   padding: .375em;
279   vertical-align: top;
280   overflow: hidden;
281 }
282
283 .list.dir { padding: .5em 1em; }
284 .list:before {
285   position: absolute;
286   top: .25em; left: .25em;
287   bottom: .25em; right: .25em;
288   content: '';
289   z-index: -2;
290 }
291 .list.dir:before { background-color: #CCF; color: black; }
292 .list.file:before { background-color: #333; }
293 .list.file:first-of-type { clear: left; }
294
295 .list.file a img{
296   display: block;
297   width: 100%;
298   min-height: 4em;
299   border-bottom: 1px solid black;
300 }
301 .list.file a + label{
302   display: inline-block;
303   width: 100%; max-height: 2.5em;
304   margin-right: -10em;
305   padding: .25em .5em;
306   word-break: break-word;
307   background-color: #222;
308   overflow: hidden;
309 }
310
311 .list.file .time, .list.file .dim {
312   float: right; position: relative;
313   display: inline-block;
314   top: -1.5em; bottom: 1.5;
315   margin-right: .125em;
316   padding: .125em .25em;
317   background-color: rgba(0,0,0,.75);
318 }
319
320 .list.file .tag,
321 .list.file input + label {
322   display: inline-block;
323   margin: .125em -.125em 0 0;
324   padding: .125em .5em;
325   color: black;
326   background-color: #DCC;
327 }
328
329 .list.file input[type="checkbox"] { display: none; }
330 .list.file input[type="checkbox"] + label {
331   border: 1px solid;
332   background-color: #ECC;
333 }
334 .list.file input[type="checkbox"]:checked + label {
335   background-color: #8F8;
336 }
337
338 .itemlist,
339 .pagination {
340   display: block;
341   text-align: center;
342   margin-top: 1em;
343 }
344 .pagination { margin-bottom: 3em;}
345 .page {
346   display: inline-block;
347   margin: 0 .125em;
348   padding: .25em .5em;
349   color: black;
350   background-color: #FDD;
351   border: 1px solid;
352 }
353
354 #index label:first-of-type { font-weight: bold; }
355 #index input, #index button { margin-left: 1em;}
356
357
358 /* ###  Video View  ### */
359
360 #view h1 {
361   max-width: 100%;
362   margin: 1em 0; padding: 0 .5em;
363   font-size: 1.25em;
364   font-weight: bold;
365   word-break: break-word;
366   text-decoration: none;
367 }
368
369 #view #mainvideo {
370   display: inline;
371   width: 100%;
372   max-height: 70%;
373 }
374
375 #view .time, #view .dim,
376 #view .tag {
377   margin-right: -.125em;
378   padding: .125em .25em;
379   color: black;
380 }
381 #view .time,
382 #view .dim { background-color: #CCD; }
383 #view .tag { background-color: #DCC; }
384
385
386
387 /* ###  Multi Tagging Drawer  ### */
388
389 #multitag fieldset{
390   display: inline-block;
391   width: 100%;
392   vertical-align: top;
393   padding: 0 .25em;
394   border: none;
395 }
396
397 @media (min-width: 520px) { .list, #multitag fieldset { width: 50%; min-width: 250px; } }
398 @media (min-width: 760px) { .list, #multitag fieldset { width: 33%; } }
399 @media (min-width: 1020px){ .list, #multitag fieldset { width: 25%; } }
400
401 #multitag fieldset * { width: 100%; }
402 #multitag fieldset button { width: 50%; }