X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/9485b08cc13766b24ad0fa89122b4153f3c1209f..ec91b3a39fc28442f367be1dda6cb9dc37172cbb:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index a04615a89..c3f714389 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -66,6 +66,24 @@ time[title] { color: $blue; } +/* Bootstrap contextual table classes overrides in dark mode */ + +@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 { @@ -81,10 +99,15 @@ time[title] { 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 { @@ -188,7 +211,6 @@ body.small-nav { flex-direction: column; height: auto; min-height: $headerHeight; - background: #fff; &.closed nav { display: none; @@ -241,7 +263,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; } @@ -324,7 +346,6 @@ body.small-nav { .overlay-sidebar #sidebar { position: absolute; - z-index: 1000; height: auto; overflow: hidden; @@ -377,13 +398,7 @@ body.small-nav { float: right; width: 250px; height: 100%; - background: white; overflow: auto; - - .section { - border-bottom: 1px solid $grey; - padding: $spacer; - } } } @@ -397,7 +412,6 @@ body.small-nav { } #map-ui { - z-index: 9999; width: 100%; height: 50%; overflow-y: scroll; @@ -419,43 +433,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; - - 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; - } - } + .base-layers > * { + height: 56px; - &.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); } } @@ -488,8 +473,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 */ @@ -546,6 +540,12 @@ header .search_forms, display: none; } +.search_form { + .describe_location { + font-size: 10px; + } +} + /* Rules for search sidebar */ #sidebar .search_results_entry { @@ -570,15 +570,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; } @@ -590,8 +593,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; @@ -625,6 +629,8 @@ 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; @@ -644,10 +650,6 @@ tr.turn:hover { &.query-result { cursor: pointer; } - - &.selected { - background: $list-highlight; - } } } } @@ -672,22 +674,13 @@ tr.turn:hover { /* 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; - > * { margin: -1px; } @@ -786,7 +779,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; @@ -828,28 +820,6 @@ tr.turn:hover { } } -/* Rules for messages pages */ - -.messages { - .inbox-row { - background: $offwhite; - } - - .inbox-row-unread td { - background: #CBEEA7; - } -} - -.search_form { - #query { - z-index: 0; - } - - .describe_location { - font-size: 10px; - } -} - /* Rules for user images */ img.user_image { @@ -898,8 +868,7 @@ div.secondary-actions { /* Rules for rich text */ -.richtext, -.prose { +.richtext { code { background: var(--bs-secondary-bg); padding: 2px 3px; @@ -984,8 +953,6 @@ div.secondary-actions { } .site-about #content { - background-color: $lightgrey; - .content-inner { max-width: 760px; } @@ -1059,4 +1026,17 @@ div.secondary-actions { 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';