style/lantea.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 body {
   6   font-family: sans-serif;
   7   margin: 0;
   8   background: url("loading.png") repeat;
   9 }
  10
  11 h1 {
  12   display: none;
  13 }
  14
  15 .hidden {
  16   display: none;
  17 }
  18
  19 #dialogArea,
  20 .overlayArea {
  21   position: absolute;
  22   z-index: 5;
  23   transition-property: opacity;
  24   transition-duration: .2s;
  25 }
  26
  27 #dialogArea.hidden,
  28 .overlayArea.hidden {
  29   opacity: 0;
  30   transition-duration: 1s;
  31   display: block;
  32 }
  33
  34 #dialogArea:-moz-system-metric(touch-enabled),
  35 .overlayArea:-moz-system-metric(touch-enabled),
  36 .menuDrawer:-moz-system-metric(touch-enabled) {
  37   font-size: 3mozmm;
  38 }
  39
  40 #dialogArea input[type="button"],
  41 #dialogArea button,
  42 #dialogArea input[type="text"],
  43 #dialogArea select,
  44 .overlayArea input[type="button"],
  45 .overlayArea button,
  46 .overlayArea select,
  47 .menuDrawer input[type="button"],
  48 .menuDrawer button,
  49 .menuDrawer select {
  50   font-size: inherit;
  51 }
  52
  53 #menuArea {
  54   /* width: 30em; */
  55   left: 1%;
  56   top: 1em;
  57 }
  58
  59 #zoomArea {
  60   right: 1%;
  61   top: 1em;
  62   text-align: center;
  63 }
  64
  65 #zoomArea > input[type="button"],
  66 #fullscreenArea > input[type="button"],
  67 #trackButton,
  68 #settingsButton {
  69   font-size: 1.2em;
  70   font-weight: bold;
  71   width: 2em;
  72   height: 2em;
  73   border-radius: 2em;
  74   background-color: rgba(255, 255, 255, .25);
  75   background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
  76   color: #0000FF;
  77   border: none;
  78 }
  79
  80 #zoomArea > input[type="button"] {
  81   border: 2px solid #0000FF;
  82 }
  83
  84 #zoomArea > input[type="button"]:hover,
  85 #fullscreenArea > input[type="button"]:hover,
  86 #trackButton:hover,
  87 #settingsButton:hover {
  88   background-color: rgba(255, 255, 255, .8);
  89 }
  90
  91 #zoomArea > input[type="button"]:active,
  92 #fullscreenArea > input[type="button"]:active,
  93 #trackButton:active,
  94 #settingsButton:active {
  95   background-color: rgba(255, 255, 127, .8);
  96 }
  97
  98 #zoomArea > input[type="button"]:focus,
  99 #fullscreenArea > input[type="button"]:focus,
 100 #trackButton:focus,
 101 #settingsButton:focus {
 102   background-color: rgba(255, 255, 255, .5);
 103 }
 104
 105 #fullscreenArea {
 106   right: 1%;
 107   bottom: 2em;
 108   text-align: center;
 109 }
 110
 111 #zoomLevel {
 112   /* background-color: rgba(255, 255, 255, .8); */
 113   background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
 114   border-radius: .5em;
 115   padding: .5em .2em;
 116   margin: 2px 0;
 117 }
 118
 119 .menuDrawer {
 120   position: absolute;
 121   top: 0;
 122   bottom: 0;
 123   transform: translateX(calc(-40ch - 1ch)); /* account for padding */
 124   width: 40ch;
 125   max-width: 95%; /* make sure we don't overflow the screen */
 126   background-color: rgba(15, 15, 15, .9);
 127   color: #CCCCCC;
 128   border: 0;
 129   padding: 0 .5ch; /* account for legend */
 130   margin: 0;
 131   z-index: 10;
 132   transition-property: transform;
 133   transition-duration: 1s;
 134   transition-timing-function: ease;
 135 }
 136
 137 .menuDrawer:not(.hidden) {
 138   transform: translateX(0);
 139 }
 140
 141 @media screen and (max-width: 330px) {
 142   .menuDrawer {
 143     left: calc(-300px - 1ch); /* account for padding */
 144     width: 300px;
 145   }
 146 }
 147
 148 .menuDrawer > p {
 149   margin: .5em 0;
 150 }
 151
 152 /* Menu title */
 153 .menuDrawer > h2 {
 154   font-size: 1.2em;
 155   font-weight: bold;
 156   margin: .5em 0;
 157   background-color: #CCCCCC;
 158   color: #404040;
 159   border-radius: 3px;
 160   padding: 2px;
 161 }
 162
 163 .menuDrawer > h2 > img {
 164   vertical-align: text-top;
 165   height: 1.2em;
 166 }
 167
 168 /* For optical conveniece, display an "x" for closing. */
 169 .menuDrawer > h2:after {
 170   content: '\00D7'; /* multiplication sign */
 171   display: inline-block;
 172   vertical-align: text-top;
 173   float: right;
 174   margin-top: 0;
 175   margin-right: .2em;
 176   font-size: .75em;
 177 }
 178
 179 /* Custom checkbox design */
 180 .menuDrawer input[type="checkbox"] {
 181   display: none;
 182 }
 183
 184 .menuDrawer input[type="checkbox"] + label:before {
 185   content: '\00A0'; /* non-breaking space */
 186   display: inline-block;
 187   width: 1.2em;
 188   height: 1.2em;
 189   margin-right: .3em;
 190   text-align: center;
 191   vertical-align: middle;
 192   background-color: rgba(204, 204, 204, .2);
 193   border: 1px solid #CCCCCC;
 194   border-radius: 3px;
 195 }
 196
 197 .menuDrawer input[type="checkbox"]:hover + label:before {
 198   background-color: rgba(204, 204, 204, .4);
 199   border: 1px solid #FFFFFF;
 200 }
 201 .menuDrawer input[type="checkbox"]:hover + label {
 202   color: #FFFFFF;
 203   position:relative;
 204   height: 1.2em;
 205 }
 206
 207 .menuDrawer input[type="checkbox"]:active + label:before {
 208   background-color: rgba(204, 204, 255, .3);
 209   border: 1px solid #FFCCAA;
 210 }
 211 .menuDrawer input[type="checkbox"]:active + label {
 212   color: #FFCCAA;
 213 }
 214
 215 .menuDrawer input[type="checkbox"]:checked + label:before {
 216   content: '\2714'; /* tick mark */
 217 }
 218
 219 /* Custom button design */
 220 .menuDrawer input[type="button"],
 221 .menuDrawer button {
 222   text-align: center;
 223   vertical-align: middle;
 224   background-image: none;
 225   background-color: rgba(204, 204, 204, .2);
 226   color: #CCCCCC;
 227   padding: 1px .5em;
 228   border: 1px solid #CCCCCC;
 229   border-radius: 3px;
 230 }
 231
 232 .menuDrawer input[type="button"]:disabled,
 233 .menuDrawer button:disabled {
 234   background-color: rgba(204, 204, 204, .1);
 235   color: rgba(204, 204, 204, .5);
 236   border: 1px solid rgba(255, 255, 255, .5);
 237 }
 238
 239 .menuDrawer input[type="button"]:not(:disabled):hover,
 240 .menuDrawer button:not(:disabled):hover {
 241   background-color: rgba(204, 204, 204, .4);
 242   border: 1px solid #FFFFFF;
 243 }
 244
 245 .menuDrawer input[type="button"]:not(:disabled):active,
 246 .menuDrawer button:not(:disabled):active {
 247   background-color: rgba(204, 204, 255, .3);
 248   color: #FFCCAA;
 249   padding-top: 2px;
 250   padding-right: calc(.5em - 1px);
 251   padding-bottom: 0;
 252   padding-left: calc(.5em + 1px);
 253 }
 254
 255 /* Custom select design */
 256 .menuDrawer select {
 257   text-align: left;
 258   vertical-align: middle;
 259   background-image: none;
 260   background-color: rgba(204, 204, 204, .2);
 261   color: #CCCCCC;
 262   padding: 0 .5em;
 263   border: 1px solid #CCCCCC;
 264   border-radius: 3px;
 265 }
 266
 267 .menuDrawer select:hover {
 268   background-color: rgba(204, 204, 204, .4);
 269   border: 1px solid #FFFFFF;
 270 }
 271
 272 .menuDrawer select:active {
 273   background-color: rgba(204, 204, 255, .3);
 274   color: #FFCCAA;
 275 }
 276
 277 .menuDrawer option:checked:not(:hover) {
 278   background-color: rgba(204, 204, 204, .1);
 279 }
 280
 281 .menuDrawer option:hover {
 282   background-color: #CCCCCC;
 283   color: #404040;
 284 }
 285
 286 #trackData {
 287   margin: 0;
 288 }
 289
 290 #map, #track {
 291   position: fixed;
 292   border: 0;
 293   top: 0;
 294   left: 0;
 295   right: 0;
 296   bottom: 0;
 297 }
 298
 299 #map {
 300   z-index: 1;
 301 }
 302
 303 #track {
 304   z-index: 3;
 305 }
 306
 307 #action {
 308   position: absolute;
 309   bottom: 5px;
 310   left: .5em;
 311   margin: 0;
 312   z-index: 3;
 313   background-color: rgba(255, 255, 255, .8);
 314   border-radius: 3px;
 315   padding: 0 3px;
 316 }
 317
 318 #actionimg {
 319   vertical-align: text-bottom;
 320 }
 321
 322 .debugHide {
 323   display: none;
 324 }
 325
 326 .settingsSubTitle {
 327   margin: .5em 0 0;
 328   font-weight: bold;
 329 }
 330
 331 #copyright {
 332   bottom: 5px;
 333   right: .5em;
 334   margin: 0;
 335   font-size: small;
 336   opacity: .66;
 337   z-index: 2;
 338   background-color: rgba(255, 255, 255, 1);
 339   border-radius: 3px;
 340   padding: 0 3px;
 341 }
 342
 343 #copyright.hidden {
 344   opacity: 0;
 345   display: block;
 346 }
 347
 348 #dialogArea {
 349   top: 20%;
 350   right: 0;
 351   left: 0;
 352   width: 30ch;
 353   max-width: 92%;
 354   z-index: 10;
 355   background-color: rgba(255, 255, 255, .8);
 356   border: 0;
 357   margin: auto;
 358   padding: .5em;
 359   border-radius: 5px;
 360 }
 361
 362 #dialogArea.hidden {
 363   top: -100%;
 364   display: block;
 365 }
 366
 367 .dialogTitle {
 368   margin: 0 0 .5em;
 369   font-weight: bold;
 370 }
 371
 372 .dialogHelp {
 373   margin: .5em 0;
 374   font-size: small;
 375   opacity: .66;
 376 }
 377
 378 #uploadDesc {
 379   max-width: 95%;
 380 }
 381
 382 @media screen and (max-width: 500px),
 383        screen and (max-height: 500px) {
 384   body {
 385     font-size: 10px;
 386   }
 387   #menuArea {
 388     top: 2px;
 389     left: 2px;
 390   }
 391   #zoomArea {
 392     top: 2px;
 393     right: 2px;
 394   }
 395   #fullscreenArea {
 396     right: 2px;
 397     bottom: 20px;
 398   }
 399   #copyright {
 400     bottom: 1px;
 401     right: 1px;
 402     font-size: 8px;
 403   }
 404 }