X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/2e444eb7bbb48ff534a639d6d7bab022b02add8f..7c06f2b47e1ba7ec67e657c233a4add502493e6c:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 362071988..ba25591d3 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -141,6 +141,36 @@ h6:first-child { margin-right: $lineheight/4; } +/* Rules for icons */ + +.icon { + display:inline-block; + vertical-align:top; + width:20px; + height:20px; + background:transparent image-url("sprite.png") no-repeat 0 0; + text-indent:-9999px; + overflow:hidden; + } + +.icon-pre-text { + margin-right: 5px; +} + +.icon.search { background-position: 0 0; } +.icon.donate { background-position: -20px 0; } +.icon.zoomin { background-position: -40px 0; } +.icon.zoomout { background-position: -60px 0; } +.icon.geolocate { background-position: -80px 0; } +.icon.layers { background-position: -100px 0; } +.icon.key { background-position: -120px 0; } +.icon.share { background-position: -140px 0; } +.icon.clipboard { background-position: -160px 0; } +.icon.link { background-position: -180px 0; } +.icon.close { background-position: -200px 0; } +.icon.check { background-position: -220px 0; } +.icon.note { background-position: -240px 0; } + /* Rules for links */ a { @@ -389,7 +419,7 @@ table { /* Rules for donation request box */ -.donate { +a.donate { display: block; width: 163px; padding: $lineheight/4; @@ -406,11 +436,6 @@ table { background: #9ed485; text-decoration: none; } - span { - margin: 0; - padding-left: 18px; - background: image-url("sprite.png") 0 -29px no-repeat; - } } /* Rules for Creative Commons logo button */ @@ -519,6 +544,40 @@ table { /* Rules for Leaflet maps */ +.leaflet-control a { + display: block; + height: 40px; + width: 40px; + background-color: white; + background-color: rgba(255,255,255,.8); + border-radius: 4px; + margin-bottom: 10px; +} + +.leaflet-control a:hover { + background-color: white; +} + +.leaflet-control a .icon { + margin: 10px; +} + +.leaflet-map-ui-layers { + box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4); + background: #f8f8f9; + -webkit-border-radius: 8px; + border-radius: 8px; + background-position: 50% 50%; + background-repeat: no-repeat; + display: block; + width: 36px; + height: 36px; +} + +.leaflet-control-layers-separator { + margin: 5px -10px !important; +} + .leaflet-control-attribution { a.disabled { color: #99c9dc; @@ -1354,6 +1413,13 @@ ul.results-list li { border-bottom: 1px solid #ccc; } tr th { padding: $lineheight/4; } + p:last-child, + h2:last-child, + h3:last-child, + ol:last-child, + ul:last-child { + margin-bottom:0; + } tr td { height: 30px; border-right: 1px solid $keyline; @@ -1426,11 +1492,12 @@ ul.results-list li { border-bottom: 1px solid #ccc; } #errorExplanation { width: 400px; border: 2px solid #ff7070; - padding: $lineheight/2; + padding: 0 $lineheight/2; margin-bottom: $lineheight; background-color: #f0f0f0; + h2 { - margin: -10px; + margin: 0 -10px 10px -10px; padding: $lineheight/4 $lineheight/4 $lineheight/4 15px; font-weight: bold; font-size: 12px; @@ -1445,11 +1512,14 @@ ul.results-list li { border-bottom: 1px solid #ccc; } padding: $lineheight/4; } - ul li { - font-size: 12px; - list-style: disc; - } + ul { + padding-left: $lineheight; + li { + font-size: 12px; + list-style: disc; + } + } } /* Rules for forms */ @@ -1494,7 +1564,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; } input[type="radio"] { float: left; margin-top: 5px; - margin-right: 5px; } } @@ -1502,6 +1571,11 @@ ul.results-list li { border-bottom: 1px solid #ccc; } display: block; } +input[type="checkbox"], +input[type="radio"] { + margin-right: 5px; +} + input[type="text"], input[type="email"], input[type="url"], @@ -1627,6 +1701,9 @@ a.button { background: darken($lightblue, $hovercolor); } } + &:disabled { + background: $lightblue; + } &:last-child { margin-bottom: 0; } @@ -1807,8 +1884,7 @@ a.button { margin-left: 15px; background-color: #f8f8ff; padding: $lineheight/2; - width: 300px; - max-width: 450px; + width: 220px; ul { margin-bottom: 0; @@ -1827,12 +1903,12 @@ a.button { } li h4 { - width: 35%; + width: 40%; margin: 0; } li span, li p { - width: 60%; + width: 50%; margin-left: $lineheight/2; margin-bottom: $lineheight/4; white-space: nowrap; @@ -1858,11 +1934,11 @@ a.button { /* Rules for the notes interface */ -.note { +.leaflet-popup-content .note { padding-top: $lineheight/2; } -.note { +.leaflet-popup-content .note { h2 { margin-bottom: $lineheight/2; }