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;
79 transition: max-height .3s linear;
95 #advsearch:target, #multitag:target,
96 #prefs:target, #bookmarks:target {
97 max-height: 100em; overflow: visible;
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; }
103 #advsearch a[href="#"],
104 #multitag a[href="#"],
105 #bookmarks a[href="#"],
109 top: -2em; line-height: 2em;
112 background-color: inherit;
115 #prefs a[href="#"] { width: 2.5em; left: auto; }
116 #bookmarks a[href="#"] { width: 2.5em; right: auto; }
117 #advsearch a[href="#"] { border-bottom: 1px solid; }
118 #multitag a[href="#"] { position: normal; border-top: 1px solid;}
121 /* ### Preferences Drawer ### */
123 #prefs label[for=prefs_ps] {
133 #prefs input { vertical-align: top; }
134 #prefs input[type=radio] + label,
135 #prefs input[type=checkbox] + label {
136 display: inline-block;
142 /* ### Bookmarks Drawer ### */
146 margin-bottom: 1.25em;
151 word-break: break-word;
155 display: inline-block;
157 text-decoration: underline;
158 margin: 0 1em 1.25em 0;
162 /* ### Advance Search Drawer ###*/
166 margin: 1em .5em 1em .5em;
168 background-color: #444;
172 #advsearch input.and {display: none;}
173 #advsearch input.and + label {display: none}
174 #advsearch input.and + label + .select {
175 display: inline-block;
177 width: 100%; min-width: 0; max-width: 0;
182 transition: max-width .3s linear;
185 display: inline-block;
190 #advsearch input.and + label:nth-of-type(2),
191 #advsearch input.and:checked + label + .select + input + label {
192 display: inline-block;
194 margin: 0 .5% 1em .5%;
195 width: 4%; min-width: 4em;
202 #advsearch input.and:checked + label + .select + input:checked + label,
203 #advsearch input.and:checked + label:nth-of-type(2),
204 #advsearch input.and:checked + label { display: none; }
206 #advsearch input.and + label + .select:first-of-type,
207 #advsearch input.and:checked + label + .select {
208 min-width: 200px; max-width: 100%;
209 margin: 0 .5% 1em .5%;
213 @media (min-width: 460px){
215 #advsearch input.and + label + .select:first-of-type,
216 #advsearch input.and:checked + label + .select {
219 @media (min-width: 660px){
221 #advsearch input.and + label + .select:first-of-type,
222 #advsearch input.and:checked + label + .select {
225 @media (min-width: 860px){
227 #advsearch input.and + label + .select:first-of-type,
228 #advsearch input.and:checked + label + .select {
231 @media (min-width: 1060px){
233 #advsearch input.and + label + .select:first-of-type,
234 #advsearch input.and:checked + label + .select {
238 #advsearch .submit { min-height: 0; }
239 #advsearch .submit * { width: 50%; }
241 #advsearch .select input.pol {
242 margin: .5em .25em 0 .5em;
244 #advsearch .select input.pol + label {
247 #advsearch .select label.head {
250 padding: .5em 0 0 .5em;
251 border-bottom: 1px solid;
254 #advsearch .select select {display: none;}
255 #advsearch .select input.cat { display: none; }
256 #advsearch .select input.cat + label {
261 border-bottom: 1px solid;
263 #advsearch .select input.cat:checked + label {
264 background-color: #444;
266 #advsearch .select input.cat:checked + label + select {
269 top: 3.5em; bottom: 0;
275 /* ### Item Listing ### */
279 display: inline-block;
286 .list.dir { padding: .5em 1em; }
289 top: .25em; left: .25em;
290 bottom: .25em; right: .25em;
294 .list.dir:before { background-color: #CCF; color: black; }
295 .list.file:before { background-color: #333; }
296 .list.file:first-of-type { clear: left; }
302 border-bottom: 1px solid black;
304 .list.file a + label{
305 display: inline-block;
306 width: 100%; max-height: 2.5em;
309 word-break: break-word;
310 background-color: #222;
313 .list.file .time, .list.file .dim {
314 float: right; position: relative;
315 display: inline-block;
316 top: -1.5em; bottom: 1.5;
317 margin-right: .125em;
318 padding: .125em .25em;
319 background-color: rgba(0,0,0,.75);
323 .list.file input + label {
324 display: inline-block;
325 margin: .125em -.125em 0 0;
326 padding: .125em .5em;
328 background-color: #DCC;
331 .list.file input[type="checkbox"] { display: none; }
332 .list.file input[type="checkbox"] + label {
334 background-color: #ECC;
336 .list.file input[type="checkbox"]:checked + label {
337 background-color: #8F8;
346 .pagination { margin-bottom: 3em;}
348 display: inline-block;
352 background-color: #FDD;
356 #index label:first-of-type { font-weight: bold; }
357 #index input, #index button { margin-left: 1em;}
360 /* ### Multi Tagging Drawer ### */
363 display: inline-block;
370 @media (min-width: 520px) { .list, #multitag fieldset { width: 50%; min-width: 250px; } }
371 @media (min-width: 760px) { .list, #multitag fieldset { width: 33%; } }
372 @media (min-width: 1020px){ .list, #multitag fieldset { width: 25%; } }
374 #multitag fieldset * { width: 100%; }
375 #multitag fieldset button { width: 50%; }