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