git.plutz.net Git - serve0/blob - templates/common.css.sh

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