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 #prefs, #bookmarks,
  31 #multitag, #advsearch {
  32   display: block;
  33   position: relative;
  34   overflow: hidden;
  35   height: 0;
  36   background-color: #333;
  37 }
  38 #prefs:target,
  39 #advsearch:target,
  40 #multitag:target,
  41 #bookmarks:target {
  42   height: auto;
  43   overflow: visible;
  44 }
  45
  46 #navigation{
  47   text-align: center;
  48   background-color: #333;
  49   padding: .25em;
  50   border-bottom: 1px solid;
  51 }
  52
  53 #search { display: inline; }
  54
  55 a[href="#prefs"] {
  56   position: absolute;
  57   top: 0; right: .25em;
  58   font-size: 1.5em;
  59 }
  60
  61 a[href="#bookmarks"] {
  62   position: absolute;
  63   top: 0; left: .25em;
  64   font-size: 1.5em;
  65 }
  66
  67 a[href="#advsearch"] {
  68   margin-left: .5em;
  69 }
  70 a[href="#advsearch"]:before {
  71   content: '\25b8';
  72   margin: 0 .5em;
  73 }
  74
  75 #prefs {
  76   position: absolute;
  77   right: 0; width: 13em;
  78   margin-left: auto;
  79   margin-top: -1px;
  80   border: 1px solid;
  81   border-top: none;
  82   border-right: none;
  83   padding: 0 1em;
  84   z-index: 1;
  85 }
  86
  87 #prefs a[href="#"] {
  88   display: block;
  89   position: relative;
  90   top: -1.125em;
  91   margin-right: -.5em;
  92   margin-bottom: -1em;
  93   text-align: right;
  94   font-size: 1.5em;
  95   padding-right: .25em;
  96   background-color: inherit;
  97 }
  98
  99 #prefs label[for=prefs_ps] {
 100   font-weight: bold;
 101 }
 102 #prefs #prefs_ps {
 103   max-width: 4em;
 104   margin-bottom: 1em;
 105 }
 106 #prefs button {
 107   margin: 1em 0;
 108 }
 109 #prefs input { vertical-align: top; }
 110 #prefs input[type=radio] + label,
 111 #prefs input[type=checkbox] + label {
 112   display: inline-block;
 113   margin-bottom: .5em;
 114   max-width: 85%;
 115 }
 116
 117 #advsearch:target {
 118   display: block;
 119   position: relative;
 120   text-align: center;
 121   border-bottom: 1px solid;
 122 }
 123 #advsearch a[href="#"] {
 124   display: block;
 125   line-height: 2em;
 126   background-color: inherit;
 127   border-bottom: 1px solid;
 128   padding-left: .5em;
 129   position: relative;
 130   top: -2em;
 131 }
 132 #advsearch .help {
 133   display: block;
 134   margin: -1em .625em 1em .625em;
 135   padding: .5em 1em;
 136   background-color: #444;
 137   line-height: 1.5em;
 138 }
 139
 140 #advsearch input.and {display: none;}
 141 #advsearch input.and + label {display: none}
 142 #advsearch input.and + label + .select {display: none;}
 143
 144 #advsearch input.and + label:nth-of-type(2),
 145 #advsearch input.and:checked + label + .select + input + label {
 146   display: inline-block;
 147   vertical-align: top;
 148   margin: 0 .5% 1em .5%;
 149   width: 4%; min-width: 4em;
 150   padding: .5em 0;
 151   text-align: center;
 152   font-weight: bold;
 153   border: 1px solid;
 154 }
 155
 156 #advsearch input.and:checked + label + .select + input:checked + label,
 157 #advsearch input.and:checked + label:nth-of-type(2),
 158 #advsearch input.and:checked + label { display: none; }
 159
 160 #advsearch .submit,
 161 #advsearch input.and + label + .select:first-of-type,
 162 #advsearch input.and:checked + label + .select {
 163   display: inline-block;
 164   position: relative;
 165   width: 19%;
 166   margin: 0 .5% 1em .5%;
 167   min-width: 200px;
 168   min-height: 12em;
 169   overflow: hidden;
 170   vertical-align: top;
 171 }
 172
 173 #advsearch .submit { min-height: 0; }
 174 #advsearch .submit * { width: 50%; }
 175
 176 #advsearch .select input.pol {
 177   margin: .5em .25em 0 .5em;
 178 }
 179 #advsearch .select input.pol + label {
 180   font-weight: bold;
 181 }
 182 #advsearch .select label.head {
 183   display: block;
 184   font-weight: bold;
 185   padding: .5em 0 0 .5em;
 186   border-bottom: 1px solid;
 187 }
 188
 189 #advsearch .select select {display: none;}
 190 #advsearch .select input.cat { display: none; }
 191 #advsearch .select input.cat + label {
 192   display: block;
 193   margin-right: 50%;
 194   padding: .25em .5em;
 195   font-size: 1.125em;
 196   border-bottom: 1px solid;
 197 }
 198 #advsearch .select input.cat:checked + label {
 199   background-color: #444;
 200 }
 201 #advsearch .select input.cat:checked + label + select {
 202   display: block;
 203   position: absolute;
 204   top: 3.5em; bottom: 0;
 205   right: 0; left: 50%;
 206   width: 50%;
 207 }
 208
 209 .list {
 210   position: relative;
 211   display: inline-block;
 212   width: 25%;
 213   min-width: 250px;
 214   padding: .25em;
 215   overflow: none;
 216   word-wrap: break-word;
 217   vertical-align: top;
 218   color: black;
 219   overflow: hidden;
 220 }
 221 .list.dir {
 222   padding: .5em 1em;
 223 }
 224
 225 .list:before {
 226   position: absolute;
 227   top: .25em; left: .25em;
 228   bottom: .25em; right: .25em;
 229   z-index: -2;
 230   content: '';
 231 }
 232 .list.dir:before { background-color: #CCF; }
 233 .list.file:before { background-color: #FDD; }
 234 .list.file:first-of-type { clear: left; }
 235
 236 .list.file a img{
 237   display: block;
 238   width: 100%;
 239   min-height: 4em;
 240 }
 241 .list.file a label{
 242   position: absolute;
 243   top: 0; padding: .25em .5em;
 244   color: white;
 245   background-color: rgba(0,0,0,.625);
 246 }
 247
 248 .list.file .time,
 249 .list.file .dim,
 250 .list.file .tag,
 251 .list.file label {
 252   display: inline-block;
 253   margin-top: .125em;
 254 }
 255 .list.file .time,
 256 .list.file .dim {
 257   color: white;
 258   background-color: #004;
 259   padding: .125em .5em;
 260 }
 261 .list.file .tag {
 262   color: white;
 263   background-color: #400;
 264   padding: .125em .5em;
 265 }
 266
 267 .list.file input[type="checkbox"] { display: none; }
 268 .list.file input[type="checkbox"] + label {
 269   border: 1px solid;
 270   border-radius: .125em;
 271   padding: 0 .25em;
 272   background-color: #FBB;
 273 }
 274 .list.file input[type="checkbox"]:checked + label {
 275   background-color: #4F4;
 276 }
 277
 278 .itemlist,
 279 .pagination {
 280   display: block;
 281   text-align: center;
 282   margin-top: 1em;
 283 }
 284 .page {
 285   display: inline-block;
 286   padding: .25em .5em;
 287   color: black;
 288   background-color: #FDD;
 289   border: 1px solid;
 290   margin: 0 .125em;
 291 }
 292
 293 #editing {
 294   width: 100%;
 295   background-color: #333;
 296   border-top: 1px solid;
 297   padding: .25em;
 298 }
 299
 300 #index label:first-of-type { font-weight: bold; }
 301 #index input, #index button { margin-left: 1em;}
 302
 303 #multitag:target a[href="#"] {
 304   position: relative;
 305   top: -1em;
 306   padding-right: 10em;
 307   background-color: inherit;
 308 }
 309 #multitag fieldset{
 310   display: inline-block;
 311   width: 25%; min-width: 250px;
 312   vertical-align: top;
 313   padding: 0 .25em;
 314   border: none;
 315 }
 316 #multitag fieldset * { width: 100%; }
 317 #multitag fieldset button { width: 50%; }