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;
62 -width: 1000%; height: 11em;
64 background-color: #111;
66 transform: translate(-05%, 0);
69 .itemlist .list:hover img {
70 animation: thumbscroll 8s steps(10, end) infinite;
72 @keyframes thumbscroll {
73 from { transform: translate(-05%, 0);}
74 to { transform: translate(-105%, 0);}
77 .itemlist .list label {
80 word-break: break-word;
82 .itemlist .list .time,
83 .itemlist .list .dim {
84 position: absolute; top: 9.75em;
85 background-color: rgba(0,0,0,.5);
86 padding: .125em .25em;
88 .itemlist .list .time { right: 0; }
89 .itemlist .list .dim { left: 0; }
90 .itemlist .list input[type=checkbox] { display: none; }
92 .itemlist .list input[type=checkbox] + label {
93 display: inline-block;
94 background-color: #333;
100 .itemlist .list input[type=checkbox]:checked + label {
101 background-color: #383;
105 /* ====== PAGINATION LIST ====== */
113 background-color: #333;
117 display: inline-block;
122 .pagination a.current {
123 background-color: #BBB;
126 /* ====== BOOKMARK PANEL ====== */
130 display: block; position: fixed;
132 transform: translate( -50%, -50% );
133 width: 40em; max-width: 90%;
134 height: 30em; max-height: 90vh;
135 background-color: #333;
138 box-shadow: .25em .25em .5em #000;
148 word-break: break-word;
151 /* ====== ADVSEARCH / FILTER PANEL ====== */
154 display: block; position: fixed;
156 height: 30em; max-height: 90vh;
157 background-color: #333;
160 box-shadow: .25em .25em .5em #000;
164 -#advsearch { text-align: center; }
165 -#advsearch > * { text-align: left; }
169 margin: 1em auto; padding: 0 .5em;
170 background-color: #444;
171 white-space: pre-line;
174 #advsearch input.and + label {
175 display: inline-block;
179 #advsearch fieldset.select {
180 display: inline-block;
182 margin: 0 .5%; margin-bottom: .75em; padding: 0 .375em;
183 box-shadow: .125em .125em .25em #000;
186 #advsearch fieldset.select > label.head {
191 #advsearch fieldset.select > input.cat { display: none; }
192 #advsearch fieldset.select > input.cat + label + .catselect { display: none; }
193 #advsearch fieldset.select > input.cat + label {
196 margin: 0; padding: 0 .5em;
199 #advsearch fieldset.select > input.cat:checked + label { background-color: #444; }
200 #advsearch fieldset.select > input.cat:checked + label + .catselect {
201 display: block; position: absolute;
202 top: 1.5em; bottom: 0; right: 0;
205 background-color: #444;
208 #advsearch fieldset.select > input.cat + label + .catselect > * {
213 #advsearch input.and { display: none; }
214 #advsearch input.and + label { display: none; }
215 #advsearch input.and + label + fieldset { display: none; }
216 #advsearch input.and:checked + label + fieldset,
217 #advsearch input.and:first-of-type + label + fieldset { display: inline-block; }
218 #advsearch input.and:checked + label + fieldset + input + label,
219 #advsearch input.and:first-of-type + label + fieldset + input + label { display: inline-block; }
220 #advsearch input.and:checked + label + fieldset + input:checked + label { display: none; }
221 #advsearch input.and:first-of-type + label + fieldset + input:checked + label { display: none; }
224 /* ====== MULTITAG DIALOG ====== */
227 display: block; position: fixed;
228 bottom: 0; left: 0; width: 100%;
229 height: 30em; max-height: 90vh;
230 background-color: #333;
233 box-shadow: .25em .25em .5em #000;
237 -#multitag { text-align: center; }
238 -#multitag > * { text-align: left; }
241 display: inline-block;
243 margin: 0 .5%; margin-top: 1em;
246 #multitag fieldset select {
247 width: 100%; height: 10em;
249 #multitag fieldset .tagselect {
251 background-color: #444;
254 #multitag fieldset .tagselect > label {
260 /* ====== VIEW PAGE ====== */
269 display: inline-block;
270 background-color: #333;
278 /* ====== SCALE BLOCK ELEMENTS ====== */
280 @media(min-width: 20em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 49%; } }
281 @media(min-width: 40em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 32%; } }
282 @media(min-width: 60em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 24%; } }
283 @media(min-width: 80em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 19%; } }
284 @media(min-width: 100em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 19em; } }