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-name: thumbscroll;
71 animation-duration: 10s;
72 animation-iteration-count: infinite;
74 @keyframes thumbscroll {
75 0% { transform: translate(-05%, 0); }
76 9.99% { transform: translate(-05%, 0); }
77 10% { transform: translate(-15%, 0); }
78 19.99% { transform: translate(-15%, 0); }
79 20% { transform: translate(-25%, 0); }
80 29.99% { transform: translate(-25%, 0); }
81 30% { transform: translate(-35%, 0); }
82 39.99% { transform: translate(-35%, 0); }
83 40% { transform: translate(-45%, 0); }
84 49.99% { transform: translate(-45%, 0); }
85 50% { transform: translate(-55%, 0); }
86 59.99% { transform: translate(-55%, 0); }
87 60% { transform: translate(-65%, 0); }
88 69.99% { transform: translate(-65%, 0); }
89 70% { transform: translate(-75%, 0); }
90 79.99% { transform: translate(-75%, 0); }
91 80% { transform: translate(-85%, 0); }
92 89.99% { transform: translate(-85%, 0); }
93 90% { transform: translate(-95%, 0); }
94 100% { transform: translate(-95%, 0); }
97 .itemlist .list label {
100 word-break: break-word;
102 .itemlist .list .time,
103 .itemlist .list .dim {
104 position: absolute; top: 9.75em;
105 background-color: rgba(0,0,0,.5);
106 padding: .125em .25em;
108 .itemlist .list .time { right: 0; }
109 .itemlist .list .dim { left: 0; }
110 .itemlist .list input[type=checkbox] { display: none; }
111 .itemlist .list .tag,
112 .itemlist .list input[type=checkbox] + label {
113 display: inline-block;
114 background-color: #333;
120 .itemlist .list input[type=checkbox]:checked + label {
121 background-color: #383;
125 /* ====== PAGINATION LIST ====== */
133 background-color: #333;
137 display: inline-block;
142 .pagination a.current {
143 background-color: #BBB;
146 /* ====== BOOKMARK PANEL ====== */
150 display: block; position: fixed;
152 transform: translate( -50%, -50% );
153 width: 40em; max-width: 90%;
154 height: 30em; max-height: 90vh;
155 background-color: #333;
158 box-shadow: .25em .25em .5em #000;
168 word-break: break-word;
171 /* ====== ADVSEARCH / FILTER PANEL ====== */
174 display: block; position: fixed;
176 height: 30em; max-height: 90vh;
177 background-color: #333;
180 box-shadow: .25em .25em .5em #000;
184 -#advsearch { text-align: center; }
185 -#advsearch > * { text-align: left; }
189 margin: 1em auto; padding: 0 .5em;
190 background-color: #444;
191 white-space: pre-line;
194 #advsearch input.and + label {
195 display: inline-block;
199 #advsearch fieldset.select {
200 display: inline-block;
202 margin: 0 .5%; margin-bottom: .75em; padding: 0 .375em;
203 box-shadow: .125em .125em .25em #000;
206 #advsearch fieldset.select > label.head {
211 #advsearch fieldset.select > input.cat { display: none; }
212 #advsearch fieldset.select > input.cat + label + .catselect { display: none; }
213 #advsearch fieldset.select > input.cat + label {
216 margin: 0; padding: 0 .5em;
219 #advsearch fieldset.select > input.cat:checked + label { background-color: #444; }
220 #advsearch fieldset.select > input.cat:checked + label + .catselect {
221 display: block; position: absolute;
222 top: 1.5em; bottom: 0; right: 0;
225 background-color: #444;
228 #advsearch fieldset.select > input.cat + label + .catselect > * {
233 #advsearch input.and { display: none; }
234 #advsearch input.and + label { display: none; }
235 #advsearch input.and + label + fieldset { display: none; }
236 #advsearch input.and:checked + label + fieldset,
237 #advsearch input.and:first-of-type + label + fieldset { display: inline-block; }
238 #advsearch input.and:checked + label + fieldset + input + label,
239 #advsearch input.and:first-of-type + label + fieldset + input + label { display: inline-block; }
240 #advsearch input.and:checked + label + fieldset + input:checked + label { display: none; }
241 #advsearch input.and:first-of-type + label + fieldset + input:checked + label { display: none; }
244 /* ====== MULTITAG DIALOG ====== */
247 display: block; position: fixed;
248 bottom: 0; left: 0; width: 100%;
249 height: 30em; max-height: 90vh;
250 background-color: #333;
253 box-shadow: .25em .25em .5em #000;
257 -#multitag { text-align: center; }
258 -#multitag > * { text-align: left; }
261 display: inline-block;
263 margin: 0 .5%; margin-top: 1em;
266 #multitag fieldset select {
267 width: 100%; height: 10em;
269 #multitag fieldset .tagselect {
271 background-color: #444;
274 #multitag fieldset .tagselect > label {
280 /* ====== VIEW PAGE ====== */
289 display: inline-block;
290 background-color: #333;
298 /* ====== SCALE BLOCK ELEMENTS ====== */
300 @media(min-width: 20em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 49%; } }
301 @media(min-width: 40em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 32%; } }
302 @media(min-width: 60em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 24%; } }
303 @media(min-width: 80em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 19%; } }
304 @media(min-width: 100em) { .itemlist .list, #advsearch fieldset.select, #multitag fieldset { max-width: 19em; } }