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;
59 @media(min-width: 20em) { .itemlist .list { max-width: 49%; } }
60 @media(min-width: 40em) { .itemlist .list { max-width: 32%; } }
61 @media(min-width: 60em) { .itemlist .list { max-width: 24%; } }
62 @media(min-width: 80em) { .itemlist .list { max-width: 19%; } }
63 @media(min-width: 100em) { .itemlist .list { max-width: 19em; } }
66 width: 100%; height: 11em;
67 background-color: #111;
70 .itemlist .list label {
73 word-break: break-word;
75 .itemlist .list .time,
76 .itemlist .list .dim {
77 position: absolute; top: 9.75em;
78 background-color: rgba(0,0,0,.5);
79 padding: .125em .25em;
81 .itemlist .list .time { right: 0; }
82 .itemlist .list .dim { left: 0; }
83 .itemlist .list input[type=checkbox] { display: none; }
85 .itemlist .list input[type=checkbox] + label {
86 display: inline-block;
87 background-color: #333;
93 .itemlist .list input[type=checkbox]:checked + label {
94 background-color: #383;
98 /* ====== PAGINATION LIST ====== */
106 background-color: #333;
110 display: inline-block;
115 .pagination a.current {
116 background-color: #BBB;
119 /* ====== BOOKMARK PANEL ====== */
123 display: block; position: fixed;
125 transform: translate( -50%, -50% );
126 width: 40em; max-width: 90%;
127 height: 30em; max-height: 90vh;
128 background-color: #333;
131 box-shadow: .25em .25em .5em #000;
141 word-break: break-word;
144 /* ====== ADVSEARCH PANEL ====== */
147 display: block; position: fixed;
149 height: 30em; max-height: 90vh;
150 background-color: #333;
153 box-shadow: .25em .25em .5em #000;
157 -#advsearch { text-align: center; }
158 -#advsearch > * { text-align: left; }
162 margin: 1em auto; padding: 0 .5em;
163 background-color: #444;
164 white-space: pre-line;
167 #advsearch input.and + label {
168 display: inline-block;
172 #advsearch fieldset.select {
173 display: inline-block;
174 width: 18em; max-width: 100%;
175 margin: 0 .5em; padding: 0 .375em;
176 box-shadow: .125em .125em .25em #000;
178 #advsearch fieldset.select > label.head {
183 #advsearch fieldset.select > input.cat { display: none; }
184 #advsearch fieldset.select > input.cat + label + .catselect { display: none; }
185 #advsearch fieldset.select > input.cat + label {
188 margin: 0; padding: 0 .5em;
191 #advsearch fieldset.select > input.cat:checked + label { background-color: #444; }
192 #advsearch fieldset.select > input.cat:checked + label + .catselect {
193 display: block; position: absolute;
194 top: 1.5em; bottom: 0; right: 0;
197 background-color: #444;
200 #advsearch fieldset.select > input.cat + label + .catselect > * {
205 #advsearch input.and { display: none; }
206 #advsearch input.and + label { display: none; }
207 #advsearch input.and + label + fieldset { display: none; }
208 #advsearch input.and:checked + label + fieldset { display: inline-block; }
209 #advsearch input.and:checked + label + fieldset + input + label { display: inline-block; }
210 #advsearch input.and:checked + 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;
233 @media(min-width: 20em) { #multitag fieldset { max-width: 49%; } }
234 @media(min-width: 40em) { #multitag fieldset { max-width: 32%; } }
235 @media(min-width: 60em) { #multitag fieldset { max-width: 24%; } }
236 @media(min-width: 80em) { #multitag fieldset { max-width: 19%; } }
237 @media(min-width: 100em) { #multitag fieldset { max-width: 19em; } }
239 #multitag fieldset select {
240 width: 100%; height: 10em;
242 #multitag fieldset .tagselect {
244 background-color: #444;
247 #multitag fieldset .tagselect > label {
253 /* ====== VIEW PAGE ====== */
262 display: inline-block;
263 background-color: #333;