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;
74 background-color: #333;
76 border-style: none none solid none;
85 .panel .help { display: block;}
93 /* == Bottom Panels == */
100 border-style: solid none none none;
104 /* == Switchable Panels == */
111 min-height: 0; max-height: 0;
112 padding-top: 0; padding-bottom: 0;
114 .panel#advfilter:target,
115 .panel#tagger:target,
116 .panel#preferences:target {
120 .panel#advfilter:target{ padding-bottom: 1em; }
123 /* == Panel Switches == */
125 .panel#advfilter a.panel,
126 .panel#preferences a.panel,
127 .panel#tagger a.panel {
129 border-style: none none solid none;
132 .panel#preferences a.panel,
133 .panel#tagger a.panel {
134 border-style: solid none none none;
139 /* == Panel Elements == */
141 .panel#advfilter .quicklinks,
142 .panel#advfilter .filter,
143 .panel#tagger .newtag,
144 .panel#tagger input[type=submit],
145 .panel#preferences > * {
146 display: inline-block;
152 /* == Advanced Filters == */
154 /* == Filter Boxes == */
156 border: solid 1px #FFF;
157 border-radius: .25em;
160 #advfilter .filter .tabcontainer {
165 #advfilter .filter .tabcontainer input + .category.tabhandle {
169 #advfilter .filter .tabcontainer input:checked + .category.tabhandle {
173 #advfilter .filter .tabcontainer .category.tabcontent {
179 border: 2px #FFF solid;
180 border-radius: 0 .25em .25em 0;
183 #advfilter > label.tabhandle {
189 /* == Dynamic Appearance of Boxes == */
190 .panel#advfilter > .tabhandle + label { display: none; }
191 .panel#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle + label { display: inline-block; }
192 .panel#advfilter > .tabhandle:checked + label + .tabcontent + .tabhandle:checked + label { display: none; }
193 .panel#advfilter > .tabhandle + label + .tabcontent {
194 display: inline-block;
201 .panel#advfilter > .tabhandle:checked + label + .tabcontent {
205 border: solid 1px #FFF;
208 #advfilter .filter.final {
213 #advfilter .quicklinks {max-width: 100%;}
214 #advfilter .quicklinks * {
216 word-wrap: break-word;
219 /* == Thumblist == */
223 padding: .5em 0 3em 0;
228 display: inline-block;
233 margin-bottom: .75em;
235 word-wrap: break-word;
237 @media (min-width: 460px){#thumblist .thumb{width: 48%;}}
238 @media (min-width: 620px){#thumblist .thumb{width: 32%;}}
239 @media (min-width: 1004px){#thumblist .thumb{width: 250px; margin: 2px;}}
241 #thumblist .thumb img {
244 #thumblist .thumb h2 {
249 #thumblist .thumb a {
252 #thumblist .thumb a.alt {
253 display: inline-block;
264 display: inline-block;
269 margin-bottom: .75em;
271 word-wrap: break-word;
273 @media (min-width: 460px){#thumblist .file{width: 48%;}}
274 @media (min-width: 620px){#thumblist .file{width: 32%;}}
275 @media (min-width: 1004px){#thumblist .file{width: 250px; margin: 2px;}}
277 #thumblist .file.directory { background-color: #BBD; }
278 #thumblist .file.plain { background-color: #111; color: #777; }
279 #thumblist .file.video { background-color: #DBB; }
281 .panel#tagger .newtag select,
282 .panel#tagger .newtag .label{
287 .panel#preferences > fieldset {
289 border-radius: .25em;
291 .panel#preferences > input { display: block; }
293 #videoview h1, #videoview > a,
294 #playctl h1, #playctl > a {
295 display: inline-block;
304 #playctl form { text-align: center; }
305 #playctl form button {
306 display: inline-block;
309 margin: 0 -.75ex .5em 0;
310 background-color: #EEE;
311 border: 1px solid #333;
312 vertical-align: bottom;
315 #playctl form button[name="seek"],
316 #playctl form button[name="ctl"] { width: 40%;}
317 #playctl form button[name="amp"] { width: 40%; margin-top: 2em;}
318 #playctl form button[name="vol"] { width: 5%; min-height: 1em;}
319 #playctl form button[name="vol"].selected { background-color: #FA6;}
320 #playctl form button[name="vol"][value="100"],
321 #playctl form button[name="vol"][value="0"] { width: 6%;}
323 @media (min-width: 460px){
324 #playctl form button {
330 #playctl form button[name="seek"],
331 #playctl form button[name="ctl"] { width: 16%;}
332 #playctl form button[name="amp"] { width: 15%;}
333 #playctl form button[name="vol"] { width: 3%;}
334 #playctl form button[name="amp"] + br {display: none;}
338 # vi:set filetype=css: