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