/* 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; } .hidden { display: none; } #dialogArea, #libraryArea, .overlayArea { position: absolute; z-index: 5; transition-property: opacity; transition-duration: .2s; } #dialogArea.hidden, #libraryArea.hidden, .overlayArea.hidden { opacity: 0; transition-duration: 1s; display: block; } #dialogArea:-moz-system-metric(touch-enabled), #libraryArea.hidden:-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 button, #dialogArea input[type="text"], #dialogArea select, #libraryArea input[type="button"], #libraryArea button, .overlayArea input[type="button"], .overlayArea button, .overlayArea select, .menuDrawer input[type="button"], .menuDrawer button, .menuDrawer input[type="text"], .menuDrawer input[type="number"], .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"], .menuDrawer 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"]:disabled, .menuDrawer button:disabled { background-color: rgba(204, 204, 204, .1); color: rgba(204, 204, 204, .5); border: 1px solid rgba(255, 255, 255, .5); } .menuDrawer input[type="button"]:not(:disabled):hover, .menuDrawer button:not(:disabled):hover { background-color: rgba(204, 204, 204, .4); border: 1px solid #FFFFFF; } .menuDrawer input[type="button"]:not(:disabled):active, .menuDrawer button:not(:disabled):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; } .menuDrawer input[type="text"], .menuDrawer input[type="number"] { font-size: 1em; vertical-align: middle; background-image: none; background-color: rgba(204, 204, 204, .7); color: #404040; padding: 1px .5em; border: 1px solid #CCCCCC; border-radius: 3px; } .menuDrawer input[type="text"] { text-align: left; } .menuDrawer input[type="number"] { text-align: right; } .menuDrawer input[type="text"]:disabled, .menuDrawer input[type="number"]:disabled { background-color: rgba(204, 204, 204, .1); color: rgba(204, 204, 204, .5); border: 1px solid rgba(255, 255, 255, .5); } .menuDrawer input[type="text"]:not(:disabled):hover, .menuDrawer input[type="number"]:not(:disabled):hover { border: 1px solid #FFFFFF; } .menuDrawer input[type="text"]:not(:disabled):focus, .menuDrawer input[type="number"]:not(:disabled):focus { background-color: rgba(204, 204, 255, .8); border: 1px solid #FFFFFF; color: #202020; } .menuDrawer p.subTitle { margin: .75em 0 .5em; font-weight: bold; } #trackData { margin: 0; } #trackDialogArea { border-top: 2px solid; border-bottom: 2px solid; padding: 3px 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; } #copyright { bottom: 5px; right: .5em; margin: 0; font-size: .8em; opacity: .66; z-index: 2; background-color: rgba(255, 255, 255, 1); border-radius: 3px; padding: 0 3px; } #copyright.hidden { opacity: 0; display: block; } #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%; display: block; } .dialogTitle { margin: 0 0 .5em; font-weight: bold; } .dialogHelp { margin: .5em 0; font-size: .8em; opacity: .66; } #libraryArea { top: 1%; bottom: 1%; right: 1%; left: 1%; z-index: 10; background-color: rgba(255, 255, 255, .95); border: 0; margin: auto; padding: .5em; border-radius: 5px; } #libraryArea.hidden { top: -100%; bottom: auto; height: 90%; display: block; } #libButtonLine { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 0 0.5em 0.5em; text-align: right; } #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; } }