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