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 .hidden {
  16   display: none;
  17 }
  18
  19 #dialogArea,
  20 .overlayArea {
  21   position: absolute;
  22   z-index: 5;
  23   transition-property: opacity;
  24   transition-duration: .2s;
  25 }
  26
  27 #dialogArea.hidden,
  28 .overlayArea.hidden {
  29   opacity: 0;
  30   transition-duration: 1s;
  31   display: block;
  32 }
  33
  34 #dialogArea:-moz-system-metric(touch-enabled),
  35 .overlayArea:-moz-system-metric(touch-enabled),
  36 .menuDrawer:-moz-system-metric(touch-enabled) {
  37   font-size: 3mozmm;
  38 }
  39
  40 #dialogArea input[type="button"],
  41 #dialogArea button,
  42 #dialogArea input[type="text"],
  43 #dialogArea select,
  44 .overlayArea input[type="button"],
  45 .overlayArea button,
  46 .overlayArea select,
  47 .menuDrawer input[type="button"],
  48 .menuDrawer button,
  49 .menuDrawer select {
  50   font-size: inherit;
  51 }
  52
  53 #menuArea {
  54   /* width: 30em; */
  55   left: 1%;
  56   top: 1em;
  57 }
  58
  59 #zoomArea {
  60   right: 1%;
  61   top: 1em;
  62   text-align: center;
  63 }
  64
  65 #zoomArea > input[type="button"],
  66 #fullscreenArea > input[type="button"],
  67 #trackButton,
  68 #settingsButton {
  69   font-size: 1.2em;
  70   font-weight: bold;
  71   width: 2em;
  72   height: 2em;
  73   border-radius: 2em;
  74   background-color: rgba(255, 255, 255, .25);
  75   background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
  76   color: #0000FF;
  77   border: none;
  78 }
  79
  80 #zoomArea > input[type="button"] {
  81   border: 2px solid #0000FF;
  82 }
  83
  84 #zoomArea > input[type="button"]:hover,
  85 #fullscreenArea > input[type="button"]:hover,
  86 #trackButton:hover,
  87 #settingsButton:hover {
  88   background-color: rgba(255, 255, 255, .8);
  89 }
  90
  91 #zoomArea > input[type="button"]:active,
  92 #fullscreenArea > input[type="button"]:active,
  93 #trackButton:active,
  94 #settingsButton:active {
  95   background-color: rgba(255, 255, 127, .8);
  96 }
  97
  98 #zoomArea > input[type="button"]:focus,
  99 #fullscreenArea > input[type="button"]:focus,
 100 #trackButton:focus,
 101 #settingsButton:focus {
 102   background-color: rgba(255, 255, 255, .5);
 103 }
 104
 105 #fullscreenArea {
 106   right: 1%;
 107   bottom: 2em;
 108   text-align: center;
 109 }
 110
 111 #zoomLevel {
 112   /* background-color: rgba(255, 255, 255, .8); */
 113   background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
 114   border-radius: .5em;
 115   padding: .5em .2em;
 116   margin: 2px 0;
 117 }
 118
 119 .menuDrawer {
 120   position: absolute;
 121   top: 0;
 122   bottom: 0;
 123   transform: translateX(calc(-40ch - 1ch)); /* account for padding */
 124   width: 40ch;
 125   max-width: 95%; /* make sure we don't overflow the screen */
 126   background-color: rgba(15, 15, 15, .9);
 127   color: #CCCCCC;
 128   border: 0;
 129   padding: 0 .5ch; /* account for legend */
 130   margin: 0;
 131   z-index: 10;
 132   transition-property: transform;
 133   transition-duration: 1s;
 134   transition-timing-function: ease;
 135 }
 136
 137 .menuDrawer:not(.hidden) {
 138   transform: translateX(0);
 139 }
 140
 141 @media screen and (max-width: 330px) {
 142   .menuDrawer {
 143     left: calc(-300px - 1ch); /* account for padding */
 144     width: 300px;
 145   }
 146 }
 147
 148 .menuDrawer p {
 149   margin: .5em 0;
 150 }
 151
 152 /* Menu title */
 153 .menuDrawer > h2 {
 154   font-size: 1.2em;
 155   font-weight: bold;
 156   margin: .5em 0;
 157   background-color: #CCCCCC;
 158   color: #404040;
 159   border-radius: 3px;
 160   padding: 2px;
 161 }
 162
 163 .menuDrawer > h2 > img {
 164   vertical-align: text-top;
 165   height: 1.2em;
 166 }
 167
 168 /* For optical conveniece, display an "x" for closing. */
 169 .menuDrawer > h2:after {
 170   content: '\00D7'; /* multiplication sign */
 171   display: inline-block;
 172   vertical-align: text-top;
 173   float: right;
 174   margin-top: 0;
 175   margin-right: .2em;
 176   font-size: .75em;
 177 }
 178
 179 /* Custom checkbox design */
 180 .menuDrawer input[type="checkbox"] {
 181   display: none;
 182 }
 183
 184 .menuDrawer input[type="checkbox"] + label:before {
 185   content: '\00A0'; /* non-breaking space */
 186   display: inline-block;
 187   width: 1.2em;
 188   height: 1.2em;
 189   margin-right: .3em;
 190   text-align: center;
 191   vertical-align: middle;
 192   background-color: rgba(204, 204, 204, .2);
 193   border: 1px solid #CCCCCC;
 194   border-radius: 3px;
 195 }
 196
 197 .menuDrawer input[type="checkbox"]:hover + label:before {
 198   background-color: rgba(204, 204, 204, .4);
 199   border: 1px solid #FFFFFF;
 200 }
 201 .menuDrawer input[type="checkbox"]:hover + label {
 202   color: #FFFFFF;
 203   position:relative;
 204   height: 1.2em;
 205 }
 206
 207 .menuDrawer input[type="checkbox"]:active + label:before {
 208   background-color: rgba(204, 204, 255, .3);
 209   border: 1px solid #FFCCAA;
 210 }
 211 .menuDrawer input[type="checkbox"]:active + label {
 212   color: #FFCCAA;
 213 }
 214
 215 .menuDrawer input[type="checkbox"]:checked + label:before {
 216   content: '\2714'; /* tick mark */
 217 }
 218
 219 /* Custom button design */
 220 .menuDrawer input[type="button"],
 221 .menuDrawer button {
 222   text-align: center;
 223   vertical-align: middle;
 224   background-image: none;
 225   background-color: rgba(204, 204, 204, .2);
 226   color: #CCCCCC;
 227   padding: 1px .5em;
 228   border: 1px solid #CCCCCC;
 229   border-radius: 3px;
 230 }
 231
 232 .menuDrawer input[type="button"]:disabled,
 233 .menuDrawer button:disabled {
 234   background-color: rgba(204, 204, 204, .1);
 235   color: rgba(204, 204, 204, .5);
 236   border: 1px solid rgba(255, 255, 255, .5);
 237 }
 238
 239 .menuDrawer input[type="button"]:not(:disabled):hover,
 240 .menuDrawer button:not(:disabled):hover {
 241   background-color: rgba(204, 204, 204, .4);
 242   border: 1px solid #FFFFFF;
 243 }
 244
 245 .menuDrawer input[type="button"]:not(:disabled):active,
 246 .menuDrawer button:not(:disabled):active {
 247   background-color: rgba(204, 204, 255, .3);
 248   color: #FFCCAA;
 249   padding-top: 2px;
 250   padding-right: calc(.5em - 1px);
 251   padding-bottom: 0;
 252   padding-left: calc(.5em + 1px);
 253 }
 254
 255 /* Custom select design */
 256 .menuDrawer select {
 257   text-align: left;
 258   vertical-align: middle;
 259   background-image: none;
 260   background-color: rgba(204, 204, 204, .2);
 261   color: #CCCCCC;
 262   padding: 0 .5em;
 263   border: 1px solid #CCCCCC;
 264   border-radius: 3px;
 265 }
 266
 267 .menuDrawer select:hover {
 268   background-color: rgba(204, 204, 204, .4);
 269   border: 1px solid #FFFFFF;
 270 }
 271
 272 .menuDrawer select:active {
 273   background-color: rgba(204, 204, 255, .3);
 274   color: #FFCCAA;
 275 }
 276
 277 .menuDrawer option:checked:not(:hover) {
 278   background-color: rgba(204, 204, 204, .1);
 279 }
 280
 281 .menuDrawer option:hover {
 282   background-color: #CCCCCC;
 283   color: #404040;
 284 }
 285
 286 .menuDrawer input[type="text"],
 287 .menuDrawer input[type="number"] {
 288   font-size: 1em;
 289   vertical-align: middle;
 290   background-image: none;
 291   background-color: rgba(204, 204, 204, .7);
 292   color: #404040;
 293   padding: 1px .5em;
 294   border: 1px solid #CCCCCC;
 295   border-radius: 3px;
 296 }
 297
 298 .menuDrawer input[type="text"] {
 299   text-align: left;
 300 }
 301
 302 .menuDrawer input[type="number"] {
 303   text-align: right;
 304 }
 305
 306 .menuDrawer input[type="text"]:disabled,
 307 .menuDrawer input[type="number"]:disabled {
 308   background-color: rgba(204, 204, 204, .1);
 309   color: rgba(204, 204, 204, .5);
 310   border: 1px solid rgba(255, 255, 255, .5);
 311 }
 312
 313 .menuDrawer input[type="text"]:not(:disabled):hover,
 314 .menuDrawer input[type="number"]:not(:disabled):hover {
 315   border: 1px solid #FFFFFF;
 316 }
 317
 318 .menuDrawer input[type="text"]:not(:disabled):focus,
 319 .menuDrawer input[type="number"]:not(:disabled):focus {
 320   background-color: rgba(204, 204, 255, .8);
 321   border: 1px solid #FFFFFF;
 322   color: #202020;
 323 }
 324
 325 .menuDrawer p.subTitle {
 326   margin: .75em 0 .5em;
 327   font-weight: bold;
 328 }
 329
 330 #trackData {
 331   margin: 0;
 332 }
 333
 334 #trackDialogArea {
 335   border-top: 2px solid;
 336   border-bottom: 2px solid;
 337   padding: 3px 0;
 338 }
 339
 340 #map, #track {
 341   position: fixed;
 342   border: 0;
 343   top: 0;
 344   left: 0;
 345   right: 0;
 346   bottom: 0;
 347 }
 348
 349 #map {
 350   z-index: 1;
 351 }
 352
 353 #track {
 354   z-index: 3;
 355 }
 356
 357 #action {
 358   position: absolute;
 359   bottom: 5px;
 360   left: .5em;
 361   margin: 0;
 362   z-index: 3;
 363   background-color: rgba(255, 255, 255, .8);
 364   border-radius: 3px;
 365   padding: 0 3px;
 366 }
 367
 368 #actionimg {
 369   vertical-align: text-bottom;
 370 }
 371
 372 .debugHide {
 373   display: none;
 374 }
 375
 376 #copyright {
 377   bottom: 5px;
 378   right: .5em;
 379   margin: 0;
 380   font-size: .8em;
 381   opacity: .66;
 382   z-index: 2;
 383   background-color: rgba(255, 255, 255, 1);
 384   border-radius: 3px;
 385   padding: 0 3px;
 386 }
 387
 388 #copyright.hidden {
 389   opacity: 0;
 390   display: block;
 391 }
 392
 393 #dialogArea {
 394   top: 20%;
 395   right: 0;
 396   left: 0;
 397   width: 30ch;
 398   max-width: 92%;
 399   z-index: 10;
 400   background-color: rgba(255, 255, 255, .8);
 401   border: 0;
 402   margin: auto;
 403   padding: .5em;
 404   border-radius: 5px;
 405 }
 406
 407 #dialogArea.hidden {
 408   top: -100%;
 409   display: block;
 410 }
 411
 412 .dialogTitle {
 413   margin: 0 0 .5em;
 414   font-weight: bold;
 415 }
 416
 417 .dialogHelp {
 418   margin: .5em 0;
 419   font-size: .8em;
 420   opacity: .66;
 421 }
 422
 423 #uploadDesc {
 424   max-width: 95%;
 425 }
 426
 427 @media screen and (max-width: 500px),
 428        screen and (max-height: 500px) {
 429   body {
 430     font-size: 10px;
 431   }
 432   #menuArea {
 433     top: 2px;
 434     left: 2px;
 435   }
 436   #zoomArea {
 437     top: 2px;
 438     right: 2px;
 439   }
 440   #fullscreenArea {
 441     right: 2px;
 442     bottom: 20px;
 443   }
 444   #copyright {
 445     bottom: 1px;
 446     right: 1px;
 447   }
 448 }