X-Git-Url: https://git-public.kairo.at/?p=lantea.git;a=blobdiff_plain;f=style%2Flantea.css;h=d05d1cc18fd5b51475ce2a90399f21ebc7fd50d8;hp=83272d783fc6f0f496d06716956616a339b49e44;hb=ecde0af25609bcc783811244c4c93400c2054bd5;hpb=4b1d0915c90afdb6ca77be1dc721cc4ccec5cf0c diff --git a/style/lantea.css b/style/lantea.css index 83272d7..d05d1cc 100644 --- a/style/lantea.css +++ b/style/lantea.css @@ -5,55 +5,58 @@ body { font-family: sans-serif; margin: 0; + background: url("loading.png") repeat; } h1 { display: none; } -#menuArea { - position: absolute; - /* width: 30em; */ - left: 1%; - top: 1em; - z-index: 5; -} - -#zoomArea { +#dialogArea, +.overlayArea { position: absolute; - right: 1%; - top: 1em; z-index: 5; - text-align: center; -} - -#fullscreenArea { - position: absolute; - right: 1%; - bottom: 2em; - z-index: 5; - text-align: center; -} - -.overlayArea { 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) { font-size: 3mozmm; } +#dialogArea input[type="button"]:-moz-system-metric(touch-enabled), +#dialogArea input[type="text"]:-moz-system-metric(touch-enabled), +#dialogArea select:-moz-system-metric(touch-enabled), .overlayArea input[type="button"]:-moz-system-metric(touch-enabled), .overlayArea select:-moz-system-metric(touch-enabled) { font-size: 3mozmm; } +#menuArea { + /* width: 30em; */ + left: 1%; + top: 1em; +} + +#zoomArea { + right: 1%; + top: 1em; + text-align: center; +} + +#fullscreenArea { + right: 1%; + bottom: 2em; + text-align: center; +} + #zoomLevel { background-color: rgba(255, 255, 255, .8); border-radius: 3px; @@ -75,17 +78,28 @@ h1 { border-radius: 3px; } -#map, #track { +#map, #glmap, #track { position: fixed; border: 0; top: 0; left: 0; right: 0; bottom: 0; +} + +#map { z-index: 1; } -#debug { +#glmap { + z-index: 2; +} + +#track { + z-index: 3; +} + +#action { position: absolute; bottom: 5px; left: .5em; @@ -96,12 +110,20 @@ h1 { padding: 0 3px; } +#actionimg { + vertical-align: text-bottom; +} + .debugHide { display: none; } +.settingsSubTitle { + margin: .5em 0 0; + font-weight: bold; +} + #copyright { - position: absolute; bottom: 5px; right: .5em; margin: 0; @@ -117,6 +139,35 @@ h1 { 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; +} + @media screen and (max-width: 500px) { body { font-size: 10px;