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