1 /* Copyright 2014 - 2016 Paul Hänsch
3 This file is part of Serve0
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.
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.
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/>.
20 -moz-box-sizing: border-box;
21 box-sizing: border-box;
22 -moz-transition: all .3s linear;
23 transition: all .3s linear;
29 background-color: #000;
33 legend, label, .label { font-weight: bold; }
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; }
48 background-color: rgba(208,208,255,.625 );
50 border: #000 1px solid;
54 background-color: #DBB;
59 display: inline-block;
63 background-color: #333;
66 .panel:after { content: ''; display: block; clear: both;}
69 text-decoration: none;
72 .pagination_nav a.previous,
73 .pagination_nav a.current,
74 .pagination_nav a.next { display: inline-block; }
75 .pagination_nav a.current { color: #F66; font-weight: bold; }
77 .pagination_nav:hover {
81 padding: .5em 3ex .5em 0;
84 #search .pagination_nav:hover {
87 border-bottom: 1px solid #FFF;
89 #foot .pagination_nav:hover {
91 padding-bottom: 2.5em;
92 border-top: 1px solid #FFF;
94 .pagination_nav:hover a { display: inline; }
104 background-color: #333;
106 border-style: none none solid none;
111 display: inline-block;
115 margin: auto 1em 1ex 0;
118 .panel .help { display: block;}
120 /* == Top Panel == */
122 .panel#advfilter { position: absolute; top: 0; }
123 .panel#search select { margin-right: .5em; }
125 body.playctl .panel#advfilter,
126 body.playctl .panel#search {
128 border-top: 1px solid #FFF;
131 /* == Bottom Panels == */
137 border-style: solid none none none;
141 /* == Switchable Panels == */
147 min-height: 0; max-height: 0;
148 padding-top: 0; padding-bottom: 0;
155 padding: .25em .5em 0 .5em;
159 body.playctl .panel#search,
160 body.playctl .panel#foot { padding-right: .25em; }
166 .panel#advfilter:target{ padding-bottom: 1em; }
168 /* == Panel Switches == */
170 .panel#playctl a.panel,
171 .panel#advfilter a.panel,
172 .panel#preferences a.panel,
173 .panel#tagger a.panel {
175 border-style: none none solid none;
178 .panel#preferences a.panel,
179 .panel#tagger a.panel {
180 border-style: solid none none none;
185 /* == Panel Elements == */
187 .panel#advfilter .quicklinks,
188 .panel#advfilter .filter,
189 .panel#tagger .newtag,
190 .panel#tagger input[type=submit],
191 .panel#preferences > * {
192 display: inline-block;
198 /* == Advanced Filters == */
200 /* == Filter Boxes == */
202 border: solid 1px #FFF;
203 border-radius: .25em;
206 #advfilter .filter .tabcontainer {
211 #advfilter .filter .tabcontainer input + .category.tabhandle {
215 #advfilter .filter .tabcontainer input:checked + .category.tabhandle {
219 #advfilter .filter .tabcontainer .category.tabcontent {
225 border: 2px #FFF solid;
226 border-radius: 0 .25em .25em 0;
229 #advfilter > label.tabhandle {
235 /* == Dynamic Appearance of Boxes == */
236 .panel#advfilter > .tabhandle + label { display: none; }
237 .panel#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle + label { display: inline-block; }
238 .panel#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle:checked + label { display: none; }
239 .panel#advfilter > .tabhandle + label + .tabcontent {
240 display: inline-block;
247 .panel#advfilter > .tabhandle:checked + label + .tabcontent {
251 border: solid 1px #FFF;
254 #advfilter .filter.final {
259 #advfilter .quicklinks {width: 100%;}
261 /* == Recent filters == */
263 p.quicklinks { padding-bottom: 3em; }
264 p.quicklinks :first-child {width: 100%;}
265 p.quicklinks input { display: block; }
268 word-wrap: break-word;
270 margin-bottom: .75em;
273 p.quicklinks input:checked,
274 p.quicklinks input:checked + a { display: none;}
276 /* == Thumblist == */
280 padding: .5em 0 3em 0;
286 display: inline-block;
291 margin-bottom: .75em;
293 word-wrap: break-word;
295 @media (min-width: 460px){#thumblist .thumb{width: 48%;}}
296 @media (min-width: 620px){#thumblist .thumb{width: 32%;}}
297 @media (min-width: 1004px){#thumblist .thumb{width: 250px; margin: 2px;}}
299 #thumblist .thumb img {
301 margin: 0; padding: 0;
303 #thumblist .thumb h2 {
310 border-bottom: 1px solid #333;
311 background: rgba(0,0,0,.5);
313 #thumblist .thumb .property {
314 position: absolute; left: .25em;
317 #thumblist .thumb .property:nth-of-type(2) { left: 5em;}
318 #thumblist .thumb button {
321 margin: 0; padding: 0;
324 background-color: transparent;
334 display: inline-block;
339 margin-bottom: .75em;
341 word-wrap: break-word;
343 @media (min-width: 460px){#thumblist .file{width: 48%;}}
344 @media (min-width: 620px){#thumblist .file{width: 32%;}}
345 @media (min-width: 1004px){#thumblist .file{width: 250px; margin: 2px;}}
347 #thumblist .file.directory { background-color: #BBD; }
348 #thumblist .file.plain { background-color: #111; color: #777; }
349 #thumblist .file.video { background-color: #DBB; }
351 .panel#tagger .newtag { width: 50%;}
352 .panel#tagger .newtag.additional,
353 .panel#tagger .newtag.description { width: 100%;}
354 .panel#tagger .newtag select,
355 .panel#tagger .newtag .label{
359 .panel#tagger input[type=submit],
360 .panel#tagger button {
361 min-width: 10em; height: 3em;
363 @media (min-width: 460px){
364 .panel#tagger .newtag { width: 10em;}
365 .panel#tagger .newtag.additional,
366 .panel#tagger .newtag.description { width: 20em; max-width: 40%; }
369 .panel#preferences > fieldset {
371 border-radius: .25em;
373 .panel#preferences > input { display: block; }
375 /* == Client side player == */
378 #playctl h1 { font-size: 1.25em;}
379 #videoview h1, #videoview > a,
380 #playctl h1, #playctl > a {
381 display: inline-block;
383 padding: 0; margin: .5em 0;
391 /* == Server side player == */
393 form.playctl fieldset {
400 form.playctl fieldset.playback { height: 12em; }
401 form.playctl fieldset.playback button {
405 background-color: #EEE;
406 border: 1px solid #333;
408 form.playctl fieldset.playback button[value="-60"] {top: 6em; left: 0; width: 20%;}
409 form.playctl fieldset.playback button[value="-10"] {top: 6em; left: 20%; width: 30%;}
410 form.playctl fieldset.playback button[value="stop"] {top: 0; left: 0; width: 40%;}
411 form.playctl fieldset.playback button[value="pause"] {top: 0; right: 0; width: 60%;}
412 form.playctl fieldset.playback button[value="+10"] {top: 6em; right: 20%; width: 30%;}
413 form.playctl fieldset.playback button[value="+60"] {top: 6em; right: 0; width: 20%;}
415 form.playctl fieldset.volume { height: 3em; }
416 form#advctl.playctl fieldset.volume { height: 4em; }
417 form.playctl fieldset.volume button[name="amp"] {position: absolute; width: 50%; height: 4em; top: 0;}
418 form.playctl fieldset.volume button[value="off"] {left:0;}
419 form.playctl fieldset.volume button[value="on"] {right:0;}
420 form.playctl fieldset.volume button[name="vol"] {position: relative; display: inline-block; width: 4%;}
421 form.playctl fieldset.volume button[name="vol"].selected { background-color: #FA6;}
422 form.playctl fieldset.volume button[name="vol"][value="100"],
423 form.playctl fieldset.volume button[name="vol"][value="0"] { width: 4%;}
424 form.playctl fieldset.pasink button { width: 100%; height: 3em;}
430 width: 100%; left:0; right: 0;
432 background-color: black;
433 border-top: 1px solid white;
438 span.progress > span {
442 background-color: #333;