move track to its own canvas, make painting current position actually work, delay...

[lantea.git] / style / lantea.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

body {
  font-family: sans-serif;
  margin: 0;
}

h1 {
  display: none;
}

#menuArea {
  position: absolute;
  /* width: 30em; */
  left: 1%;
  top: 1em;
  z-index: 5;
}

#zoomArea {
  position: absolute;
  right: 1%;
  top: 1em;
  z-index: 5;
  text-align: center;
}

#fullscreenArea {
  position: absolute;
  right: 1%;
  bottom: 2em;
  z-index: 5;
  text-align: center;
}

.overlayArea {
  transition-property: opacity;
  transition-duration: .2s;
}

.overlayArea.hidden {
  opacity: 0;
  transition-duration: 1s;
}

.overlayArea:-moz-system-metric(touch-enabled) {
  font-size: 3mozmm;
}

.overlayArea input[type="button"]:-moz-system-metric(touch-enabled),
.overlayArea select:-moz-system-metric(touch-enabled) {
  font-size: 3mozmm;
}

#zoomLevel {
  background-color: rgba(255, 255, 255, .8);
  border-radius: 3px;
  padding: 0 3px;
}

#settingsArea,
#trackArea {
  display: none;
  background-color: rgba(255, 255, 255, .8);
  border: 0;
  border-radius: 5px;
}

#settingsArea > legend,
#trackArea > legend {
  display: none;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 3px;
}

#map, #track {
  position: fixed;
  border: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

#debug {
  position: absolute;
  bottom: 5px;
  left: .5em;
  margin: 0;
  z-index: 3;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 3px;
  padding: 0 3px;
}

.debugHide {
  display: none;
}

#copyright {
  position: absolute;
  bottom: 5px;
  right: .5em;
  margin: 0;
  font-size: small;
  opacity: .66;
  z-index: 2;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 3px;
  padding: 0 3px;
}

#copyright.hidden {
  opacity: 0;
}

@media screen and (max-width: 500px) {
  body {
    font-size: 10px;
  }
  #menuArea {
    top: 1px;
    left: 1px;
  }
  #zoomArea {
    top: 1px;
    right: 1px;
  }
  #fullscreenArea {
    right: 1px;
    bottom: 10px;
  }
  #copyright {
    bottom: 1px;
    right: 1px;
    font-size: 8px;
  }
}