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 .menuDrawer:-moz-system-metric(touch-enabled) {
  32   font-size: 3mozmm;
  33 }
  34
  35 #dialogArea input[type="button"]:-moz-system-metric(touch-enabled),
  36 #dialogArea input[type="text"]:-moz-system-metric(touch-enabled),
  37 #dialogArea select:-moz-system-metric(touch-enabled),
  38 .overlayArea input[type="button"]:-moz-system-metric(touch-enabled),
  39 .overlayArea select:-moz-system-metric(touch-enabled),
  40 .menuDrawer input[type="button"]:-moz-system-metric(touch-enabled),
  41 .menuDrawer select:-moz-system-metric(touch-enabled) {
  42   font-size: 3mozmm;
  43 }
  44
  45 #menuArea {
  46   /* width: 30em; */
  47   left: 1%;
  48   top: 1em;
  49 }
  50
  51 #zoomArea {
  52   right: 1%;
  53   top: 1em;
  54   text-align: center;
  55 }
  56
  57 #zoomArea > input[type="button"],
  58 #fullscreenArea > input[type="button"],
  59 #trackButton,
  60 #settingsButton {
  61   font-size: 1.2em;
  62   font-weight: bold;
  63   width: 2em;
  64   height: 2em;
  65   border-radius: 2em;
  66   background-color: rgba(255, 255, 255, .25);
  67   background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
  68   color: #0000FF;
  69   border: none;
  70 }
  71
  72 #zoomArea > input[type="button"] {
  73   border: 2px solid #0000FF;
  74 }
  75
  76 #zoomArea > input[type="button"]:hover,
  77 #fullscreenArea > input[type="button"]:hover,
  78 #trackButton:hover,
  79 #settingsButton:hover {
  80   background-color: rgba(255, 255, 255, .8);
  81 }
  82
  83 #zoomArea > input[type="button"]:active,
  84 #fullscreenArea > input[type="button"]:active,
  85 #trackButton:active,
  86 #settingsButton:active {
  87   background-color: rgba(255, 255, 127, .8);
  88 }
  89
  90 #zoomArea > input[type="button"]:focus,
  91 #fullscreenArea > input[type="button"]:focus,
  92 #trackButton:focus,
  93 #settingsButton:focus {
  94   background-color: rgba(255, 255, 255, .5);
  95 }
  96
  97 #fullscreenArea {
  98   right: 1%;
  99   bottom: 2em;
 100   text-align: center;
 101 }
 102
 103 #zoomLevel {
 104   /* background-color: rgba(255, 255, 255, .8); */
 105   background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
 106   border-radius: .5em;
 107   padding: .5em .2em;
 108   margin: 2px 0;
 109 }
 110
 111 .menuDrawer {
 112   position: absolute;
 113   top: 0;
 114   bottom: 0;
 115   left: calc(-40ch - 1ch); /* account for padding */
 116   width: 40ch;
 117   background-color: rgba(15, 15, 15, .9);
 118   color: #CCCCCC;
 119   border: 0;
 120   padding: 0 .5ch; /* account for legend */
 121   margin: 0;
 122   z-index: 10;
 123   transition-property: left;
 124   transition-duration: 1s;
 125   transition-timing-function: ease;
 126 }
 127
 128 .menuDrawer:not(.hidden) {
 129   left: 0;
 130 }
 131
 132 @media screen and (max-width: 330px) {
 133   .menuDrawer {
 134     left: calc(-300px - 1ch); /* account for padding */
 135     width: 300px;
 136   }
 137 }
 138
 139 .menuDrawer > h2 {
 140   font-size: 1.2em;
 141   font-weight: bold;
 142   margin: .5em 0;
 143   background-color: rgba(255, 255, 255, .8);
 144   color: #404040;
 145   border-radius: 3px;
 146   padding: 2px;
 147 }
 148
 149 .menuDrawer > h2 > img {
 150   vertical-align: text-top;
 151   height: 1.2em;
 152 }
 153
 154 #trackData {
 155   margin: 0;
 156 }
 157
 158 #map, #track {
 159   position: fixed;
 160   border: 0;
 161   top: 0;
 162   left: 0;
 163   right: 0;
 164   bottom: 0;
 165 }
 166
 167 #map {
 168   z-index: 1;
 169 }
 170
 171 #track {
 172   z-index: 3;
 173 }
 174
 175 #action {
 176   position: absolute;
 177   bottom: 5px;
 178   left: .5em;
 179   margin: 0;
 180   z-index: 3;
 181   background-color: rgba(255, 255, 255, .8);
 182   border-radius: 3px;
 183   padding: 0 3px;
 184 }
 185
 186 #actionimg {
 187   vertical-align: text-bottom;
 188 }
 189
 190 .debugHide {
 191   display: none;
 192 }
 193
 194 .settingsSubTitle {
 195   margin: .5em 0 0;
 196   font-weight: bold;
 197 }
 198
 199 #copyright {
 200   bottom: 5px;
 201   right: .5em;
 202   margin: 0;
 203   font-size: small;
 204   opacity: .66;
 205   z-index: 2;
 206   background-color: rgba(255, 255, 255, 1);
 207   border-radius: 3px;
 208   padding: 0 3px;
 209 }
 210
 211 #copyright.hidden {
 212   opacity: 0;
 213 }
 214
 215 #dialogArea {
 216   top: 20%;
 217   right: 0;
 218   left: 0;
 219   width: 30ch;
 220   max-width: 92%;
 221   z-index: 10;
 222   background-color: rgba(255, 255, 255, .8);
 223   border: 0;
 224   margin: auto;
 225   padding: .5em;
 226   border-radius: 5px;
 227 }
 228
 229 #dialogArea.hidden {
 230   top: -100%;
 231 }
 232
 233 .dialogTitle {
 234   margin: 0 0 .5em;
 235   font-weight: bold;
 236 }
 237
 238 .dialogHelp {
 239   margin: .5em 0;
 240   font-size: small;
 241   opacity: .66;
 242 }
 243
 244 #uploadDesc {
 245   max-width: 95%;
 246 }
 247
 248 @media screen and (max-width: 500px),
 249        screen and (max-height: 500px) {
 250   body {
 251     font-size: 10px;
 252   }
 253   #menuArea {
 254     top: 2px;
 255     left: 2px;
 256   }
 257   #zoomArea {
 258     top: 2px;
 259     right: 2px;
 260   }
 261   #fullscreenArea {
 262     right: 2px;
 263     bottom: 20px;
 264   }
 265   #copyright {
 266     bottom: 1px;
 267     right: 1px;
 268     font-size: 8px;
 269   }
 270 }