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   font-size: 3mozmm;
  32 }
  33
  34 #dialogArea input[type="button"]:-moz-system-metric(touch-enabled),
  35 #dialogArea input[type="text"]:-moz-system-metric(touch-enabled),
  36 #dialogArea select:-moz-system-metric(touch-enabled),
  37 .overlayArea input[type="button"]:-moz-system-metric(touch-enabled),
  38 .overlayArea select:-moz-system-metric(touch-enabled) {
  39   font-size: 3mozmm;
  40 }
  41
  42 #menuArea {
  43   /* width: 30em; */
  44   left: 1%;
  45   top: 1em;
  46 }
  47
  48 #zoomArea {
  49   right: 1%;
  50   top: 1em;
  51   text-align: center;
  52 }
  53
  54 #zoomArea > input[type="button"] {
  55   font-size: 1em;
  56   font-weight: bold;
  57   width: 2em;
  58   height: 2em;
  59   border-radius: 2em;
  60   background-color: transparent;
  61   color: #0000FF;
  62   border: 2px solid #0000FF;
  63 }
  64
  65 #zoomArea > input[type="button"]:hover {
  66   background-color: rgba(255, 255, 255, .8);
  67 }
  68
  69 #zoomArea > input[type="button"]:active {
  70   background-color: rgba(255, 255, 127, .8);
  71 }
  72
  73 #fullscreenArea {
  74   right: 1%;
  75   bottom: 2em;
  76   text-align: center;
  77 }
  78
  79 #zoomLevel {
  80   background-color: rgba(255, 255, 255, .8);
  81   border-radius: 3px;
  82   padding: 0 3px;
  83   margin: 2px 0;
  84 }
  85
  86 #settingsArea,
  87 #trackArea {
  88   display: none;
  89   background-color: rgba(255, 255, 255, .8);
  90   border: 0;
  91   border-radius: 5px;
  92 }
  93
  94 #settingsArea > legend,
  95 #trackArea > legend {
  96   display: none;
  97   background-color: rgba(255, 255, 255, .8);
  98   border-radius: 3px;
  99 }
 100
 101 #trackData {
 102   margin: 0;
 103 }
 104
 105 #map, #track {
 106   position: fixed;
 107   border: 0;
 108   top: 0;
 109   left: 0;
 110   right: 0;
 111   bottom: 0;
 112 }
 113
 114 #map {
 115   z-index: 1;
 116 }
 117
 118 #track {
 119   z-index: 3;
 120 }
 121
 122 #action {
 123   position: absolute;
 124   bottom: 5px;
 125   left: .5em;
 126   margin: 0;
 127   z-index: 3;
 128   background-color: rgba(255, 255, 255, .8);
 129   border-radius: 3px;
 130   padding: 0 3px;
 131 }
 132
 133 #actionimg {
 134   vertical-align: text-bottom;
 135 }
 136
 137 .debugHide {
 138   display: none;
 139 }
 140
 141 .settingsSubTitle {
 142   margin: .5em 0 0;
 143   font-weight: bold;
 144 }
 145
 146 #copyright {
 147   bottom: 5px;
 148   right: .5em;
 149   margin: 0;
 150   font-size: small;
 151   opacity: .66;
 152   z-index: 2;
 153   background-color: rgba(255, 255, 255, 1);
 154   border-radius: 3px;
 155   padding: 0 3px;
 156 }
 157
 158 #copyright.hidden {
 159   opacity: 0;
 160 }
 161
 162 #dialogArea {
 163   top: 20%;
 164   right: 0;
 165   left: 0;
 166   width: 30ch;
 167   max-width: 92%;
 168   z-index: 10;
 169   background-color: rgba(255, 255, 255, .8);
 170   border: 0;
 171   margin: auto;
 172   padding: .5em;
 173   border-radius: 5px;
 174 }
 175
 176 #dialogArea.hidden {
 177   top: -100%;
 178 }
 179
 180 .dialogTitle {
 181   margin: 0 0 .5em;
 182   font-weight: bold;
 183 }
 184
 185 .dialogHelp {
 186   margin: .5em 0;
 187   font-size: small;
 188   opacity: .66;
 189 }
 190
 191 #uploadDesc {
 192   max-width: 95%;
 193 }
 194
 195 @media screen and (max-width: 500px) {
 196   body {
 197     font-size: 10px;
 198   }
 199   #menuArea {
 200     top: 1px;
 201     left: 1px;
 202   }
 203   #zoomArea {
 204     top: 1px;
 205     right: 1px;
 206   }
 207   #fullscreenArea {
 208     right: 1px;
 209     bottom: 10px;
 210   }
 211   #copyright {
 212     bottom: 1px;
 213     right: 1px;
 214     font-size: 8px;
 215   }
 216 }