From 20d39de5e834bbff7a891c1d131691aae5c00797 Mon Sep 17 00:00:00 2001 From: Jacek Kowalski <Jacek@jacekk.info> Date: Sun, 07 Jul 2019 19:53:13 +0000 Subject: [PATCH] Fix icons styling, remove redundant CSS entries --- map.css | 70 +++++++++++++++++++++++++++-------- 1 files changed, 54 insertions(+), 16 deletions(-) diff --git a/map.css b/map.css index 2b1b6c6..db4693f 100644 --- a/map.css +++ b/map.css @@ -5,7 +5,7 @@ } #map { - position: absolute; + position: fixed; top: 0; left: 0; right: 0; @@ -28,7 +28,7 @@ transition: right .4s, width .4s; - position: absolute; + position: fixed; width: 350px; right: -365px; top: 0; @@ -68,11 +68,11 @@ width: 80%; right: -100%; } - .panel.expanded { + .panel.expanded, .panel.enabled .hide { right: 0%; } - .panel.enabled .hide { + .panel.enabled.expanded .hide { right: 80%; margin-right: 10px; } @@ -99,6 +99,13 @@ } .panel .name { font-weight: bold; + padding-bottom: 0; +} +.panel .name .icon { + margin: -5px 0.2rem 0; + text-indent: 2rem; + font-size: 1.4rem; + vertical-align: top; } .panel .vehicleInfo { font-size: 21px; @@ -135,10 +142,38 @@ float: right; } +.icon, .icon-loc, .icon-pin, .icon-zoom { + display: inline-block; + height: 1em; + width: 1em; + text-indent: 1.5em; + overflow: hidden; + background-size: contain; + background-repeat: no-repeat; +} +.reverse { + filter: invert(100%); +} +.icon-loc { + background-image: url(icons/loc.svg); + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+PHN0eWxlPip7c3Ryb2tlOmJsYWNrO3N0cm9rZS13aWR0aDo1O2ZpbGw6bm9uZX08L3N0eWxlPjxjaXJjbGUgY3g9IjQwIiBjeT0iNDAiIHI9IjI1Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSIxMCIgc3R5bGU9ImZpbGw6YmxhY2s7Ij48L2NpcmNsZT48bGluZSB4MT0iNDAiIHkxPSIxNSIgeDI9IjQwIiB5Mj0iMCI+PC9saW5lPjxsaW5lIHgxPSI2NSIgeTE9IjQwIiB4Mj0iODAiIHkyPSI0MCI+PC9saW5lPjxsaW5lIHgxPSI0MCIgeTE9IjY1IiB4Mj0iNDAiIHkyPSI4MCI+PC9saW5lPjxsaW5lIHgxPSIxNSIgeTE9IjQwIiB4Mj0iMCIgeTI9IjQwIj48L2xpbmU+PC9zdmc+); +} +.icon-pin { + background-image: url(icons/pin.svg); + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHBhdGggZD0iTTMyLDY0TDE0LjE4NTUsMjkuMDkwOUEyMCwyMCAwIDEgMSA0OS44MTQ1LDI5LjA5MDlaTTQyLDIwQTEwLDEwIDAgMCAwIDIyLDIwQTEwLDEwIDAgMCAwIDQyLDIwIi8+PC9zdmc+); +} +.icon-zoom { + background-image: url(icons/zoom.svg); + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OTAiIGhlaWdodD0iNDkwIj48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMzYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZD0ibTI4MCwyNzhhMTUzLDE1MyAwIDEsMC0yLDJsMTcwLDE3MG0tOTEtMTE3IDExMCwxMTAtMjYsMjYtMTEwLTExMCIvPjwvc3ZnPgo=); +} + #title { top: .5em; left: .5em; - padding: 2px .5em; + padding: 0 .5em; + font-size: 1.14em; + line-height: 1.4em; + height: 1.375em; font-weight: bold; background-color: rgba(255,255,255,.6); } @@ -154,24 +189,27 @@ right: 0.5em; } .ol-zoom { - top: 2.2em; + top: 2.3em; } -#track { +#menu { top: 6em; left: 0.5em; } -.ol-touch #track { +.ol-touch #menu { top: 7em; } +#menu button { + border-radius: 0; +} +#menu button:first-child { + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} +#menu button:last-child { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; +} -.ol-control button svg * { - stroke: white; - stroke-width: 5%; - fill: none; -} -.ol-control button svg .fill { - fill: white; -} .ol-control button.clicked { background-color: black; } -- Gitblit v1.9.1