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