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 1em 1em 1em;
 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%;
 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 input.and + label + .select:first-of-type,
 163 #advsearch input.and:checked + label + .select {
 164   display: inline-block;
 165   position: relative;
 166   width: 19%;
 167   margin: 0 .5% 1em .5%;
 168   min-width: 200px;
 169   min-height: 12em;
 170   overflow: hidden;
 171   text-align: left;
 172 }
 173
 174 #advsearch .select input.pol {
 175   margin: .5em .25em 0 .5em;
 176 }
 177 #advsearch .select input.pol + label {
 178   font-weight: bold;
 179 }
 180 #advsearch .select label.head {
 181   display: block;
 182   font-weight: bold;
 183   padding: .5em 0 0 .5em;
 184   border-bottom: 1px solid;
 185 }
 186
 187 #advsearch .select select {display: none;}
 188 #advsearch .select input.cat { display: none; }
 189 #advsearch .select input.cat + label {
 190   display: block;
 191   margin-right: 50%;
 192   padding: .25em .5em;
 193   font-size: 1.125em;
 194   border-bottom: 1px solid;
 195 }
 196 #advsearch .select input.cat:checked + label {
 197   background-color: #444;
 198 }
 199 #advsearch .select input.cat:checked + label + select {
 200   display: block;
 201   position: absolute;
 202   top: 3.5em; bottom: 0;
 203   right: 0; left: 50%;
 204   width: 50%;
 205 }
 206
 207 .list {
 208   position: relative;
 209   display: inline-block;
 210   width: 25%;
 211   min-width: 250px;
 212   padding: .25em;
 213   overflow: none;
 214   word-wrap: break-word;
 215   vertical-align: top;
 216   color: black;
 217   overflow: hidden;
 218 }
 219 .list.dir {
 220   padding: .5em 1em;
 221 }
 222
 223 .list:before {
 224   position: absolute;
 225   top: .25em; left: .25em;
 226   bottom: .25em; right: .25em;
 227   z-index: -2;
 228   content: '';
 229 }
 230 .list.dir:before { background-color: #CCF; }
 231 .list.file:before { background-color: #FDD; }
 232 .list.file:first-of-type { clear: left; }
 233
 234 .list.file a img{
 235   display: block;
 236   width: 100%;
 237   min-height: 4em;
 238 }
 239 .list.file a label{
 240   position: absolute;
 241   top: 0; padding: .25em .5em;
 242   color: white;
 243   background-color: rgba(0,0,0,.625);
 244 }
 245
 246 .list.file .time,
 247 .list.file .dim,
 248 .list.file .tag,
 249 .list.file label {
 250   display: inline-block;
 251   margin-top: .125em;
 252 }
 253 .list.file .time,
 254 .list.file .dim {
 255   color: white;
 256   background-color: #004;
 257   padding: .125em .5em;
 258 }
 259 .list.file .tag {
 260   color: white;
 261   background-color: #400;
 262   padding: .125em .5em;
 263 }
 264
 265 .list.file input[type="checkbox"] { display: none; }
 266 .list.file input[type="checkbox"] + label {
 267   border: 1px solid;
 268   border-radius: .125em;
 269   padding: 0 .25em;
 270   background-color: #FBB;
 271 }
 272 .list.file input[type="checkbox"]:checked + label {
 273   background-color: #4F4;
 274 }
 275
 276 .pagination {
 277   display: block;
 278   text-align: center;
 279   margin-top: 1em;
 280 }
 281 .page {
 282   display: inline-block;
 283   padding: .25em .5em;
 284   color: black;
 285   background-color: #FDD;
 286   border: 1px solid;
 287   margin: 0 .125em;
 288 }
 289
 290 #editing {
 291   text-align: left;
 292   width: 100%;
 293   background-color: #333;
 294   border-top: 1px solid;
 295   padding: .25em;
 296 }
 297
 298 #index label:first-of-type { font-weight: bold; }
 299 #index input, #index button { margin-left: 1em;}
 300
 301 #multitag:target a[href="#"] {
 302   position: relative;
 303   top: -1em;
 304   padding-right: 10em;
 305   background-color: inherit;
 306 }
 307 #multitag fieldset{
 308   display: inline-block;
 309   width: 25%; min-width: 250px;
 310   vertical-align: top;
 311   padding: 0 .25em;
 312   border: none;
 313 }
 314 #multitag fieldset * { width: 100%; }
 315 #multitag fieldset button { width: 50%; }