2 box-sizing: border-box;
6 button { padding: .125em .5em; }
7 a { color: inherit; text-decoration: none;}
13 vertical-align: bottom;
15 input[type=number] { padding-right: 0; }
16 input[type=radio], input[type=checkbox] { vertical-align: baseline; }
21 select[multiple] { padding: 0; }
22 select[multiple] option { padding: .25em .5em; }
26 background-color: black;
31 /* ### Main Page Elements ### */
36 border-bottom: 1px solid;
37 background-color: #333;
43 bottom: 0; width: 100%;
45 border-top: 1px solid;
46 background-color: #333;
49 #search { display: inline; }
52 a[href="#bookmarks"] {
58 a[href="#prefs"] { right: 0; }
59 a[href="#bookmarks"] { left: 0; }
61 a[href="#advsearch"] { margin-left: .5em; }
62 a[href="#advsearch"]:before {
68 /* ### Expandable Drawers ### */
70 #prefs, #bookmarks, #multitag, #advsearch {
71 display: block; position: absolute;
72 max-height: 0; width: 100%; max-width: 100%;
77 background-color: #333;
78 transition: max-height .3s linear;
95 #advsearch:target, #multitag:target,
96 #prefs:target, #bookmarks:target {
97 max-height: 25em; overflow-y: scroll;
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; }
104 #advsearch a[href="#"],
105 #multitag a[href="#"],
106 #bookmarks a[href="#"],
111 background-color: inherit;
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; }
118 /* ### Preferences Drawer ### */
120 #prefs label[for=prefs_ps] {
130 #prefs input { vertical-align: top; }
131 #prefs input[type=radio] + label,
132 #prefs input[type=checkbox] + label {
133 display: inline-block;
139 /* ### Bookmarks Drawer ### */
143 margin-bottom: 1.25em;
148 word-break: break-word;
152 display: inline-block;
154 text-decoration: underline;
155 margin: 0 1em 1.25em 0;
159 /* ### Advance Search Drawer ###*/
163 margin: 1em .5em 1em .5em;
165 background-color: #444;
169 #advsearch input.and {display: none;}
170 #advsearch input.and + label {display: none}
171 #advsearch input.and + label + .select {
172 display: inline-block;
174 width: 100%; min-width: 0; max-width: 0;
179 transition: max-width .3s linear;
182 display: inline-block;
187 #advsearch input.and + label:nth-of-type(2),
188 #advsearch input.and:checked + label + .select + input + label {
189 display: inline-block;
191 margin: 0 .5% 1em .5%;
192 width: 4%; min-width: 4em;
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; }
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%;
210 @media (min-width: 460px){
212 #advsearch input.and + label + .select:first-of-type,
213 #advsearch input.and:checked + label + .select {
216 @media (min-width: 660px){
218 #advsearch input.and + label + .select:first-of-type,
219 #advsearch input.and:checked + label + .select {
222 @media (min-width: 860px){
224 #advsearch input.and + label + .select:first-of-type,
225 #advsearch input.and:checked + label + .select {
228 @media (min-width: 1060px){
230 #advsearch input.and + label + .select:first-of-type,
231 #advsearch input.and:checked + label + .select {
235 #advsearch .submit { min-height: 0; }
236 #advsearch .submit * { width: 50%; }
238 #advsearch .select input.pol {
239 margin: .5em .25em 0 .5em;
241 #advsearch .select input.pol + label {
244 #advsearch .select label.head {
247 padding: .5em 0 0 .5em;
248 border-bottom: 1px solid;
251 #advsearch .select select {display: none;}
252 #advsearch .select input.cat { display: none; }
253 #advsearch .select input.cat + label {
258 border-bottom: 1px solid;
260 #advsearch .select input.cat:checked + label {
261 background-color: #444;
263 #advsearch .select input.cat:checked + label + select {
266 top: 3.5em; bottom: 0;
272 /* ### Item Listing ### */
276 display: inline-block;
283 .list.dir { padding: .5em 1em; }
286 top: .25em; left: .25em;
287 bottom: .25em; right: .25em;
291 .list.dir:before { background-color: #CCF; color: black; }
292 .list.file:before { background-color: #333; }
293 .list.file:first-of-type { clear: left; }
299 border-bottom: 1px solid black;
301 .list.file a + label{
302 display: inline-block;
303 width: 100%; max-height: 2.5em;
306 word-break: break-word;
307 background-color: #222;
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);
321 .list.file input + label {
322 display: inline-block;
323 margin: .125em -.125em 0 0;
324 padding: .125em .5em;
326 background-color: #DCC;
329 .list.file input[type="checkbox"] { display: none; }
330 .list.file input[type="checkbox"] + label {
332 background-color: #ECC;
334 .list.file input[type="checkbox"]:checked + label {
335 background-color: #8F8;
344 .pagination { margin-bottom: 3em;}
346 display: inline-block;
350 background-color: #000;
356 background-color: #FDD;
360 #index label:first-of-type { font-weight: bold; }
361 #index input, #index button { margin-left: 1em;}
364 /* ### Video View ### */
366 body#view { padding-bottom: 6em; }
373 word-break: break-word;
374 text-decoration: none;
380 margin-left: auto; margin-right: auto;
383 @media(min-height: 400px) { #view #mainvideo { max-height: 320px; } }
384 @media(min-height: 480px) { #view #mainvideo { max-height: 460px; } }
385 @media(min-height: 520px) { #view #mainvideo { max-height: 480px; } }
386 @media(min-height: 640px) { #view #mainvideo { max-height: 600px; } }
387 @media(min-height: 700px) { #view #mainvideo { max-height: 640px; } }
388 @media(min-height: 760px) { #view #mainvideo { max-height: 720px; } }
389 @media(min-height: 1000px){ #view #mainvideo { max-height: 960px; } }
390 @media(min-height: 1200px){ #view #mainvideo { max-height: 1080px;} }
392 #view a[href$=download],
393 #view a[href^=javascript] {
397 #view .time, #view .dim,
399 margin-right: -.125em;
400 padding: .125em .25em;
404 #view .dim { background-color: #CCD; }
405 #view .tag { background-color: #DCC; }
409 /* ### Multi Tagging Drawer ### */
412 display: inline-block;
419 @media (min-width: 520px) { .list, #multitag fieldset { width: 50%; min-width: 250px; } }
420 @media (min-width: 760px) { .list, #multitag fieldset { width: 33%; } }
421 @media (min-width: 1020px){ .list, #multitag fieldset { width: 25%; } }
423 #multitag fieldset * { width: 100%; }
424 #multitag fieldset button { width: 50%; }