/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ body { font-family: sans-serif; margin: 0; background: url("loading.png") repeat; } h1 { display: none; } #dialogArea, .overlayArea { position: absolute; z-index: 5; transition-property: opacity; transition-duration: .2s; } #dialogArea.hidden, .overlayArea.hidden { opacity: 0; transition-duration: 1s; } #dialogArea:-moz-system-metric(touch-enabled), .overlayArea:-moz-system-metric(touch-enabled), .menuDrawer:-moz-system-metric(touch-enabled) { font-size: 3mozmm; } #dialogArea input[type="button"], #dialogArea input[type="text"], #dialogArea select, .overlayArea input[type="button"], .overlayArea select, .menuDrawer input[type="button"], .menuDrawer select { font-size: inherit; } #menuArea { /* width: 30em; */ left: 1%; top: 1em; } #zoomArea { right: 1%; top: 1em; text-align: center; } #zoomArea > input[type="button"], #fullscreenArea > input[type="button"], #trackButton, #settingsButton { font-size: 1.2em; font-weight: bold; width: 2em; height: 2em; border-radius: 2em; background-color: rgba(255, 255, 255, .25); background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent); color: #0000FF; border: none; } #zoomArea > input[type="button"] { border: 2px solid #0000FF; } #zoomArea > input[type="button"]:hover, #fullscreenArea > input[type="button"]:hover, #trackButton:hover, #settingsButton:hover { background-color: rgba(255, 255, 255, .8); } #zoomArea > input[type="button"]:active, #fullscreenArea > input[type="button"]:active, #trackButton:active, #settingsButton:active { background-color: rgba(255, 255, 127, .8); } #zoomArea > input[type="button"]:focus, #fullscreenArea > input[type="button"]:focus, #trackButton:focus, #settingsButton:focus { background-color: rgba(255, 255, 255, .5); } #fullscreenArea { right: 1%; bottom: 2em; text-align: center; } #zoomLevel { /* background-color: rgba(255, 255, 255, .8); */ background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent); border-radius: .5em; padding: .5em .2em; margin: 2px 0; } .menuDrawer { position: absolute; top: 0; bottom: 0; transform: translateX(calc(-40ch - 1ch)); /* account for padding */ width: 40ch; max-width: 95%; /* make sure we don't overflow the screen */ background-color: rgba(15, 15, 15, .9); color: #CCCCCC; border: 0; padding: 0 .5ch; /* account for legend */ margin: 0; z-index: 10; transition-property: transform; transition-duration: 1s; transition-timing-function: ease; } .menuDrawer:not(.hidden) { transform: translateX(0); } @media screen and (max-width: 330px) { .menuDrawer { left: calc(-300px - 1ch); /* account for padding */ width: 300px; } } .menuDrawer > p { margin: .5em 0; } /* Menu title */ .menuDrawer > h2 { font-size: 1.2em; font-weight: bold; margin: .5em 0; background-color: #CCCCCC; color: #404040; border-radius: 3px; padding: 2px; } .menuDrawer > h2 > img { vertical-align: text-top; height: 1.2em; } /* For optical conveniece, display an "x" for closing. */ .menuDrawer > h2:after { content: '\00D7'; /* multiplication sign */ display: inline-block; vertical-align: text-top; float: right; margin-top: 0; margin-right: .2em; font-size: .75em; } /* Custom checkbox design */ .menuDrawer input[type="checkbox"] { display: none; } .menuDrawer input[type="checkbox"] + label:before { content: '\00A0'; /* non-breaking space */ display: inline-block; width: 1.2em; height: 1.2em; margin-right: .3em; text-align: center; vertical-align: middle; background-color: rgba(204, 204, 204, .2); border: 1px solid #CCCCCC; border-radius: 3px; } .menuDrawer input[type="checkbox"]:hover + label:before { background-color: rgba(204, 204, 204, .4); border: 1px solid #FFFFFF; } .menuDrawer input[type="checkbox"]:hover + label { color: #FFFFFF; position:relative; height: 1.2em; } .menuDrawer input[type="checkbox"]:active + label:before { background-color: rgba(204, 204, 255, .3); border: 1px solid #FFCCAA; } .menuDrawer input[type="checkbox"]:active + label { color: #FFCCAA; } .menuDrawer input[type="checkbox"]:checked + label:before { content: '\2714'; /* tick mark */ } /* Custom button design */ .menuDrawer input[type="button"] { text-align: center; vertical-align: middle; background-image: none; background-color: rgba(204, 204, 204, .2); color: #CCCCCC; padding: 1px .5em; border: 1px solid #CCCCCC; border-radius: 3px; } .menuDrawer input[type="button"]:hover { background-color: rgba(204, 204, 204, .4); border: 1px solid #FFFFFF; } .menuDrawer input[type="button"]:active { background-color: rgba(204, 204, 255, .3); color: #FFCCAA; padding-top: 2px; padding-right: calc(.5em - 1px); padding-bottom: 0; padding-left: calc(.5em + 1px); } /* Custom select design */ .menuDrawer select { text-align: left; vertical-align: middle; background-image: none; background-color: rgba(204, 204, 204, .2); color: #CCCCCC; padding: 0 .5em; border: 1px solid #CCCCCC; border-radius: 3px; } .menuDrawer select:hover { background-color: rgba(204, 204, 204, .4); border: 1px solid #FFFFFF; } .menuDrawer select:active { background-color: rgba(204, 204, 255, .3); color: #FFCCAA; } .menuDrawer option:checked:not(:hover) { background-color: rgba(204, 204, 204, .1); } .menuDrawer option:hover { background-color: #CCCCCC; color: #404040; } #trackData { margin: 0; } #map, #track { position: fixed; border: 0; top: 0; left: 0; right: 0; bottom: 0; } #map { z-index: 1; } #track { z-index: 3; } #action { position: absolute; bottom: 5px; left: .5em; margin: 0; z-index: 3; background-color: rgba(255, 255, 255, .8); border-radius: 3px; padding: 0 3px; } #actionimg { vertical-align: text-bottom; } .debugHide { display: none; } .settingsSubTitle { margin: .5em 0 0; font-weight: bold; } #copyright { bottom: 5px; right: .5em; margin: 0; font-size: small; opacity: .66; z-index: 2; background-color: rgba(255, 255, 255, 1); border-radius: 3px; padding: 0 3px; } #copyright.hidden { opacity: 0; } #dialogArea { top: 20%; right: 0; left: 0; width: 30ch; max-width: 92%; z-index: 10; background-color: rgba(255, 255, 255, .8); border: 0; margin: auto; padding: .5em; border-radius: 5px; } #dialogArea.hidden { top: -100%; } .dialogTitle { margin: 0 0 .5em; font-weight: bold; } .dialogHelp { margin: .5em 0; font-size: small; opacity: .66; } #uploadDesc { max-width: 95%; } @media screen and (max-width: 500px), screen and (max-height: 500px) { body { font-size: 10px; } #menuArea { top: 2px; left: 2px; } #zoomArea { top: 2px; right: 2px; } #fullscreenArea { right: 2px; bottom: 20px; } #copyright { bottom: 1px; right: 1px; font-size: 8px; } }