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