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