X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/3776a6d321997039ad640e897d952f3f50efb29a..5cc4e933479b7e74ed7d4425909f0915717fc1db:/app/assets/stylesheets/common.scss?ds=sidebyside diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 05920a49f..7c4053c4f 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1,102 +1,12 @@ @import "parameters"; -@import "bootstrap-custom"; +@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: super; - font-size: smaller; -} - -sub { - vertical-align: sub; - font-size: smaller; -} - -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 { - text-decoration: underline 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; @@ -120,20 +30,11 @@ small, aside { #container { position: relative; } -.column-1 { - width: 50%; - margin: 0 0 $lineheight/2 0; -} - .small_icon { vertical-align: middle; margin-right: $lineheight/4; } -.red { color: $red; } - -.piwik { border: 0; } - [dir=rtl] { /* no-r2 */ text-align: right; } [dir=ltr] { /* no-r2 */ text-align: left; } @@ -175,41 +76,12 @@ small, aside { a { color: #24d; text-decoration: none; - -webkit-appearance: none; outline: 0; &:hover { text-decoration: underline; } } -/* Rules for horizontal lines */ - -hr { - border: none; - background-color: $grey; - color: $grey; - 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 { @@ -219,6 +91,10 @@ table { } } +.text-muted a { + color: $blue; +} + /* Rules for the header */ #menu-icon { @@ -239,7 +115,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; } @@ -278,66 +154,41 @@ header { 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%); } - } - } + .btn { + font-size: 14px; } +} - a.tab, - .dropdown-toggle { - display: inline-block; - font-weight: 500; - color: $green; - padding: 5px 15px; - } - .dropdown-toggle { - padding: 5px 6px; +nav.primary { + .btn-outline-primary { + @include button-outline-variant($green, $white); } - .caret { - border-top-color: $green; - margin-top: 10px; - } + .disabled { + .btn-outline-primary { + color: $grey; + cursor: default; - .disabled a { - color: $grey; - cursor: default; + .caret { + border-top-color: $grey; + } - .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); } } } @@ -346,105 +197,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; } - } } -body.compact { +body.compact-nav { #compact-secondary-nav { display: inline-block; } @@ -543,7 +365,6 @@ body.compact { float: left; width: $sidebarWidth; background: #fff; - font-size: 12px; #sidebar_loader { display: none; @@ -558,12 +379,13 @@ body.compact { 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 { @@ -926,6 +748,7 @@ header .search_forms, input[type=text].overflow { border-right: none; + border-radius: 3px 0px 0px 3px; } input:focus { @@ -1025,18 +848,13 @@ header .search_forms, margin-left: auto; margin-right: auto; } - td { - padding: 0 $lineheight/4 $lineheight/4 $lineheight/4; - } } /* Rules for search sidebar */ #sidebar .search_results_entry { ul li { - border-bottom: $keyline; cursor: pointer; - &:first-child { border-top: $keyline; } &.selected { background: $list-highlight; } } @@ -1057,6 +875,7 @@ header .search_forms, padding: 5px 20px 10px 15px; width: 100%; border-collapse: separate; + border-spacing: 0; } div.direction { @@ -1109,21 +928,12 @@ tr.turn:hover { #sidebar .changesets { li { - padding: 15px 20px; - border-bottom: 1px solid $grey; 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; @@ -1163,10 +973,6 @@ tr.turn:hover { border-radius: 3px; } - .paginate ul { - padding-left: 20px; - } - .browse-field { margin-bottom: 10px; @@ -1192,9 +998,10 @@ tr.turn:hover { 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 $grey; @@ -1224,8 +1031,8 @@ tr.turn:hover { .colour-preview-box { float: right; - width: 12px; - height: 12px; + width: 14px; + height: 14px; margin: 4px 0px; border: 1px solid rgba(0, 0, 0, .1); // add color via inline css on element: background-color: ; @@ -1278,17 +1085,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 $grey; - &.query-result { cursor: pointer; } @@ -1384,18 +1188,6 @@ tr.turn:hover { .content-heading { background: $lightgrey; - - h1 { font-size: 22px; } -} - -.content-body { - h1, h2, h3, p, ul, ol { - margin-bottom: $lineheight; - } - - h1, h2, h3 { - margin-top: $lineheight/2; - } } .content-inner { @@ -1407,19 +1199,6 @@ tr.turn:hover { /* Overrides for pages that use new layout conventions */ -.users-new, -.users-create, -.users-terms { - .content-body .content-inner { - padding: 0; - - .message { - margin-top: 80px; - padding: 20px; - } - } -} - .users-new, .users-create, .users-terms, @@ -1476,56 +1255,14 @@ tr.turn:hover { /* Rules for small maps in content areas */ .content_map { - position: relative; - width: 45%; - height: 400px; + height: 200px; 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 trace view */ - -.trace-show { - .trace_pending { - color: red; - } - - .geo { - display: inline; +@include media-breakpoint-up(md) { + .content_map { + height: 400px; } } @@ -1542,7 +1279,7 @@ tr.turn:hover { /* Rules for the edit trace form */ .edit_trace { - .form-row p { + .standard-form-row p { margin-bottom: 0px; } @@ -1556,21 +1293,14 @@ tr.turn:hover { /* Rules for the user profile page */ #userinformation { - min-height: 100px; .userinformation-inner { float: left; } - h2 { - margin-top: 0; - } .user-description { width: 100%; clear: both; } - .deemphasize { - margin: 0; - } } .admin-user-info small { @@ -1579,16 +1309,6 @@ tr.turn:hover { margin-right: $lineheight; } -.activity-block { - clear: left; - border-bottom: 1px solid $grey; - padding-bottom: $lineheight; - float: left; - h3 { - margin-bottom: $lineheight/2; - } -} - .contact-activity { margin-top: $lineheight; width: 100%; @@ -1599,10 +1319,6 @@ tr.turn:hover { margin-bottom: 0; } -#friends-container .contact-activity ul { - margin-left: 70px; -} - .users-show { // Silly exception; remove when user page is redesigned. .content-inner { @@ -1642,7 +1358,6 @@ tr.turn:hover { /* Rules for the user list */ #user_list { - font-size: $lineheight/2; width: 100%; tr { @@ -1672,7 +1387,7 @@ tr.turn:hover { margin-top: $lineheight/2; } - &.deemphasize { + &.deleted { background-color: #fee; } @@ -1682,7 +1397,6 @@ tr.turn:hover { h2 { margin-top: 0; margin-bottom: $lineheight/2; - font-size: 24px; } } @@ -1728,7 +1442,7 @@ tr.turn:hover { padding-top: $lineheight; border-top: 1px solid $grey; } - &.deemphasize { + &.deleted { background-color: #fee; } p { @@ -1792,13 +1506,6 @@ tr.turn:hover { /* Rules for the account settings page */ -#accountForm .user_map { - position: relative; - width: 500px; - height: 400px; - border: 1px solid $grey; -} - #accountForm .user_image { margin-bottom: 0; } @@ -1823,11 +1530,6 @@ tr.turn:hover { display: inline !important; } -.content_map.settings_map { - width: 50%; - float: none; -} - /* Rules for the oauth settings page */ .oauth_clients .buttons .oauth-edit { @@ -1847,43 +1549,21 @@ tr.turn:hover { /* Rules for messages pages */ .messages { - width: 100%; - border: 1px solid $grey; - input[type="submit"] { margin: auto; } - tbody tr { - border-top: 1px solid $grey; - } .inbox-row { 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 { @@ -1918,17 +1598,6 @@ tr.turn:hover { display: none; } -.messages-show .message-buttons { - margin-top: $lineheight; - margin-bottom: $lineheight * 1.5; - padding-top: $lineheight; - border-top: 1px solid $lightgrey; -} - -.messages-show .buttons .mark-unread-button { - border-radius: 0; -} - /* Rules for "flash" notice boxes shown at the top of the content area */ .flash { @@ -2002,15 +1671,6 @@ tr.turn:hover { margin-bottom: 0px; padding: $lineheight/4; } - - ul { - padding-left: $lineheight; - - li { - font-size: 12px; - list-style: disc; - } - } } /* Rules for forms */ @@ -2042,11 +1702,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 { @@ -2054,7 +1714,8 @@ tr.turn:hover { } .form-list li { margin-bottom: 5px; - } + list-style-type: none; + } input[type="checkbox"], input[type="radio"] { float: left; @@ -2083,6 +1744,7 @@ textarea { color: #222; background-color: #fff; border: 1px solid $grey; + border-radius: 3px; padding: 2px 5px; margin: 0; width: 200px; @@ -2095,6 +1757,8 @@ textarea { textarea { padding: 5px; width: 100%; + min-height: 50px; + resize: vertical; } /* Rules for user images */ @@ -2129,19 +1793,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; @@ -2282,16 +1940,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 */ @@ -2305,24 +1958,6 @@ a.button { .richtext, .prose { - h1, h2 { - padding-bottom: $lineheight/2; - border-bottom: 1px dashed $grey; - margin-bottom: $lineheight/2; - } - - h1 { - font-size: 24px; - } - - h2 { - font-size: 18px; - } - - h3 { - font-size: $typeheight; - } - code { font-size: 13px; background: $lightgrey; @@ -2354,20 +1989,6 @@ a.button { margin: 0; color: $darkgrey; } - - ul, ol { - padding-left: $lineheight; - margin-bottom: $lineheight; - margin-left: $lineheight; - } - - ul > li { - list-style: disc; - } - - ol > li { - list-style: decimal; - } } .diary_post .richtext { @@ -2463,15 +2084,7 @@ input.richtext_title[type="text"] { .note_list { tr.creator { - background-color: $lightgrey; - } - - td { - padding: 3px; - } - - p { - margin-bottom: 0px; + background-color: $offwhite; } } @@ -2482,131 +2095,6 @@ 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 $grey; - 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: $lightgrey; - 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: $darkgrey; -} - -.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 { @@ -2680,11 +2168,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; @@ -2698,53 +2181,12 @@ input.richtext_title[type="text"] { 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: $lightgrey; - 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 { @@ -2764,12 +2206,18 @@ input.richtext_title[type="text"] { display: block; color: white; font-weight: 300; - font-size: 34px; + font-size: 28px; span { color: $vibrant-green; } } + @include media-breakpoint-up(sm) { + h1 { + font-size: 34px; + } + } + .user-image { position: absolute; top: 0px; @@ -2804,10 +2252,6 @@ input.richtext_title[type="text"] { } } - h2 { - margin-bottom: 10px; - } - .icon { width: 30px; height: 30px; @@ -2849,59 +2293,3 @@ input.richtext_title[type="text"] { display: none; } } - -.read-reports { - background: $lightgrey; - opacity: 0.7; -} - -.report-related-block { - display:inline-block; -} - -.report-block { - width:475px; - float:left; - margin-right:100px; -} - -.related-reports { - width: 280px; - float: right; - - ul { - padding-left: $lineheight; - margin-bottom: 0; - - li { - list-style: disc; - } - } -} - -.issue-comments { - width:475px; -} - -.issues-list { - td:nth-child(2) { - white-space: nowrap; - } -} - -.report-disclaimer { - background: #fff1f0; - color: #d85030; - border-color: rgba(216, 80, 48, 0.3); - padding: 10px 20px; - margin-bottom: $lineheight; - - ul { - padding-left: $lineheight; - margin-bottom: 0; - - li { - list-style: disc; - } - } -}