X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/52cd62bf1309a91813b8dfccaf5f7ce9859007f1..7dbf65c8f372f99876e0b1ec8e1a73e6b5d96de8:/app/assets/stylesheets/common.scss?ds=sidebyside diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index b0016a3fb..9ec7fb3f4 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -55,24 +55,12 @@ small, aside { .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 */ - -a { - color: #24d; - text-decoration: none; - outline: 0; - &:hover { - text-decoration: underline; - } -} - /* Utility for de-emphasizing content */ .text-muted a { @@ -202,7 +190,7 @@ nav.secondary { .login-menu { .btn-outline-secondary { - @include button-outline-variant($darkgrey); + @include button-outline-variant($darkgrey, $white, null, null, $white); } } @@ -213,24 +201,12 @@ nav.secondary { &:hover { border-color: $grey; } - &:focus { - background-color: white; - box-shadow: none; - } } &.show .btn-outline-secondary { background-color: white; - &:focus { - box-shadow: none; - } } } - img.user_thumbnail_tiny { - border: 0; - border-radius: 3px; - } - #inboxanchor { display: inline-block; height: 25px; @@ -300,7 +276,8 @@ body.compact-nav { margin-bottom: 10px; outline: none; - &:hover { + &:hover, + &:focus { background-color: black; } @@ -374,30 +351,6 @@ body.compact-nav { clear: both; width: 100%; } - - h2 { - font-size: 1.5rem; - } - - h3, h4 { - 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; - } - } } .overlay-sidebar #sidebar { @@ -649,11 +602,6 @@ body.compact-nav { padding: $lineheight/2 $lineheight; // background: $offwhite; // border-bottom: 1px solid $grey; - > .close { - float: right; - margin-top: 2px; - cursor: pointer; - } } #browse_status { @@ -691,6 +639,28 @@ form { } } +/* Stop bootstrap 5 from floating legends when they don't need to be */ +legend { + float: none; +} + +/* Override the text colour for primary and secondary buttons, to match our + bootstrap 4 colours. Note this has accessibility issues, which is why + bootstrap 5 calculates black as the appropriate colour, and we should + reconsider our colours at some point with that in mind. */ + +.btn-primary { + @include button-variant($primary, $primary, $white, null, null, $white, null, null, $white, null, null, $white); +} + +.btn-secondary { + @include button-variant($secondary, $secondary, $white, null, null, $white, null, null, $white, null, null, $white); +} + +.btn-outline-secondary { + @include button-outline-variant($secondary, $white, null, null, $white); +} + /* Rules for the search and direction forms */ header .search_forms, @@ -812,27 +782,6 @@ tr.turn:hover { border-bottom: none; } - .browse-field { - margin-bottom: 10px; - - h4 { - padding: 5px 0 5px 10px; - font-size: 12px; - border: 1px solid $grey; - border-radius: 4px 4px 0 0; - background-color: $offwhite; - } - - p { - padding: 7px 10px; - font-size: 12px; - background-color: #FFF; - border: 1px solid $grey; - border-top: 0; - border-radius: 0 0 4px 4px; - } - } - .browse-tag-list { background-color: $offwhite; table-layout: fixed; @@ -886,16 +835,6 @@ tr.turn:hover { } } - .comments-header { - float: left; - } - - .subscribe-buttons { - float: left; - margin: 0 10px; - min-width: 80px; - } - .subscribe-buttons input { font-size: 90%; line-height: 15px; @@ -1105,26 +1044,9 @@ tr.turn:hover { padding-bottom: $lineheight/2; border-top: 1px solid $grey; - &:first-of-type { - margin-top: $lineheight/2; - } - &.deleted { background-color: #fee; } - - .post_heading { - margin-bottom: $lineheight; - - h2 { - margin-top: 0; - margin-bottom: $lineheight/2; - } - } - - img.user_thumbnail { - float: left; - } } /* Rules for the diary entry page */ @@ -1160,10 +1082,6 @@ tr.turn:hover { } } -.diary_entries-show img.user_thumbnail { - float: left; -} - /* Rules for the log in page */ #login_auth_buttons { @@ -1239,8 +1157,9 @@ tr.turn:hover { /* Rules for messages pages */ .messages { - input[type="submit"] { + button[type="submit"] { margin: auto; + white-space: nowrap; } .inbox-row { @@ -1291,8 +1210,6 @@ tr.turn:hover { /* Rules for "flash" notice boxes shown at the top of the content area */ .flash { - padding: $lineheight; - &.error { background-color: #ff7070; } @@ -1365,10 +1282,6 @@ tr.turn:hover { vertical-align: middle; } } - - a.reverse_directions { - cursor: pointer; - } } /* Rules for user images */ @@ -1494,13 +1407,6 @@ dl.dl-inline { } } -/* Customise the background colour of striped tables */ - -.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 */ .openid_logo { @@ -1513,13 +1419,11 @@ dl.dl-inline { .richtext, .prose { code { - font-size: 13px; background: $lightgrey; padding: 2px 3px; } pre { - font-size: 13px; background: $lightgrey; padding: 2px 3px; white-space: pre-wrap; @@ -1562,19 +1466,10 @@ dl.dl-inline { /* Rules for the "Welcome" page */ .site-welcome, .site-fixthemap { - .center { - text-align: center; - .sprite { - float: none; - margin: auto; - } - } - .sprite { background-image: image-url("welcome-sprite.png"); background-size: 500px 250px; display: block; - float: left; } .icon-list { @@ -1624,15 +1519,6 @@ dl.dl-inline { /* no-r2 */ background-position: -350px 0; } - .start-mapping { - margin: auto; - cursor: pointer; - border: none; - padding: 20px 40px; - font-size: 30px; - text-decoration: none; - } - .icon.note { background-color: #333; border-radius: 4px;