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