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   left: calc(-40ch - 1ch); /* account for padding */
 116   width: 40ch;
 117   background-color: rgba(15, 15, 15, .9);
 118   color: #CCCCCC;
 119   border: 0;
 120   padding: 0 .5ch; /* account for legend */
 121   margin: 0;
 122   z-index: 10;
 123   transition-property: left;
 124   transition-duration: 1s;
 125   transition-timing-function: ease;
 126 }
 127
 128 .menuDrawer:not(.hidden) {
 129   left: 0;
 130 }
 131
 132 @media screen and (max-width: 330px) {
 133   .menuDrawer {
 134     left: calc(-300px - 1ch); /* account for padding */
 135     width: 300px;
 136   }
 137 }
 138
 139 .menuDrawer > p {
 140   margin: .5em 0;
 141 }
 142
 143 /* Menu title */
 144 .menuDrawer > h2 {
 145   font-size: 1.2em;
 146   font-weight: bold;
 147   margin: .5em 0;
 148   background-color: #CCCCCC;
 149   color: #404040;
 150   border-radius: 3px;
 151   padding: 2px;
 152 }
 153
 154 .menuDrawer > h2 > img {
 155   vertical-align: text-top;
 156   height: 1.2em;
 157 }
 158
 159 /* Custom checkbox design */
 160 .menuDrawer input[type="checkbox"] {
 161   display: none;
 162 }
 163
 164 .menuDrawer input[type="checkbox"] + label:before {
 165   content: '\00A0'; /* non-breaking space */
 166   display: inline-block;
 167   width: 1.2em;
 168   height: 1.2em;
 169   margin-right: .3em;
 170   text-align: center;
 171   vertical-align: middle;
 172   background-color: rgba(204, 204, 204, .2);
 173   border: 1px solid #CCCCCC;
 174   border-radius: 3px;
 175 }
 176
 177 .menuDrawer input[type="checkbox"]:hover + label:before {
 178   background-color: rgba(204, 204, 204, .4);
 179   border: 1px solid #FFFFFF;
 180 }
 181 .menuDrawer input[type="checkbox"]:hover + label {
 182   color: #FFFFFF;
 183   position:relative;
 184   height: 1.2em;
 185 }
 186
 187 .menuDrawer input[type="checkbox"]:active + label:before {
 188   background-color: rgba(204, 204, 255, .3);
 189   border: 1px solid #FFCCAA;
 190 }
 191 .menuDrawer input[type="checkbox"]:active + label {
 192   color: #FFCCAA;
 193 }
 194
 195 .menuDrawer input[type="checkbox"]:checked + label:before {
 196   content: '\2714'; /* tick mark */
 197 }
 198
 199 /* Custom button design */
 200 .menuDrawer input[type="button"] {
 201   text-align: center;
 202   vertical-align: middle;
 203   background-image: none;
 204   background-color: rgba(204, 204, 204, .2);
 205   color: #CCCCCC;
 206   padding: 1px .5em;
 207   border: 1px solid #CCCCCC;
 208   border-radius: 3px;
 209 }
 210
 211 .menuDrawer input[type="button"]:hover {
 212   background-color: rgba(204, 204, 204, .4);
 213   border: 1px solid #FFFFFF;
 214 }
 215
 216 .menuDrawer input[type="button"]:active {
 217   background-color: rgba(204, 204, 255, .3);
 218   color: #FFCCAA;
 219   padding-top: 2px;
 220   padding-right: calc(.5em - 1px);
 221   padding-bottom: 0;
 222   padding-left: calc(.5em + 1px);
 223 }
 224
 225 /* Custom select design */
 226 .menuDrawer select {
 227   text-align: left;
 228   vertical-align: middle;
 229   background-image: none;
 230   background-color: rgba(204, 204, 204, .2);
 231   color: #CCCCCC;
 232   padding: 0 .5em;
 233   border: 1px solid #CCCCCC;
 234   border-radius: 3px;
 235 }
 236
 237 .menuDrawer select:hover {
 238   background-color: rgba(204, 204, 204, .4);
 239   border: 1px solid #FFFFFF;
 240 }
 241
 242 .menuDrawer select:active {
 243   background-color: rgba(204, 204, 255, .3);
 244   color: #FFCCAA;
 245 }
 246
 247 .menuDrawer option:checked:not(:hover) {
 248   background-color: rgba(204, 204, 204, .1);
 249 }
 250
 251 .menuDrawer option:hover {
 252   background-color: #CCCCCC;
 253   color: #404040;
 254 }
 255
 256 #trackData {
 257   margin: 0;
 258 }
 259
 260 #map, #track {
 261   position: fixed;
 262   border: 0;
 263   top: 0;
 264   left: 0;
 265   right: 0;
 266   bottom: 0;
 267 }
 268
 269 #map {
 270   z-index: 1;
 271 }
 272
 273 #track {
 274   z-index: 3;
 275 }
 276
 277 #action {
 278   position: absolute;
 279   bottom: 5px;
 280   left: .5em;
 281   margin: 0;
 282   z-index: 3;
 283   background-color: rgba(255, 255, 255, .8);
 284   border-radius: 3px;
 285   padding: 0 3px;
 286 }
 287
 288 #actionimg {
 289   vertical-align: text-bottom;
 290 }
 291
 292 .debugHide {
 293   display: none;
 294 }
 295
 296 .settingsSubTitle {
 297   margin: .5em 0 0;
 298   font-weight: bold;
 299 }
 300
 301 #copyright {
 302   bottom: 5px;
 303   right: .5em;
 304   margin: 0;
 305   font-size: small;
 306   opacity: .66;
 307   z-index: 2;
 308   background-color: rgba(255, 255, 255, 1);
 309   border-radius: 3px;
 310   padding: 0 3px;
 311 }
 312
 313 #copyright.hidden {
 314   opacity: 0;
 315 }
 316
 317 #dialogArea {
 318   top: 20%;
 319   right: 0;
 320   left: 0;
 321   width: 30ch;
 322   max-width: 92%;
 323   z-index: 10;
 324   background-color: rgba(255, 255, 255, .8);
 325   border: 0;
 326   margin: auto;
 327   padding: .5em;
 328   border-radius: 5px;
 329 }
 330
 331 #dialogArea.hidden {
 332   top: -100%;
 333 }
 334
 335 .dialogTitle {
 336   margin: 0 0 .5em;
 337   font-weight: bold;
 338 }
 339
 340 .dialogHelp {
 341   margin: .5em 0;
 342   font-size: small;
 343   opacity: .66;
 344 }
 345
 346 #uploadDesc {
 347   max-width: 95%;
 348 }
 349
 350 @media screen and (max-width: 500px),
 351        screen and (max-height: 500px) {
 352   body {
 353     font-size: 10px;
 354   }
 355   #menuArea {
 356     top: 2px;
 357     left: 2px;
 358   }
 359   #zoomArea {
 360     top: 2px;
 361     right: 2px;
 362   }
 363   #fullscreenArea {
 364     right: 2px;
 365     bottom: 20px;
 366   }
 367   #copyright {
 368     bottom: 1px;
 369     right: 1px;
 370     font-size: 8px;
 371   }
 372 }