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 #dialogArea,
  16 .overlayArea {
  17   position: absolute;
  18   z-index: 5;
  19   transition-property: opacity;
  20   transition-duration: .2s;
  21 }
  22
  23 #dialogArea.hidden,
  24 .overlayArea.hidden {
  25   opacity: 0;
  26   transition-duration: 1s;
  27 }
  28
  29 #dialogArea:-moz-system-metric(touch-enabled),
  30 .overlayArea:-moz-system-metric(touch-enabled) {
  31   font-size: 3mozmm;
  32 }
  33
  34 #dialogArea input[type="button"]:-moz-system-metric(touch-enabled),
  35 #dialogArea input[type="text"]:-moz-system-metric(touch-enabled),
  36 #dialogArea select:-moz-system-metric(touch-enabled),
  37 .overlayArea input[type="button"]:-moz-system-metric(touch-enabled),
  38 .overlayArea select:-moz-system-metric(touch-enabled) {
  39   font-size: 3mozmm;
  40 }
  41
  42 #menuArea {
  43   /* width: 30em; */
  44   left: 1%;
  45   top: 1em;
  46 }
  47
  48 #zoomArea {
  49   right: 1%;
  50   top: 1em;
  51   text-align: center;
  52 }
  53
  54 #fullscreenArea {
  55   right: 1%;
  56   bottom: 2em;
  57   text-align: center;
  58 }
  59
  60 #zoomLevel {
  61   background-color: rgba(255, 255, 255, .8);
  62   border-radius: 3px;
  63   padding: 0 3px;
  64 }
  65
  66 #settingsArea,
  67 #trackArea {
  68   display: none;
  69   background-color: rgba(255, 255, 255, .8);
  70   border: 0;
  71   border-radius: 5px;
  72 }
  73
  74 #settingsArea > legend,
  75 #trackArea > legend {
  76   display: none;
  77   background-color: rgba(255, 255, 255, .8);
  78   border-radius: 3px;
  79 }
  80
  81 #map, #track {
  82   position: fixed;
  83   border: 0;
  84   top: 0;
  85   left: 0;
  86   right: 0;
  87   bottom: 0;
  88   z-index: 1;
  89 }
  90
  91 #action {
  92   position: absolute;
  93   bottom: 5px;
  94   left: .5em;
  95   margin: 0;
  96   z-index: 3;
  97   background-color: rgba(255, 255, 255, .8);
  98   border-radius: 3px;
  99   padding: 0 3px;
 100 }
 101
 102 #actionimg {
 103   vertical-align: text-bottom;
 104 }
 105
 106 .debugHide {
 107   display: none;
 108 }
 109
 110 .settingsSubTitle {
 111   margin: .5em 0 0;
 112   font-weight: bold;
 113 }
 114
 115 #copyright {
 116   bottom: 5px;
 117   right: .5em;
 118   margin: 0;
 119   font-size: small;
 120   opacity: .66;
 121   z-index: 2;
 122   background-color: rgba(255, 255, 255, 1);
 123   border-radius: 3px;
 124   padding: 0 3px;
 125 }
 126
 127 #copyright.hidden {
 128   opacity: 0;
 129 }
 130
 131 #dialogArea {
 132   top: 20%;
 133   right: 0;
 134   left: 0;
 135   width: 30ch;
 136   max-width: 92%;
 137   z-index: 10;
 138   background-color: rgba(255, 255, 255, .8);
 139   border: 0;
 140   margin: auto;
 141   padding: .5em;
 142   border-radius: 5px;
 143 }
 144
 145 #dialogArea.hidden {
 146   top: -100%;
 147 }
 148
 149 .dialogTitle {
 150   margin: 0 0 .5em;
 151   font-weight: bold;
 152 }
 153
 154 .dialogHelp {
 155   margin: .5em 0;
 156   font-size: small;
 157   opacity: .66;
 158 }
 159
 160 @media screen and (max-width: 500px) {
 161   body {
 162     font-size: 10px;
 163   }
 164   #menuArea {
 165     top: 1px;
 166     left: 1px;
 167   }
 168   #zoomArea {
 169     top: 1px;
 170     right: 1px;
 171   }
 172   #fullscreenArea {
 173     right: 1px;
 174     bottom: 10px;
 175   }
 176   #copyright {
 177     bottom: 1px;
 178     right: 1px;
 179     font-size: 8px;
 180   }
 181 }