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: 50em; overflow: visible;
  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 #advsearch:target, #multitag:target { max-height: 500em; }
 103
 104 #advsearch a[href="#"],
 105 #multitag a[href="#"],
 106 #bookmarks a[href="#"],
 107 #prefs a[href="#"] {
 108   display: block;
 109   position: absolute;
 110   margin-top: -2em; line-height: 2em;
 111   padding: 0 .75em;
 112   font-weight: bold;
 113   background-color: inherit;
 114   left: 0; right: 0;
 115 }
 116 #prefs a[href="#"] { width: 2.5em; left: auto; }
 117 #bookmarks a[href="#"] { width: 2.5em; right: auto; }
 118 #advsearch a[href="#"] { border-bottom: 1px solid; }
 119 #multitag a[href="#"] { position: normal; border-top: 1px solid;}
 120
 121
 122 /* ###  Preferences Drawer  ### */
 123
 124 #prefs label[for=prefs_ps] {
 125   font-weight: bold;
 126 }
 127 #prefs #prefs_ps {
 128   max-width: 4em;
 129   margin-bottom: 1em;
 130 }
 131 #prefs button {
 132   margin: 1em 0;
 133 }
 134 #prefs input { vertical-align: top; }
 135 #prefs input[type=radio] + label,
 136 #prefs input[type=checkbox] + label {
 137   display: inline-block;
 138   margin-bottom: .5em;
 139   max-width: 85%;
 140 }
 141
 142
 143 /* ###  Bookmarks Drawer  ### */
 144
 145 #bookmarks input,
 146 #bookmarks button {
 147   margin-bottom: 1.25em;
 148 }
 149 #bookmarks label {
 150   display: block;
 151   font-weight: bold;
 152   word-break: break-word;
 153   overflow: hidden;
 154 }
 155 #bookmarks a.link {
 156   display: inline-block;
 157   font-size: .75em;
 158   text-decoration: underline;
 159   margin: 0 1em 1.25em 0;
 160 }
 161
 162
 163 /* ###  Advance Search Drawer  ###*/
 164
 165 #advsearch .help {
 166   display: block;
 167   margin: 1em .5em 1em .5em;
 168   padding: .5em 1em;
 169   background-color: #444;
 170   line-height: 1.5em;
 171 }
 172
 173 #advsearch input.and {display: none;}
 174 #advsearch input.and + label {display: none}
 175 #advsearch input.and + label + .select {
 176   display: inline-block;
 177   position: relative;
 178   width: 100%; min-width: 0; max-width: 0;
 179   min-height: 12em;
 180   overflow: hidden;
 181   vertical-align: top;
 182   border: none;
 183   transition: max-width .3s linear;
 184 }
 185 #advsearch .submit {
 186   display: inline-block;
 187   width: 100%;
 188   vertical-align: top;
 189 }
 190
 191 #advsearch input.and + label:nth-of-type(2),
 192 #advsearch input.and:checked + label + .select + input + label {
 193   display: inline-block;
 194   vertical-align: top;
 195   margin: 0 .5% 1em .5%;
 196   width: 4%; min-width: 4em;
 197   padding: .5em 0;
 198   text-align: center;
 199   font-weight: bold;
 200   border: 1px solid;
 201 }
 202
 203 #advsearch input.and:checked + label + .select + input:checked + label,
 204 #advsearch input.and:checked + label:nth-of-type(2),
 205 #advsearch input.and:checked + label { display: none; }
 206
 207 #advsearch input.and + label + .select:first-of-type,
 208 #advsearch input.and:checked + label + .select {
 209   min-width: 200px; max-width: 100%;
 210   margin: 0 .5% 1em .5%;
 211   border: 1px solid;
 212 }
 213
 214 @media (min-width: 460px){
 215 #advsearch .submit,
 216 #advsearch input.and + label + .select:first-of-type,
 217 #advsearch input.and:checked + label + .select {
 218   width: 49%;
 219 } }
 220 @media (min-width: 660px){
 221 #advsearch .submit,
 222 #advsearch input.and + label + .select:first-of-type,
 223 #advsearch input.and:checked + label + .select {
 224   width: 32%;
 225 } }
 226 @media (min-width: 860px){
 227 #advsearch .submit,
 228 #advsearch input.and + label + .select:first-of-type,
 229 #advsearch input.and:checked + label + .select {
 230   width: 24%;
 231 } }
 232 @media (min-width: 1060px){
 233 #advsearch .submit,
 234 #advsearch input.and + label + .select:first-of-type,
 235 #advsearch input.and:checked + label + .select {
 236   width: 19%;
 237 } }
 238
 239 #advsearch .submit { min-height: 0; }
 240 #advsearch .submit * { width: 50%; }
 241
 242 #advsearch .select input.pol {
 243   margin: .5em .25em 0 .5em;
 244 }
 245 #advsearch .select input.pol + label {
 246   font-weight: bold;
 247 }
 248 #advsearch .select label.head {
 249   display: block;
 250   font-weight: bold;
 251   padding: .5em 0 0 .5em;
 252   border-bottom: 1px solid;
 253 }
 254
 255 #advsearch .select select {display: none;}
 256 #advsearch .select input.cat { display: none; }
 257 #advsearch .select input.cat + label {
 258   display: block;
 259   margin-right: 50%;
 260   padding: .25em .5em;
 261   font-size: 1.125em;
 262   border-bottom: 1px solid;
 263 }
 264 #advsearch .select input.cat:checked + label {
 265   background-color: #444;
 266 }
 267 #advsearch .select input.cat:checked + label + select {
 268   display: block;
 269   position: absolute;
 270   top: 3.5em; bottom: 0;
 271   right: 0; left: 50%;
 272   width: 50%;
 273 }
 274
 275
 276 /* ###  Item Listing  ### */
 277
 278 .list {
 279   position: relative;
 280   display: inline-block;
 281   width: 100%;
 282   padding: .375em;
 283   vertical-align: top;
 284   overflow: hidden;
 285 }
 286
 287 .list.dir { padding: .5em 1em; }
 288 .list:before {
 289   position: absolute;
 290   top: .25em; left: .25em;
 291   bottom: .25em; right: .25em;
 292   content: '';
 293   z-index: -2;
 294 }
 295 .list.dir:before { background-color: #CCF; color: black; }
 296 .list.file:before { background-color: #333; }
 297 .list.file:first-of-type { clear: left; }
 298
 299 .list.file a img{
 300   display: block;
 301   width: 100%;
 302   min-height: 4em;
 303   border-bottom: 1px solid black;
 304 }
 305 .list.file a + label{
 306   display: inline-block;
 307   width: 100%; max-height: 2.5em;
 308   margin-right: -10em;
 309   padding: .25em .5em;
 310   word-break: break-word;
 311   background-color: #222;
 312   overflow: hidden;
 313 }
 314
 315 .list.file .time, .list.file .dim {
 316   float: right; position: relative;
 317   display: inline-block;
 318   top: -1.5em; bottom: 1.5;
 319   margin-right: .125em;
 320   padding: .125em .25em;
 321   background-color: rgba(0,0,0,.75);
 322 }
 323
 324 .list.file .tag,
 325 .list.file input + label {
 326   display: inline-block;
 327   margin: .125em -.125em 0 0;
 328   padding: .125em .5em;
 329   color: black;
 330   background-color: #DCC;
 331 }
 332
 333 .list.file input[type="checkbox"] { display: none; }
 334 .list.file input[type="checkbox"] + label {
 335   border: 1px solid;
 336   background-color: #ECC;
 337 }
 338 .list.file input[type="checkbox"]:checked + label {
 339   background-color: #8F8;
 340 }
 341
 342 .itemlist,
 343 .pagination {
 344   display: block;
 345   text-align: center;
 346   margin-top: 1em;
 347 }
 348 .pagination { margin-bottom: 3em;}
 349 .page {
 350   display: inline-block;
 351   margin: 0 .125em;
 352   padding: .25em .5em;
 353   color: black;
 354   background-color: #FDD;
 355   border: 1px solid;
 356 }
 357
 358 #index label:first-of-type { font-weight: bold; }
 359 #index input, #index button { margin-left: 1em;}
 360
 361
 362 /* ###  Video View  ### */
 363
 364 #view h1 {
 365   max-width: 100%;
 366   margin: 1em 0; padding: 0 .5em;
 367   font-size: 1.25em;
 368   font-weight: bold;
 369   word-break: break-word;
 370   text-decoration: none;
 371 }
 372
 373 #view #mainvideo {
 374   display: inline;
 375   width: 100%;
 376   max-height: 70%;
 377 }
 378
 379 #view .time, #view .dim,
 380 #view .tag {
 381   margin-right: -.125em;
 382   padding: .125em .25em;
 383   color: black;
 384 }
 385 #view .time,
 386 #view .dim { background-color: #CCD; }
 387 #view .tag { background-color: #DCC; }
 388
 389
 390
 391 /* ###  Multi Tagging Drawer  ### */
 392
 393 #multitag fieldset{
 394   display: inline-block;
 395   width: 100%;
 396   vertical-align: top;
 397   padding: 0 .25em;
 398   border: none;
 399 }
 400
 401 @media (min-width: 520px) { .list, #multitag fieldset { width: 50%; min-width: 250px; } }
 402 @media (min-width: 760px) { .list, #multitag fieldset { width: 33%; } }
 403 @media (min-width: 1020px){ .list, #multitag fieldset { width: 25%; } }
 404
 405 #multitag fieldset * { width: 100%; }
 406 #multitag fieldset button { width: 50%; }