X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/1cf4bf5d983c65ac0bb3868f0bd962b016433265..20ae1926a80d098da9370687445edb24d2a12538:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 7c216ad4b..b179ec5ad 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -16,8 +16,6 @@ time[title] { text-decoration: underline dotted; } -#container { position: relative; } - /* Rules for icons */ .icon { @@ -72,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 { @@ -98,10 +118,6 @@ header { position: relative; font-size: 14px; - h1, nav, nav > ul, nav > ul > li { - display: inline-block; - } - > * { padding: $lineheight * 0.5; } @@ -118,10 +134,14 @@ header { nav.primary { margin-right: auto; } + + .username { + max-width: 12em; + } } nav.primary { - & > .btn-group .btn-outline-primary { + #edit_tab .btn-outline-primary { @include button-outline-variant($green, $color-hover: $white, $active-color: $white); } @@ -154,7 +174,7 @@ nav.primary { nav.secondary { .nav-link { - padding: 0.2rem; + padding: 0.3rem; } } @@ -191,7 +211,7 @@ body.small-nav { min-height: $headerHeight; &.closed nav { - display: none; + display: none !important; } .search_forms { @@ -199,9 +219,7 @@ body.small-nav { } } - #sidebar .search_forms, - #edit_tab, - #export_tab { + #sidebar .search_forms { display: none; } @@ -209,13 +227,15 @@ body.small-nav { margin-right: 0; padding: 0; - .btn-group { + #edit_tab { width: 100%; padding: 10px; } } nav.secondary { + flex-direction: column; + .user-menu, .login-menu { width: 100%; } @@ -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 { @@ -395,7 +423,7 @@ body.small-nav { overflow-y: scroll; } - .overlay-sidebar { + .overlay-sidebar.overlay-right-sidebar { #sidebar { position: absolute; width: 350px; @@ -403,7 +431,7 @@ body.small-nav { overflow: hidden; } - #map, #map-ui { + #map { height: 100%; } } @@ -412,9 +440,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 +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; } } @@ -489,16 +520,6 @@ body.small-nav { .donate-attr { color: darken($green, 10%) !important; } -/* Rules for the sidebar */ - -#browse_status { - input { - display: block; - margin-left: auto; - margin-right: auto; - } -} - /* Temporary label size override until we remove site-wide font customisation */ form { @@ -578,10 +599,12 @@ tr.turn { cursor: pointer; } -.routing_marker { width: 15px; cursor: move; } +.routing_marker_column { + width: 15px; -.browse_status { - display: none; + img { + cursor: move; + } } /* Rules for the history sidebar */ @@ -637,16 +660,6 @@ tr.turn { } } -/* Bootstrap buttons don't have any vertical margin, so - they touch when adjacent buttons wrap onto a new line - e.g. wide form buttons on a narrow sidebar */ - -.btn-wrapper { - > .btn { - margin-bottom: $spacer * 0.25; - } -} - /* Force LTR/RTL alignment for placeholder text */ .form-control::placeholder { @@ -695,10 +708,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; @@ -707,16 +726,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"); } } @@ -911,44 +930,19 @@ div.secondary-actions { margin-left: -1em; } } +} - .icon { - width: 30px; - height: 30px; - background: 40px 40px image-url('about/sprite.png') no-repeat; +/* Rules for block pages */ - &.local { - /*rtl:ignore*/ - background-position: 0px 0px; - } - &.community { - /*rtl:ignore*/ - background-position: 0px -40px; - } - &.open { - /*rtl:ignore*/ - background-position: 0px -80px; - } - &.partners { - /*rtl:ignore*/ - background-position: 0px -120px; - } - &.infringement { - /*rtl:ignore*/ - background-position: 0px -160px; - } - &.legal { - /*rtl:ignore*/ - background-position: -45px -160px; - } - } +#block_list .username { + max-width: 20em; } -.auth-container { - max-width: 600px; -} +/* Rules for navigation tabs */ -/* Rules for tabs inside secondary background sections */ +.nav-tabs .username { + max-width: 20em; +} .bg-body-secondary .nav-tabs { --bs-border-color: var(--bs-secondary-border-subtle); @@ -983,6 +977,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 {