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: 19%;
 197   margin: 0 .5% 1em .5%;
 198   min-width: 200px;
 199   min-height: 12em;
 200   overflow: hidden;
 201   vertical-align: top;
 202 }
 203
 204 #advsearch .submit { min-height: 0; }
 205 #advsearch .submit * { width: 50%; }
 206
 207 #advsearch .select input.pol {
 208   margin: .5em .25em 0 .5em;
 209 }
 210 #advsearch .select input.pol + label {
 211   font-weight: bold;
 212 }
 213 #advsearch .select label.head {
 214   display: block;
 215   font-weight: bold;
 216   padding: .5em 0 0 .5em;
 217   border-bottom: 1px solid;
 218 }
 219
 220 #advsearch .select select {display: none;}
 221 #advsearch .select input.cat { display: none; }
 222 #advsearch .select input.cat + label {
 223   display: block;
 224   margin-right: 50%;
 225   padding: .25em .5em;
 226   font-size: 1.125em;
 227   border-bottom: 1px solid;
 228 }
 229 #advsearch .select input.cat:checked + label {
 230   background-color: #444;
 231 }
 232 #advsearch .select input.cat:checked + label + select {
 233   display: block;
 234   position: absolute;
 235   top: 3.5em; bottom: 0;
 236   right: 0; left: 50%;
 237   width: 50%;
 238 }
 239
 240
 241 /* ###  Item Listing  ### */
 242
 243 .list {
 244   position: relative;
 245   display: inline-block;
 246   width: 25%; min-width: 250px;
 247   padding: .375em;
 248   vertical-align: top;
 249   overflow: hidden;
 250 }
 251 .list.dir { padding: .5em 1em; }
 252
 253 .list:before {
 254   position: absolute;
 255   top: .25em; left: .25em;
 256   bottom: .25em; right: .25em;
 257   content: '';
 258   z-index: -2;
 259 }
 260 .list.dir:before { background-color: #CCF; color: black; }
 261 .list.file:before { background-color: #333; }
 262 .list.file:first-of-type { clear: left; }
 263
 264 .list.file a img{
 265   display: block;
 266   width: 100%;
 267   min-height: 4em;
 268   border-bottom: 1px solid black;
 269 }
 270 .list.file a + label{
 271   display: inline-block;
 272   width: 100%; max-height: 2.5em;
 273   margin-right: -10em;
 274   padding: .25em .5em;
 275   word-break: break-word;
 276   background-color: #222;
 277 }
 278
 279 .list.file .time, .list.file .dim {
 280   float: right; position: relative;
 281   display: inline-block;
 282   top: -1.5em; bottom: 1.5;
 283   margin-right: .125em;
 284   padding: .125em .25em;
 285   background-color: rgba(0,0,0,.75);
 286 }
 287
 288 .list.file .tag,
 289 .list.file input + label {
 290   display: inline-block;
 291   margin: .125em -.125em 0 0;
 292   padding: .125em .5em;
 293   color: black;
 294   background-color: #DCC;
 295 }
 296
 297 .list.file input[type="checkbox"] { display: none; }
 298 .list.file input[type="checkbox"] + label {
 299   border: 1px solid;
 300   background-color: #ECC;
 301 }
 302 .list.file input[type="checkbox"]:checked + label {
 303   background-color: #8F8;
 304 }
 305
 306 .itemlist,
 307 .pagination {
 308   display: block;
 309   text-align: center;
 310   margin-top: 1em;
 311 }
 312 .pagination { margin-bottom: 3em;}
 313 .page {
 314   display: inline-block;
 315   margin: 0 .125em;
 316   padding: .25em .5em;
 317   color: black;
 318   background-color: #FDD;
 319   border: 1px solid;
 320 }
 321
 322 #index label:first-of-type { font-weight: bold; }
 323 #index input, #index button { margin-left: 1em;}
 324
 325
 326 /* ###  Multi Tagging Drawer  ### */
 327
 328 #multitag fieldset{
 329   display: inline-block;
 330   width: 25%; min-width: 250px;
 331   vertical-align: top;
 332   padding: 0 .25em;
 333   border: none;
 334 }
 335 #multitag fieldset * { width: 100%; }
 336 #multitag fieldset button { width: 50%; }