X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/ae608cb4ffc32013ebb6efae8d33bdea7fdc6260..8d4a8031380d7eb2e9929586583b4390951d5ade:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 85b8f26a9..01b3f3344 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -4,14 +4,17 @@ $typeheight: 14px; $offwhite: #f4f4ff; $blue: #7092FF; +$lightblue: #B8C5F0; $grey: #AAA; +$lightgrey: #CCC; +$keyline: #CCC; $hovercolor: 20%; /* Styles common to large and small screens */ /* Minimal CSS reset */ -html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p { +html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, input { margin: 0; padding: 0; border: 0; @@ -36,7 +39,7 @@ li { list-style: none; } input, select, textarea, -body { font: $typeheight/$lineheight "Helvetica Neue",Arial,sans-serif; } +body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; } abbr, acronym { border-bottom: .1em dotted; @@ -131,7 +134,7 @@ h6:first-child { .column-1 { width: 50%; - margin-bottom: $lineheight/2; + margin: 0 0 $lineheight/2 0; } .small_icon { @@ -139,6 +142,37 @@ 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; } +.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; } +.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 { @@ -287,37 +321,24 @@ table { padding: 0; margin: 0; } - + li { list-style-type: none; padding: 0; margin: 0; } - + h4 { padding: $lineheight/4 0 $lineheight/4 0; font-size: 12px; margin: 0; } - + li:last-child h4 { padding-top: 0; } } -/* 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 @@ -339,7 +360,7 @@ table { form { width: 165px; } - + input[type="text"] { width: 165px; padding: 3px; @@ -349,18 +370,19 @@ table { padding: 2px 0px 2px $lineheight/4; box-shadow: inset #DDD 0px 1px 3px; } - + input[type="text"]:focus { outline: none; border: 1px solid #000; } - + input[type="submit"] { border: 0; margin: 0; padding: 0; width: 15px; height: 15px; + min-width: 0; text-indent: -1000px; overflow: hidden; background: image-url("sprite.png") 0 0 no-repeat; @@ -386,9 +408,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; @@ -403,11 +425,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 */ @@ -437,7 +454,7 @@ table { } #tabnav { - height: 30px; + height: 29px; margin-bottom:0; overflow: hidden; li { @@ -486,7 +503,7 @@ table { .count-number { padding: 2px $lineheight/4; - border-radius: 3px; + border-radius: 2px; background: #d7d7ff; margin: 0 2px; font-size: 11px; @@ -516,19 +533,113 @@ table { /* Rules for Leaflet maps */ -.leaflet-control-attribution { - a.disabled { - color: #99c9dc; - cursor: default; - text-decoration: none; +.leaflet-control .control-button { + display: block; + height: 40px; + width: 40px; + background-color: white; + background-color: rgba(255,255,255,.8); + border-radius: 4px; + margin-bottom: 10px; + outline: none; +} + +.leaflet-control .zoomin, +.control-layers .control-button { + margin-bottom: 0px; + border-radius: 4px 4px 0px 0px; +} + +.site .leaflet-control .zoomout, +.control-key .control-button { + margin-bottom: 0px; + border-radius: 0px; +} + +.leaflet-control .zoomout, +.control-locate .control-button, +.control-share .control-button { + border-radius: 0px 0px 4px 4px; +} + +.leaflet-control .control-button:hover { + background-color: white; +} + +.leaflet-control .control-button .icon { + margin: 10px; +} + +/* Rules for the home page */ + +.site-export #map, +.site-index #map, +.site-edit #map { + height: 100%; + overflow: hidden; +} + +#map-ui { + display: none; + position: relative; + float: right; + width: 250px; + height: 100%; + background: white; + border-left: 1px solid #CCC; + overflow: auto; + + .section { + border-bottom: 1px solid #DDD; + padding: 15px; } - ul.secondary-actions { - float: left; - margin-right: $lineheight/4; + a.close-button { + float: right; + padding:5px; + font-size:20px; + line-height:10px; + color:#222; + border:1px solid #ddd; + } +} - &:only-child { - margin-right: 0px; +.layers-ui { + ul, li:last-child { + margin-bottom: 0; + } + + li { + border-radius: 4px; + overflow: hidden; + margin-bottom: 10px; + } + + label { + display: block; + padding: 5px 5px 5px 7px; + background-color: #eee; + cursor: pointer; + } + + li.active label { + background-color: #ccc; + } + + .base-layers { + .leaflet-container { + width: 100%; + height: 50px; + cursor: pointer; + } + } +} + +.share-ui { + .share-link { + li { + display: inline-block; + width: 50%; } } } @@ -541,11 +652,6 @@ table { } } -.site-index #map .olControlScaleLine, -.site-export #map .olControlScaleLine { - left: $lineheight/2 !important; -} - .leaflet-popup-scrolled { padding-right: $lineheight; border-bottom: 0px !important; @@ -573,7 +679,7 @@ table { z-index: 10000; position: absolute; background-color: #ffffff; - border: 1px solid #cccccc; + border: 1px solid $keyline; border-top: 0px; ul { margin: 0px; @@ -604,25 +710,16 @@ table { #sidebar { display: none; - position: absolute; - overflow: auto; - top: 0px; - bottom: 0px; - left: 0px; - border-right: 1px solid #ccc; + 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 { + border-bottom: 1px solid #ccc; + } li { margin-bottom: $lineheight/4; &:last-child { @@ -632,7 +729,18 @@ table { } } -#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; @@ -643,7 +751,9 @@ table { #sidebar_content { position: relative; - bottom: 0; + margin-bottom: 20px; + overflow: auto; + height: 100%; width: 100%; h4 { padding: 0 $lineheight $lineheight/2 $lineheight; @@ -656,7 +766,6 @@ table { /* Rules for the map key which appears in the popout sidebar */ #mapkey { - padding: $lineheight; .mapkey-table-key img { display: block; margin-left: auto; @@ -733,6 +842,10 @@ ul.results-list li { border-bottom: 1px solid #ccc; } .export_area_inputs { margin-bottom: $lineheight/2; + input[type="text"] { + width: 80px; + margin-bottom: 5px; + } } .export_bound { @@ -753,11 +866,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; } display: none; } -.export_buttons { - width: 100%; - text-align: center; -} - /* Rules for the main content area */ #content { @@ -864,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 { @@ -952,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%; @@ -962,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; @@ -999,28 +1086,28 @@ ul.results-list li { border-bottom: 1px solid #ccc; } font-size: $lineheight/2; border-width: 0px; text-align: right; - + .trace_summary { font-size: 12px; color: gray; } - + .trace_pending { color: red; } - + .trace_public { color: green; } - + .trace_identifiable { color: green; } - + .trace_trackable { color: red; } - + .trace_private { color: red; } @@ -1029,6 +1116,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } /* Rules for the user profile page */ #userinformation { + min-height: 100px; .userinformation-inner { float: left; @@ -1067,13 +1155,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 { @@ -1096,16 +1184,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; @@ -1121,7 +1204,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } tr { vertical-align: middle; } - + p { margin-top: 0px; margin-bottom: 0px; @@ -1153,7 +1236,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } h1, h2 { font-size: 21px; - line-height: 1; + line-height: 1em; } small.deemphasize { float: left; @@ -1220,7 +1303,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; } /* Rules for the login page */ #login_openid_buttons { - height: 56px; + margin-bottom: 0; } #login_openid_buttons li { @@ -1237,21 +1320,21 @@ ul.results-list li { border-bottom: 1px solid #ccc; } margin-bottom: $lineheight; overflow: auto; height: 10em; - + &:p#last { margin-bottom: 0px; } - + &:ol { margin-bottom: 0px; } - + &:img { display: block; margin: $lineheight auto inherit auto; } } - + form.sign { input[type=submit] { float: left; @@ -1285,9 +1368,16 @@ ul.results-list li { border-bottom: 1px solid #ccc; } border: 1px solid #ccc; } -.accountImage-options { - width: 50%; - display: inline-block; +#accountForm .user_image { + margin-bottom: 0; +} + +#accountForm #user_image { + margin-left: 20px; +} + +#accountForm ul.accountImage-options { + margin-left: 120px; } .nohome .location { @@ -1303,36 +1393,60 @@ ul.results-list li { border-bottom: 1px solid #ccc; } } .content_map.settings_map { - float: none; width: 50%; + float: none; +} + +/* Rules for the oauth settings page */ + +.oauth_clients .buttons .oauth-edit { + border-radius: 2px 0 0 2px; } -/* Rules for message in/out box page */ +.oauth_clients .buttons .oauth-delete { + border-radius: 0 2px 2px 0; +} + +/* Rules for messages pages */ .messages { width: 100%; border: 1px solid #ddd; + input[type="submit"] { + margin: auto; + } tbody tr { border-top: 1px solid #ccc; } - + .inbox-row { background: #f8f8ff; } - + .inbox-row-unread { background:#CBEEA7; } - + .right { float: right; } - + tr td, 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; + } } .inbox-row .inbox-mark-read { @@ -1353,10 +1467,26 @@ ul.results-list li { border-bottom: 1px solid #ccc; } vertical-align: middle; } +.inbox-mark-unread, +.inbox-mark-read, +.inbox-delete { + width: 1%; +} + .inbox-row-unread .inbox-mark-unread { display: none; } +.message-read .message-buttons { + margin-top: $lineheight; + padding-top: $lineheight; + border-top: 1px solid $keyline; +} + +.message-read .buttons .mark-unread-button { + border-radius: 0; +} + /* Rules for "flash" notice boxes shown at the top of the content area */ .flash { @@ -1385,11 +1515,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; @@ -1403,12 +1534,15 @@ ul.results-list li { border-bottom: 1px solid #ccc; } margin-bottom: 0px; 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 */ @@ -1417,19 +1551,42 @@ ul.results-list li { border-bottom: 1px solid #ccc; } fieldset { margin-bottom: $lineheight; } - label { + label.standard-label { display: block; - width: 300px; - margin-right: $lineheight/2; + margin-bottom: $lineheight/4; font-size: $typeheight; font-weight: bold; line-height: 1.5; } + label.standard-label.secondary { + display: inline-block; + font-weight: normal; + } + .form-help { + font-weight: normal; + } + .form-column { + float: left; + margin-right: 20px; + } + .form-divider { + margin-top: $lineheight; + padding-top: $lineheight; + border-top: 1px solid $keyline; + } .form-row { margin-bottom: $lineheight/2; } - input[name=remember_me] { + .form-list { + margin-bottom: 0; + } + .form-list li { + margin-bottom: 5px; + } + input[type="checkbox"], + input[type="radio"] { float: left; + margin-top: 5px; } } @@ -1437,12 +1594,26 @@ 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"], input[type="password"], textarea { border: 1px solid #ccc; + padding: 2px 5px; + margin: 0; + width: 200px; +} + +textarea { + padding: 5px; + width: 100%; + height: 100% !important; } /* Rules for user images */ @@ -1521,6 +1692,8 @@ ul.secondary-actions { .inner12 { padding: $lineheight/2 $lineheight;} +.inner11 { padding: $lineheight/2;} + .inner02 { padding: 0 $lineheight;} /* Utility for general button styles */ @@ -1531,10 +1704,11 @@ input[type="reset"], a.button { cursor: pointer; border: 0; - display: block; - padding: $lineheight/4; + display: inline-block; + line-height: 20px; + padding: $lineheight/4 $lineheight/2; min-width: 120px; - margin-bottom: $lineheight/2; + margin: 0 0 $lineheight/2 0; color: white; background: $blue; text-align: center; @@ -1544,15 +1718,64 @@ a.button { background: darken($blue, $hovercolor); text-decoration: none; } + &.deemphasize { + background: $lightblue; + &:hover { + background: darken($lightblue, $hovercolor); + } + } + &:disabled { + background: $lightgrey; + &:hover { + background: $lightgrey; + } + } &:last-child { margin-bottom: 0; } } -a.button.submit { - background-color: #cbeea7; - &:hover { - background-color: #9ed485; +.buttons { + min-width: 200px; + input[type="submit"], + input[type="button"], + input[type="reset"], + .button { + box-sizing: border-box; + float: left; + 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; + } + input:last-child, + .button:last-child { + border-radius:0 2px 2px 0; + border-right-width: 0; + } + input:only-child, + .button:only-child, + *[value="Hide"] + input:last-child, + *[value="Hide"] + .button:last-child { + border-radius:2px; + 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; } } @@ -1577,7 +1800,8 @@ a.button.submit { /* Rules for rich text */ -.richtext { +.richtext, +.prose { h1, h2 { padding-bottom: $lineheight/2; border-bottom: 1px dashed #cccccc; @@ -1655,7 +1879,10 @@ a.button.submit { /* Rules for rich text editors */ .richtext_container { + margin-bottom: $lineheight; + .richtext_content { + width: 50%; display: inline-block; vertical-align: top; @@ -1683,8 +1910,7 @@ a.button.submit { margin-left: 15px; background-color: #f8f8ff; padding: $lineheight/2; - width: 300px; - max-width: 450px; + width: 220px; ul { margin-bottom: 0; @@ -1703,35 +1929,16 @@ a.button.submit { } 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; } - - input.richtext_doedit, - input.richtext_dopreview { - margin-right: $lineheight/2; - } - } - - .buttons input[type="submit"] { - display: inline-block; - margin-bottom:0; - width:99px; - min-width:99px; - } - .buttons input:first-child { - border-radius:2px 0 0 2px; - margin-right:1px; - } - .buttons input:last-child { - border-radius:0 2px 2px 0; } } @@ -1753,11 +1960,11 @@ a.button.submit { /* Rules for the notes interface */ -.note { +.leaflet-popup-content .note { padding-top: $lineheight/2; } -.note { +.leaflet-popup-content .note { h2 { margin-bottom: $lineheight/2; } @@ -1772,7 +1979,6 @@ a.button.submit { left: $lineheight/4; min-width: 15px; min-height: 15px; - background: image-url("sprite.png") 0 -45px no-repeat; } .permalink span { @@ -1829,16 +2035,8 @@ a.button.submit { 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; }