X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/6ae4e53f4582f91267ec829a5b6cb1b2260aa06b..83043d6f1cd85729a3f91e5c73d78a39b8ae7d04:/app/assets/stylesheets/common.scss?ds=sidebyside diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 4cc31d611..cabdfff49 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"; @@ -70,6 +69,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 +140,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); } @@ -195,11 +216,13 @@ body.small-nav { .search_forms { display: block; } + + .username { + max-width: unset; + } } - #sidebar .search_forms, - #edit_tab, - #export_tab { + #sidebar .search_forms { display: none; } @@ -207,7 +230,7 @@ body.small-nav { margin-right: 0; padding: 0; - .btn-group { + #edit_tab { width: 100%; padding: 10px; } @@ -368,6 +391,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 { @@ -395,7 +426,7 @@ body.small-nav { overflow-y: scroll; } - .overlay-sidebar { + .overlay-sidebar.overlay-right-sidebar { #sidebar { position: absolute; width: 350px; @@ -403,7 +434,7 @@ body.small-nav { overflow: hidden; } - #map, #map-ui { + #map { height: 100%; } } @@ -412,9 +443,12 @@ body.small-nav { .layers-ui { .base-layers > * { - height: 56px; + 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 +505,29 @@ body.small-nav { } @include color-mode(dark) { - .leaflet-tile-container, + .leaflet-container .leaflet-control-attribution a { + color: var(--bs-link-color); + } + + .leaflet-control-scale-line { + border-color: rgba(var(--bs-light-rgb), .75) !important; + } +} + +@mixin dark-map-color-scheme { + .leaflet-tile-container .leaflet-tile, .mapkey-table-entry td:first-child > * { filter: brightness(.8); } +} - .leaflet-control-attribution a { - color: var(--bs-link-color); - } +body[data-map-theme="dark"] { + @include dark-map-color-scheme; +} - .leaflet-control-scale-line { - @extend .border-light, .border-opacity-75; +@include color-mode(dark) { + body:not([data-map-theme]) { + @include dark-map-color-scheme; } } @@ -677,10 +723,16 @@ tr.turn { padding: $lineheight; } -/* Overrides for pages that use new layout conventions */ +/* Rules for login and signup pages */ + +.sessions-new, .users-new, .users-create { + #content .content-inner { + max-width: 760px; + } +} .header-illustration { - background-position: 0 0; + background-position: right; background-repeat: no-repeat; position: relative; min-height: 200px; @@ -689,16 +741,16 @@ tr.turn { bottom: 0; &.new-user-main { - background-image: image-url("sign-up-illustration.png"); - background-position-x: 50px; + background-image: image-url("sign-up-illustration.svg"); + background-position-x: 70px; } &.confirm-main { - background-image: image-url("confirm-illustration.png"); + background-image: image-url("confirm-illustration.svg"); } &.new-user-terms { - background-image: image-url("terms-illustration.png"); + background-image: image-url("terms-illustration.svg"); } } @@ -895,11 +947,18 @@ div.secondary-actions { } } -.auth-container { - max-width: 600px; +/* 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); @@ -922,30 +981,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); } } }