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/>.
21 -moz-box-sizing: border-box;
22 box-sizing: border-box;
23 -moz-transition: all .3s linear;
24 transition: all .3s linear;
30 background-color: #000;
34 legend, label, .label { font-weight: bold; }
36 input.tabhandle { display: none; }
37 .tabcontent { display: none; }
38 input.tabhandle:checked + label.tabhandle + .tabcontent { display: inline-block; }
39 input.tabhandle:checked + .tabcontent { display: inline-block; }
49 background-color: #BBD;
51 border: #000 1px solid;
55 background-color: #DBB;
60 display: inline-block;
78 background-color: #333;
80 border-style: none none solid none;
83 @media(min-width: 620px){
84 .panel {padding-right: 8em;}
85 .pagination_nav { width: auto;}
90 display: inline-block;
96 .panel .help { display: block;}
104 /* == Bottom Panels == */
111 border-style: solid none none none;
115 /* == Switchable Panels == */
122 min-height: 0; max-height: 0;
123 padding-top: 0; padding-bottom: 0;
125 .panel#advfilter:target,
126 .panel#tagger:target,
127 .panel#preferences:target {
131 .panel#advfilter:target{ padding-bottom: 1em; }
134 /* == Panel Switches == */
136 .panel#advfilter a.panel,
137 .panel#preferences a.panel,
138 .panel#tagger a.panel {
140 border-style: none none solid none;
143 .panel#preferences a.panel,
144 .panel#tagger a.panel {
145 border-style: solid none none none;
150 /* == Panel Elements == */
152 .panel#advfilter .quicklinks,
153 .panel#advfilter .filter,
154 .panel#tagger .newtag,
155 .panel#tagger input[type=submit],
156 .panel#preferences > * {
157 display: inline-block;
163 /* == Advanced Filters == */
165 /* == Filter Boxes == */
167 border: solid 1px #FFF;
168 border-radius: .25em;
171 #advfilter .filter .tabcontainer {
176 #advfilter .filter .tabcontainer input + .category.tabhandle {
180 #advfilter .filter .tabcontainer input:checked + .category.tabhandle {
184 #advfilter .filter .tabcontainer .category.tabcontent {
190 border: 2px #FFF solid;
191 border-radius: 0 .25em .25em 0;
194 #advfilter > label.tabhandle {
200 /* == Dynamic Appearance of Boxes == */
201 .panel#advfilter > .tabhandle + label { display: none; }
202 .panel#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle + label { display: inline-block; }
203 .panel#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle:checked + label { display: none; }
204 .panel#advfilter > .tabhandle + label + .tabcontent {
205 display: inline-block;
212 .panel#advfilter > .tabhandle:checked + label + .tabcontent {
216 border: solid 1px #FFF;
219 #advfilter .filter.final {
224 #advfilter .quicklinks {max-width: 100%;}
225 #advfilter .quicklinks * {
227 word-wrap: break-word;
230 /* == Thumblist == */
234 padding: .5em 0 3em 0;
239 display: inline-block;
244 margin-bottom: .75em;
246 word-wrap: break-word;
248 @media (min-width: 460px){#thumblist .thumb{width: 48%;}}
249 @media (min-width: 620px){#thumblist .thumb{width: 32%;}}
250 @media (min-width: 1004px){#thumblist .thumb{width: 250px; margin: 2px;}}
252 #thumblist .thumb img {
255 #thumblist .thumb h2 {
260 #thumblist .thumb a {
263 #thumblist .thumb a.alt {
264 display: inline-block;
275 display: inline-block;
280 margin-bottom: .75em;
282 word-wrap: break-word;
284 @media (min-width: 460px){#thumblist .file{width: 48%;}}
285 @media (min-width: 620px){#thumblist .file{width: 32%;}}
286 @media (min-width: 1004px){#thumblist .file{width: 250px; margin: 2px;}}
288 #thumblist .file.directory { background-color: #BBD; }
289 #thumblist .file.plain { background-color: #111; color: #777; }
290 #thumblist .file.video { background-color: #DBB; }
292 .panel#tagger .newtag select,
293 .panel#tagger .newtag .label{
298 .panel#preferences > fieldset {
300 border-radius: .25em;
302 .panel#preferences > input { display: block; }
305 #playctl h1 { font-size: 1.25em;}
306 #videoview h1, #videoview > a,
307 #playctl h1, #playctl > a {
308 display: inline-block;
310 padding: 0; margin: .5em 0;
318 #playctl form { text-align: center; }
319 #playctl form button {
320 display: inline-block;
323 margin: 0 -.75ex .5em 0;
324 background-color: #EEE;
325 border: 1px solid #333;
326 vertical-align: bottom;
329 #playctl form button[name="seek"],
330 #playctl form button[name="ctl"] { width: 40%;}
331 #playctl form button[name="amp"] { width: 40%; margin-top: 2em;}
332 #playctl form button[name="vol"] { width: 5%; min-height: 1em;}
333 #playctl form button[name="vol"].selected { background-color: #FA6;}
334 #playctl form button[name="vol"][value="100"],
335 #playctl form button[name="vol"][value="0"] { width: 6%;}
337 @media (min-width: 460px){
338 #playctl form button {
344 #playctl form button[name="seek"],
345 #playctl form button[name="ctl"] { width: 16%;}
346 #playctl form button[name="amp"] { width: 15%;}
347 #playctl form button[name="vol"] { width: 3%;}
348 #playctl form button[name="amp"] + br {display: none;}
352 # vi:set filetype=css: