]> git.plutz.net Git - serve0/blob - static/common.css
fix visual goofs in quicklink page
[serve0] / static / common.css
1 /* Copyright 2014 - 2016 Paul Hänsch
2
3    This file is part of Serve0
4    
5    Serve0 is free software: you can redistribute it and/or modify
6    it under the terms of the GNU Affero General Public License as published by
7    the Free Software Foundation, either version 3 of the License, or
8    (at your option) any later version.
9    
10    Serve0 is distributed in the hope that it will be useful,
11    but WITHOUT ANY WARRANTY; without even the implied warranty of
12    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13    GNU Affero General Public License for more details.
14    
15    You should have received a copy of the GNU Affero General Public License
16    along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
17 */
18
19 * {
20   -moz-box-sizing: border-box;
21   box-sizing: border-box;
22   -moz-transition: all .3s linear;
23   transition: all .3s linear;
24 }
25
26 body {
27   padding: 0;
28   margin: 0;
29   background-color: #000;
30   color: #DDD;
31 }
32 a { color: #EEE; }
33 legend, label, .label { font-weight: bold; }
34
35 input.tabhandle { display: none; }
36 .tabcontent { display: none; }
37 input.tabhandle:checked + label.tabhandle + .tabcontent { display: inline-block; }
38 input.tabhandle:checked + .tabcontent { display: inline-block; }
39
40 textarea {
41   display: block;
42   width: 100%;
43 }
44
45 .info {
46   margin: 0;
47   padding: 0 .25em;
48   background-color: #BBD;
49   color: #000;
50   border: #000 1px solid;
51 }
52 .info.tag {
53   line-height: 1.6em;
54   background-color: #DBB;
55   margin-right: -.75ex;
56 }
57
58 .pagination_nav {
59   display: inline-block;
60   position: absolute;
61   border: none;
62   right: 0; bottom: .25em;
63   padding: .125em .5em 0 0;
64 }
65
66 .pagination_nav a {
67   display: none;
68   margin: 1ex 1px;
69   padding: 0 1ex;
70   text-decoration: none;
71 }
72
73 .pagination_nav a.current {
74   display: inline;
75   color: #F66;
76   font-weight: bold;
77 }
78 .pagination_nav:hover {
79   position: fixed;
80   bottom: auto;
81   text-align: right;
82   background-color: #333;
83   border-bottom: 1px solid #FFF;
84   line-height: 1.75em;
85   transition: none;
86   overflow: auto;
87   min-height: 1em;
88   z-index: 2;
89 }
90 .pagination_nav:hover a {
91   display: inline;
92 }
93
94 /* == Panels == */
95
96 .panel {
97   position: relative;
98   display: block;
99   width: 100%;
100   margin: 0;
101   padding: .25em .5em;
102   background-color: #333;
103   border-width: 1px;
104   border-style: none none solid none;
105 }
106
107 a.panel {
108   font-weight: bold;
109   display: inline-block;
110   border: none;
111   width: auto;
112   padding: 0;
113   margin-right: 1em;
114   margin-bottom: 1ex;
115 }
116
117 .panel .help { display: block;}
118
119 /* == Top Panel == */
120 .panel#advfilter {
121   position: absolute;
122   top: 0;
123 }
124
125 /* == Bottom Panels == */
126 .panel#preferences,
127 .panel#tagger,
128 .panel#foot {
129   position: fixed;
130   bottom: 0px;
131   border-style: solid none none none;
132 }
133
134
135 /* == Switchable Panels == */
136
137 form.panel,
138 div.panel {
139   z-index: 1;
140   overflow: hidden;
141   min-height: 0; max-height: 0;
142   padding-top: 0; padding-bottom: 0;
143 }
144
145 .panel#search,
146 .panel#foot {
147   max-height: 100%;
148   z-index: 0;
149   padding: .25em 6em 0 .5em;
150   overflow: visible;
151 }
152
153 body.playctl .panel#search,
154 body.playctl .panel#foot { padding-right: .25em; }
155
156 .panel:target {
157   max-height: 100%;
158   overflow-y: scroll;
159 }
160 .panel#advfilter:target{ padding-bottom: 1em; }
161
162 /* == Panel Switches == */
163
164 .panel#playctl a.panel,
165 .panel#advfilter a.panel,
166 .panel#preferences a.panel,
167 .panel#tagger a.panel {
168   display: block;
169   border-style: none none solid none;
170   border-width: 1px;
171 }
172 .panel#preferences a.panel,
173 .panel#tagger a.panel {
174   border-style: solid none none none;
175   margin-top: .5em;
176 }
177
178
179 /* == Panel Elements == */
180
181 .panel#advfilter .quicklinks,
182 .panel#advfilter .filter,
183 .panel#tagger .newtag,
184 .panel#tagger input[type=submit],
185 .panel#preferences > * {
186   display: inline-block;
187   vertical-align: top;
188   margin-top: 1em;
189 }
190
191
192 /* == Advanced Filters == */
193
194 /* == Filter Boxes == */
195 #advfilter .filter {
196   border: solid 1px #FFF;
197   border-radius: .25em;
198   padding: .25em .5em;
199 }
200 #advfilter .filter .tabcontainer {
201   position: relative;
202   width: 16em;
203   font-weight:normal;
204 }
205 #advfilter .filter .tabcontainer input + .category.tabhandle {
206   display: block;
207   width: 50%;
208 }
209 #advfilter .filter .tabcontainer input:checked + .category.tabhandle {
210   background: #FFF;
211   color: #000;
212 }
213 #advfilter .filter .tabcontainer .category.tabcontent {
214   position: absolute;
215   top: 0; right: 0;
216   width: 50%;
217   height: 100%;
218   min-height: 4em;
219   border: 2px #FFF solid;
220   border-radius: 0 .25em .25em 0;
221 }
222
223 #advfilter > label.tabhandle {
224   text-align: right;
225   width: 4em;
226   margin-left: 4em;
227 }
228
229 /* == Dynamic Appearance of Boxes == */
230 .panel#advfilter > .tabhandle + label { display: none; }
231 .panel#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle + label { display: inline-block; }
232 .panel#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle:checked + label { display: none; }
233 .panel#advfilter > .tabhandle + label + .tabcontent {
234   display: inline-block;
235   overflow: hidden;
236   max-width: 0;
237   max-height: 0;
238   padding: 0;
239   border: none;
240 }
241 .panel#advfilter > .tabhandle:checked + label + .tabcontent {
242   max-width: 100%;
243   max-height: 100%;
244   padding: .25em .5em;
245   border: solid 1px #FFF;
246 }
247
248 #advfilter .filter.final {
249   width: 16em;
250   margin-left: 1em;
251 }
252
253 #advfilter .quicklinks {width: 100%;}
254
255 p.quicklinks { padding-bottom: 3em; }
256 p.quicklinks :first-child {width: 100%;}
257 p.quicklinks input { display: block; }
258 p.quicklinks a {
259   display: block;
260   word-wrap: break-word;
261   margin-left: 10%;
262   margin-bottom: .75em;
263   margin-top: -1.5em;
264 }
265 p.quicklinks input:checked,
266 p.quicklinks input:checked + a { display: none;}
267
268 /* == Thumblist == */
269
270 #thumblist {
271   width: 100%;
272   padding: .5em 0 3em 0;
273   text-align: center;
274 }
275
276 #thumblist .thumb {
277   display: inline-block;
278   text-align: left;
279   width: 90%;
280   padding: 0 .5em;
281   margin: .5%;
282   margin-bottom: .75em;
283   vertical-align: top;
284   word-wrap: break-word;
285 }
286 @media (min-width: 460px){#thumblist .thumb{width: 48%;}}
287 @media (min-width: 620px){#thumblist .thumb{width: 32%;}}
288 @media (min-width: 1004px){#thumblist .thumb{width: 250px; margin: 2px;}}
289
290 #thumblist .thumb img {
291   width: 100%;
292 }
293 #thumblist .thumb h2 {
294   font-size: 1em;
295   font-weight: normal;
296   margin: 0;
297 }
298 #thumblist .thumb a {
299   display: block;
300 }
301 #thumblist .thumb a.alt {
302   display: inline-block;
303   margin-top: .3em;
304 }
305 #thumblist input {
306   margin: .75em .5em;
307 }
308
309 /* == Filelist == */
310
311 #thumblist .file {
312   color: #000;
313   display: inline-block;
314   text-align: left;
315   width: 90%;
316   padding: .5em .5em;
317   margin: .5%;
318   margin-bottom: .75em;
319   vertical-align: top;
320   word-wrap: break-word;
321 }
322 @media (min-width: 460px){#thumblist .file{width: 48%;}}
323 @media (min-width: 620px){#thumblist .file{width: 32%;}}
324 @media (min-width: 1004px){#thumblist .file{width: 250px; margin: 2px;}}
325
326 #thumblist .file.directory { background-color: #BBD; }
327 #thumblist .file.plain { background-color: #111; color: #777; }
328 #thumblist .file.video { background-color: #DBB; }
329
330 .panel#tagger .newtag select,
331 .panel#tagger .newtag .label{
332   display: block;
333   width: 10em;
334 }
335
336 .panel#preferences > fieldset {
337   border: solid 1px;
338   border-radius: .25em;
339 }
340 .panel#preferences > input { display: block; }
341
342 #videoview h1, 
343 #playctl h1 { font-size: 1.25em;}
344 #videoview h1, #videoview > a,
345 #playctl h1, #playctl > a {
346   display: inline-block;
347   margin-right: 1em;
348   padding: 0; margin: .5em 0;
349 }
350 #videoview video {
351   display: block;
352   margin: 0;
353   width: 100%;
354 }
355
356 #playctl form { text-align: center; }
357 #playctl form button {
358   display: inline-block;
359   height: 100%;
360   min-height: 4em;
361   margin: 0 -.75ex .5em 0;
362   background-color: #EEE;
363   border: 1px solid #333;
364   vertical-align: bottom;
365   padding-top: 1em;
366 }
367 #playctl form button[name="seek"],
368 #playctl form button[name="ctl"] { width: 40%;}
369 #playctl form button[name="amp"] { width: 40%; margin-top: 2em;}
370 #playctl form button[name="vol"] { width: 5%; min-height: 1em;}
371 #playctl form button[name="vol"].selected { background-color: #FA6;}
372 #playctl form button[name="vol"][value="100"],
373 #playctl form button[name="vol"][value="0"] { width: 6%;}
374
375 span.progress {
376   display: block;
377   position: fixed;
378   bottom: 2.5em;
379   width: 100%; left:0; right: 0;
380   color: white;
381   background-color: black;
382   border-top: 1px solid white;
383   padding: 0;
384   height: 1em;
385 }
386 span.progress > * {
387   display: block;
388   text-align: center;
389   background-color: #333;
390 }
391
392 @media (min-width: 460px){
393   #playctl form button {
394     max-width: 4em;
395     min-height: 2em;
396     padding-top: 0em;
397     margin-bottom: 2em;
398   }
399   #playctl form button[name="seek"],
400   #playctl form button[name="ctl"] { width: 16%;}
401   #playctl form button[name="amp"] { width: 15%;}
402   #playctl form button[name="vol"] { width: 3%;}
403   #playctl form button[name="amp"] + br {display: none;}
404 }
405