X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/ebb993728376fc246682ab353b5cec0a9dd3b1c5..31f4ab5c466bcbafb940db5668627f9922beaaba:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index abd696603..53a60a3b2 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1,4 +1,6 @@ +@use "sass:map"; @import "parameters"; +@import "browse"; @import "bootstrap"; @import "rails_bootstrap_forms"; @@ -10,26 +12,12 @@ body { font-size: $typeheight; } -p > img { - width: auto; - max-width: 100%; -} - -small, aside { - font-size: 12px; -} - time[title] { text-decoration: underline dotted; } #container { position: relative; } -.small_icon { - vertical-align: middle; - margin-right: $lineheight * 0.25; -} - /* Rules for icons */ .icon { @@ -75,7 +63,10 @@ time[title] { .table-secondary { --bs-table-bg: rgb(var(--bs-secondary-rgb), .25); } - .table-primary, .table-secondary { + .table-success { + --bs-table-bg: rgb(var(--bs-success-rgb), .25); + } + .table-primary, .table-secondary, .table-success { --bs-table-color: initial; border-color: inherit; } @@ -171,10 +162,6 @@ nav.secondary { .nav-link { padding: 0.2rem; } - - #inboxanchor { - background-color: lighten($grey, 10%); - } } nav.primary, nav.secondary { @@ -470,8 +457,23 @@ body.small-nav { border-top: 0px !important; } +.leaflet-popup-content-wrapper, +.leaflet-popup-tip, +.leaflet-contextmenu, +.leaflet-contextmenu-item { + @extend .bg-body, .text-body; +} + +.leaflet-contextmenu-item.over { + @extend .bg-body-secondary, .border-secondary, .border-opacity-10; +} + .leaflet-popup-content-wrapper { - border-radius: 4px !important; + @extend .rounded-1; + + a { + color: var(--bs-link-color) !important; + } } @include color-mode(dark) { @@ -544,10 +546,6 @@ header .search_forms, /* Rules for search sidebar */ #sidebar .search_results_entry { - ul li.selected { - background: $list-highlight; - } - .search_more .loader { display: none; } @@ -588,8 +586,9 @@ tr.turn { #sidebar .changesets { li { - &.selected { background: $list-highlight; } - /* color is derived from changeset bbox fillColor in history.js */ + &.selected { + @extend :hover; + } a.stretched-link > span, a:not(.stretched-link), [title] { position: relative; @@ -623,6 +622,8 @@ tr.turn { .browse-tag-list { table-layout: fixed; white-space: pre-wrap; + word-wrap: break-word; + word-break: break-word; tr:last-child th, tr:last-child td { border-bottom: 0; @@ -636,18 +637,6 @@ tr.turn { .query-results { display: none; - - ul { - li { - &.query-result { - cursor: pointer; - } - - &.selected { - background: $list-highlight; - } - } - } } } @@ -722,6 +711,7 @@ tr.turn { &.new-user-main { background-image: image-url("sign-up-illustration.png"); + background-position-x: 50px; } &.confirm-main { @@ -731,17 +721,6 @@ tr.turn { &.new-user-terms { background-image: image-url("terms-illustration.png"); } - - &.new-user-arm { - height: 110px; - width: 130px; - left: 280px; - top: 180px; - background-image: image-url("sign-up-illustration-arm.png"); - position: absolute; - z-index: 100; - pointer-events: none; - } } [dir=rtl] .header-illustration { @@ -775,7 +754,6 @@ tr.turn { /* Rules for user popups on maps */ .user_popup { - min-width: 200px; p { padding: 0 0 5px 0; margin: 0 0 0 60px; @@ -817,14 +795,6 @@ tr.turn { } } -/* Rules for messages pages */ - -.messages { - .inbox-row-unread td { - background: #CBEEA7; - } -} - /* Rules for user images */ img.user_image { @@ -950,11 +920,6 @@ div.secondary-actions { .sprite.rules { /*rtl:ignore*/ background-position: -350px 0; } - - .icon.note { - background-color: #333; - border-radius: 4px; - } } .site-about #content { @@ -1023,6 +988,10 @@ div.secondary-actions { } } +.auth-container { + max-width: 600px; +} + /* Rules for tabs inside secondary background sections */ .bg-body-secondary .nav-tabs { @@ -1044,4 +1013,32 @@ img.trace_image { } } -@import 'browse'; +/* Rules for map sidebar icons */ + +.browse-section { + .node::before, + .way::before, + .relation::before { + display: inline-block; + width: 25px; + margin-left: -25px; + } + + .node, .way, .relation { + margin-left: 25px; + } +} + +@each $class, $item in $map-sidebar-icons { + .browse-section #{$class}::before { + content: image-url('browse/#{map.get($item, "filename")}'); + } + + @if map.get($item, "invert") { + @include color-mode(dark) { + .browse-section #{$class}::before { + filter: invert(.8) hue-rotate(180deg); + } + } + } +}