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