git.plutz.net Git - serve0/blob - style.css

   1 * {
   2   box-sizing: border-box;
   3   margin: 0; padding: 0;
   4   text-align: left;
   5 }
   6 button { padding: .125em .5em; }
   7 a { color: inherit; text-decoration: none;}
   8
   9 input {
  10   border: 1px solid;
  11   padding: .25em .5em;
  12   line-height: 1em;
  13   vertical-align: bottom;
  14 }
  15 input[type=number] { padding-right: 0; }
  16 input[type=radio], input[type=checkbox] { vertical-align: baseline; }
  17 select {
  18   border: 1px solid;
  19   padding: .125em .5em;
  20 }
  21 select[multiple] { padding: 0; }
  22 select[multiple] option { padding: .25em .5em; }
  23
  24 body {
  25   color: white;
  26   background-color: black;
  27   min-height: 100%;
  28 }
  29
  30 #navigation{
  31   text-align: center;
  32   background-color: #333;
  33   padding: .25em;
  34   border-bottom: 1px solid;
  35 }
  36
  37 #search { display: inline; }
  38
  39 a[href="#prefs"] {
  40   position: absolute;
  41   top: 0; right: .25em;
  42   font-size: 1.5em;
  43 }
  44
  45 a[href="#bookmarks"] {
  46   position: absolute;
  47   top: 0; left: .25em;
  48   font-size: 1.5em;
  49 }
  50
  51 a[href="#advsearch"] {
  52   margin-left: .5em;
  53 }
  54 a[href="#advsearch"]:before {
  55   content: '\25b8';
  56   margin: 0 .5em;
  57 }
  58
  59 #prefs, #bookmarks, #multitag, #advsearch {
  60   display: block; position: absolute;
  61   height: 0; width: 100%; max-width: 100%;
  62   margin-top: -1px;
  63   padding: 0 1em;
  64   border: 1px none;
  65   overflow: hidden;
  66   background-color: #333;
  67   z-index: 1;
  68 }
  69 #bookmarks {
  70   left: 0; width: 30%;
  71   min-width: 300px;
  72   margin-right: auto;
  73 }
  74 #prefs {
  75   right: 0; width: 20%;
  76   min-width: 200px;
  77   margin-left: auto;
  78 }
  79 #advsearch {
  80   text-align: center;
  81 }
  82
  83 #advsearch:target, #multitag:target,
  84 #prefs:target, #bookmarks:target {
  85   height: auto; overflow: visible;
  86 }
  87 #advsearch:target { border-style: none none solid none; }
  88 #prefs:target { border-style: none none solid solid; }
  89 #bookmarks:target { border-style: none solid solid none; }
  90
  91 #advsearch a[href="#"],
  92 #multitag a[href="#"],
  93 #bookmarks a[href="#"],
  94 #prefs a[href="#"] {
  95   display: block;
  96   position: relative;
  97   top: -2em; line-height: 2em;
  98   margin: 0 -1em -1.5em -1em;
  99   padding: 0 .75em;
 100   font-weight: bold;
 101   background-color: inherit;
 102 }
 103 #prefs a[href="#"] { text-align: right; }
 104 #advsearch a[href="#"] { border-bottom: 1px solid; }
 105 #multitag a[href="#"] { top: -1em; line-height: 1em; }
 106
 107
 108 /* ###  Preferences Drawer  ### */
 109
 110 #prefs label[for=prefs_ps] {
 111   font-weight: bold;
 112 }
 113 #prefs #prefs_ps {
 114   max-width: 4em;
 115   margin-bottom: 1em;
 116 }
 117 #prefs button {
 118   margin: 1em 0;
 119 }
 120 #prefs input { vertical-align: top; }
 121 #prefs input[type=radio] + label,
 122 #prefs input[type=checkbox] + label {
 123   display: inline-block;
 124   margin-bottom: .5em;
 125   max-width: 85%;
 126 }
 127
 128
 129 /* ###  Bookmarks Drawer  ### */
 130
 131 #bookmarks input,
 132 #bookmarks button {
 133   margin-bottom: 1.25em;
 134 }
 135 #bookmarks label {
 136   display: block;
 137   font-weight: bold;
 138 }
 139 #bookmarks a.link {
 140   display: inline-block;
 141   font-size: .75em;
 142   text-decoration: underline;
 143   margin: 0 1em 1.25em 0;
 144 }
 145
 146
 147 /* ###  Advance Search Drawer  ###*/
 148
 149 #advsearch .help {
 150   display: block;
 151   margin: -1em .5em 1em .5em;
 152   padding: .5em 1em;
 153   background-color: #444;
 154   line-height: 1.5em;
 155 }
 156
 157 #advsearch input.and {display: none;}
 158 #advsearch input.and + label {display: none}
 159 #advsearch input.and + label + .select {display: none;}
 160
 161 #advsearch input.and + label:nth-of-type(2),
 162 #advsearch input.and:checked + label + .select + input + label {
 163   display: inline-block;
 164   vertical-align: top;
 165   margin: 0 .5% 1em .5%;
 166   width: 4%; min-width: 4em;
 167   padding: .5em 0;
 168   text-align: center;
 169   font-weight: bold;
 170   border: 1px solid;
 171 }
 172
 173 #advsearch input.and:checked + label + .select + input:checked + label,
 174 #advsearch input.and:checked + label:nth-of-type(2),
 175 #advsearch input.and:checked + label { display: none; }
 176
 177 #advsearch .submit,
 178 #advsearch input.and + label + .select:first-of-type,
 179 #advsearch input.and:checked + label + .select {
 180   display: inline-block;
 181   position: relative;
 182   width: 19%;
 183   margin: 0 .5% 1em .5%;
 184   min-width: 200px;
 185   min-height: 12em;
 186   overflow: hidden;
 187   vertical-align: top;
 188 }
 189
 190 #advsearch .submit { min-height: 0; }
 191 #advsearch .submit * { width: 50%; }
 192
 193 #advsearch .select input.pol {
 194   margin: .5em .25em 0 .5em;
 195 }
 196 #advsearch .select input.pol + label {
 197   font-weight: bold;
 198 }
 199 #advsearch .select label.head {
 200   display: block;
 201   font-weight: bold;
 202   padding: .5em 0 0 .5em;
 203   border-bottom: 1px solid;
 204 }
 205
 206 #advsearch .select select {display: none;}
 207 #advsearch .select input.cat { display: none; }
 208 #advsearch .select input.cat + label {
 209   display: block;
 210   margin-right: 50%;
 211   padding: .25em .5em;
 212   font-size: 1.125em;
 213   border-bottom: 1px solid;
 214 }
 215 #advsearch .select input.cat:checked + label {
 216   background-color: #444;
 217 }
 218 #advsearch .select input.cat:checked + label + select {
 219   display: block;
 220   position: absolute;
 221   top: 3.5em; bottom: 0;
 222   right: 0; left: 50%;
 223   width: 50%;
 224 }
 225
 226
 227 /* ###  Item Listing  ### */
 228
 229 .list {
 230   position: relative;
 231   display: inline-block;
 232   width: 25%;
 233   min-width: 250px;
 234   padding: .25em;
 235   overflow: none;
 236   word-wrap: break-word;
 237   vertical-align: top;
 238   color: black;
 239   overflow: hidden;
 240 }
 241 .list.dir {
 242   padding: .5em 1em;
 243 }
 244
 245 .list:before {
 246   position: absolute;
 247   top: .25em; left: .25em;
 248   bottom: .25em; right: .25em;
 249   z-index: -2;
 250   content: '';
 251 }
 252 .list.dir:before { background-color: #CCF; }
 253 .list.file:before { background-color: #FDD; }
 254 .list.file:first-of-type { clear: left; }
 255
 256 .list.file a img{
 257   display: block;
 258   width: 100%;
 259   min-height: 4em;
 260 }
 261 .list.file a label{
 262   position: absolute;
 263   top: 0; padding: .25em .5em;
 264   color: white;
 265   background-color: rgba(0,0,0,.625);
 266 }
 267
 268 .list.file .time,
 269 .list.file .dim,
 270 .list.file .tag,
 271 .list.file label {
 272   display: inline-block;
 273   margin-top: .125em;
 274 }
 275 .list.file .time,
 276 .list.file .dim {
 277   color: white;
 278   background-color: #004;
 279   padding: .125em .5em;
 280 }
 281 .list.file .tag {
 282   color: white;
 283   background-color: #400;
 284   padding: .125em .5em;
 285 }
 286
 287 .list.file input[type="checkbox"] { display: none; }
 288 .list.file input[type="checkbox"] + label {
 289   border: 1px solid;
 290   border-radius: .125em;
 291   padding: 0 .25em;
 292   background-color: #FBB;
 293 }
 294 .list.file input[type="checkbox"]:checked + label {
 295   background-color: #4F4;
 296 }
 297
 298 .itemlist,
 299 .pagination {
 300   display: block;
 301   text-align: center;
 302   margin-top: 1em;
 303 }
 304 .page {
 305   display: inline-block;
 306   padding: .25em .5em;
 307   color: black;
 308   background-color: #FDD;
 309   border: 1px solid;
 310   margin: 0 .125em;
 311 }
 312
 313 #editing {
 314   width: 100%;
 315   background-color: #333;
 316   border-top: 1px solid;
 317   padding: .25em 0;
 318 }
 319
 320 #index label:first-of-type { font-weight: bold; }
 321 #index input, #index button { margin-left: 1em;}
 322
 323
 324 /* ###  Multi Tagging Drawer  ### */
 325
 326 #multitag fieldset{
 327   display: inline-block;
 328   width: 25%; min-width: 250px;
 329   vertical-align: top;
 330   padding: 0 .25em;
 331   border: none;
 332 }
 333 #multitag fieldset * { width: 100%; }
 334 #multitag fieldset button { width: 50%; }