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     left: 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 .dialogTitle {
 223   margin: 0 0 .5em;
 224   font-weight: bold;
 225 }
 226
 227 .dialogHelp {
 228   margin: .5em 0;
 229   font-size: .8em;
 230   opacity: .66;
 231 }
 232
 233 #trackData {
 234   margin: 0;
 235 }
 236
 237 #trackDialogArea {
 238   border-top: 2px solid;
 239   border-bottom: 2px solid;
 240   padding: 3px 0;
 241 }
 242
 243 #uploadDesc {
 244   max-width: 95%;
 245 }
 246
 247 /* Secondary UI: menu drawers, full screen overlays, etc. */
 248 .secondaryUI {
 249   background-color: rgba(15, 15, 15, .9);
 250   color: #CCCCCC;
 251 }
 252
 253 /* Custom checkbox design */
 254 .secondaryUI input[type="checkbox"] {
 255   display: none;
 256 }
 257
 258 .secondaryUI input[type="checkbox"] + label:before {
 259   content: '\00A0'; /* non-breaking space */
 260   display: inline-block;
 261   width: 1.2em;
 262   height: 1.2em;
 263   margin-right: .3em;
 264   text-align: center;
 265   vertical-align: middle;
 266   background-color: rgba(204, 204, 204, .2);
 267   border: 1px solid #CCCCCC;
 268   border-radius: 3px;
 269 }
 270
 271 .secondaryUI input[type="checkbox"]:hover + label:before {
 272   background-color: rgba(204, 204, 204, .4);
 273   border: 1px solid #FFFFFF;
 274 }
 275 .secondaryUI input[type="checkbox"]:hover + label {
 276   color: #FFFFFF;
 277   position:relative;
 278   height: 1.2em;
 279 }
 280
 281 .secondaryUI input[type="checkbox"]:active + label:before {
 282   background-color: rgba(204, 204, 255, .3);
 283   border: 1px solid #FFCCAA;
 284 }
 285 .secondaryUI input[type="checkbox"]:active + label {
 286   color: #FFCCAA;
 287 }
 288
 289 .secondaryUI input[type="checkbox"]:checked + label:before {
 290   content: '\2714'; /* tick mark */
 291 }
 292
 293 /* Custom button design */
 294 .secondaryUI input[type="button"],
 295 .secondaryUI button {
 296   text-align: center;
 297   vertical-align: middle;
 298   background-image: none;
 299   background-color: rgba(204, 204, 204, .2);
 300   color: #CCCCCC;
 301   padding: 1px .5em;
 302   border: 1px solid #CCCCCC;
 303   border-radius: 3px;
 304 }
 305
 306 .secondaryUI input[type="button"]:disabled,
 307 .secondaryUI button: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 .secondaryUI input[type="button"]:not(:disabled):hover,
 314 .secondaryUI button:not(:disabled):hover {
 315   background-color: rgba(204, 204, 204, .4);
 316   border: 1px solid #FFFFFF;
 317 }
 318
 319 .secondaryUI input[type="button"]:not(:disabled):active,
 320 .secondaryUI button:not(:disabled):active {
 321   background-color: rgba(204, 204, 255, .3);
 322   color: #FFCCAA;
 323   padding-top: 2px;
 324   padding-right: calc(.5em - 1px);
 325   padding-bottom: 0;
 326   padding-left: calc(.5em + 1px);
 327 }
 328
 329 /* Custom select design */
 330 .secondaryUI select {
 331   text-align: left;
 332   vertical-align: middle;
 333   background-image: none;
 334   background-color: rgba(204, 204, 204, .2);
 335   color: #CCCCCC;
 336   padding: 0 .5em;
 337   border: 1px solid #CCCCCC;
 338   border-radius: 3px;
 339 }
 340
 341 .secondaryUI select:hover {
 342   background-color: rgba(204, 204, 204, .4);
 343   border: 1px solid #FFFFFF;
 344 }
 345
 346 .secondaryUI select:active {
 347   background-color: rgba(204, 204, 255, .3);
 348   color: #FFCCAA;
 349 }
 350
 351 .secondaryUI option:checked:not(:hover) {
 352   background-color: rgba(204, 204, 204, .1);
 353 }
 354
 355 .secondaryUI option:hover {
 356   background-color: #CCCCCC;
 357   color: #404040;
 358 }
 359
 360 /* Custom textbox design */
 361 .secondaryUI input[type="text"],
 362 .secondaryUI input[type="number"] {
 363   font-size: 1em;
 364   vertical-align: middle;
 365   background-image: none;
 366   background-color: rgba(204, 204, 204, .7);
 367   color: #404040;
 368   padding: 1px .5em;
 369   border: 1px solid #CCCCCC;
 370   border-radius: 3px;
 371 }
 372
 373 .secondaryUI input[type="text"] {
 374   text-align: left;
 375 }
 376
 377 .secondaryUI input[type="number"] {
 378   text-align: right;
 379 }
 380
 381 .secondaryUI input[type="text"]:disabled,
 382 .secondaryUI input[type="number"]:disabled {
 383   background-color: rgba(204, 204, 204, .1);
 384   color: rgba(204, 204, 204, .5);
 385   border: 1px solid rgba(255, 255, 255, .5);
 386 }
 387
 388 .secondaryUI input[type="text"]:not(:disabled):hover,
 389 .secondaryUI input[type="number"]:not(:disabled):hover {
 390   border: 1px solid #FFFFFF;
 391 }
 392
 393 .secondaryUI input[type="text"]:not(:disabled):focus,
 394 .secondaryUI input[type="number"]:not(:disabled):focus {
 395   background-color: rgba(204, 204, 255, .8);
 396   border: 1px solid #FFFFFF;
 397   color: #202020;
 398 }
 399
 400 /* custom style for paragraphs and links */
 401 .secondaryUI p.subTitle {
 402   margin: .75em 0 .5em;
 403   font-weight: bold;
 404 }
 405
 406 .secondaryUI a:link {
 407   color: #DDDDDD;
 408 }
 409
 410 .secondaryUI a:visited {
 411   color: #AAAAAA;
 412 }
 413
 414 .secondaryUI a:hover {
 415   color: #FFFFFF;
 416 }
 417
 418 /* dialog area - only used for loading error */
 419 #dialogArea {
 420   top: 20%;
 421   right: 0;
 422   left: 0;
 423   width: 30ch;
 424   max-width: 92%;
 425   z-index: 10;
 426   background-color: rgba(255, 255, 255, .8);
 427   border: 0;
 428   margin: auto;
 429   padding: .5em;
 430   border-radius: 5px;
 431 }
 432
 433 #dialogArea.hidden {
 434   top: -100%;
 435   display: block;
 436 }
 437
 438 /* full screen overlay - library, etc. */
 439 .fullScreenOverlay {
 440   position: absolute;
 441   top: 1%;
 442   bottom: 1%;
 443   right: 1%;
 444   left: 1%;
 445   z-index: 10;
 446   background-color: rgba(15, 15, 15, 1.0);
 447   border: 0;
 448   margin: auto;
 449   padding: .5em;
 450   border-radius: 5px;
 451 }
 452
 453 .fullScreenOverlay.hidden {
 454   top: -1000%;
 455   bottom: auto;
 456   height: 90%;
 457   display: block;
 458 }
 459
 460 .fullScreenOverlay > .closeButtonContainer {
 461   position: absolute;
 462   top: 0;
 463   right: 0;
 464   margin: 0;
 465   padding: 0.5em;
 466   text-align: right;
 467 }
 468 /*
 469 .fullScreenOverlay > .closeButtonContainer > .closeButton {
 470   font-size: 2em;
 471 }
 472 */
 473
 474 .fullScreenOverlay p {
 475   margin: 0.5em 0;
 476 }
 477
 478 .fullScreenOverlay > p:first-child {
 479   margin-top: 0;
 480   /* leave space for close button */
 481   margin-right: 1.5em;
 482 }
 483
 484 #libTrackList {
 485   overflow: auto;
 486   /* 2em is top/bottom margin, and one line is shown above and below, with .5em margin each */
 487   height: calc(100% - 5em);
 488 }
 489
 490 #libTrackPages {
 491   margin-bottom: 0;
 492 }
 493
 494 /* small screen media adaptations */
 495 @media screen and (max-width: 500px),
 496        screen and (max-height: 500px) {
 497   body {
 498     font-size: 10px;
 499   }
 500   #menuArea {
 501     top: 2px;
 502     left: 2px;
 503   }
 504   #zoomArea {
 505     top: 2px;
 506     right: 2px;
 507   }
 508   #fullscreenArea {
 509     right: 2px;
 510     bottom: 20px;
 511   }
 512   #copyright {
 513     bottom: 1px;
 514     right: 1px;
 515   }
 516 }