X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/c3b8897c44531788f06a51e24470e97a3abfb7b8..7c06f2b47e1ba7ec67e657c233a4add502493e6c:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 148d4368a..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,9 +419,9 @@ table { /* Rules for donation request box */ -.donate { +a.donate { display: block; - width: 164px; + width: 163px; padding: $lineheight/4; border: 1px solid #AED1A0; background: #cbeea7; @@ -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 */ @@ -440,7 +465,7 @@ table { } #tabnav { - height: 30px; + height: 29px; margin-bottom:0; overflow: hidden; li { @@ -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; @@ -1034,6 +1093,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } /* Rules for the user profile page */ #userinformation { + min-height: 100px; .userinformation-inner { float: left; @@ -1072,13 +1132,13 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } .activity-details p { - margin-left: 72px; + margin-left: 70px; margin-bottom: 0; } #friends-container .contact-activity ul { - margin-left: 72px; - } + margin-left: 70px; +} .user-view { p#no_home_location { @@ -1101,16 +1161,11 @@ ul.results-list li { border-bottom: 1px solid #ccc; } .user_popup { min-width: 200px; - p { - padding-top: 0; - padding-bottom: 5px; - margin-top: 0; - margin-bottom: 0; - margin-left: 60px; + padding: 0 0 5px 0; + margin-top: 0 0 0 60px; font-size: 12px; } - img.user_thumbnail { float: left; margin: 0 $lineheight/2 0 0; @@ -1358,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; @@ -1430,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; @@ -1449,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 */ @@ -1498,7 +1564,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; } input[type="radio"] { float: left; margin-top: 5px; - margin-right: 5px; } } @@ -1506,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"], @@ -1599,6 +1669,8 @@ ul.secondary-actions { .inner12 { padding: $lineheight/2 $lineheight;} +.inner11 { padding: $lineheight/2;} + .inner02 { padding: 0 $lineheight;} /* Utility for general button styles */ @@ -1629,6 +1701,9 @@ a.button { background: darken($lightblue, $hovercolor); } } + &:disabled { + background: $lightblue; + } &:last-child { margin-bottom: 0; } @@ -1642,27 +1717,40 @@ a.button { .button { box-sizing: border-box; float: left; - margin-bottom:0; + border-radius: 0; + margin:0; min-width: 100px; max-width: 150px; + border-right:1px solid white; } input:first-child, .button:first-child { border-radius:2px 0 0 2px; - border-right:1px solid white; - margin-left: 0px; } input:last-child, .button:last-child { border-radius:0 2px 2px 0; - margin-right: 0px; + border-right-width: 0; } input:only-child, - .button:only-child { + .button:only-child, + *[value="Hide"] + input:last-child, + *[value="Hide"] + .button:last-child { border-radius:2px; - margin-right: 0px; + border-right-width: 0; + } + /* if a 3-button set has a hidden middle button */ + *[value="Hide"] + input:nth-child(3), + *[value="Hide"] + .button:nth-child(3) { + border-radius:0 2px 2px 0; + border-right-width: 0; + } + /* if a 3-button set starts with a hidden button */ + *[value="Hide"] + input:nth-child(2):not(:last-child), + *[value="Hide"] + .button:nth-child(2):not(:last-child) { + border-radius:2px 0 0 2px; + border-right-width: 1px solid white; } - } /* Rules for doing distinct colour of alternate table rows */ @@ -1796,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; @@ -1816,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; @@ -1847,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; } @@ -1923,16 +2010,8 @@ a.button { border-bottom: 1px solid #ccc; } -.ads { - width: 370px; - position: absolute; - left: 0%; -} - .ad { - float: left; - height: 120px; - padding: $lineheight/2; - border: 0px; + height: 100px; + border: 0; background: #fff; }