X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/abb923382c8a1a78aee45ce9a0a5e78b167ded51..7e7ede890e8e948236d3dbc48e24aca00cd01f62:/app/assets/stylesheets/common.scss?ds=inline diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 027e6e6a3..323f60e08 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1,6 +1,5 @@ @use "sass:map"; @import "parameters"; -@import "browse"; @import "bootstrap"; @import "rails_bootstrap_forms"; @@ -10,6 +9,7 @@ body { font-size: $typeheight; + --dark-mode-map-filter: brightness(.8); } time[title] { @@ -217,6 +217,10 @@ body.small-nav { .search_forms { display: block; } + + .username { + max-width: unset; + } } #sidebar .search_forms { @@ -502,11 +506,6 @@ body.small-nav { } @include color-mode(dark) { - .leaflet-tile-container .leaflet-tile, - .mapkey-table-entry td:first-child > * { - filter: brightness(.8); - } - .leaflet-container .leaflet-control-attribution a { color: var(--bs-link-color); } @@ -516,6 +515,27 @@ body.small-nav { } } +@mixin dark-map-color-scheme { + .leaflet-tile-container, + .mapkey-table-entry td:first-child > * { + filter: var(--dark-mode-map-filter); + } + + .leaflet-tile-container .leaflet-tile { + filter: none; + } +} + +body[data-map-theme="dark"] { + @include dark-map-color-scheme; +} + +@include color-mode(dark) { + body:not([data-map-theme]) { + @include dark-map-color-scheme; + } +} + /* Rules for attribution text under the main map shown on printouts */ .donate-attr { color: darken($green, 10%) !important; } @@ -932,13 +952,18 @@ div.secondary-actions { } } -/* Rules for block pages */ +/* Rules for tables with usernames */ +.messages-table .username, #block_list .username { max-width: 20em; } -/* Rules for tabs inside secondary background sections */ +/* Rules for navigation tabs */ + +.nav-tabs .username { + max-width: 20em; +} .bg-body-secondary .nav-tabs { --bs-border-color: var(--bs-secondary-border-subtle); @@ -961,30 +986,20 @@ img.trace_image { /* Rules for map sidebar icons */ -.browse-section { - .node::before, - .way::before, - .relation::before { - display: inline-block; - width: 25px; - margin-left: -25px; - } +.browse-section .browse-element-list { + line-height: 1.25rem; - .node, .way, .relation { - margin-left: 25px; + .browse-icon { + height: 1.25rem; } -} -@each $class, $item in $map-sidebar-icons { - .browse-section #{$class}::before { - content: image-url('browse/#{map.get($item, "filename")}'); + .d-flex > .browse-icon { + height: max(20px, 1.25rem); } - @if map.get($item, "invert") { - @include color-mode(dark) { - .browse-section #{$class}::before { - filter: invert(.8) hue-rotate(180deg); - } + @include color-mode(dark) { + .browse-icon-invertible { + filter: invert(.8) hue-rotate(180deg); } } }