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