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 /* non-standard touch screen detection for Mozilla browsers */
 147 .overlayArea:-moz-system-metric(touch-enabled),
 148 .menuDrawer:-moz-system-metric(touch-enabled) {
 149   font-size: 3mm;
 150   font-size: 3mozmm;
 151 }
 152 /* Standard, Media Queries Level 4 touch screen detection */
 153 @media (pointer:coarse) {
 154   .overlayArea,
 155   .menuDrawer {
 156     font-size: 16px;
 157   }
 158 }
 159
 160 .overlayArea input[type="button"],
 161 .overlayArea button,
 162 .overlayArea select,
 163 .menuDrawer input[type="button"],
 164 .menuDrawer button,
 165 .menuDrawer input[type="text"],
 166 .menuDrawer input[type="number"],
 167 .menuDrawer select {
 168   font-size: inherit;
 169 }
 170
 171 /* Menu Drawers */
 172 .menuDrawer {
 173   position: absolute;
 174   top: 0;
 175   bottom: 0;
 176   overflow: auto;
 177   transform: translateX(calc(-40ch - 1ch)); /* account for padding */
 178   width: 40ch;
 179   max-width: 95%; /* make sure we don't overflow the screen */
 180   border: 0;
 181   padding: 0 .5ch; /* account for legend */
 182   margin: 0;
 183   z-index: 10;
 184   transition-property: transform;
 185   transition-duration: 1s;
 186   transition-timing-function: ease;
 187 }
 188
 189 .menuDrawer:not(.hidden) {
 190   transform: translateX(0);
 191 }
 192
 193 @media screen and (max-width: 330px) {
 194   .menuDrawer {
 195     transform: translateX(calc(-300px - 1ch)); /* account for padding */
 196     width: 300px;
 197   }
 198 }
 199
 200 .menuDrawer p {
 201   margin: .5em 0;
 202 }
 203
 204 /* Menu title */
 205 .menuDrawer > h2 {
 206   font-size: 1.2em;
 207   font-weight: bold;
 208   margin: .5em 0;
 209   background-color: #CCCCCC;
 210   color: #404040;
 211   border-radius: 3px;
 212   padding: 2px;
 213 }
 214
 215 .menuDrawer > h2 > img {
 216   vertical-align: text-top;
 217   height: 1.2em;
 218 }
 219
 220 /* For optical conveniece, display an "x" for closing. */
 221 .menuDrawer > h2:after {
 222   content: '\00D7'; /* multiplication sign */
 223   display: inline-block;
 224   vertical-align: text-top;
 225   float: right;
 226   margin-top: 0;
 227   margin-right: .2em;
 228   font-size: .75em;
 229 }
 230
 231 .dialogHelp {
 232   margin: .5em 0;
 233   font-size: .8em;
 234   opacity: .66;
 235 }
 236
 237 #trackData {
 238   margin: 0;
 239 }
 240
 241 #trackDialogArea {
 242   border-top: 2px solid;
 243   border-bottom: 2px solid;
 244   padding: 3px 0;
 245 }
 246
 247 #uploadDesc {
 248   max-width: 95%;
 249 }
 250
 251 /* Secondary UI: menu drawers, full screen overlays, etc. */
 252 .secondaryUI {
 253   background-color: rgba(15, 15, 15, .9);
 254   color: #CCCCCC;
 255 }
 256
 257 /* Custom checkbox design */
 258 .secondaryUI input[type="checkbox"] {
 259   display: none;
 260 }
 261
 262 .secondaryUI input[type="checkbox"] + label:before {
 263   content: '\00A0'; /* non-breaking space */
 264   display: inline-block;
 265   width: 1.2em;
 266   height: 1.2em;
 267   margin-right: .3em;
 268   text-align: center;
 269   vertical-align: middle;
 270   background-color: rgba(204, 204, 204, .2);
 271   border: 1px solid #CCCCCC;
 272   border-radius: 3px;
 273 }
 274
 275 .secondaryUI input[type="checkbox"]:hover + label:before {
 276   background-color: rgba(204, 204, 204, .4);
 277   border: 1px solid #FFFFFF;
 278 }
 279 .secondaryUI input[type="checkbox"]:hover + label {
 280   color: #FFFFFF;
 281   position:relative;
 282   height: 1.2em;
 283 }
 284
 285 .secondaryUI input[type="checkbox"]:active + label:before {
 286   background-color: rgba(204, 204, 255, .3);
 287   border: 1px solid #FFCCAA;
 288 }
 289 .secondaryUI input[type="checkbox"]:active + label {
 290   color: #FFCCAA;
 291 }
 292
 293 .secondaryUI input[type="checkbox"]:checked + label:before {
 294   content: '\2714'; /* tick mark */
 295 }
 296
 297 /* Custom button design */
 298 .secondaryUI input[type="button"],
 299 .secondaryUI button {
 300   text-align: center;
 301   vertical-align: middle;
 302   background-image: none;
 303   background-color: rgba(204, 204, 204, .2);
 304   color: #CCCCCC;
 305   padding: 1px .5em;
 306   border: 1px solid #CCCCCC;
 307   border-radius: 3px;
 308 }
 309
 310 .secondaryUI input[type="button"]:disabled,
 311 .secondaryUI button:disabled {
 312   background-color: rgba(204, 204, 204, .1);
 313   color: rgba(204, 204, 204, .5);
 314   border: 1px solid rgba(255, 255, 255, .5);
 315 }
 316
 317 .secondaryUI input[type="button"]:not(:disabled):hover,
 318 .secondaryUI button:not(:disabled):hover {
 319   background-color: rgba(204, 204, 204, .4);
 320   border: 1px solid #FFFFFF;
 321 }
 322
 323 .secondaryUI input[type="button"]:not(:disabled):active,
 324 .secondaryUI button:not(:disabled):active {
 325   background-color: rgba(204, 204, 255, .3);
 326   color: #FFCCAA;
 327   padding-top: 2px;
 328   padding-right: calc(.5em - 1px);
 329   padding-bottom: 0;
 330   padding-left: calc(.5em + 1px);
 331 }
 332
 333 /* Custom select design */
 334 .secondaryUI select {
 335   text-align: left;
 336   vertical-align: middle;
 337   background-image: none;
 338   background-color: rgba(204, 204, 204, .2);
 339   color: #CCCCCC;
 340   padding: 0 .5em;
 341   border: 1px solid #CCCCCC;
 342   border-radius: 3px;
 343 }
 344
 345 .secondaryUI select:hover {
 346   background-color: rgba(204, 204, 204, .4);
 347   border: 1px solid #FFFFFF;
 348 }
 349
 350 .secondaryUI select:active {
 351   background-color: rgba(204, 204, 255, .3);
 352   color: #FFCCAA;
 353 }
 354
 355 .secondaryUI option:checked:not(:hover) {
 356   background-color: rgba(204, 204, 204, .1);
 357 }
 358
 359 .secondaryUI option:hover {
 360   background-color: #CCCCCC;
 361   color: #404040;
 362 }
 363
 364 /* Custom textbox design */
 365 .secondaryUI input[type="text"],
 366 .secondaryUI input[type="number"] {
 367   font-size: 1em;
 368   vertical-align: middle;
 369   background-image: none;
 370   background-color: rgba(204, 204, 204, .7);
 371   color: #404040;
 372   padding: 1px .5em;
 373   border: 1px solid #CCCCCC;
 374   border-radius: 3px;
 375 }
 376
 377 .secondaryUI input[type="text"] {
 378   text-align: left;
 379 }
 380
 381 .secondaryUI input[type="number"] {
 382   text-align: right;
 383 }
 384
 385 .secondaryUI input[type="text"]:disabled,
 386 .secondaryUI input[type="number"]:disabled {
 387   background-color: rgba(204, 204, 204, .1);
 388   color: rgba(204, 204, 204, .5);
 389   border: 1px solid rgba(255, 255, 255, .5);
 390 }
 391
 392 .secondaryUI input[type="text"]:not(:disabled):hover,
 393 .secondaryUI input[type="number"]:not(:disabled):hover {
 394   border: 1px solid #FFFFFF;
 395 }
 396
 397 .secondaryUI input[type="text"]:not(:disabled):focus,
 398 .secondaryUI input[type="number"]:not(:disabled):focus {
 399   background-color: rgba(204, 204, 255, .8);
 400   border: 1px solid #FFFFFF;
 401   color: #202020;
 402 }
 403
 404 /* custom style for paragraphs and links */
 405 .secondaryUI p.subTitle {
 406   margin: .75em 0 .5em;
 407   font-weight: bold;
 408 }
 409
 410 .secondaryUI a:link {
 411   color: #DDDDDD;
 412 }
 413
 414 .secondaryUI a:visited {
 415   color: #AAAAAA;
 416 }
 417
 418 .secondaryUI a:hover {
 419   color: #FFFFFF;
 420 }
 421
 422 .overlayArea .minorbutton {
 423   font-size: 75%;
 424   border: none !important;
 425   padding: 0 2px;
 426 }
 427 .overlayArea .minorbutton:not(:disabled):active {
 428   padding: 0 1px 0 3px;
 429 }
 430 .overlayArea .statusmsg {
 431   font-size: 75%;
 432 }
 433 .overlayArea .statusmsg.error {
 434   color: #FF8080;
 435 }
 436
 437 #loginerror {
 438   color: red;
 439   font-weight: bold;
 440   padding: .5em;
 441 }
 442
 443 /* dialog area - for loading error and welcome messages */
 444 #dialogArea {
 445   position: absolute;
 446   top: 20%;
 447   right: 0;
 448   left: 0;
 449   width: 50ch;
 450   max-width: 92%;
 451   z-index: 10;
 452   background-color: rgba(255, 255, 255, .8);
 453   border: 0;
 454   margin: auto;
 455   padding: .5em;
 456   border-radius: 5px;
 457 }
 458
 459 #dialogArea.hidden {
 460   top: -1000%;
 461   display: block;
 462 }
 463
 464 .dialogTitle {
 465   margin: 0 0 .5em;
 466   font-weight: bold;
 467 }
 468
 469 .dialogButtonLine {
 470   text-align: center;
 471 }
 472
 473 /* full screen overlay - library, etc. */
 474 .fullScreenOverlay {
 475   position: absolute;
 476   top: 1%;
 477   bottom: 1%;
 478   right: 1%;
 479   left: 1%;
 480   z-index: 10;
 481   background-color: rgba(15, 15, 15, 1.0);
 482   border: 0;
 483   margin: auto;
 484   padding: .5em;
 485   border-radius: 5px;
 486 }
 487
 488 .fullScreenOverlay.hidden {
 489   top: -1000%;
 490   bottom: auto;
 491   height: 90%;
 492   display: block;
 493 }
 494
 495 .fullScreenOverlay > .closeButtonContainer {
 496   position: absolute;
 497   top: 0;
 498   right: 0;
 499   margin: 0;
 500   padding: 0.5em;
 501   text-align: right;
 502 }
 503 /*
 504 .fullScreenOverlay > .closeButtonContainer > .closeButton {
 505   font-size: 2em;
 506 }
 507 */
 508
 509 .fullScreenOverlay p {
 510   margin: 0.5em 0;
 511 }
 512
 513 .fullScreenOverlay > p:first-child {
 514   margin-top: 0;
 515   /* leave space for close button */
 516   margin-right: 1.5em;
 517 }
 518
 519 #libTrackList {
 520   overflow: auto;
 521   /* 2em is top/bottom margin, and one line is shown above and below, with .5em margin each */
 522   height: calc(100% - 5em);
 523 }
 524
 525 #libTrackPages {
 526   margin-bottom: 0;
 527 }
 528
 529 /* small screen media adaptations */
 530 @media screen and (max-width: 500px),
 531        screen and (max-height: 500px) {
 532   body {
 533     font-size: 10px;
 534   }
 535   #menuArea {
 536     top: 2px;
 537     left: 2px;
 538   }
 539   #zoomArea {
 540     top: 2px;
 541     right: 2px;
 542   }
 543   #fullscreenArea {
 544     right: 2px;
 545     bottom: 20px;
 546   }
 547   #copyright {
 548     bottom: 1px;
 549     right: 1px;
 550   }
 551 }