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

   1 # Copyright 2014 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   box-sizing: border-box;
  22   -moz-box-sizing: border-box;
  23 }
  24
  25 body {
  26   padding: 0;
  27   margin: 0;
  28   background-color: #000;
  29   color: #DDD;
  30 }
  31
  32 input.tabhandle { display: none; }
  33 .tabcontent { display: none; }
  34 input.tabhandle:checked ~ .tabcontent { display: inline-block; }
  35
  36 a {
  37   color: #EEE;
  38 }
  39
  40 label, .label {
  41   font-weight: bold;
  42 }
  43
  44 textarea {
  45   display: block;
  46   width: 100%;
  47 }
  48
  49 .info {
  50   margin: 0;
  51   padding: 0 .25em;
  52   background-color: #BBD;
  53   color: #000;
  54   border: #000 1px solid;
  55 }
  56 .info.tag {
  57   line-height: 1.6em;
  58   background-color: #DBB;
  59 }
  60
  61 .panel {
  62   display: block;
  63   width: 100%;
  64   margin: 0;
  65   padding: .25em 1em;
  66   background-color: #333;
  67   border-width: 1px;
  68   border-style: none none solid none;
  69 }
  70 a.panel {
  71   font-weight: bold;
  72 }
  73 a.clearsearch, a.advanced, a.tagger, .pagination_nav {
  74   display: inline;
  75   border: none;
  76 }
  77 .pagination_nav {
  78   position: absolute;
  79   right: 1em;
  80   padding-top: .125em;
  81 }
  82
  83 .panel .quicklinks,
  84 .footer .newtag, .footer input[type=submit] {
  85   display: inline-block;
  86   vertical-align: top;
  87   margin-top: 2em;
  88 }
  89 .panel .help {
  90   display: block;
  91 }
  92 .footer .newtag select, .footer .newtag .label{
  93   display: block;
  94   width: 10em;
  95 }
  96 .panel .filter .help.conjunction {
  97   font-weight: bold;
  98 }
  99 .panel .filter .label.category {
 100   display: block;
 101   margin-top: 1em;
 102 }
 103 .panel .quicklinks * {
 104   display: block
 105 }
 106
 107 .panel .filter {
 108   vertical-align: top;
 109   border: solid 1px #FFF; border-radius: .25em;
 110   padding: .25em .5em;
 111   margin: 0 0 1em 0;
 112 }
 113 .panel > label.tabhandle {
 114   display: inline-block;
 115   text-align: right;
 116   width: 4em;
 117   margin-left: 4em;
 118 }
 119 .panel > .tabhandle + label { display: none; }
 120 .panel > .tabhandle + label + .tabcontent { display: none; }
 121 .panel > .tabhandle:checked + label.tabhandle + .tabcontent { display: inline-block; }
 122 .panel > .tabhandle:checked + label.tabhandle + .tabcontent + .tabhandle + label{ display: inline-block; }
 123 .panel > .tabhandle:checked + label.tabhandle + .tabcontent + .tabhandle:checked + label{ display: none; }
 124 .panel .filter .tabcontainer {
 125   position: relative;
 126   width: 16em;
 127 }
 128 .panel .filter .category.tabhandle {
 129   display: block;
 130 }
 131 .panel .filter input:checked + .category.tabhandle {
 132   background: #FFF;
 133   color: #000;
 134 }
 135 .panel .filter .category.tabcontent {
 136   position: absolute;
 137   top: 0; right: 0;
 138   width: 10em;
 139   height: 100%;
 140   min-height: 4em;
 141 }
 142
 143 .panel .filter.final {
 144   display: inline-block;
 145   width: 16em;
 146   margin-left: 1em;
 147 }
 148
 149 #thumblist {
 150   width: 100%;
 151   padding: .5em 0 3em 0;
 152   text-align: center;
 153 }
 154
 155 #thumblist .thumb {
 156   display: inline-block;
 157   text-align: left;
 158   width: 90%;
 159   padding: 0 .5em;
 160   margin: auto;
 161   margin-bottom: .75em;
 162   vertical-align: top;
 163   word-wrap: break-word;
 164 }
 165 @media (min-width: 480px){#thumblist .thumb{width: 50%;}}
 166 @media (min-width: 640px){#thumblist .thumb{width: 33%;}}
 167 @media (min-width: 1024px){#thumblist .thumb{width: 256px;}}
 168
 169 #thumblist .thumb img {
 170   width: 100%;
 171 }
 172 #thumblist .thumb a {
 173   display: block;
 174 }
 175 #thumblist .thumb a.alt {
 176   display: inline-block;
 177   margin-top: .3em;
 178 }
 179 #thumblist input {
 180   margin: .75em .5em;
 181 }
 182
 183 #advfilter { display: none; }
 184 #advfilter:target {
 185   display: block;
 186   position: absolute;
 187   top: 0;
 188 }
 189
 190 #tagger { display: none; }
 191 #tagger:target { display: block; z-index: 1; }
 192 .footer {
 193   position: fixed;
 194   min-height: 2em;
 195   bottom: 0px;
 196   width: 100%;
 197   border-style: solid none none none;
 198 }
 199
 200 #videoview a.panel {
 201   position: absolute;
 202   right: 1em;
 203   width: auto;
 204   border: none;
 205 }
 206 #videoview .video {
 207   display: inline-block;
 208   width: 60%;
 209   vertical-align: top;
 210 }
 211 #videoview .video * {
 212   display: block;
 213 }
 214 #videoview .videoinfo {
 215   width: 39%;
 216   margin-top: 2em;
 217 }
 218 #videoview .videoinfo h2 {
 219   display: inline;
 220 }
 221 #videoview .videoinfo .meta:after {
 222   content: "\A";
 223   white-space: pre;
 224 }
 225 #videoview .videoinfo .label {
 226   display: block;
 227   margin-top: 1em;
 228 }
 229 #videoview .videoinfo .info.description {
 230   display: block;
 231   background-color: #DDF;
 232 }
 233 #videoview .videoinfo .edit {
 234   width: 100%
 235 }
 236 EOF
 237
 238 # vi:set filetype=css: