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
  31 /* ###  Main Page Elements ### */
  32
  33 #navigation{
  34   position: relative;
  35   text-align: center;
  36   border-bottom: 1px solid;
  37   background-color: #333;
  38 }
  39
  40 #editing,
  41 #multitag {
  42   position: fixed;
  43   bottom: 0; width: 100%;
  44   padding: .25em 0;
  45   border-top: 1px solid;
  46   background-color: #333;
  47 }
  48
  49 #search { display: inline; }
  50
  51 a[href="#prefs"],
  52 a[href="#bookmarks"] {
  53   position: absolute;
  54   top: 0;
  55   margin: 0 .25em;
  56   font-size: 1.5em;
  57 }
  58 a[href="#prefs"] { right: 0; }
  59 a[href="#bookmarks"] { left: 0; }
  60
  61 a[href="#advsearch"] { margin-left: .5em; }
  62 a[href="#advsearch"]:before {
  63   content: '\25b8';
  64   margin: 0 .5em;
  65 }
  66
  67
  68 /* ###  Expandable Drawers  ### */
  69
  70 #prefs, #bookmarks, #multitag, #advsearch {
  71   display: block; position: absolute;
  72   max-height: 0; width: 100%; max-width: 100%;
  73   margin-top: -1px;
  74   padding: 0 1em;
  75   border: 1px none;
  76   overflow: hidden;
  77   background-color: #333;
  78   transition: max-height .3s linear;
  79   z-index: 1;
  80 }
  81 #bookmarks {
  82   left: 0; width: 30%;
  83   min-width: 300px;
  84   margin-right: auto;
  85 }
  86 #prefs {
  87   right: 0; width: 20%;
  88   min-width: 200px;
  89   margin-left: auto;
  90 }
  91 #advsearch {
  92   text-align: center;
  93 }
  94
  95 #advsearch:target, #multitag:target,
  96 #prefs:target, #bookmarks:target {
  97   max-height: 25em; overflow-y: scroll;
  98 }
  99 #advsearch:target { border-style: none none solid none; }
 100 #prefs:target { border-style: none none solid solid; }
 101 #bookmarks:target { border-style: none solid solid none; }
 102 #multitag:target { border-style: solid none none none; }
 103
 104 #advsearch a[href="#"],
 105 #multitag a[href="#"],
 106 #bookmarks a[href="#"],
 107 #prefs a[href="#"] {
 108   display: block;
 109   line-height: 2em;
 110   font-weight: bold;
 111   background-color: inherit;
 112 }
 113 -#prefs a[href="#"] { width: 2.5em; left: auto; }
 114 -#bookmarks a[href="#"] { width: 2.5em; right: auto; }
 115 #advsearch a[href="#"] { border-bottom: 1px solid; }
 116
 117
 118 /* ###  Preferences Drawer  ### */
 119
 120 #prefs label[for=prefs_ps] {
 121   font-weight: bold;
 122 }
 123 #prefs #prefs_ps {
 124   max-width: 4em;
 125   margin-bottom: 1em;
 126 }
 127 #prefs button {
 128   margin: 1em 0;
 129 }
 130 #prefs input { vertical-align: top; }
 131 #prefs input[type=radio] + label,
 132 #prefs input[type=checkbox] + label {
 133   display: inline-block;
 134   margin-bottom: .5em;
 135   max-width: 85%;
 136 }
 137
 138
 139 /* ###  Bookmarks Drawer  ### */
 140
 141 #bookmarks input,
 142 #bookmarks button {
 143   margin-bottom: 1.25em;
 144 }
 145 #bookmarks label {
 146   display: block;
 147   font-weight: bold;
 148   word-break: break-word;
 149   overflow: hidden;
 150 }
 151 #bookmarks a.link {
 152   display: inline-block;
 153   font-size: .75em;
 154   text-decoration: underline;
 155   margin: 0 1em 1.25em 0;
 156 }
 157
 158
 159 /* ###  Advance Search Drawer  ###*/
 160
 161 #advsearch .help {
 162   display: block;
 163   margin: 1em .5em 1em .5em;
 164   padding: .5em 1em;
 165   background-color: #444;
 166   line-height: 1.5em;
 167 }
 168
 169 #advsearch input.and {display: none;}
 170 #advsearch input.and + label {display: none}
 171 #advsearch input.and + label + .select {
 172   display: inline-block;
 173   position: relative;
 174   width: 100%; min-width: 0; max-width: 0;
 175   min-height: 12em;
 176   overflow: hidden;
 177   vertical-align: top;
 178   border: none;
 179   transition: max-width .3s linear;
 180 }
 181 #advsearch .submit {
 182   display: inline-block;
 183   width: 100%;
 184   vertical-align: top;
 185 }
 186
 187 #advsearch input.and + label:nth-of-type(2),
 188 #advsearch input.and:checked + label + .select + input + label {
 189   display: inline-block;
 190   vertical-align: top;
 191   margin: 0 .5% 1em .5%;
 192   width: 4%; min-width: 4em;
 193   padding: .5em 0;
 194   text-align: center;
 195   font-weight: bold;
 196   border: 1px solid;
 197 }
 198
 199 #advsearch input.and:checked + label + .select + input:checked + label,
 200 #advsearch input.and:checked + label:nth-of-type(2),
 201 #advsearch input.and:checked + label { display: none; }
 202
 203 #advsearch input.and + label + .select:first-of-type,
 204 #advsearch input.and:checked + label + .select {
 205   min-width: 200px; max-width: 100%;
 206   margin: 0 .5% 1em .5%;
 207   border: 1px solid;
 208 }
 209
 210 @media (min-width: 460px){
 211 #advsearch .submit,
 212 #advsearch input.and + label + .select:first-of-type,
 213 #advsearch input.and:checked + label + .select {
 214   width: 49%;
 215 } }
 216 @media (min-width: 660px){
 217 #advsearch .submit,
 218 #advsearch input.and + label + .select:first-of-type,
 219 #advsearch input.and:checked + label + .select {
 220   width: 32%;
 221 } }
 222 @media (min-width: 860px){
 223 #advsearch .submit,
 224 #advsearch input.and + label + .select:first-of-type,
 225 #advsearch input.and:checked + label + .select {
 226   width: 24%;
 227 } }
 228 @media (min-width: 1060px){
 229 #advsearch .submit,
 230 #advsearch input.and + label + .select:first-of-type,
 231 #advsearch input.and:checked + label + .select {
 232   width: 19%;
 233 } }
 234
 235 #advsearch .submit { min-height: 0; }
 236 #advsearch .submit * { width: 50%; }
 237
 238 #advsearch .select input.pol {
 239   margin: .5em .25em 0 .5em;
 240 }
 241 #advsearch .select input.pol + label {
 242   font-weight: bold;
 243 }
 244 #advsearch .select label.head {
 245   display: block;
 246   font-weight: bold;
 247   padding: .5em 0 0 .5em;
 248   border-bottom: 1px solid;
 249 }
 250
 251 #advsearch .select select {display: none;}
 252 #advsearch .select input.cat { display: none; }
 253 #advsearch .select input.cat + label {
 254   display: block;
 255   margin-right: 50%;
 256   padding: .25em .5em;
 257   font-size: 1.125em;
 258   border-bottom: 1px solid;
 259 }
 260 #advsearch .select input.cat:checked + label {
 261   background-color: #444;
 262 }
 263 #advsearch .select input.cat:checked + label + select {
 264   display: block;
 265   position: absolute;
 266   top: 3.5em; bottom: 0;
 267   right: 0; left: 50%;
 268   width: 50%;
 269 }
 270
 271
 272 /* ###  Item Listing  ### */
 273
 274 .list {
 275   position: relative;
 276   display: inline-block;
 277   width: 100%;
 278   padding: .375em;
 279   vertical-align: top;
 280   overflow: hidden;
 281 }
 282
 283 .list.dir { padding: .5em 1em; }
 284 .list:before {
 285   position: absolute;
 286   top: .25em; left: .25em;
 287   bottom: .25em; right: .25em;
 288   content: '';
 289   z-index: -2;
 290 }
 291 .list.dir:before { background-color: #CCF; color: black; }
 292 .list.file:before { background-color: #333; }
 293 .list.file:first-of-type { clear: left; }
 294
 295 .list.file a img{
 296   display: block;
 297   width: 100%;
 298   min-height: 4em;
 299   border-bottom: 1px solid black;
 300 }
 301 .list.file a + label{
 302   display: inline-block;
 303   width: 100%; max-height: 2.5em;
 304   margin-right: -10em;
 305   padding: .25em .5em;
 306   word-break: break-word;
 307   background-color: #222;
 308   overflow: hidden;
 309 }
 310
 311 .list.file .time, .list.file .dim {
 312   float: right; position: relative;
 313   display: inline-block;
 314   top: -1.5em; bottom: 1.5;
 315   margin-right: .125em;
 316   padding: .125em .25em;
 317   background-color: rgba(0,0,0,.75);
 318 }
 319
 320 .list.file .tag,
 321 .list.file input + label {
 322   display: inline-block;
 323   margin: .125em -.125em 0 0;
 324   padding: .125em .5em;
 325   color: black;
 326   background-color: #DCC;
 327 }
 328
 329 .list.file input[type="checkbox"] { display: none; }
 330 .list.file input[type="checkbox"] + label {
 331   border: 1px solid;
 332   background-color: #ECC;
 333 }
 334 .list.file input[type="checkbox"]:checked + label {
 335   background-color: #8F8;
 336 }
 337
 338 .itemlist,
 339 .pagination {
 340   display: block;
 341   text-align: center;
 342   margin-top: 1em;
 343 }
 344 .pagination { margin-bottom: 3em;}
 345 .page {
 346   display: inline-block;
 347   margin: 0 .125em;
 348   padding: .25em .5em;
 349   color: #DAA;
 350   background-color: #000;
 351   border: 1px solid;
 352 }
 353 .page.current {
 354   font-weight: bold;
 355   color: black;
 356   background-color: #FDD;
 357   border-color: #DAA;
 358 }
 359
 360 #index label:first-of-type { font-weight: bold; }
 361 #index input, #index button { margin-left: 1em;}
 362
 363
 364 /* ###  Video View  ### */
 365
 366 body#view { padding-bottom: 6em; }
 367
 368 #view h1 {
 369   max-width: 100%;
 370   margin: .5em .75em;
 371   font-size: 1.25em;
 372   font-weight: bold;
 373   word-break: break-word;
 374   text-decoration: none;
 375 }
 376
 377 #view #mainvideo {
 378   display: block;
 379   width: 98%;
 380   margin-left: auto; margin-right: auto;
 381   max-height: 240px;
 382 }
 383 @media(min-height: 400px) { #view #mainvideo { max-height: 320px; } }
 384 @media(min-height: 480px) { #view #mainvideo { max-height: 460px; } }
 385 @media(min-height: 520px) { #view #mainvideo { max-height: 480px; } }
 386 @media(min-height: 640px) { #view #mainvideo { max-height: 600px; } }
 387 @media(min-height: 700px) { #view #mainvideo { max-height: 640px; } }
 388 @media(min-height: 760px) { #view #mainvideo { max-height: 720px; } }
 389 @media(min-height: 1000px){ #view #mainvideo { max-height: 960px; } }
 390 @media(min-height: 1200px){ #view #mainvideo { max-height: 1080px;} }
 391
 392 #view a[href$=download],
 393 #view a[href^=javascript] {
 394   margin-left: 1em;
 395 }
 396
 397 #view .time, #view .dim,
 398 #view .tag {
 399   margin-right: -.125em;
 400   padding: .125em .25em;
 401   color: black;
 402 }
 403 #view .time,
 404 #view .dim { background-color: #CCD; }
 405 #view .tag { background-color: #DCC; }
 406
 407
 408
 409 /* ###  Multi Tagging Drawer  ### */
 410
 411 #multitag fieldset{
 412   display: inline-block;
 413   width: 100%;
 414   vertical-align: top;
 415   padding: 0 .25em;
 416   border: none;
 417 }
 418
 419 @media (min-width: 520px) { .list, #multitag fieldset { width: 50%; min-width: 250px; } }
 420 @media (min-width: 760px) { .list, #multitag fieldset { width: 33%; } }
 421 @media (min-width: 1020px){ .list, #multitag fieldset { width: 25%; } }
 422
 423 #multitag fieldset * { width: 100%; }
 424 #multitag fieldset button { width: 50%; }