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 height: 0; width: 100%; max-width: 100%;
77 background-color: #333;
94 #advsearch:target, #multitag:target,
95 #prefs:target, #bookmarks:target {
96 height: auto; overflow: visible;
98 #advsearch:target { border-style: none none solid none; }
99 #prefs:target { border-style: none none solid solid; }
100 #bookmarks:target { border-style: none solid solid none; }
102 #advsearch a[href="#"],
103 #multitag a[href="#"],
104 #bookmarks a[href="#"],
108 top: -2em; line-height: 2em;
111 background-color: inherit;
114 #prefs a[href="#"] { width: 2.5em; left: auto; }
115 #bookmarks a[href="#"] { width: 2.5em; right: auto; }
116 #advsearch a[href="#"] { border-bottom: 1px solid; }
117 #multitag a[href="#"] { position: normal; border-top: 1px solid;}
120 /* ### Preferences Drawer ### */
122 #prefs label[for=prefs_ps] {
132 #prefs input { vertical-align: top; }
133 #prefs input[type=radio] + label,
134 #prefs input[type=checkbox] + label {
135 display: inline-block;
141 /* ### Bookmarks Drawer ### */
145 margin-bottom: 1.25em;
150 word-break: break-word;
154 display: inline-block;
156 text-decoration: underline;
157 margin: 0 1em 1.25em 0;
161 /* ### Advance Search Drawer ###*/
165 margin: 1em .5em 1em .5em;
167 background-color: #444;
171 #advsearch input.and {display: none;}
172 #advsearch input.and + label {display: none}
173 #advsearch input.and + label + .select {display: none;}
175 #advsearch input.and + label:nth-of-type(2),
176 #advsearch input.and:checked + label + .select + input + label {
177 display: inline-block;
179 margin: 0 .5% 1em .5%;
180 width: 4%; min-width: 4em;
187 #advsearch input.and:checked + label + .select + input:checked + label,
188 #advsearch input.and:checked + label:nth-of-type(2),
189 #advsearch input.and:checked + label { display: none; }
192 #advsearch input.and + label + .select:first-of-type,
193 #advsearch input.and:checked + label + .select {
194 display: inline-block;
197 margin: 0 .5% 1em .5%;
203 @media (min-width: 460px){
205 #advsearch input.and + label + .select:first-of-type,
206 #advsearch input.and:checked + label + .select {
207 width: 49%; min-width: 200px;
209 @media (min-width: 660px){
211 #advsearch input.and + label + .select:first-of-type,
212 #advsearch input.and:checked + label + .select {
215 @media (min-width: 860px){
217 #advsearch input.and + label + .select:first-of-type,
218 #advsearch input.and:checked + label + .select {
221 @media (min-width: 1060px){
223 #advsearch input.and + label + .select:first-of-type,
224 #advsearch input.and:checked + label + .select {
228 #advsearch .submit { min-height: 0; }
229 #advsearch .submit * { width: 50%; }
231 #advsearch .select input.pol {
232 margin: .5em .25em 0 .5em;
234 #advsearch .select input.pol + label {
237 #advsearch .select label.head {
240 padding: .5em 0 0 .5em;
241 border-bottom: 1px solid;
244 #advsearch .select select {display: none;}
245 #advsearch .select input.cat { display: none; }
246 #advsearch .select input.cat + label {
251 border-bottom: 1px solid;
253 #advsearch .select input.cat:checked + label {
254 background-color: #444;
256 #advsearch .select input.cat:checked + label + select {
259 top: 3.5em; bottom: 0;
265 /* ### Item Listing ### */
269 display: inline-block;
276 .list.dir { padding: .5em 1em; }
279 top: .25em; left: .25em;
280 bottom: .25em; right: .25em;
284 .list.dir:before { background-color: #CCF; color: black; }
285 .list.file:before { background-color: #333; }
286 .list.file:first-of-type { clear: left; }
292 border-bottom: 1px solid black;
294 .list.file a + label{
295 display: inline-block;
296 width: 100%; max-height: 2.5em;
299 word-break: break-word;
300 background-color: #222;
303 .list.file .time, .list.file .dim {
304 float: right; position: relative;
305 display: inline-block;
306 top: -1.5em; bottom: 1.5;
307 margin-right: .125em;
308 padding: .125em .25em;
309 background-color: rgba(0,0,0,.75);
313 .list.file input + label {
314 display: inline-block;
315 margin: .125em -.125em 0 0;
316 padding: .125em .5em;
318 background-color: #DCC;
321 .list.file input[type="checkbox"] { display: none; }
322 .list.file input[type="checkbox"] + label {
324 background-color: #ECC;
326 .list.file input[type="checkbox"]:checked + label {
327 background-color: #8F8;
336 .pagination { margin-bottom: 3em;}
338 display: inline-block;
342 background-color: #FDD;
346 #index label:first-of-type { font-weight: bold; }
347 #index input, #index button { margin-left: 1em;}
350 /* ### Multi Tagging Drawer ### */
353 display: inline-block;
360 @media (min-width: 520px) { .list, #multitag fieldset { width: 50%; min-width: 250px; } }
361 @media (min-width: 760px) { .list, #multitag fieldset { width: 33%; } }
362 @media (min-width: 1020px){ .list, #multitag fieldset { width: 25%; } }
364 #multitag fieldset * { width: 100%; }
365 #multitag fieldset button { width: 50%; }