X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/3d5ad709fa6cd47a7d5c1dd750bfa551e5811b39..7154ebbb540fc8c93da45e58b6885b642737d605:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index f91f380b2..ca9a820f9 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -2,34 +2,6 @@ @import "bootstrap"; @import "rails_bootstrap_forms"; -/* Bootstrap + r2 fixes */ - -:root[dir=rtl] { - .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow { - /* no-r2 */ - right: unset !important; - left: calc(-1 * var(--bs-tooltip-arrow-height)) !important; - - &::before { - /* no-r2 */ - left: unset !important; - right: -1px !important; - } - } - - .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow { - /* no-r2 */ - left: unset !important; - right: calc(-1 * var(--bs-tooltip-arrow-height)) !important; - - &::before { - /* no-r2 */ - right: unset !important; - left: -1px !important; - } - } -} - /* Styles common to large and small screens */ /* Default rules for the body of every page */ @@ -43,8 +15,8 @@ p > img { max-width: 100%; } -small, aside { - font-size: 12px; +time[title] { + text-decoration: underline dotted; } #container { position: relative; } @@ -61,29 +33,28 @@ small, aside { vertical-align: top; width: 20px; height: 20px; - background: transparent image-url("sprite.png") no-repeat 0 0; - background-image: image-url("sprite.svg"); + background: transparent image-url("sprite.svg") no-repeat 0 0; 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; } -.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; } +.icon.search { /*rtl:ignore*/ background-position: 0 0; } +.icon.donate { /*rtl:ignore*/ background-position: -20px 0; } +.icon.zoomin { /*rtl:ignore*/ background-position: -40px 0; } +.icon.zoomout { /*rtl:ignore*/ background-position: -60px 0; } +.icon.geolocate { /*rtl:ignore*/ background-position: -80px 0; } +.active .icon.geolocate { /*rtl:ignore*/ background-position: -80px -20px; } +.icon.layers { /*rtl:ignore*/ background-position: -100px 0; } +.icon.key { /*rtl:ignore*/ background-position: -120px 0; } +.icon.share { /*rtl:ignore*/ background-position: -140px 0; } +.icon.clipboard { /*rtl:ignore*/ background-position: -160px 0; } +.icon.link { /*rtl:ignore*/ background-position: -180px 0; } +.icon.close { /*rtl:ignore*/ background-position: -200px 0; } +.icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; } +.icon.check { /*rtl:ignore*/ background-position: -220px 0; } +.icon.note { /*rtl:ignore*/ background-position: -240px 0; } +.icon.note.grey { /*rtl:ignore*/ background-position: -240px -20px; } +.icon.query { /*rtl:ignore*/ background-position: -260px 0; } /* Utility for de-emphasizing content */ @@ -91,21 +62,31 @@ small, aside { color: $blue; } -/* Rules for borders */ -/* These add additional colours to those provided by bootstrap */ -.border-grey { - border-color: $grey !important; -} +/* Bootstrap contextual table classes overrides in dark mode */ -.border-lightgrey { - border-color: $lightgrey !important; +@include color-mode(dark) { + .table-primary { + --bs-table-bg: rgb(var(--bs-primary-rgb), .25); + } + .table-secondary { + --bs-table-bg: rgb(var(--bs-secondary-rgb), .25); + } + .table-success { + --bs-table-bg: rgb(var(--bs-success-rgb), .25); + } + .table-primary, .table-secondary, .table-success { + --bs-table-color: initial; + border-color: inherit; + } } /* Rules for the header */ #menu-icon { display: none; - float: right; + position: absolute; + top: 0; + right: 0; background: image-url("menu-icon.png") no-repeat; background-size: 30px 30px; width: 30px; @@ -114,10 +95,15 @@ small, aside { opacity: 0.6; } +@include color-mode(dark) { + #menu-icon { + filter: invert(1); + } +} + header { height: $headerHeight; position: relative; - z-index: 1001; font-size: 14px; h1, nav, nav > ul, nav > ul > li { @@ -129,10 +115,6 @@ header { padding: $lineheight * 0.5; } - h1, nav.primary { - float: left; - } - img.logo { margin-top: -2px; } @@ -146,8 +128,11 @@ header { .btn { font-size: 14px; } -} + nav.primary { + margin-right: auto; + } +} nav.primary { & > .btn-group .btn-outline-primary { @@ -182,16 +167,8 @@ nav.primary { } nav.secondary { - position: absolute; - right: 0; - .nav-link { padding: 0.2rem; - color: $darkgrey; - } - - > ul li.current a { - color: darken($darkgrey, 25%); } #inboxanchor { @@ -226,18 +203,10 @@ body.small-nav { display: block; } - nav.primary, - nav.secondary { - float: none !important; - position: relative; - display: block; - clear: both; - } - header { + flex-direction: column; height: auto; min-height: $headerHeight; - background: #fff; &.closed nav { display: none; @@ -255,28 +224,9 @@ body.small-nav { } nav.primary { + margin-right: 0; padding: 0; - ul, li { - border: none; - border-radius: 0; - width: 100%; - } - - ul { - border-top: 1px solid #eee; - li { - border-bottom: 1px solid #eee; - border-right: none; - > a { - border-radius: 0; - width: 100%; - text-align: center; - font-size: 15px; - } - } - } - .btn-group { width: 100%; padding: 10px; @@ -309,7 +259,7 @@ body.small-nav { /* Utility for styling notification numbers */ .count-number { - background: lighten($green, 30%); + background: transparentize(lighten($green, 25%), .25); color: $gray-800; font-weight: $font-weight-normal; } @@ -384,7 +334,6 @@ body.small-nav { #sidebar { float: left; width: $sidebarWidth; - background: #fff; #sidebar_loader { display: none; @@ -393,7 +342,6 @@ body.small-nav { .overlay-sidebar #sidebar { position: absolute; - z-index: 1000; height: auto; overflow: hidden; @@ -446,13 +394,7 @@ body.small-nav { float: right; width: 250px; height: 100%; - background: white; overflow: auto; - - .section { - border-bottom: 1px solid $grey; - padding: $spacer; - } } } @@ -466,7 +408,6 @@ body.small-nav { } #map-ui { - z-index: 9999; width: 100%; height: 50%; overflow-y: scroll; @@ -488,43 +429,14 @@ body.small-nav { } .layers-ui { - .base-layers { - .leaflet-container { - width: 100%; - height: 50px; - cursor: pointer; - } - - li { - overflow: hidden; - border-radius: 3px; - border: 2px solid #fff; - margin-bottom: 8px; - position: relative; - transition: border-color 0.08s ease-in; + .base-layers > * { + height: 56px; - label { - position: absolute; - top: 0; - left: 0; - padding: 2px 6px; - border-bottom-right-radius: 3px; - cursor: pointer; - font-weight: 600; - font-size: 16px; - text-stroke: 2px #fff; - background: rgba(255,255,255,.9); - z-index: 1000; - input[type="radio"] { - display: none; - } - } - - &.active { border-color: darken($green, 10%); } - &:hover { - border-color: $grey; - &.active { border-color: darken($green, 20%); } - } + > .btn { + --bs-btn-border-color: var(--bs-body-bg); + } + > .btn:hover { + --bs-btn-border-color: var(--bs-primary-border-subtle); } } @@ -557,8 +469,17 @@ body.small-nav { border-top: 0px !important; } +.leaflet-popup-content-wrapper, +.leaflet-popup-tip { + @extend .bg-body, .text-body; +} + .leaflet-popup-content-wrapper { - border-radius: 4px !important; + @extend .rounded-1; + + a { + color: var(--bs-link-color) !important; + } } /* Rules for attribution text under the main map shown on printouts */ @@ -615,23 +536,15 @@ header .search_forms, display: none; } -/* Rules for the map key which appears in the popout sidebar */ - -#mapkey { - .mapkey-table-key img { - display: block; - margin-left: auto; - margin-right: auto; +.search_form { + .describe_location { + font-size: 10px; } } /* Rules for search sidebar */ #sidebar .search_results_entry { - ul li.selected { - background: $list-highlight; - } - .search_more .loader { display: none; } @@ -649,15 +562,18 @@ div.direction { div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; } } +@include color-mode(dark) { + div.direction { + filter: invert(1); + } +} + td.distance { font-size: x-small; } tr.turn { cursor: pointer; } -tr.turn:hover { - background: $list-highlight; -} .routing_marker { width: 15px; cursor: move; } @@ -669,8 +585,9 @@ tr.turn:hover { #sidebar .changesets { li { - &.selected { background: $list-highlight; } - /* color is derived from changeset bbox fillColor in history.js */ + &.selected { + @extend :hover; + } a.stretched-link > span, a:not(.stretched-link), [title] { position: relative; @@ -704,21 +621,12 @@ tr.turn:hover { .browse-tag-list { table-layout: fixed; white-space: pre-wrap; + word-wrap: break-word; + word-break: break-word; tr:last-child th, tr:last-child td { border-bottom: 0; } - - .colour-preview-box { - width: 14px; - height: 14px; - // add color via inline css on element: background-color: ; - } - } - - span.action-button:hover { - cursor: pointer; - text-decoration: underline; } .note-description { @@ -734,10 +642,6 @@ tr.turn:hover { &.query-result { cursor: pointer; } - - &.selected { - background: $list-highlight; - } } } } @@ -753,35 +657,31 @@ tr.turn:hover { } } +/* Force LTR/RTL alignment for placeholder text */ + +.form-control::placeholder { + text-align: left; +} + /* Rules for export sidebar */ .export_form { - .export_area_inputs, - .export_button { - text-align: center; - } - .export_area_inputs { - margin-bottom: $spacer; input[type="text"] { width: 100px; - text-align: center; } } .export_boxy { - background: $lightgrey; - - #maxlat { margin-top: -1px; } + > * { + margin: -1px; + } #minlon { - float: left; - /* no-r2 */ margin-left: -1px; + /*rtl:ignore*/ float: left; } #maxlon { - float: right; - /* no-r2 */ margin-right: -1px; + /*rtl:ignore*/ float: right; } - #minlat { margin-bottom: -1px; } } } @@ -798,10 +698,6 @@ tr.turn:hover { /* Rules for non-map content pages */ -.content-heading { - background: $lightgrey; -} - .content-inner { position: relative; max-width: 960px; @@ -875,7 +771,6 @@ tr.turn:hover { /* Rules for user popups on maps */ .user_popup { - min-width: 200px; p { padding: 0 0 5px 0; margin: 0 0 0 60px; @@ -890,14 +785,11 @@ tr.turn:hover { height: 400px; display: none; } - .comments { - max-width: 740px; + .diary-comment .col-auto { + width: 62px; } - .diary-comment { - border-top: 1px dashed $grey; - &:first-child { - border-top: 1px solid $grey; - } + .diary-comment .col { + max-width: 690px; } } @@ -920,34 +812,6 @@ tr.turn:hover { } } -/* Rules for messages pages */ - -.messages { - .inbox-row { - background: $offwhite; - } - - .inbox-row-unread td { - background: #CBEEA7; - } -} - -.search_form { - background-color: $lightgrey; - - #query { - z-index: 0; - } - - .describe_location { - font-size: 10px; - } -} - -.directions_form { - background-color: $lightgrey; -} - /* Rules for user images */ img.user_image { @@ -961,10 +825,9 @@ img.user_thumbnail { } img.user_thumbnail_tiny { - width: auto; - height: auto; - max-width: 25px; - max-height: 25px; + width: 25px; + height: 25px; + object-fit: contain; } /* General styles for action lists / subnavs */ @@ -997,15 +860,14 @@ div.secondary-actions { /* Rules for rich text */ -.richtext, -.prose { +.richtext { code { - background: $lightgrey; + background: var(--bs-secondary-bg); padding: 2px 3px; } pre { - background: $lightgrey; + background: var(--bs-secondary-bg); padding: 2px 3px; white-space: pre-wrap; @@ -1016,17 +878,17 @@ div.secondary-actions { img { padding: $lineheight; - background-color: $offwhite; + background-color: var(--bs-tertiary-bg); display: block; max-width: 100%; margin: auto; } blockquote { - border-left: $lineheight solid $offwhite; + border-left: $lineheight solid var(--bs-tertiary-bg); padding-left: $lineheight; margin: 0; - color: $darkgrey; + color: var(--bs-secondary-color); } } @@ -1044,7 +906,7 @@ div.secondary-actions { } .sprite.x { - /* no-r2 */ background-position: -50px 0; + /*rtl:ignore*/ background-position: -50px 0; } .sprite.term { @@ -1053,27 +915,27 @@ div.secondary-actions { } .sprite.node { - /* no-r2 */ background-position: -100px 0; + /*rtl:ignore*/ background-position: -100px 0; } .sprite.way { - /* no-r2 */ background-position: -150px 0; + /*rtl:ignore*/ background-position: -150px 0; } .sprite.tag { - /* no-r2 */ background-position: -200px 0; + /*rtl:ignore*/ background-position: -200px 0; } .sprite.editor { - /* no-r2 */ background-position: -250px 0; + /*rtl:ignore*/ background-position: -250px 0; } .sprite.question { - /* no-r2 */ background-position: -300px 0; + /*rtl:ignore*/ background-position: -300px 0; } .sprite.rules { - /* no-r2 */ background-position: -350px 0; + /*rtl:ignore*/ background-position: -350px 0; } .icon.note { @@ -1083,8 +945,6 @@ div.secondary-actions { } .site-about #content { - background-color: $lightgrey; - .content-inner { max-width: 760px; } @@ -1124,30 +984,51 @@ div.secondary-actions { background: 40px 40px image-url('about/sprite.png') no-repeat; &.local { - /* no-r2 */ + /*rtl:ignore*/ background-position: 0px 0px; } &.community { - /* no-r2 */ + /*rtl:ignore*/ background-position: 0px -40px; } &.open { - /* no-r2 */ + /*rtl:ignore*/ background-position: 0px -80px; } &.partners { - /* no-r2 */ + /*rtl:ignore*/ background-position: 0px -120px; } &.infringement { - /* no-r2 */ + /*rtl:ignore*/ background-position: 0px -160px; } &.legal { - /* no-r2 */ + /*rtl:ignore*/ background-position: -45px -160px; } } } +/* Rules for tabs inside secondary background sections */ + +.bg-body-secondary .nav-tabs { + --bs-border-color: var(--bs-secondary-border-subtle); + --bs-secondary-bg: var(--bs-secondary-border-subtle); + margin-bottom: -1px; +} + +/* Rules for traces */ + +img.trace_image { + mix-blend-mode: darken; +} + +@include color-mode(dark) { + img.trace_image { + filter: invert(1); + mix-blend-mode: lighten; + } +} + @import 'browse';