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