git.plutz.net Git - serve0/blob - static/common.css

   1 /* Copyright 2014 - 2016 Paul Hänsch
   2
   3    This file is part of Serve0
   4
   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.
   9
  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.
  14
  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/>.
  17 */
  18
  19 * {
  20   -moz-box-sizing: border-box;
  21   box-sizing: border-box;
  22   -moz-transition: all .3s linear;
  23   transition: all .3s linear;
  24 }
  25
  26 body {
  27   padding: 0;
  28   margin: 0;
  29   background-color: #000;
  30   color: #DDD;
  31 }
  32 a { color: #EEE; }
  33 legend, label, .label { font-weight: bold; }
  34
  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; }
  39
  40 textarea {
  41   display: block;
  42   width: 100%;
  43 }
  44
  45 .info {
  46   margin: 0;
  47   padding: 0 .25em;
  48   background-color: #BBD;
  49   color: #000;
  50   border: #000 1px solid;
  51 }
  52 .info.tag {
  53   line-height: 1.6em;
  54   background-color: #DBB;
  55   margin-right: -.75ex;
  56 }
  57
  58 .pagination_nav {
  59   display: inline-block;
  60   position: absolute;
  61   border: none;
  62   right: 0; bottom: .25em;
  63   padding: .125em .5em 0 0;
  64 }
  65
  66 .pagination_nav a {
  67   display: none;
  68   margin: 1ex 1px;
  69   padding: 0 1ex;
  70   text-decoration: none;
  71 }
  72
  73 .pagination_nav a.current {
  74   display: inline;
  75   color: #F66;
  76   font-weight: bold;
  77 }
  78 .pagination_nav:hover {
  79   position: fixed;
  80   bottom: auto;
  81   text-align: right;
  82   background-color: #333;
  83   border-bottom: 1px solid #FFF;
  84   line-height: 1.75em;
  85   transition: none;
  86   overflow: auto;
  87   min-height: 1em;
  88   z-index: 2;
  89 }
  90 .pagination_nav:hover a {
  91   display: inline;
  92 }
  93
  94 /* == Panels == */
  95
  96 .panel {
  97   position: relative;
  98   display: block;
  99   width: 100%;
 100   margin: 0;
 101   padding: .25em .5em;
 102   background-color: #333;
 103   border-width: 1px;
 104   border-style: none none solid none;
 105 }
 106
 107 a.panel {
 108   font-weight: bold;
 109   display: inline-block;
 110   border: none;
 111   width: auto;
 112   padding: 0;
 113   margin-right: 1em;
 114   margin-bottom: 1ex;
 115 }
 116
 117 .panel .help { display: block;}
 118
 119 /* == Top Panel == */
 120 .panel#advfilter {
 121   position: absolute;
 122   top: 0;
 123 }
 124
 125 /* == Bottom Panels == */
 126 .panel#preferences,
 127 .panel#tagger,
 128 .panel#foot {
 129   position: fixed;
 130   bottom: 0px;
 131   border-style: solid none none none;
 132 }
 133
 134
 135 /* == Switchable Panels == */
 136
 137 form.panel,
 138 div.panel {
 139   z-index: 1;
 140   overflow: hidden;
 141   min-height: 0; max-height: 0;
 142   padding-top: 0; padding-bottom: 0;
 143 }
 144
 145 .panel#search,
 146 .panel#foot {
 147   max-height: 100%;
 148   z-index: 0;
 149   padding: .25em 6em 0 .5em;
 150   overflow: visible;
 151 }
 152
 153 body.playctl .panel#search,
 154 body.playctl .panel#foot { padding-right: .25em; }
 155
 156 .panel:target {
 157   max-height: 100%;
 158   overflow-y: scroll;
 159 }
 160 .panel#advfilter:target{ padding-bottom: 1em; }
 161
 162 /* == Panel Switches == */
 163
 164 .panel#playctl a.panel,
 165 .panel#advfilter a.panel,
 166 .panel#preferences a.panel,
 167 .panel#tagger a.panel {
 168   display: block;
 169   border-style: none none solid none;
 170   border-width: 1px;
 171 }
 172 .panel#preferences a.panel,
 173 .panel#tagger a.panel {
 174   border-style: solid none none none;
 175   margin-top: .5em;
 176 }
 177
 178
 179 /* == Panel Elements == */
 180
 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;
 187   vertical-align: top;
 188   margin-top: 1em;
 189 }
 190
 191
 192 /* == Advanced Filters == */
 193
 194 /* == Filter Boxes == */
 195 #advfilter .filter {
 196   border: solid 1px #FFF;
 197   border-radius: .25em;
 198   padding: .25em .5em;
 199 }
 200 #advfilter .filter .tabcontainer {
 201   position: relative;
 202   width: 16em;
 203   font-weight:normal;
 204 }
 205 #advfilter .filter .tabcontainer input + .category.tabhandle {
 206   display: block;
 207   width: 50%;
 208 }
 209 #advfilter .filter .tabcontainer input:checked + .category.tabhandle {
 210   background: #FFF;
 211   color: #000;
 212 }
 213 #advfilter .filter .tabcontainer .category.tabcontent {
 214   position: absolute;
 215   top: 0; right: 0;
 216   width: 50%;
 217   height: 100%;
 218   min-height: 4em;
 219   border: 2px #FFF solid;
 220   border-radius: 0 .25em .25em 0;
 221 }
 222
 223 #advfilter > label.tabhandle {
 224   text-align: right;
 225   width: 4em;
 226   margin-left: 4em;
 227 }
 228
 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;
 235   overflow: hidden;
 236   max-width: 0;
 237   max-height: 0;
 238   padding: 0;
 239   border: none;
 240 }
 241 .panel#advfilter > .tabhandle:checked + label + .tabcontent {
 242   max-width: 100%;
 243   max-height: 100%;
 244   padding: .25em .5em;
 245   border: solid 1px #FFF;
 246 }
 247
 248 #advfilter .filter.final {
 249   width: 16em;
 250   margin-left: 1em;
 251 }
 252
 253 #advfilter .quicklinks {width: 100%;}
 254
 255 .quicklinks :first-child {width: 100%;}
 256 .quicklinks input { display: block; }
 257 .quicklinks a {
 258   display: block;
 259   word-wrap: break-word;
 260   margin-left: 10%;
 261   margin-bottom: .75em;
 262   margin-top: -1.5em;
 263 }
 264 .quicklinks input:checked,
 265 .quicklinks input:checked + a { display: none;}
 266
 267 /* == Thumblist == */
 268
 269 #thumblist {
 270   width: 100%;
 271   padding: .5em 0 3em 0;
 272   text-align: center;
 273 }
 274
 275 #thumblist .thumb {
 276   display: inline-block;
 277   text-align: left;
 278   width: 90%;
 279   padding: 0 .5em;
 280   margin: .5%;
 281   margin-bottom: .75em;
 282   vertical-align: top;
 283   word-wrap: break-word;
 284 }
 285 @media (min-width: 460px){#thumblist .thumb{width: 48%;}}
 286 @media (min-width: 620px){#thumblist .thumb{width: 32%;}}
 287 @media (min-width: 1004px){#thumblist .thumb{width: 250px; margin: 2px;}}
 288
 289 #thumblist .thumb img {
 290   width: 100%;
 291 }
 292 #thumblist .thumb h2 {
 293   font-size: 1em;
 294   font-weight: normal;
 295   margin: 0;
 296 }
 297 #thumblist .thumb a {
 298   display: block;
 299 }
 300 #thumblist .thumb a.alt {
 301   display: inline-block;
 302   margin-top: .3em;
 303 }
 304 #thumblist input {
 305   margin: .75em .5em;
 306 }
 307
 308 /* == Filelist == */
 309
 310 #thumblist .file {
 311   color: #000;
 312   display: inline-block;
 313   text-align: left;
 314   width: 90%;
 315   padding: .5em .5em;
 316   margin: .5%;
 317   margin-bottom: .75em;
 318   vertical-align: top;
 319   word-wrap: break-word;
 320 }
 321 @media (min-width: 460px){#thumblist .file{width: 48%;}}
 322 @media (min-width: 620px){#thumblist .file{width: 32%;}}
 323 @media (min-width: 1004px){#thumblist .file{width: 250px; margin: 2px;}}
 324
 325 #thumblist .file.directory { background-color: #BBD; }
 326 #thumblist .file.plain { background-color: #111; color: #777; }
 327 #thumblist .file.video { background-color: #DBB; }
 328
 329 .panel#tagger .newtag select,
 330 .panel#tagger .newtag .label{
 331   display: block;
 332   width: 10em;
 333 }
 334
 335 .panel#preferences > fieldset {
 336   border: solid 1px;
 337   border-radius: .25em;
 338 }
 339 .panel#preferences > input { display: block; }
 340
 341 #videoview h1,
 342 #playctl h1 { font-size: 1.25em;}
 343 #videoview h1, #videoview > a,
 344 #playctl h1, #playctl > a {
 345   display: inline-block;
 346   margin-right: 1em;
 347   padding: 0; margin: .5em 0;
 348 }
 349 #videoview video {
 350   display: block;
 351   margin: 0;
 352   width: 100%;
 353 }
 354
 355 #playctl form { text-align: center; }
 356 #playctl form button {
 357   display: inline-block;
 358   height: 100%;
 359   min-height: 4em;
 360   margin: 0 -.75ex .5em 0;
 361   background-color: #EEE;
 362   border: 1px solid #333;
 363   vertical-align: bottom;
 364   padding-top: 1em;
 365 }
 366 #playctl form button[name="seek"],
 367 #playctl form button[name="ctl"] { width: 40%;}
 368 #playctl form button[name="amp"] { width: 40%; margin-top: 2em;}
 369 #playctl form button[name="vol"] { width: 5%; min-height: 1em;}
 370 #playctl form button[name="vol"].selected { background-color: #FA6;}
 371 #playctl form button[name="vol"][value="100"],
 372 #playctl form button[name="vol"][value="0"] { width: 6%;}
 373
 374 span.progress {
 375   display: block;
 376   position: fixed;
 377   bottom: 2.5em;
 378   width: 100%; left:0; right: 0;
 379   color: white;
 380   background-color: black;
 381   border-top: 1px solid white;
 382   padding: 0;
 383   height: 1em;
 384 }
 385 span.progress > * {
 386   display: block;
 387   text-align: center;
 388   background-color: #333;
 389 }
 390
 391 @media (min-width: 460px){
 392   #playctl form button {
 393     max-width: 4em;
 394     min-height: 2em;
 395     padding-top: 0em;
 396     margin-bottom: 2em;
 397   }
 398   #playctl form button[name="seek"],
 399   #playctl form button[name="ctl"] { width: 16%;}
 400   #playctl form button[name="amp"] { width: 15%;}
 401   #playctl form button[name="vol"] { width: 3%;}
 402   #playctl form button[name="amp"] + br {display: none;}
 403 }
 404