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