X-Git-Url: https://git-public.kairo.at/?p=lantea.git;a=blobdiff_plain;f=style%2Flantea.css;h=dbc28b0810f55ffd3cb5b27ee96f5c31331339dd;hp=8338a293714839bfcd04e230479c64429cf17456;hb=662078d15cd8052cab2a7effd2a1306283cfb2a6;hpb=b395419baf8055d24286ec5de67309e2be211025 diff --git a/style/lantea.css b/style/lantea.css index 8338a29..dbc28b0 100644 --- a/style/lantea.css +++ b/style/lantea.css @@ -1,97 +1,527 @@ -/* ***** BEGIN LICENSE BLOCK ***** - * Version: MPL 1.1/GPL 2.0/LGPL 2.1 - * - * The contents of this file are subject to the Mozilla Public License Version - * 1.1 (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * http://www.mozilla.org/MPL/ - * - * Software distributed under the License is distributed on an "AS IS" basis, - * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License - * for the specific language governing rights and limitations under the - * License. - * - * The Original Code is Lantea mapping/tracking web app. - * - * The Initial Developer of the Original Code is - * Robert Kaiser . - * Portions created by the Initial Developer are Copyright (C) 2011 - * the Initial Developer. All Rights Reserved. - * - * Contributor(s): - * Robert Kaiser - * - * Alternatively, the contents of this file may be used under the terms of - * either the GNU General Public License Version 2 or later (the "GPL"), or - * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), - * in which case the provisions of the GPL or the LGPL are applicable instead - * of those above. If you wish to allow use of your version of this file only - * under the terms of either the GPL or the LGPL, and not to allow others to - * use your version of this file under the terms of the MPL, indicate your - * decision by deleting the provisions above and replace them with the notice - * and other provisions required by the GPL or the LGPL. If you do not delete - * the provisions above, a recipient may use your version of this file under - * the terms of any one of the MPL, the GPL or the LGPL. - * - * ***** END LICENSE BLOCK ***** */ +/* 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; } -#overlayArea { +.hidden { + display: none; +} + +.debugHide { + display: none; +} + +/* Main window UI areas */ +#map, #track { + position: fixed; + border: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +#map { + z-index: 1; +} + +#track { + z-index: 3; +} + +.autoFade { position: absolute; + z-index: 5; + transition-property: opacity; + transition-duration: .2s; +} + +.autoFade.hidden { + opacity: 0; + transition-duration: 1s; + display: block; +} + +#menuArea { /* width: 30em; */ left: 1%; top: 1em; - z-index: 5; +} + +#zoomArea { + right: 1%; + top: 1em; + text-align: center; +} + +.autoFade > input[type="button"], +.autoFade > .controlButton { + 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; + padding: 0; + margin: 0; +} + +#zoomArea > input[type="button"] { + border: 2px solid #0000FF; +} + +.autoFade > input[type="button"]:hover, +.autoFade > .controlButton:hover { + background-color: rgba(255, 255, 255, .8); +} + +.autoFade > input[type="button"]:active, +.autoFade > .controlButton:active { + background-color: rgba(255, 255, 127, .8); +} + +.autoFade > input[type="button"]:focus, +.autoFade > .controlButton: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; +} + +#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; +} -#settings { - display: none; - background-color: rgba(255, 255, 255, .8); +#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; +} + +.overlayArea:-moz-system-metric(touch-enabled), +.menuDrawer:-moz-system-metric(touch-enabled) { + font-size: 3mozmm; +} + +.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; +} + +/* Menu Drawers */ +.menuDrawer { + position: absolute; + top: 0; + bottom: 0; + overflow: auto; + transform: translateX(calc(-40ch - 1ch)); /* account for padding */ + width: 40ch; + max-width: 95%; /* make sure we don't overflow the screen */ border: 0; - border-radius: 5px; + 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; +} + +.dialogHelp { + margin: .5em 0; + font-size: .8em; + opacity: .66; +} + +#trackData { + margin: 0; +} + +#trackDialogArea { + border-top: 2px solid; + border-bottom: 2px solid; + padding: 3px 0; } -#settings > legend { +#uploadDesc { + max-width: 95%; +} + +/* Secondary UI: menu drawers, full screen overlays, etc. */ +.secondaryUI { + background-color: rgba(15, 15, 15, .9); + color: #CCCCCC; +} + +/* Custom checkbox design */ +.secondaryUI input[type="checkbox"] { display: none; - background-color: rgba(255, 255, 255, .8); +} + +.secondaryUI 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; } -#map { +.secondaryUI input[type="checkbox"]:hover + label:before { + background-color: rgba(204, 204, 204, .4); + border: 1px solid #FFFFFF; +} +.secondaryUI input[type="checkbox"]:hover + label { + color: #FFFFFF; + position:relative; + height: 1.2em; +} + +.secondaryUI input[type="checkbox"]:active + label:before { + background-color: rgba(204, 204, 255, .3); + border: 1px solid #FFCCAA; +} +.secondaryUI input[type="checkbox"]:active + label { + color: #FFCCAA; +} + +.secondaryUI input[type="checkbox"]:checked + label:before { + content: '\2714'; /* tick mark */ +} + +/* Custom button design */ +.secondaryUI input[type="button"], +.secondaryUI 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; +} + +.secondaryUI input[type="button"]:disabled, +.secondaryUI button:disabled { + background-color: rgba(204, 204, 204, .1); + color: rgba(204, 204, 204, .5); + border: 1px solid rgba(255, 255, 255, .5); +} + +.secondaryUI input[type="button"]:not(:disabled):hover, +.secondaryUI button:not(:disabled):hover { + background-color: rgba(204, 204, 204, .4); + border: 1px solid #FFFFFF; +} + +.secondaryUI input[type="button"]:not(:disabled):active, +.secondaryUI 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 */ +.secondaryUI 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; +} + +.secondaryUI select:hover { + background-color: rgba(204, 204, 204, .4); + border: 1px solid #FFFFFF; +} + +.secondaryUI select:active { + background-color: rgba(204, 204, 255, .3); + color: #FFCCAA; +} + +.secondaryUI option:checked:not(:hover) { + background-color: rgba(204, 204, 204, .1); +} + +.secondaryUI option:hover { + background-color: #CCCCCC; + color: #404040; +} + +/* Custom textbox design */ +.secondaryUI input[type="text"], +.secondaryUI 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; +} + +.secondaryUI input[type="text"] { + text-align: left; +} + +.secondaryUI input[type="number"] { + text-align: right; +} + +.secondaryUI input[type="text"]:disabled, +.secondaryUI 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); +} + +.secondaryUI input[type="text"]:not(:disabled):hover, +.secondaryUI input[type="number"]:not(:disabled):hover { + border: 1px solid #FFFFFF; +} + +.secondaryUI input[type="text"]:not(:disabled):focus, +.secondaryUI input[type="number"]:not(:disabled):focus { + background-color: rgba(204, 204, 255, .8); + border: 1px solid #FFFFFF; + color: #202020; +} + +/* custom style for paragraphs and links */ +.secondaryUI p.subTitle { + margin: .75em 0 .5em; + font-weight: bold; +} + +.secondaryUI a:link { + color: #DDDDDD; +} + +.secondaryUI a:visited { + color: #AAAAAA; +} + +.secondaryUI a:hover { + color: #FFFFFF; +} + +#loginerror { + color: red; + font-weight: bold; + padding: .5em; +} + +/* dialog area - for loading error and welcome messages */ +#dialogArea { + position: absolute; + top: 20%; + right: 0; + left: 0; + width: 50ch; + max-width: 92%; + z-index: 10; + background-color: rgba(255, 255, 255, .8); border: 0; - top: 1em; - left: 1%; - right: 1%; - z-index: 1; + margin: auto; + padding: .5em; + border-radius: 5px; +} + +#dialogArea.hidden { + top: -1000%; + display: block; +} + +.dialogTitle { + margin: 0 0 .5em; + font-weight: bold; +} + +.dialogButtonLine { + text-align: center; } -#debug { +/* full screen overlay - library, etc. */ +.fullScreenOverlay { position: absolute; - bottom: .5em; - left: .5em; - margin: 0; + top: 1%; + bottom: 1%; + right: 1%; + left: 1%; + z-index: 10; + background-color: rgba(15, 15, 15, 1.0); + border: 0; + margin: auto; + padding: .5em; + border-radius: 5px; } -#copyright { +.fullScreenOverlay.hidden { + top: -1000%; + bottom: auto; + height: 90%; + display: block; +} + +.fullScreenOverlay > .closeButtonContainer { position: absolute; - bottom: .5em; - right: .5em; + top: 0; + right: 0; margin: 0; - font-size: small; - opacity: .5; + padding: 0.5em; + text-align: right; +} +/* +.fullScreenOverlay > .closeButtonContainer > .closeButton { + font-size: 2em; +} +*/ + +.fullScreenOverlay p { + margin: 0.5em 0; +} + +.fullScreenOverlay > p:first-child { + margin-top: 0; + /* leave space for close button */ + margin-right: 1.5em; +} + +#libTrackList { + overflow: auto; + /* 2em is top/bottom margin, and one line is shown above and below, with .5em margin each */ + height: calc(100% - 5em); +} + +#libTrackPages { + margin-bottom: 0; +} + +/* small screen media adaptations */ +@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; + } }