3 background-color: #000;
7 /* ====== TOP CONTROL BAR ====== */
11 margin-bottom: 1em; padding: 0 2em;
12 background-color: #333;
13 box-shadow: .125em .125em .25em #000;
16 position: absolute; bottom: .25em;
19 text-decoration: none;
21 #navigation > a[href="#bookmarks"] { left: 0; }
22 #navigation > a[href="#prefs"] { right: 0; }
24 #bookmarks, #advsearch, #prefs, #multitag {
32 bottom: 0; width: 100%;
34 background-color: #333;
42 text-decoration: none;
47 /* ====== MAIN LIST VIEW ====== */
49 .itemlist { text-align: center; }
50 .itemlist > * { text-align: left; }
52 display: inline-block;
61 width: 100%; height: 11em;
62 background-color: #111;
65 .itemlist .list label {
68 word-break: break-word;
70 .itemlist .list .time,
71 .itemlist .list .dim {
72 position: absolute; top: 9.75em;
73 background-color: rgba(0,0,0,.5);
74 padding: .125em .25em;
76 .itemlist .list .time { right: 0; }
77 .itemlist .list .dim { left: 0; }
78 .itemlist .list input[type=checkbox] { display: none; }
80 .itemlist .list input[type=checkbox] + label {
81 display: inline-block;
82 background-color: #333;
88 .itemlist .list input[type=checkbox]:checked + label {
89 background-color: #383;
93 /* ====== PAGINATION LIST ====== */
101 background-color: #333;
105 display: inline-block;
110 .pagination a.current {
111 background-color: #BBB;
114 /* ====== BOOKMARK PANEL ====== */
118 display: block; position: fixed;
120 transform: translate( -50%, -50% );
121 width: 40em; max-width: 90%;
122 height: 30em; max-height: 90vh;
123 background-color: #333;
126 box-shadow: .25em .25em .5em #000;
136 word-break: break-word;
139 /* ====== ADVSEARCH / FILTER PANEL ====== */
142 display: block; position: fixed;
144 height: 30em; max-height: 90vh;
145 background-color: #333;
148 box-shadow: .25em .25em .5em #000;
152 -#advsearch { text-align: center; }
153 -#advsearch > * { text-align: left; }
157 margin: 1em auto; padding: 0 .5em;
158 background-color: #444;
159 white-space: pre-line;
162 #advsearch input.and + label {
163 display: inline-block;
167 #advsearch fieldset.select {
168 display: inline-block;
170 margin: 0 .5%; margin-bottom: .75em; padding: 0 .375em;
171 box-shadow: .125em .125em .25em #000;
174 #advsearch fieldset.select > label.head {
179 #advsearch fieldset.select > input.cat { display: none; }
180 #advsearch fieldset.select > input.cat + label + .catselect { display: none; }
181 #advsearch fieldset.select > input.cat + label {
184 margin: 0; padding: 0 .5em;
187 #advsearch fieldset.select > input.cat:checked + label { background-color: #444; }
188 #advsearch fieldset.select > input.cat:checked + label + .catselect {
189 display: block; position: absolute;
190 top: 1.5em; bottom: 0; right: 0;
193 background-color: #444;
196 #advsearch fieldset.select > input.cat + label + .catselect > * {
201 #advsearch input.and { display: none; }
202 #advsearch input.and + label { display: none; }
203 #advsearch input.and + label + fieldset { display: none; }
204 #advsearch input.and:checked + label + fieldset,
205 #advsearch input.and:first-of-type + label + fieldset { display: inline-block; }
206 #advsearch input.and:checked + label + fieldset + input + label,
207 #advsearch input.and:first-of-type + label + fieldset + input + label { display: inline-block; }
208 #advsearch input.and:checked + label + fieldset + input:checked + label { display: none; }
209 #advsearch input.and:first-of-type + label + fieldset + input:checked + label { display: none; }
212 /* ====== MULTITAG DIALOG ====== */
215 display: block; position: fixed;
216 bottom: 0; left: 0; width: 100%;
217 height: 30em; max-height: 90vh;
218 background-color: #333;
221 box-shadow: .25em .25em .5em #000;
225 -#multitag { text-align: center; }
226 -#multitag > * { text-align: left; }
229 display: inline-block;
231 margin: 0 .5%; margin-top: 1em;
234 #multitag fieldset select {
235 width: 100%; height: 10em;
237 #multitag fieldset .tagselect {
239 background-color: #444;
242 #multitag fieldset .tagselect > label {
248 /* ====== VIEW PAGE ====== */
257 display: inline-block;
258 background-color: #333;
266 /* ====== SCALE BLOCK ELEMENTS ====== */
268 @media(min-width: 20em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 49%; } }
269 @media(min-width: 40em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 32%; } }
270 @media(min-width: 60em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 24%; } }
271 @media(min-width: 80em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 19%; } }
272 @media(min-width: 100em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 19em; } }