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%;
204 #advsearch .submit { min-height: 0; }
205 #advsearch .submit * { width: 50%; }
207 #advsearch .select input.pol {
208 margin: .5em .25em 0 .5em;
210 #advsearch .select input.pol + label {
213 #advsearch .select label.head {
216 padding: .5em 0 0 .5em;
217 border-bottom: 1px solid;
220 #advsearch .select select {display: none;}
221 #advsearch .select input.cat { display: none; }
222 #advsearch .select input.cat + label {
227 border-bottom: 1px solid;
229 #advsearch .select input.cat:checked + label {
230 background-color: #444;
232 #advsearch .select input.cat:checked + label + select {
235 top: 3.5em; bottom: 0;
241 /* ### Item Listing ### */
245 display: inline-block;
246 width: 25%; min-width: 250px;
251 .list.dir { padding: .5em 1em; }
255 top: .25em; left: .25em;
256 bottom: .25em; right: .25em;
260 .list.dir:before { background-color: #CCF; color: black; }
261 .list.file:before { background-color: #333; }
262 .list.file:first-of-type { clear: left; }
268 border-bottom: 1px solid black;
270 .list.file a + label{
271 display: inline-block;
272 width: 100%; max-height: 2.5em;
275 word-break: break-word;
276 background-color: #222;
279 .list.file .time, .list.file .dim {
280 float: right; position: relative;
281 display: inline-block;
282 top: -1.5em; bottom: 1.5;
283 margin-right: .125em;
284 padding: .125em .25em;
285 background-color: rgba(0,0,0,.75);
289 .list.file input + label {
290 display: inline-block;
291 margin: .125em -.125em 0 0;
292 padding: .125em .5em;
294 background-color: #DCC;
297 .list.file input[type="checkbox"] { display: none; }
298 .list.file input[type="checkbox"] + label {
300 background-color: #ECC;
302 .list.file input[type="checkbox"]:checked + label {
303 background-color: #8F8;
312 .pagination { margin-bottom: 3em;}
314 display: inline-block;
318 background-color: #FDD;
322 #index label:first-of-type { font-weight: bold; }
323 #index input, #index button { margin-left: 1em;}
326 /* ### Multi Tagging Drawer ### */
329 display: inline-block;
330 width: 25%; min-width: 250px;
335 #multitag fieldset * { width: 100%; }
336 #multitag fieldset button { width: 50%; }