X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/ded28617c73090028c416e46ade69f7584536548..8d4a8031380d7eb2e9929586583b4390951d5ade:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index dba6205fb..01b3f3344 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -6,6 +6,7 @@ $offwhite: #f4f4ff; $blue: #7092FF; $lightblue: #B8C5F0; $grey: #AAA; +$lightgrey: #CCC; $keyline: #CCC; $hovercolor: 20%; @@ -162,6 +163,7 @@ h6:first-child { .icon.zoomin { background-position: -40px 0; } .icon.zoomout { background-position: -60px 0; } .icon.geolocate { background-position: -80px 0; } +.active .icon.geolocate { background-position: -80px -20px; } .icon.layers { background-position: -100px 0; } .icon.key { background-position: -120px 0; } .icon.share { background-position: -140px 0; } @@ -337,19 +339,6 @@ table { } } -/* Rules for SOTM advert */ - -#sotm { - width: 165px; - margin: $lineheight/2; - padding: 0px; - border: 0px; - background: #fff; - img { - width: 165px; - } -} - /* * Rules for "optional boxes" which appear in the left sidebar on * certain pages. Current users are the seach box on the main page @@ -552,22 +541,23 @@ a.donate { background-color: rgba(255,255,255,.8); border-radius: 4px; margin-bottom: 10px; + outline: none; } .leaflet-control .zoomin, -.control-layers .control-button, -.control-note .control-button { +.control-layers .control-button { margin-bottom: 0px; border-radius: 4px 4px 0px 0px; } -.leaflet-control .zoomout { +.site .leaflet-control .zoomout, +.control-key .control-button { margin-bottom: 0px; border-radius: 0px; } +.leaflet-control .zoomout, .control-locate .control-button, -.control-key .control-button, .control-share .control-button { border-radius: 0px 0px 4px 4px; } @@ -580,38 +570,44 @@ a.donate { margin: 10px; } +/* Rules for the home page */ + +.site-export #map, +.site-index #map, +.site-edit #map { + height: 100%; + overflow: hidden; +} + #map-ui { - position: absolute; display: none; - right: 0; + position: relative; + float: right; width: 250px; height: 100%; background: white; + border-left: 1px solid #CCC; overflow: auto; -} -#map-ui { - section { - border-top: 1px solid #868e85; + .section { + border-bottom: 1px solid #DDD; padding: 15px; } - section:first-child { - border-top:0; - } - - h2 { - margin:0; - } - a.close-button { float: right; padding:5px; font-size:20px; - line-height:15px; + line-height:10px; color:#222; border:1px solid #ddd; } +} + +.layers-ui { + ul, li:last-child { + margin-bottom: 0; + } li { border-radius: 4px; @@ -621,7 +617,7 @@ a.donate { label { display: block; - padding: 5px; + padding: 5px 5px 5px 7px; background-color: #eee; cursor: pointer; } @@ -630,10 +626,6 @@ a.donate { background-color: #ccc; } - input[type=text] { - width:220px; - } - .base-layers { .leaflet-container { width: 100%; @@ -643,19 +635,11 @@ a.donate { } } -.leaflet-control-attribution { - a.disabled { - color: #99c9dc; - cursor: default; - text-decoration: none; - } - - ul.secondary-actions { - float: left; - margin-right: $lineheight/4; - - &:only-child { - margin-right: 0px; +.share-ui { + .share-link { + li { + display: inline-block; + width: 50%; } } } @@ -668,11 +652,6 @@ a.donate { } } -.site-index #map .olControlScaleLine, -.site-export #map .olControlScaleLine { - left: $lineheight/2 !important; -} - .leaflet-popup-scrolled { padding-right: $lineheight; border-bottom: 0px !important; @@ -731,23 +710,11 @@ a.donate { #sidebar { display: none; - position: absolute; - overflow: auto; - top: 0px; - bottom: 0px; - left: 0px; + position: relative; + float: left; border-right: 1px solid $keyline; width: 33.3333%; - .sidebar_heading { - position: relative; - padding: $lineheight/2 $lineheight; - z-index: 9999; - background: $offwhite; - border-bottom: 1px solid #ccc; - } - h4 { - margin: 0; - } + height: 100%; ul { margin-bottom: 0; &:last-child { @@ -762,7 +729,18 @@ a.donate { } } -#sidebar_close { +.sidebar_heading { + position: relative; + padding: $lineheight/2 $lineheight; + z-index: 9999; + background: $offwhite; + border-bottom: 1px solid #ccc; + h4 { + margin: 0; + } +} + +.sidebar_close { position: absolute; height: $lineheight; top: 0px; @@ -774,6 +752,8 @@ a.donate { #sidebar_content { position: relative; margin-bottom: 20px; + overflow: auto; + height: 100%; width: 100%; h4 { padding: 0 $lineheight $lineheight/2 $lineheight; @@ -863,7 +843,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } .export_area_inputs { margin-bottom: $lineheight/2; input[type="text"] { - width: 60px; + width: 80px; margin-bottom: 5px; } } @@ -992,28 +972,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; } margin-bottom: $lineheight; } -/* Rules for the home page */ - -.site-export #map, -.site-index #map { - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; -} - -/* Rules for the edit page */ - -.site-edit #map { - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; - overflow: hidden; -} - /* Rules for the changeset list shown by the history tab etc */ #changeset_list { @@ -1080,7 +1038,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } h4, p { margin-bottom: $lineheight/4; } - p, ul, .bbox, .geo { + ul, .bbox, .geo { display: inline-block; vertical-align: top; max-width: 65%; @@ -1090,6 +1048,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } margin-bottom: 0; } h4 { + float: left; width: 33.3333%; display: inline-block; vertical-align: top; @@ -1766,7 +1725,10 @@ a.button { } } &:disabled { - background: $lightblue; + background: $lightgrey; + &:hover { + background: $lightgrey; + } } &:last-child { margin-bottom: 0; @@ -2017,7 +1979,6 @@ a.button { left: $lineheight/4; min-width: 15px; min-height: 15px; - background: image-url("sprite.png") 0 -45px no-repeat; } .permalink span {