X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/2dfe6f3f2e911101f4e4e3b90a00e2ae97725d04..7154ebbb540fc8c93da45e58b6885b642737d605:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 1f7c45db5..ca9a820f9 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -15,10 +15,6 @@ p > img { max-width: 100%; } -small, aside { - font-size: 12px; -} - time[title] { text-decoration: underline dotted; } @@ -66,14 +62,22 @@ time[title] { 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 */ @@ -91,10 +95,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 { @@ -160,11 +169,6 @@ nav.primary { nav.secondary { .nav-link { padding: 0.2rem; - color: $darkgrey; - } - - > ul li.current a { - color: darken($darkgrey, 25%); } #inboxanchor { @@ -203,7 +207,6 @@ body.small-nav { flex-direction: column; height: auto; min-height: $headerHeight; - background: #fff; &.closed nav { display: none; @@ -256,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; } @@ -331,7 +334,6 @@ body.small-nav { #sidebar { float: left; width: $sidebarWidth; - background: #fff; #sidebar_loader { display: none; @@ -340,7 +342,6 @@ body.small-nav { .overlay-sidebar #sidebar { position: absolute; - z-index: 1000; height: auto; overflow: hidden; @@ -393,13 +394,7 @@ body.small-nav { float: right; width: 250px; height: 100%; - background: white; overflow: auto; - - .section { - border-bottom: 1px solid $grey; - padding: $spacer; - } } } @@ -413,7 +408,6 @@ body.small-nav { } #map-ui { - z-index: 9999; width: 100%; height: 50%; overflow-y: scroll; @@ -435,43 +429,14 @@ body.small-nav { } .layers-ui { - .base-layers { - .leaflet-container { - width: 100%; - height: 50px; - cursor: pointer; - } + .base-layers > * { + height: 56px; - 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; - } - } - - &.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); } } @@ -504,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 */ @@ -562,13 +536,15 @@ header .search_forms, display: none; } +.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; } @@ -586,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; } @@ -606,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; @@ -641,6 +621,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; @@ -660,10 +642,6 @@ tr.turn:hover { &.query-result { cursor: pointer; } - - &.selected { - background: $list-highlight; - } } } } @@ -688,32 +666,22 @@ 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; - - #maxlat { margin-top: -1px; } + > * { + margin: -1px; + } #minlon { - float: left; - /*rtl:ignore*/ margin-left: -1px; + /*rtl:ignore*/ float: left; } #maxlon { - float: right; - /*rtl:ignore*/ margin-right: -1px; + /*rtl:ignore*/ float: right; } - #minlat { margin-bottom: -1px; } } } @@ -730,10 +698,6 @@ tr.turn:hover { /* Rules for non-map content pages */ -.content-heading { - background: $lightgrey; -} - .content-inner { position: relative; max-width: 960px; @@ -807,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; @@ -849,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 { @@ -925,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; @@ -944,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); } } @@ -1011,8 +945,6 @@ div.secondary-actions { } .site-about #content { - background-color: $lightgrey; - .content-inner { max-width: 760px; } @@ -1078,4 +1010,25 @@ div.secondary-actions { } } +/* 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';