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.current {
78 .pagination_nav:hover {
82 background-color: #333;
83 border-bottom: 1px solid #FFF;
90 .pagination_nav:hover a {
102 background-color: #333;
104 border-style: none none solid none;
109 display: inline-block;
117 .panel .help { display: block;}
119 /* == Top Panel == */
125 /* == Bottom Panels == */
131 border-style: solid none none none;
135 /* == Switchable Panels == */
141 min-height: 0; max-height: 0;
142 padding-top: 0; padding-bottom: 0;
149 padding: .25em 6em 0 .5em;
153 body.playctl .panel#search,
154 body.playctl .panel#foot { padding-right: .25em; }
160 .panel#advfilter:target{ padding-bottom: 1em; }
162 /* == Panel Switches == */
164 .panel#playctl a.panel,
165 .panel#advfilter a.panel,
166 .panel#preferences a.panel,
167 .panel#tagger a.panel {
169 border-style: none none solid none;
172 .panel#preferences a.panel,
173 .panel#tagger a.panel {
174 border-style: solid none none none;
179 /* == Panel Elements == */
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;
192 /* == Advanced Filters == */
194 /* == Filter Boxes == */
196 border: solid 1px #FFF;
197 border-radius: .25em;
200 #advfilter .filter .tabcontainer {
205 #advfilter .filter .tabcontainer input + .category.tabhandle {
209 #advfilter .filter .tabcontainer input:checked + .category.tabhandle {
213 #advfilter .filter .tabcontainer .category.tabcontent {
219 border: 2px #FFF solid;
220 border-radius: 0 .25em .25em 0;
223 #advfilter > label.tabhandle {
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;
241 .panel#advfilter > .tabhandle:checked + label + .tabcontent {
245 border: solid 1px #FFF;
248 #advfilter .filter.final {
253 #advfilter .quicklinks {width: 100%;}
255 p.quicklinks { padding-bottom: 3em; }
256 p.quicklinks :first-child {width: 100%;}
257 p.quicklinks input { display: block; }
260 word-wrap: break-word;
262 margin-bottom: .75em;
265 p.quicklinks input:checked,
266 p.quicklinks input:checked + a { display: none;}
268 /* == Thumblist == */
272 padding: .5em 0 3em 0;
277 display: inline-block;
282 margin-bottom: .75em;
284 word-wrap: break-word;
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;}}
290 #thumblist .thumb img {
293 #thumblist .thumb h2 {
298 #thumblist .thumb a {
301 #thumblist .thumb a.alt {
302 display: inline-block;
313 display: inline-block;
318 margin-bottom: .75em;
320 word-wrap: break-word;
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;}}
326 #thumblist .file.directory { background-color: #BBD; }
327 #thumblist .file.plain { background-color: #111; color: #777; }
328 #thumblist .file.video { background-color: #DBB; }
330 .panel#tagger .newtag select,
331 .panel#tagger .newtag .label{
336 .panel#preferences > fieldset {
338 border-radius: .25em;
340 .panel#preferences > input { display: block; }
343 #playctl h1 { font-size: 1.25em;}
344 #videoview h1, #videoview > a,
345 #playctl h1, #playctl > a {
346 display: inline-block;
348 padding: 0; margin: .5em 0;
356 #playctl form { text-align: center; }
357 #playctl form button {
358 display: inline-block;
361 margin: 0 -.75ex .5em 0;
362 background-color: #EEE;
363 border: 1px solid #333;
364 vertical-align: bottom;
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%;}
379 width: 100%; left:0; right: 0;
381 background-color: black;
382 border-top: 1px solid white;
389 background-color: #333;
392 @media (min-width: 460px){
393 #playctl form button {
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;}