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