X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/4be0e9bd103292a22bd2ca7c8f2744f33c4457d3..bf9dd8f350ca1b54afb79dda79506d980ccb5738:/app/assets/stylesheets/common.scss?ds=inline diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 740305cd3..a13f73d7a 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1,95 +1,12 @@ @import "parameters"; +@import "bootstrap"; /* 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, input { - margin: 0; - padding: 0; - border: 0; - font-size:100%; -} - -fieldset,img { border: 0; } - -legend { color: #000; } - -sup { vertical-align: text-top; } - -sub { vertical-align: text-bottom; } - -table { - border-collapse: collapse; - border-spacing: 0; -} - -li { list-style: none; } - -input, -select, -textarea, -body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; } - -abbr, acronym { - border-bottom: .1em dotted; - cursor: help; -} - -strong { - font-weight: bold; -} - -/* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */ - -.clearfix:before, -.clearfix:after { - content: " "; - display: table; -} - -.clearfix:after { - clear: both; -} - -/* Basic grid */ - -.col0 { float:left; width:04.1666%; } -.col1 { float:left; width:08.3333%; } -.col2 { float:left; width:16.6666%; } -.col3 { float:left; width:25.0000%; } -.col4 { float:left; width:33.3333%; } -.col5 { float:left; width:41.6666%; } -.col6 { float:left; width:50.0000%; } -.col7 { float:left; width:58.3333%; } -.col8 { float:left; width:66.6666%; } -.col9 { float:left; width:75.0000%; } -.col10 { float:left; width:83.3333%; } -.col11 { float:left; width:91.6666%; } -.col12 { width:100%; } - -.margin0 { margin-left:04.1666%; } -.margin1 { margin-left:08.3333%; } -.margin2 { margin-left:16.6666%; } -.margin3 { margin-left:25.0000%; } -.margin4 { margin-left:33.3333%; } -.margin5 { margin-left:41.6666%; } -.margin6 { margin-left:50.0000%; } -.margin7 { margin-left:58.3333%; } -.margin8 { margin-left:66.6666%; } -.margin9 { margin-left:75.0000%; } -.margin10 { margin-left:83.3333%; } -.margin11 { margin-left:91.6666%; } -.margin12 { margin-left:100.0000%; } - .fillL { background-color: white; } /* Default rules for the body of every page */ -* { - box-sizing: border-box; -} - body { font-family: 'Helvetica Neue',Arial,sans-serif; font-size: $typeheight; @@ -102,23 +19,6 @@ body { height: 100%; } -h1, h2, h3 { - font-weight: 600; - line-height: 1.2; -} - -h4, h5 { - font-weight: 500; -} - -h1 { - font-size: 18px; -} - -h2, h3 { - font-size: 16px; -} - p > img { width: auto; max-width: 100%; @@ -142,34 +42,43 @@ small, aside { .red { color: $red; } +.piwik { border: 0; } + +[dir=rtl] { /* no-r2 */ text-align: right; } + +[dir=ltr] { /* no-r2 */ text-align: left; } + /* 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.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.close:hover { background-position: -200px -20px; } -.icon.check { background-position: -220px 0; } -.icon.note { background-position: -240px 0; } -.icon.query { background-position: -260px 0; } + display: inline-block; + vertical-align: top; + width: 20px; + height: 20px; + background: transparent image-url("sprite.png") no-repeat 0 0; + background-image: image-url("sprite.svg"); + text-indent: -9999px; + overflow: hidden; +} + +.icon.search { /* no-r2 */ background-position: 0 0; } +.icon.donate { /* no-r2 */ background-position: -20px 0; } +.icon.zoomin { /* no-r2 */ background-position: -40px 0; } +.icon.zoomout { /* no-r2 */ background-position: -60px 0; } +.icon.geolocate { /* no-r2 */ background-position: -80px 0; } +.active .icon.geolocate { /* no-r2 */ background-position: -80px -20px; } +.icon.layers { /* no-r2 */ background-position: -100px 0; } +.icon.key { /* no-r2 */ background-position: -120px 0; } +.icon.share { /* no-r2 */ background-position: -140px 0; } +.icon.clipboard { /* no-r2 */ background-position: -160px 0; } +.icon.link { /* no-r2 */ background-position: -180px 0; } +.icon.close { /* no-r2 */ background-position: -200px 0; } +.close-wrap:hover .icon.close, +.icon.close:hover { /* no-r2 */ background-position: -200px -20px; } +.icon.check { /* no-r2 */ background-position: -220px 0; } +.icon.note { /* no-r2 */ background-position: -240px 0; } +.icon.note.grey { /* no-r2 */ background-position: -240px -20px; } +.icon.query { /* no-r2 */ background-position: -260px 0; } /* Rules for links */ @@ -183,38 +92,10 @@ a { } } -/* Rules for horizontal lines */ - -hr { - border: none; - background-color: #ccc; - color: #ccc; - height: 1px; -} - -/* General styles for tables */ - -table { - width: 100%; - margin-bottom: $lineheight; - th, td { - text-align: left; - padding: $lineheight/4; - line-height: $lineheight; - } - th { - font-weight: 600; - vertical-align: top; - } - td { - vertical-align: middle; - } -} - /* Utility for de-emphasizing content */ .deemphasize { - color: #999; + color: $darkgrey; a { color: $blue; } @@ -222,7 +103,7 @@ table { /* Rules for the header */ -#menu-icon { +#menu-icon { display: none !important; float: right; background: image-url("menu-icon.png") no-repeat; @@ -240,7 +121,7 @@ header { z-index: 1001; font-size: 14px; - h1, nav, nav > ul, nav > ul > li, .dropdown { + h1, nav, nav > ul, nav > ul > li { display: inline-block; } @@ -265,73 +146,55 @@ header { } h1 { + font-size: 18px; + font-weight: 600; + line-height: 1.2; margin: 0; padding-top: 15px; a { color: #000; } - } -} - -nav.primary { - > ul { - $border: 1px solid $green; - - border: $border; - border-radius: $border-radius; - > li { - border-right: $border; - float: left; - &:last-child { - border-right: 0; - } - > a:hover { background: lighten($green, 30%); } - &.current > a:hover { background: $green; } - &.disabled > a:hover { background: lighten($green, 38%); } - &.dropdown { - > a.tab { border-right: 1px solid lighten($green, 30%); } - &.current > a.tab { border-right: 1px solid lighten($green, 10%); } - } + a:hover { + color: #000; } } - a.tab, - .dropdown-toggle { - display: inline-block; - font-weight: 500; - color: $green; - padding: 5px 15px; + .btn { + font-size: 14px; } +} - .dropdown-toggle { - padding: 5px 6px; - } - .caret { - border-top-color: $green; - margin-top: 10px; +nav.primary { + .btn-outline-primary { + @include button-outline-variant($green, $white); } - .disabled a { - color: #ccc; - cursor: default; + .disabled { + .btn-outline-primary { + color: $grey; + cursor: default; - .caret { - border-top-color: #ccc; + .caret { + border-top-color: $grey; + } + + &:hover { + background-color: lighten($green, 30%); + } } } - > ul li.current { + // Small tweaks to the toggle to stop the primary colour showing through + // when the menu is shown + .show > .btn-outline-primary.dropdown-toggle { background-color: $green; + border-color: $green; - .tab { - color: #fff; - } - - .caret { - border-top-color: #fff; + &:focus { + box-shadow: 0 0 0 0.2rem fade-out($green, 0.5); } } } @@ -340,105 +203,76 @@ nav.secondary { position: absolute; right: 0; - > ul { - vertical-align: middle; - a, .dropdown-toggle { - display: inline-block; - text-decoration: none; - color: $darkgrey; - padding: 5px; - - &:hover { color: darken($darkgrey, 25%); } - } + .nav-link { + padding: 0.2rem; + color: $darkgrey; } > ul li.current a { color: darken($darkgrey, 25%); } - .user-menu { - $border: 1px solid $grey; - border: $border; - border-radius: $border-radius; - margin-left: 10px; - - > li { - border-right: $border; - float: left; - &:last-child { - border-right: 0; - - > a { - border-radius: 0 $border-radius $border-radius 0; - } - } - &:first-child > a { border-radius: $border-radius 0 0 $border-radius; } - &:hover a { background: lighten($darkgrey, 30%); } + .login-menu { + .btn-outline-secondary { + @include button-outline-variant($darkgrey); } + } - a { - padding: 5px 15px; - + .user-menu { + .btn-outline-secondary { + @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey); + border-color: $grey; + &:hover { + border-color: $grey; + } + &:focus { + background-color: white; + box-shadow: none; + } } - - &.logged-in > a { - padding: 0; - > .user-button { - line-height: 1.8; - padding: 5px 10px 3px 6px; - display: inline-block; - color: $darkgrey; + &.show .btn-outline-secondary { + background-color: white; + &:focus { + box-shadow: none; } - &:hover > .user-button { color: darken($darkgrey, 5%); } } } - .caret { - border-top-color: $grey; - margin-top: 9px; - } - img.user_thumbnail_tiny { border: 0; - vertical-align: top; - margin-top: 0px; - margin: 4px 0 0 4px; - border-radius: 2px; + border-radius: 3px; } #inboxanchor { display: inline-block; - vertical-align: top; height: 25px; margin: 3px 0 3px 3px; background-color: lighten($grey, 10%); line-height: 20px; - border-radius: 2; + border-radius: 3; } .dropdown-menu { - left: auto; - right: -1px; - border-radius: 3px 0 3px 3px; - .count-number { - float: right; - padding: 0 5px; - margin: 0; + font-size: 14px; + } + } +} + +nav.primary, nav.secondary { + .dropdown-item { + &:hover, &:active { + background-color: $green; + color: white; } } } #compact-secondary-nav { display: none; - ul li a { - width: 100%; - color: #333; - &:hover { color: #fff; } - } } -@media only screen and (max-width:960px) { +body.compact { #compact-secondary-nav { display: inline-block; } @@ -466,90 +300,6 @@ nav.secondary { margin-top: 50px; } -/* Rules for bootstrap tooltips */ - -.tooltip { - position: absolute; - display: none; - color: #333; - text-align: left; - font-size: 12px; - max-width: 250px; -} - -.tooltip.in { - opacity: 0.8; - z-index: 1030; - height: auto; - display: block; -} - -.tooltip.top { - margin-top: -10px; - text-align: center; -} - -.tooltip.right { - margin-left: 10px; -} - -.tooltip.bottom { - margin-top: 10px; - text-align: center; -} - -.tooltip.left { - margin-left: -10px; - text-align: right; -} - -.tooltip-inner { - display: inline-block; - padding: 10px; - font-weight: normal; - background-color: white; -} - -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.tooltip.top .tooltip-arrow { - bottom: -5px; - left: 50%; - margin-left: -5px; - border-top-color: white; - border-width: 5px 5px 0; -} - -.tooltip.right .tooltip-arrow { - top: 50%; - left: -5px; - margin-top: -5px; - border-right-color: white; - border-width: 5px 5px 5px 0; -} - -.tooltip.left .tooltip-arrow { - top: 50%; - right: -5px; - margin-top: -5px; - border-left-color: white; - border-width: 5px 0 5px 5px; -} - -.tooltip.bottom .tooltip-arrow { - top: -5px; - left: 50%; - margin-left: -5px; - border-bottom-color: white; - border-width: 0 5px 5px; -} - /* Rules for Leaflet maps */ .leaflet-control .control-button { @@ -566,14 +316,15 @@ nav.secondary { background-color: black; } - &.disabled { + &.disabled, + &.leaflet-disabled { background-color: #333; background-color: rgba(0,0,0,.5); cursor: default; } &.active { - background-color: #9ed485; + background-color: $vibrant-green; } .icon { @@ -620,43 +371,90 @@ nav.secondary { float: left; width: $sidebarWidth; background: #fff; - font-size: 12px; + + #sidebar_loader { + display: none; + } + + > div { + position: relative; + float: left; + clear: both; + width: 100%; + } h2 { padding: $lineheight $lineheight $lineheight/2; + font-size: 1.5rem; } h3, h4 { margin-top: $lineheight; margin-bottom: $lineheight/2; - font-size: 13px; + font-size: 1.25rem; + } + + .close-wrap { + cursor: pointer; + position: absolute; + top: 0; + right: 0; + width: 60px; + height: 60px; + + .icon.close { + pointer-events: none; + position: absolute; + right: 20px; + top: 20px; + } } .icon.close { float: right; cursor: pointer; } - } - .welcome { - display: none; + .flash { + padding: 15px; + + picture { + margin-right: -25px; + } + + div.message { + margin-left: 30px; + } + } } .overlay-sidebar #sidebar { position: absolute; z-index: 1000; height: auto; - border-bottom-right-radius: 5px; overflow: hidden; - .welcome { + + #banner { display: block; } + + .welcome { + display: none; + + &.visible { + display: block; + } + } + #sidebar_content { display: none; } } .welcome { + display: none; + padding-bottom: 5px; + p { padding: $lineheight/2 $lineheight $lineheight; font-size: 110%; @@ -677,6 +475,15 @@ nav.secondary { } } + #banner { + display: none; + + img { + display: block; + width: $sidebarWidth; + } + } + #map { height: 100%; overflow: hidden; @@ -688,6 +495,10 @@ nav.secondary { &.query-disabled { cursor: not-allowed; } + + .leaflet-marker-draggable { + cursor: move; + } } #map-ui { @@ -700,7 +511,7 @@ nav.secondary { overflow: auto; .section { - border-bottom: 1px solid #DDD; + border-bottom: 1px solid $grey; padding: 10px 20px; } @@ -710,14 +521,14 @@ nav.secondary { font-size:20px; line-height:10px; color:#222; - border:1px solid #ddd; + border:1px solid $grey; } .tooltip { opacity: 1; - border: 1px solid #ccc; + border: 1px solid $grey; .tooltip-arrow { - border-top-color: #ccc; + border-top-color: $grey; } } } @@ -745,7 +556,7 @@ nav.secondary { margin-bottom: 8px; position: relative; transition: border-color 0.08s ease-in; - + label { position: absolute; top: 0; @@ -757,7 +568,7 @@ nav.secondary { font-size: 16px; text-stroke: 2px #fff; background: rgba(255,255,255,.9); - z-index: 2; // For IE9 + z-index: 1000; input[type="radio"] { display: none; } @@ -776,7 +587,7 @@ nav.secondary { font-size: 13px; margin-bottom: 8px; } - li.disabled { color: #999; } + li.disabled { color: $darkgrey; } } } @@ -789,6 +600,7 @@ nav.secondary { text-decoration: none; background-color: $lightblue; padding: 5px 10px; + border-right: 1px solid #fff; } a:first-child { @@ -797,7 +609,6 @@ nav.secondary { } a:last-child { - border-left: 1px solid #fff; border-radius: 0 4px 4px 0; } @@ -857,6 +668,10 @@ nav.secondary { #attribution { display: none; + + table { + width: 100% + } } .attribution_license, @@ -876,11 +691,11 @@ nav.secondary { position: relative; padding: $lineheight/2 $lineheight; // background: $offwhite; - // border-bottom: 1px solid #ccc; - > .close { + // border-bottom: 1px solid $grey; + > .close { float: right; margin-top: 2px; - cursor: pointer; + cursor: pointer; } } @@ -898,10 +713,15 @@ nav.secondary { #sidebar { #sidebar_loader, + .search_more { + width: 100%; + margin: $lineheight auto; + } + .loader, .load_more { text-align: center; - margin: $lineheight auto; + margin: auto; width: 40px; display: block; } @@ -934,11 +754,12 @@ header .search_forms, input[type=text].overflow { border-right: none; + border-radius: 3px 0px 0px 3px; } input:focus { outline: none; - box-shadow: 0px 0px 7px #9ED485; + box-shadow: 0px 0px 7px $vibrant-green; } input[type=submit].float { @@ -948,6 +769,10 @@ header .search_forms, border-radius: 0 2px 2px 0; } + input.error { + background-color: rgba($red, 0.4); + } + select { /* this next line is to polyfill the vertical alignment of text within a select element, * which is different between firefox and chrome. */ @@ -977,6 +802,8 @@ header .search_forms, img.button { display: block; + width: 20px; + height: 20px; } span.force_width { @@ -995,10 +822,28 @@ header .search_forms, float: right; } + div.header { + width: 100%; + height: 30px; + } + div.line { width: 100%; margin: 0px 0px 5px 0px; } + + div.loader_copy { + display: none; + + img { + vertical-align: middle; + } + } + + a.reverse_directions { + cursor: pointer; + margin: 0px 0px 5px 25px; + } } /* Rules for the map key which appears in the popout sidebar */ @@ -1009,32 +854,25 @@ header .search_forms, margin-left: auto; margin-right: auto; } - td { - padding: 0 $lineheight/4 $lineheight/4 $lineheight/4; - } } /* Rules for search sidebar */ -.search_results_entry { +#sidebar .search_results_entry { ul li { - border-bottom: $keyline; cursor: pointer; - &:first-child { border-top: $keyline; } &.selected { background: $list-highlight; } } - .search_details { - display: block; - float: right; - text-align: right; - margin-top: 0.2em; - margin-left: 0.5em; + .search_more .loader { + display: none; + width: 100%; } } .search_results_error { color: #f00; + padding: 10px 20px; } /* Rules for routing */ @@ -1043,6 +881,7 @@ header .search_forms, padding: 5px 20px 10px 15px; width: 100%; border-collapse: separate; + border-spacing: 0; } div.direction { @@ -1051,8 +890,8 @@ div.direction { height: 20px; background-repeat: no-repeat; } -@for $i from 1 through 17 { -div.direction.i#{$i} { background-position: #{($i)*-20+20}px 0px; } +@for $i from 0 through 25 { +div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; } } p#routing_summary { @@ -1062,10 +901,10 @@ p#routing_summary { td.instruction, td.distance { padding-top: $lineheight/5; padding-bottom: $lineheight/5; - border-bottom: 1px solid #DDD; + border-bottom: 1px solid $grey; } td.distance { - color: #BBB; + color: $darkgrey; text-align: right; font-size: x-small; } @@ -1076,7 +915,7 @@ tr.turn:hover { background: $list-highlight; } .routing_engines, #route_from, #route_to { margin-left: 25px; } -.routing_marker { width: 15px; position: absolute; } +.routing_marker { width: 15px; position: absolute; cursor: move; } /* Rules for entity history */ @@ -1095,19 +934,24 @@ tr.turn:hover { #sidebar .changesets { li { - padding: 15px 20px; - border-bottom: 1px solid #ddd; cursor: pointer; &.selected { background: $list-highlight; } /* color is derived from changeset bbox fillColor in history.js */ } - h4 { - margin: 0; - a { - color: #000; - } + .comments { + float: right; + color: $darkgrey; + } + + .comments-0 { + opacity: 0.5; + } + + .changeset_more .loader { + display: none; + width: 100%; } } @@ -1116,7 +960,7 @@ tr.turn:hover { #sidebar_content { .browse-section { padding: $lineheight/2 $lineheight; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid $grey; h4:first-child { margin-top: 0; @@ -1131,45 +975,42 @@ tr.turn:hover { .paginate { float: right; padding: 1px 6px; - border: 1px solid #eee; + border: 1px solid $lightgrey; border-radius: 3px; } - .paginate ul { - padding-left: 20px; - } - .browse-field { margin-bottom: 10px; h4 { padding: 5px 0 5px 10px; font-size: 12px; - border: 1px solid #CCC; + border: 1px solid $grey; border-radius: 4px 4px 0 0; - background-color: #F6F6F6; + background-color: $offwhite; } p { padding: 7px 10px; font-size: 12px; background-color: #FFF; - border: 1px solid #CCC; + border: 1px solid $grey; border-top: 0; border-radius: 0 0 4px 4px; } } .browse-tag-list { - background-color: #F6F6F6; - border: 1px solid #ddd; + background-color: $offwhite; + border: 1px solid $grey; border-radius: 3px; - font-size: 12px; table-layout: fixed; border-collapse: separate; + border-spacing: 0; + width: 100%; th, td { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid $grey; } tr:last-child th, tr:last-child td { @@ -1181,30 +1022,40 @@ tr.turn:hover { width: 50%; padding: 6px 10px; word-wrap: break-word; + white-space: pre-wrap; } .browse-tag-k { font-weight: 500; - background-color: #F6F6F6; + background-color: $offwhite; } .browse-tag-v { - border-left: 1px solid #ddd; + border-left: 1px solid $grey; background-color: #fff; } + + .colour-preview-box { + float: right; + width: 14px; + height: 14px; + margin: 4px 0px; + border: 1px solid rgba(0, 0, 0, .1); + // add color via inline css on element: background-color: ; + } } .warning { - margin: $lineheight/2 0; - padding: $lineheight/2; - font-size: 90%; + margin: 0 0 $lineheight/2 0; + padding: 0 $lineheight/2; } .note-comments li, .changeset-comments li { margin: $lineheight/2 0; p { - margin-left: 10px; + margin: 10px 6px 0 6px; + line-height: 1.5; } } @@ -1240,17 +1091,14 @@ tr.turn:hover { .query-results { display: none; + padding-bottom: $lineheight/2; h3 { - padding: $lineheight $lineheight $lineheight/2; - margin: 0; + padding: 0 $lineheight; } ul { li { - padding: 15px 20px; - border-bottom: 1px solid #ddd; - &.query-result { cursor: pointer; } @@ -1283,18 +1131,18 @@ tr.turn:hover { } .export_boxy { - background: #eee; - border: 1px solid #ccc; + background: $lightgrey; + border: 1px solid $grey; border-radius: 3px; #maxlat { margin-top: -1px; } #minlon { float: left; - margin-left: -1px; + /* no-r2 */ margin-left: -1px; } #maxlon { float: right; - margin-right: -1px; + /* no-r2 */ margin-right: -1px; } #minlat { margin-bottom: 0; } } @@ -1346,8 +1194,6 @@ tr.turn:hover { .content-heading { background: $lightgrey; - - h1 { font-size: 22px; } } .content-body { @@ -1369,18 +1215,10 @@ tr.turn:hover { /* Overrides for pages that use new layout conventions */ -.user-new, -.user-create, -.user-terms { - .content-body .content-inner { - padding: 0; - } -} - -.user-new, -.user-create, -.user-terms, -.user-confirm { +.users-new, +.users-create, +.users-terms, +.users-confirm { .content-heading .content-inner { height: 200px; } @@ -1417,6 +1255,10 @@ tr.turn:hover { } } +[dir=rtl] .header-illustration { + transform: scaleX(-1); +} + #content.maximised { top: 0; left: 0; @@ -1432,44 +1274,11 @@ tr.turn:hover { position: relative; width: 45%; height: 400px; - border: 1px solid #ccc; + border: 1px solid $grey; margin-bottom: $lineheight; float: right; } -/* Rules for the trace list shown by the traces tab etc */ - -#trace_list { - 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; - } -} - /* Rules for the new trace form */ #new_trace { @@ -1483,7 +1292,7 @@ tr.turn:hover { /* Rules for the edit trace form */ .edit_trace { - .form-row p { + .standard-form-row p { margin-bottom: 0px; } @@ -1522,7 +1331,7 @@ tr.turn:hover { .activity-block { clear: left; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid $grey; padding-bottom: $lineheight; float: left; h3 { @@ -1540,11 +1349,7 @@ tr.turn:hover { margin-bottom: 0; } -#friends-container .contact-activity ul { - margin-left: 70px; -} - -.user-view { +.users-show { // Silly exception; remove when user page is redesigned. .content-inner { max-width: none; @@ -1583,7 +1388,6 @@ tr.turn:hover { /* Rules for the user list */ #user_list { - font-size: $lineheight/2; width: 100%; tr { @@ -1605,9 +1409,17 @@ tr.turn:hover { .diary_post { position: relative; - margin-top: $lineheight/2; padding-top: $lineheight; - border-top: 1px solid #ccc; + padding-bottom: $lineheight/2; + border-top: 1px solid $grey; + + &:first-of-type { + margin-top: $lineheight/2; + } + + &.deemphasize { + background-color: #fee; + } .post_heading { margin-bottom: $lineheight; @@ -1615,7 +1427,6 @@ tr.turn:hover { h2 { margin-top: 0; margin-bottom: $lineheight/2; - font-size: 24px; } } @@ -1627,29 +1438,25 @@ tr.turn:hover { float: left; display: block; } - - ul.secondary-actions { - display: inline-block; - } } -.content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div - display: inline; +.pagination { + padding-top: $lineheight; } /* Rules for the diary entry page */ -.diary_entry { +.diary_entries { #map { position: relative; width: 90%; height: 400px; - border: 1px solid #ccc; + border: 1px solid $grey; display: none; margin-bottom: $lineheight; } #newcomment { - border-top: 1px solid #ccc; + border-top: 1px solid $grey; padding-top: $lineheight; margin-top: $lineheight/2; } @@ -1657,13 +1464,16 @@ tr.turn:hover { max-width: 740px; } .diary-comment { - margin-top: $lineheight/2; - border-top: 1px dashed #ccc; + border-top: 1px dashed $grey; padding-top: $lineheight/2; + padding-bottom: $lineheight/2; &:first-child { - margin-top: $lineheight; + margin-top: $lineheight/2; padding-top: $lineheight; - border-top: 1px solid #ccc; + border-top: 1px solid $grey; + } + &.deemphasize { + background-color: #fee; } p { margin-bottom: $lineheight/2; @@ -1675,30 +1485,45 @@ tr.turn:hover { } } -.diary_entry-view img.user_thumbnail { +.diary_entries-show img.user_thumbnail { float: left; } + +.diary-subscribe-buttons { + position:relative; + top: -30px; + left: 130px; +} + /* Rules for the log in page */ -#login_openid_buttons { +#login_auth_buttons { margin-bottom: 0; } -#login_openid_buttons li { +#login_auth_buttons li { float: left; padding: $lineheight/4 $lineheight/2; } /* Rules for the account confirmation page */ -.user-terms { +.users-terms { .legale { - border: 1px solid #ccc; + border: 1px solid $grey; padding: $lineheight; margin-bottom: $lineheight; overflow: auto; height: 20em; + + li { + list-style: inherit; + } + + ol ol { + list-style-type: lower-alpha; + } } #decline { @@ -1715,7 +1540,7 @@ tr.turn:hover { position: relative; width: 500px; height: 400px; - border: 1px solid #ccc; + border: 1px solid $grey; } #accountForm .user_image { @@ -1757,46 +1582,30 @@ tr.turn:hover { border-radius: 0 2px 2px 0; } +/* Rules for the oauth authorization page */ + +.oauth-authorize ul { + list-style: none; +} + /* 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; + background: $offwhite; } .inbox-row-unread { - background:#CBEEA7; + 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 $lightgrey; - } } .inbox-row .inbox-mark-read { @@ -1806,7 +1615,7 @@ tr.turn:hover { .info-line { margin-bottom: $lineheight; padding: $lineheight/4 0px 4px 0px; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid $grey; form, form div { display: inline; @@ -1831,32 +1640,52 @@ tr.turn:hover { display: none; } -.message-read .message-buttons { +.messages-show .message-buttons { margin-top: $lineheight; margin-bottom: $lineheight * 1.5; padding-top: $lineheight; border-top: 1px solid $lightgrey; } -.message-read .buttons .mark-unread-button { +.messages-show .buttons .mark-unread-button { border-radius: 0; } /* Rules for "flash" notice boxes shown at the top of the content area */ -.error { +.flash { padding: $lineheight; - background-color: #ff7070; -} -.warning { - padding: $lineheight; - background-color: #ffe0cc; -} + &.error { + background-color: #ff7070; + } -.notice { - padding: $lineheight; - background-color: #CBEEA7; + &.warning { + background-color: #ffe0cc; + } + + &.notice { + background-color: #CBEEA7; + } + + div.message { + display: inline-block; + margin-left: $lineheight / 2; + vertical-align: middle; + + p { + margin-top: $lineheight * 0.5; + margin-bottom: $lineheight * 0.5; + + &:first-child { + margin-top: 0px; + } + + &:last-child { + margin-bottom: 0px; + } + } + } } /* Rules for highlighting fields with rails validation errors */ @@ -1895,15 +1724,6 @@ tr.turn:hover { margin-bottom: 0px; padding: $lineheight/4; } - - ul { - padding-left: $lineheight; - - li { - font-size: 12px; - list-style: disc; - } - } } /* Rules for forms */ @@ -1935,11 +1755,11 @@ tr.turn:hover { padding-top: $lineheight; border-top: 1px solid $lightgrey; } - .horizontal-list .form-row { + .horizontal-list .standard-form-row { float: left; padding-right: 10px; } - .form-row { + .standard-form-row { margin-bottom: $lineheight/2; } .form-list { @@ -1947,7 +1767,8 @@ tr.turn:hover { } .form-list li { margin-bottom: 5px; - } + list-style-type: none; + } input[type="checkbox"], input[type="radio"] { float: left; @@ -1975,7 +1796,8 @@ input[type="password"], textarea { color: #222; background-color: #fff; - border: 1px solid #ccc; + border: 1px solid $grey; + border-radius: 3px; padding: 2px 5px; margin: 0; width: 200px; @@ -1988,6 +1810,8 @@ textarea { textarea { padding: 5px; width: 100%; + min-height: 50px; + resize: vertical; } /* Rules for user images */ @@ -1995,7 +1819,7 @@ textarea { img.user_image { max-width: 100px; max-height: 100px; - border: 1px solid #ccc; + border: 1px solid $grey; margin-bottom: $lineheight; float: left; margin-right: $lineheight; @@ -2004,7 +1828,7 @@ img.user_image { img.user_thumbnail { max-width: 50px; max-height: 50px; - border: 1px solid #ccc; + border: 1px solid $grey; margin-right: $lineheight; } @@ -2013,7 +1837,7 @@ img.user_thumbnail_tiny { height: auto; max-width: 25px; max-height: 25px; - border: 1px solid #ccc; + border: 1px solid $grey; } /* Rules for geo microformats */ @@ -2022,19 +1846,13 @@ abbr.geo { border-bottom: none; } -/* Rules for RSS buttons */ - -.rsssmall { - position: relative; - top: 3px; -} - /* General styles for action lists / subnavs / pager navs */ ul.secondary-actions { font-style: normal; margin-bottom: 0; margin-left: 0; + padding: 0; &.pager { display: inline-block; margin-right: 60px; @@ -2043,7 +1861,7 @@ ul.secondary-actions { display: block; float: left; list-style: none; - border-left: 1px solid #ccc; + border-left: 1px solid $grey; padding-left: $lineheight/2; margin-right: $lineheight/2; &:first-child { @@ -2175,16 +1993,11 @@ a.button { } } -/* Rules for doing distinct colour of alternate table rows */ - -.table0, -.item0 { - background: $offwhite; -} +/* Customise the background colour of striped tables */ -.table1, -.item1 { - background: #fff; +.table-striped > tbody > tr:nth-child(2n+1) > td, +.table-striped > tbody > tr:nth-child(2n+1) > th { + background-color: $offwhite; } /* Rules for OpenID logo */ @@ -2198,34 +2011,17 @@ a.button { .richtext, .prose { - h1, h2 { - padding-bottom: $lineheight/2; - border-bottom: 1px dashed #cccccc; - margin-bottom: $lineheight/2; - } - - h1 { - font-size: 24px; - } - - h2 { - font-size: 18px; - } - - h3 { - font-size: $typeheight; - } - code { font-size: 13px; - background: #e8e8e8; + background: $lightgrey; padding: 2px 3px; } pre { font-size: 13px; - background: #e8e8e8; + background: $lightgrey; padding: 2px 3px; + white-space: pre-wrap; code { padding: 0; @@ -2244,21 +2040,7 @@ a.button { border-left: $lineheight solid $offwhite; padding-left: $lineheight; margin: 0; - color: #7E7E7E; - } - - ul, ol { - padding-left: $lineheight; - margin-bottom: $lineheight; - margin-left: $lineheight; - } - - ul li { - list-style: disc; - } - - ol li { - list-style: decimal; + color: $darkgrey; } } @@ -2317,7 +2099,7 @@ input.richtext_title[type="text"] { display: inline-block; vertical-align: top; margin-left: 15px; - background-color: #f8f8ff; + background-color: $offwhite; padding: $lineheight/2; width: 220px; @@ -2326,7 +2108,7 @@ input.richtext_title[type="text"] { } h4.heading, li { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid $grey; margin-bottom: $lineheight/4; padding-bottom: $lineheight/4; } @@ -2355,15 +2137,7 @@ input.richtext_title[type="text"] { .note_list { tr.creator { - background-color: #eeeeee; - } - - td { - padding: 3px; - } - - p { - margin-bottom: 0px; + background-color: $offwhite; } } @@ -2374,136 +2148,11 @@ input.richtext_title[type="text"] { height: 100%; } -/* Rules for dropdown menus */ - -.dropdown { - position: relative; -} - -.dropdown-toggle { - *margin-bottom: -3px; -} - -.dropdown-toggle:active, -.open .dropdown-toggle { - outline: 0; -} - -.caret { - display: inline-block; - width: 0; - height: 0; - vertical-align: top; - border-top: 4px solid #000000; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - content: ""; -} - -.dropdown .caret { - margin-top: 8px; - margin-left: 2px; -} - -.dropdown-menu { - position: absolute; - top: 100%; - left: -1px; - z-index: 1000; - display: none; - float: left; - min-width: 160px; - padding: 5px 0; - margin: 0; - list-style: none; - background-color: #ffffff; - border: 1px solid #ccc; - border-radius: 0 3px 3px; - *border-right-width: 2px; - *border-bottom-width: 2px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); - background-clip: padding-box; -} - -.dropdown-menu.pull-right { - right: 0; - left: auto; -} - -.dropdown-menu .divider { - *width: 100%; - height: 1px; - margin: 9px 1px; - *margin: -5px 0 5px; - overflow: hidden; - background-color: #e5e5e5; - border-bottom: 1px solid #ffffff; -} - -.dropdown-menu > li > a { - display: block; - padding: 3px 10px; - clear: both; - font-weight: normal; - line-height: 20px; - color: #333333; - white-space: nowrap; -} - -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus, -.dropdown-submenu:hover > a, -.dropdown-submenu:focus > a { - color: #ffffff; - text-decoration: none; - background-color: $green; -} - -.dropdown-menu > .active > a, -.dropdown-menu > .active > a:hover, -.dropdown-menu > .active > a:focus { - color: #ffffff; - text-decoration: none; - background-color: $green; - outline: 0; -} - -.dropdown-menu > .disabled > a, -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - color: #999999; -} - -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - text-decoration: none; - cursor: default; - background-color: transparent; - background-image: none; -} - -.open { - *z-index: 1000; -} - -.open > .dropdown-menu { - display: block; -} - -.dropdown-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 990; -} - /* Rules for the "Welcome" page */ .site-welcome, .site-fixthemap { .center { text-align: center; - .sprite { + .sprite { float: none; margin: auto; } @@ -2516,7 +2165,7 @@ input.richtext_title[type="text"] { float: left; } - .icon-list { + .icon-list { padding-bottom: 20px; div { margin-bottom: 10px; @@ -2531,7 +2180,7 @@ input.richtext_title[type="text"] { } .sprite.x { - background-position: -50px 0; + /* no-r2 */ background-position: -50px 0; } .sprite.term { @@ -2540,23 +2189,27 @@ input.richtext_title[type="text"] { } .sprite.node { - background-position: -100px 0; + /* no-r2 */ background-position: -100px 0; } .sprite.way { - background-position: -150px 0; + /* no-r2 */ background-position: -150px 0; } .sprite.tag { - background-position: -200px 0; + /* no-r2 */ background-position: -200px 0; } .sprite.editor { - background-position: -250px 0; + /* no-r2 */ background-position: -250px 0; } .sprite.question { - background-position: -300px 0; + /* no-r2 */ background-position: -300px 0; + } + + .sprite.rules { + /* no-r2 */ background-position: -350px 0; } .start-mapping { @@ -2568,11 +2221,6 @@ input.richtext_title[type="text"] { text-decoration: none; } - .note-box { - margin-top: 20px; - background-color: $offwhite; - } - .icon.note { background-color: #333; border-radius: 4px; @@ -2580,60 +2228,18 @@ input.richtext_title[type="text"] { } .site-about #content { - //background-color: #000; - background-color: #eee; + background-color: $lightgrey; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; - .caption { - max-width: 200px; - font: 13px/20px Helvetica, Arial, sans-serif; - position: fixed; - text-align: right; - right: 20px; - bottom: 60px; - text-shadow: #000 0px 1px 5px; - color: #eee; - opacity: 0.8; - display: none; - } - - .caption a { - color: white; - white-space: nowrap; - text-decoration: none; - } - - a.next { - display: block; - position: fixed; - right: 10px; - bottom: 10px; - width: 40px; - height: 40px; - border-radius: 5px; - text-indent: -9999px; - overflow: hidden; - background: image-url('about/sprite.png') -120px 0px no-repeat; - background-color: #000; - background-color: rgba(0, 0, 0, 0.5); - } .content-inner { position: relative; color: #333; min-width: 320px; max-width: 640px; - - .section { - margin-bottom: 30px; - } - - .section:last-child { - margin-bottom: 0; - } } .text { @@ -2655,7 +2261,7 @@ input.richtext_title[type="text"] { font-weight: 300; font-size: 34px; span { - color: #76c551; + color: $vibrant-green; } } @@ -2669,7 +2275,7 @@ input.richtext_title[type="text"] { background-repeat: no-repeat; background-image: image-url('about/osm.png'); background-size: cover; - background-color: #76c551; + background-color: $vibrant-green; } .byosm { @@ -2683,7 +2289,7 @@ input.richtext_title[type="text"] { font: 500 20px/24px Helvetica, Arial, sans-serif; white-space: nowrap; color: #fff; - background: #76c551; + background: $vibrant-green; } .byosm span { @@ -2693,10 +2299,6 @@ input.richtext_title[type="text"] { } } - h2 { - margin-bottom: 10px; - } - .icon { width: 30px; height: 30px; @@ -2704,11 +2306,30 @@ input.richtext_title[type="text"] { vertical-align: middle; background: 40px 40px image-url('about/sprite.png') no-repeat; - &.local { background-position: 0px 0px; } - &.community { background-position: 0px -40px; } - &.open { background-position: 0px -80px; } - &.partners { background-position: 0px -120px; } - &.infringement { background-position: 0px -160px; } + &.local { + /* no-r2 */ + background-position: 0px 0px; + } + &.community { + /* no-r2 */ + background-position: 0px -40px; + } + &.open { + /* no-r2 */ + background-position: 0px -80px; + } + &.partners { + /* no-r2 */ + background-position: 0px -120px; + } + &.infringement { + /* no-r2 */ + background-position: 0px -160px; + } + &.legal { + /* no-r2 */ + background-position: -45px -160px; + } } } @@ -2720,3 +2341,7 @@ input.richtext_title[type="text"] { } } +.read-reports { + background: $lightgrey; + opacity: 0.7; +}