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"],
  36 #dialogArea input[type="text"],
  37 #dialogArea select,
  38 .overlayArea input[type="button"],
  39 .overlayArea select,
  40 .menuDrawer input[type="button"],
  41 .menuDrawer select {
  42   font-size: inherit;
  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 > p {
 140   margin: .5em 0;
 141 }
 142
 143 /* Menu title */
 144 .menuDrawer > h2 {
 145   font-size: 1.2em;
 146   font-weight: bold;
 147   margin: .5em 0;
 148   background-color: #CCCCCC;
 149   color: #404040;
 150   border-radius: 3px;
 151   padding: 2px;
 152 }
 153
 154 .menuDrawer > h2 > img {
 155   vertical-align: text-top;
 156   height: 1.2em;
 157 }
 158
 159 /* For optical conveniece, display an "x" for closing. */
 160 .menuDrawer > h2:after {
 161   content: '\00D7'; /* multiplication sign */
 162   display: inline-block;
 163   vertical-align: text-top;
 164   float: right;
 165   margin-top: 0;
 166   margin-right: .2em;
 167   font-size: .75em;
 168 }
 169
 170 /* Custom checkbox design */
 171 .menuDrawer input[type="checkbox"] {
 172   display: none;
 173 }
 174
 175 .menuDrawer input[type="checkbox"] + label:before {
 176   content: '\00A0'; /* non-breaking space */
 177   display: inline-block;
 178   width: 1.2em;
 179   height: 1.2em;
 180   margin-right: .3em;
 181   text-align: center;
 182   vertical-align: middle;
 183   background-color: rgba(204, 204, 204, .2);
 184   border: 1px solid #CCCCCC;
 185   border-radius: 3px;
 186 }
 187
 188 .menuDrawer input[type="checkbox"]:hover + label:before {
 189   background-color: rgba(204, 204, 204, .4);
 190   border: 1px solid #FFFFFF;
 191 }
 192 .menuDrawer input[type="checkbox"]:hover + label {
 193   color: #FFFFFF;
 194   position:relative;
 195   height: 1.2em;
 196 }
 197
 198 .menuDrawer input[type="checkbox"]:active + label:before {
 199   background-color: rgba(204, 204, 255, .3);
 200   border: 1px solid #FFCCAA;
 201 }
 202 .menuDrawer input[type="checkbox"]:active + label {
 203   color: #FFCCAA;
 204 }
 205
 206 .menuDrawer input[type="checkbox"]:checked + label:before {
 207   content: '\2714'; /* tick mark */
 208 }
 209
 210 /* Custom button design */
 211 .menuDrawer input[type="button"] {
 212   text-align: center;
 213   vertical-align: middle;
 214   background-image: none;
 215   background-color: rgba(204, 204, 204, .2);
 216   color: #CCCCCC;
 217   padding: 1px .5em;
 218   border: 1px solid #CCCCCC;
 219   border-radius: 3px;
 220 }
 221
 222 .menuDrawer input[type="button"]:hover {
 223   background-color: rgba(204, 204, 204, .4);
 224   border: 1px solid #FFFFFF;
 225 }
 226
 227 .menuDrawer input[type="button"]:active {
 228   background-color: rgba(204, 204, 255, .3);
 229   color: #FFCCAA;
 230   padding-top: 2px;
 231   padding-right: calc(.5em - 1px);
 232   padding-bottom: 0;
 233   padding-left: calc(.5em + 1px);
 234 }
 235
 236 /* Custom select design */
 237 .menuDrawer select {
 238   text-align: left;
 239   vertical-align: middle;
 240   background-image: none;
 241   background-color: rgba(204, 204, 204, .2);
 242   color: #CCCCCC;
 243   padding: 0 .5em;
 244   border: 1px solid #CCCCCC;
 245   border-radius: 3px;
 246 }
 247
 248 .menuDrawer select:hover {
 249   background-color: rgba(204, 204, 204, .4);
 250   border: 1px solid #FFFFFF;
 251 }
 252
 253 .menuDrawer select:active {
 254   background-color: rgba(204, 204, 255, .3);
 255   color: #FFCCAA;
 256 }
 257
 258 .menuDrawer option:checked:not(:hover) {
 259   background-color: rgba(204, 204, 204, .1);
 260 }
 261
 262 .menuDrawer option:hover {
 263   background-color: #CCCCCC;
 264   color: #404040;
 265 }
 266
 267 #trackData {
 268   margin: 0;
 269 }
 270
 271 #map, #track {
 272   position: fixed;
 273   border: 0;
 274   top: 0;
 275   left: 0;
 276   right: 0;
 277   bottom: 0;
 278 }
 279
 280 #map {
 281   z-index: 1;
 282 }
 283
 284 #track {
 285   z-index: 3;
 286 }
 287
 288 #action {
 289   position: absolute;
 290   bottom: 5px;
 291   left: .5em;
 292   margin: 0;
 293   z-index: 3;
 294   background-color: rgba(255, 255, 255, .8);
 295   border-radius: 3px;
 296   padding: 0 3px;
 297 }
 298
 299 #actionimg {
 300   vertical-align: text-bottom;
 301 }
 302
 303 .debugHide {
 304   display: none;
 305 }
 306
 307 .settingsSubTitle {
 308   margin: .5em 0 0;
 309   font-weight: bold;
 310 }
 311
 312 #copyright {
 313   bottom: 5px;
 314   right: .5em;
 315   margin: 0;
 316   font-size: small;
 317   opacity: .66;
 318   z-index: 2;
 319   background-color: rgba(255, 255, 255, 1);
 320   border-radius: 3px;
 321   padding: 0 3px;
 322 }
 323
 324 #copyright.hidden {
 325   opacity: 0;
 326 }
 327
 328 #dialogArea {
 329   top: 20%;
 330   right: 0;
 331   left: 0;
 332   width: 30ch;
 333   max-width: 92%;
 334   z-index: 10;
 335   background-color: rgba(255, 255, 255, .8);
 336   border: 0;
 337   margin: auto;
 338   padding: .5em;
 339   border-radius: 5px;
 340 }
 341
 342 #dialogArea.hidden {
 343   top: -100%;
 344 }
 345
 346 .dialogTitle {
 347   margin: 0 0 .5em;
 348   font-weight: bold;
 349 }
 350
 351 .dialogHelp {
 352   margin: .5em 0;
 353   font-size: small;
 354   opacity: .66;
 355 }
 356
 357 #uploadDesc {
 358   max-width: 95%;
 359 }
 360
 361 @media screen and (max-width: 500px),
 362        screen and (max-height: 500px) {
 363   body {
 364     font-size: 10px;
 365   }
 366   #menuArea {
 367     top: 2px;
 368     left: 2px;
 369   }
 370   #zoomArea {
 371     top: 2px;
 372     right: 2px;
 373   }
 374   #fullscreenArea {
 375     right: 2px;
 376     bottom: 20px;
 377   }
 378   #copyright {
 379     bottom: 1px;
 380     right: 1px;
 381     font-size: 8px;
 382   }
 383 }