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 }
  89
  90 #map {
  91   z-index: 1;
  92 }
  93
  94 #track {
  95   z-index: 3;
  96 }
  97
  98 #action {
  99   position: absolute;
 100   bottom: 5px;
 101   left: .5em;
 102   margin: 0;
 103   z-index: 3;
 104   background-color: rgba(255, 255, 255, .8);
 105   border-radius: 3px;
 106   padding: 0 3px;
 107 }
 108
 109 #actionimg {
 110   vertical-align: text-bottom;
 111 }
 112
 113 .debugHide {
 114   display: none;
 115 }
 116
 117 .settingsSubTitle {
 118   margin: .5em 0 0;
 119   font-weight: bold;
 120 }
 121
 122 #copyright {
 123   bottom: 5px;
 124   right: .5em;
 125   margin: 0;
 126   font-size: small;
 127   opacity: .66;
 128   z-index: 2;
 129   background-color: rgba(255, 255, 255, 1);
 130   border-radius: 3px;
 131   padding: 0 3px;
 132 }
 133
 134 #copyright.hidden {
 135   opacity: 0;
 136 }
 137
 138 #dialogArea {
 139   top: 20%;
 140   right: 0;
 141   left: 0;
 142   width: 30ch;
 143   max-width: 92%;
 144   z-index: 10;
 145   background-color: rgba(255, 255, 255, .8);
 146   border: 0;
 147   margin: auto;
 148   padding: .5em;
 149   border-radius: 5px;
 150 }
 151
 152 #dialogArea.hidden {
 153   top: -100%;
 154 }
 155
 156 .dialogTitle {
 157   margin: 0 0 .5em;
 158   font-weight: bold;
 159 }
 160
 161 .dialogHelp {
 162   margin: .5em 0;
 163   font-size: small;
 164   opacity: .66;
 165 }
 166
 167 @media screen and (max-width: 500px) {
 168   body {
 169     font-size: 10px;
 170   }
 171   #menuArea {
 172     top: 1px;
 173     left: 1px;
 174   }
 175   #zoomArea {
 176     top: 1px;
 177     right: 1px;
 178   }
 179   #fullscreenArea {
 180     right: 1px;
 181     bottom: 10px;
 182   }
 183   #copyright {
 184     bottom: 1px;
 185     right: 1px;
 186     font-size: 8px;
 187   }
 188 }