X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/3f4cba44340a5ddeb26217c052ea27a3c6ccc98c..156c526c22fd9f96ffc8667fafaaf10e206a70e4:/app/assets/stylesheets/common.scss?ds=sidebyside diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index ee551aed2..cf63c8f8c 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -70,6 +70,28 @@ time[title] { } } +/* Utility for delayed loading spinner */ + +.delayed-fade-in { + animation: 300ms linear forwards delayed-fade-in; +} + +@keyframes delayed-fade-in { + 0% { opacity: 0 } + 66% { opacity: 0 } + 100% { opacity: 1 } +} + +/* Bootstrap close button overrides for nested light/dark themes */ + +[data-bs-theme="dark"] .btn-close { + filter: var(--bs-btn-close-white-filter); +} + +[data-bs-theme="light"] .btn-close { + filter: none; +} + /* Rules for the header */ #menu-icon { @@ -119,7 +141,7 @@ header { } nav.primary { - & > .btn-group .btn-outline-primary { + #edit_tab .btn-outline-primary { @include button-outline-variant($green, $color-hover: $white, $active-color: $white); } @@ -197,9 +219,7 @@ body.small-nav { } } - #sidebar .search_forms, - #edit_tab, - #export_tab { + #sidebar .search_forms { display: none; } @@ -207,7 +227,7 @@ body.small-nav { margin-right: 0; padding: 0; - .btn-group { + #edit_tab { width: 100%; padding: 10px; } @@ -368,6 +388,14 @@ body.small-nav { .leaflet-marker-draggable { cursor: move; } + + .query-marker { + animation: 1500ms forwards query-marker-fade; + + @keyframes query-marker-fade { + to { opacity: 0 } + } + } } #map-ui { @@ -415,6 +443,9 @@ body.small-nav { height: 3.5rem; > .btn { + box-sizing: content-box; + top: - map.get($border-widths, 4); + left: - map.get($border-widths, 4); --bs-btn-border-color: var(--bs-body-bg); } > .btn:hover { @@ -471,17 +502,17 @@ body.small-nav { } @include color-mode(dark) { - .leaflet-tile-container, + .leaflet-tile-container .leaflet-tile, .mapkey-table-entry td:first-child > * { filter: brightness(.8); } - .leaflet-control-attribution a { + .leaflet-container .leaflet-control-attribution a { color: var(--bs-link-color); } .leaflet-control-scale-line { - @extend .border-light, .border-opacity-75; + border-color: rgba(var(--bs-light-rgb), .75) !important; } } @@ -901,7 +932,18 @@ div.secondary-actions { } } -/* Rules for tabs inside secondary background sections */ +/* Rules for tables with usernames */ + +.messages-table .username, +#block_list .username { + max-width: 20em; +} + +/* Rules for navigation tabs */ + +.nav-tabs .username { + max-width: 20em; +} .bg-body-secondary .nav-tabs { --bs-border-color: var(--bs-secondary-border-subtle); @@ -936,6 +978,10 @@ img.trace_image { .node, .way, .relation { margin-left: 25px; } + + .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 {