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: #BBD;
50 border: #000 1px solid;
54 background-color: #DBB;
59 display: inline-block;
62 right: 0; bottom: .25em;
63 padding: .125em .5em 0 0;
70 text-decoration: none;
73 .pagination_nav a.previous,
74 .pagination_nav a.current,
75 .pagination_nav a.next { display: inline; }
76 .pagination_nav a.current {
80 .pagination_nav:hover {
85 background-color: #333;
86 border-bottom: 1px solid #FFF;
93 .pagination_nav:hover a {
105 background-color: #333;
107 border-style: none none solid none;
112 display: inline-block;
120 .panel .help { display: block;}
122 /* == Top Panel == */
128 /* == Bottom Panels == */
134 border-style: solid none none none;
138 /* == Switchable Panels == */
144 min-height: 0; max-height: 0;
145 padding-top: 0; padding-bottom: 0;
152 padding: .25em 6em 0 .5em;
156 body.playctl .panel#search,
157 body.playctl .panel#foot { padding-right: .25em; }
163 .panel#advfilter:target{ padding-bottom: 1em; }
165 /* == Panel Switches == */
167 .panel#playctl a.panel,
168 .panel#advfilter a.panel,
169 .panel#preferences a.panel,
170 .panel#tagger a.panel {
172 border-style: none none solid none;
175 .panel#preferences a.panel,
176 .panel#tagger a.panel {
177 border-style: solid none none none;
182 /* == Panel Elements == */
184 .panel#advfilter .quicklinks,
185 .panel#advfilter .filter,
186 .panel#tagger .newtag,
187 .panel#tagger input[type=submit],
188 .panel#preferences > * {
189 display: inline-block;
195 /* == Advanced Filters == */
197 /* == Filter Boxes == */
199 border: solid 1px #FFF;
200 border-radius: .25em;
203 #advfilter .filter .tabcontainer {
208 #advfilter .filter .tabcontainer input + .category.tabhandle {
212 #advfilter .filter .tabcontainer input:checked + .category.tabhandle {
216 #advfilter .filter .tabcontainer .category.tabcontent {
222 border: 2px #FFF solid;
223 border-radius: 0 .25em .25em 0;
226 #advfilter > label.tabhandle {
232 /* == Dynamic Appearance of Boxes == */
233 .panel#advfilter > .tabhandle + label { display: none; }
234 .panel#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle + label { display: inline-block; }
235 .panel#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle:checked + label { display: none; }
236 .panel#advfilter > .tabhandle + label + .tabcontent {
237 display: inline-block;
244 .panel#advfilter > .tabhandle:checked + label + .tabcontent {
248 border: solid 1px #FFF;
251 #advfilter .filter.final {
256 #advfilter .quicklinks {width: 100%;}
258 p.quicklinks { padding-bottom: 3em; }
259 p.quicklinks :first-child {width: 100%;}
260 p.quicklinks input { display: block; }
263 word-wrap: break-word;
265 margin-bottom: .75em;
268 p.quicklinks input:checked,
269 p.quicklinks input:checked + a { display: none;}
271 /* == Thumblist == */
275 padding: .5em 0 3em 0;
280 display: inline-block;
285 margin-bottom: .75em;
287 word-wrap: break-word;
289 @media (min-width: 460px){#thumblist .thumb{width: 48%;}}
290 @media (min-width: 620px){#thumblist .thumb{width: 32%;}}
291 @media (min-width: 1004px){#thumblist .thumb{width: 250px; margin: 2px;}}
293 #thumblist .thumb img {
295 margin: 0; padding: 0;
297 #thumblist .thumb h2 {
302 #thumblist .thumb button {
305 margin: 0; padding: 0;
308 background-color: transparent;
318 display: inline-block;
323 margin-bottom: .75em;
325 word-wrap: break-word;
327 @media (min-width: 460px){#thumblist .file{width: 48%;}}
328 @media (min-width: 620px){#thumblist .file{width: 32%;}}
329 @media (min-width: 1004px){#thumblist .file{width: 250px; margin: 2px;}}
331 #thumblist .file.directory { background-color: #BBD; }
332 #thumblist .file.plain { background-color: #111; color: #777; }
333 #thumblist .file.video { background-color: #DBB; }
335 .panel#tagger .newtag select,
336 .panel#tagger .newtag .label{
341 .panel#preferences > fieldset {
343 border-radius: .25em;
345 .panel#preferences > input { display: block; }
348 #playctl h1 { font-size: 1.25em;}
349 #videoview h1, #videoview > a,
350 #playctl h1, #playctl > a {
351 display: inline-block;
353 padding: 0; margin: .5em 0;
361 #playctl form { text-align: center; }
362 #playctl form button {
363 display: inline-block;
366 margin: 0 -.75ex .5em 0;
367 background-color: #EEE;
368 border: 1px solid #333;
369 vertical-align: bottom;
372 #playctl form button[name="seek"],
373 #playctl form button[name="ctl"] { width: 40%;}
374 #playctl form button[name="amp"] { width: 40%; margin-top: 2em;}
375 #playctl form button[name="vol"] { width: 5%; min-height: 1em;}
376 #playctl form button[name="vol"].selected { background-color: #FA6;}
377 #playctl form button[name="vol"][value="100"],
378 #playctl form button[name="vol"][value="0"] { width: 6%;}
384 width: 100%; left:0; right: 0;
386 background-color: black;
387 border-top: 1px solid white;
394 background-color: #333;
397 @media (min-width: 460px){
398 #playctl form button {
404 #playctl form button[name="seek"],
405 #playctl form button[name="ctl"] { width: 16%;}
406 #playctl form button[name="amp"] { width: 15%;}
407 #playctl form button[name="vol"] { width: 3%;}
408 #playctl form button[name="amp"] + br {display: none;}