@use "sass:map";
@import "parameters";
-@import "browse";
@import "bootstrap";
@import "rails_bootstrap_forms";
body {
font-size: $typeheight;
+ --dark-mode-map-filter: brightness(.8);
}
time[title] {
.search_forms {
display: block;
}
+
+ .username {
+ max-width: unset;
+ }
}
#sidebar .search_forms {
}
@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);
}
}
}
+@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; }
}
}
-/* Rules for block pages */
+/* Rules for tables with usernames */
+.messages-table .username,
#block_list .username {
max-width: 20em;
}
/* 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;
}
- .node::before { content: image-url('browse/node.svg'); }
- .way::before { content: image-url('browse/way.svg'); }
- .relation::before { content: image-url('browse/relation.svg'); }
-}
-
-@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);
}
}
}