git.plutz.net Git - serve0/blob - style.css

   1 * {
   2   box-sizing: border-box;
   3   margin: 0; padding: 0;
   4 }
   5 button { padding: .125em .5em; }
   6 a { color: inherit; text-decoration: none;}
   7
   8 input {
   9   border: 1px solid;
  10   padding: .25em .5em;
  11   line-height: 1em;
  12   vertical-align: bottom;
  13 }
  14 input[type=number] { padding-right: 0; }
  15 input[type=radio], input[type=checkbox] { vertical-align: baseline; }
  16 select {
  17   border: 1px solid;
  18   padding: .125em .5em;
  19 }
  20 select[multiple] { padding: 0; }
  21 select[multiple] option { padding: .25em .5em; }
  22
  23 body {
  24   color: white;
  25   background-color: black;
  26   min-height: 100%;
  27 }
  28
  29 #prefs, #bookmarks,
  30 #multitag, #advsearch {
  31   display: block;
  32   position: relative;
  33   overflow: hidden;
  34   height: 0;
  35   text-align: left;
  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   text-align: left;
 129   padding-left: .5em;
 130   position: relative;
 131   top: -2em;
 132 }
 133 #advsearch .help {
 134   display: block;
 135   margin: -1em .625em 1em .625em;
 136   padding: .5em 1em;
 137   background-color: #444;
 138   line-height: 1.5em;
 139   text-align: left;
 140 }
 141
 142 #advsearch input.and {display: none;}
 143 #advsearch input.and + label {display: none}
 144 #advsearch input.and + label + .select {display: none;}
 145
 146 #advsearch input.and + label:nth-of-type(2),
 147 #advsearch input.and:checked + label + .select + input + label {
 148   display: inline-block;
 149   vertical-align: top;
 150   margin: 0 .5% 1em .5%;
 151   width: 4%; min-width: 4em;
 152   padding: .5em 0;
 153   text-align: center;
 154   font-weight: bold;
 155   border: 1px solid;
 156 }
 157
 158 #advsearch input.and:checked + label + .select + input:checked + label,
 159 #advsearch input.and:checked + label:nth-of-type(2),
 160 #advsearch input.and:checked + label { display: none; }
 161
 162 #advsearch .submit,
 163 #advsearch input.and + label + .select:first-of-type,
 164 #advsearch input.and:checked + label + .select {
 165   display: inline-block;
 166   position: relative;
 167   width: 19%;
 168   margin: 0 .5% 1em .5%;
 169   min-width: 200px;
 170   min-height: 12em;
 171   overflow: hidden;
 172   text-align: left;
 173   vertical-align: top;
 174 }
 175
 176 #advsearch .submit { min-height: 0; }
 177 #advsearch .submit * { width: 50%; }
 178
 179 #advsearch .select input.pol {
 180   margin: .5em .25em 0 .5em;
 181 }
 182 #advsearch .select input.pol + label {
 183   font-weight: bold;
 184 }
 185 #advsearch .select label.head {
 186   display: block;
 187   font-weight: bold;
 188   padding: .5em 0 0 .5em;
 189   border-bottom: 1px solid;
 190 }
 191
 192 #advsearch .select select {display: none;}
 193 #advsearch .select input.cat { display: none; }
 194 #advsearch .select input.cat + label {
 195   display: block;
 196   margin-right: 50%;
 197   padding: .25em .5em;
 198   font-size: 1.125em;
 199   border-bottom: 1px solid;
 200 }
 201 #advsearch .select input.cat:checked + label {
 202   background-color: #444;
 203 }
 204 #advsearch .select input.cat:checked + label + select {
 205   display: block;
 206   position: absolute;
 207   top: 3.5em; bottom: 0;
 208   right: 0; left: 50%;
 209   width: 50%;
 210 }
 211
 212 .list {
 213   position: relative;
 214   display: inline-block;
 215   width: 25%;
 216   min-width: 250px;
 217   padding: .25em;
 218   overflow: none;
 219   word-wrap: break-word;
 220   vertical-align: top;
 221   color: black;
 222   overflow: hidden;
 223 }
 224 .list.dir {
 225   padding: .5em 1em;
 226 }
 227
 228 .list:before {
 229   position: absolute;
 230   top: .25em; left: .25em;
 231   bottom: .25em; right: .25em;
 232   z-index: -2;
 233   content: '';
 234 }
 235 .list.dir:before { background-color: #CCF; }
 236 .list.file:before { background-color: #FDD; }
 237 .list.file:first-of-type { clear: left; }
 238
 239 .list.file a img{
 240   display: block;
 241   width: 100%;
 242   min-height: 4em;
 243 }
 244 .list.file a label{
 245   position: absolute;
 246   top: 0; padding: .25em .5em;
 247   color: white;
 248   background-color: rgba(0,0,0,.625);
 249 }
 250
 251 .list.file .time,
 252 .list.file .dim,
 253 .list.file .tag,
 254 .list.file label {
 255   display: inline-block;
 256   margin-top: .125em;
 257 }
 258 .list.file .time,
 259 .list.file .dim {
 260   color: white;
 261   background-color: #004;
 262   padding: .125em .5em;
 263 }
 264 .list.file .tag {
 265   color: white;
 266   background-color: #400;
 267   padding: .125em .5em;
 268 }
 269
 270 .list.file input[type="checkbox"] { display: none; }
 271 .list.file input[type="checkbox"] + label {
 272   border: 1px solid;
 273   border-radius: .125em;
 274   padding: 0 .25em;
 275   background-color: #FBB;
 276 }
 277 .list.file input[type="checkbox"]:checked + label {
 278   background-color: #4F4;
 279 }
 280
 281 .pagination {
 282   display: block;
 283   text-align: center;
 284   margin-top: 1em;
 285 }
 286 .page {
 287   display: inline-block;
 288   padding: .25em .5em;
 289   color: black;
 290   background-color: #FDD;
 291   border: 1px solid;
 292   margin: 0 .125em;
 293 }
 294
 295 #editing {
 296   text-align: left;
 297   width: 100%;
 298   background-color: #333;
 299   border-top: 1px solid;
 300   padding: .25em;
 301 }
 302
 303 #index label:first-of-type { font-weight: bold; }
 304 #index input, #index button { margin-left: 1em;}
 305
 306 #multitag:target a[href="#"] {
 307   position: relative;
 308   top: -1em;
 309   padding-right: 10em;
 310   background-color: inherit;
 311 }
 312 #multitag fieldset{
 313   display: inline-block;
 314   width: 25%; min-width: 250px;
 315   vertical-align: top;
 316   padding: 0 .25em;
 317   border: none;
 318 }
 319 #multitag fieldset * { width: 100%; }
 320 #multitag fieldset button { width: 50%; }