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