X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/0c4cbda662502f05646a4e82f5d8f639b9183059..8497760870a104044cfacc77971106b27884bfa8:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index ba976ff2b..31ce7dd28 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,10 @@ 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 { @@ -62,10 +48,50 @@ time[title] { /* Utility for de-emphasizing content */ -.text-muted a { +.text-body-secondary a { color: $blue; } +/* Bootstrap contextual table classes overrides in dark mode */ + +@include color-mode(dark) { + .table-primary { + --bs-table-bg: rgb(var(--bs-primary-rgb), .25); + } + .table-secondary { + --bs-table-bg: rgb(var(--bs-secondary-rgb), .25); + } + .table-success { + --bs-table-bg: rgb(var(--bs-success-rgb), .25); + } + .table-primary, .table-secondary, .table-success { + --bs-table-color: initial; + border-color: inherit; + } +} + +/* 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 { @@ -73,7 +99,7 @@ time[title] { position: absolute; top: 0; right: 0; - background: image-url("menu-icon.png") no-repeat; + background: image-url("menu-icon.svg") no-repeat; background-size: 30px 30px; width: 30px; height: 30px; @@ -81,29 +107,24 @@ time[title] { opacity: 0.6; } +@include color-mode(dark) { + #menu-icon { + filter: invert(1); + } +} + header { height: $headerHeight; position: relative; - z-index: 1001; font-size: 14px; - h1, nav, nav > ul, nav > ul > li { - display: inline-block; - } - > * { - height: 100%; padding: $lineheight * 0.5; } - img.logo { - margin-top: -2px; - } - h1 { + height: $headerHeight; font-size: 18px; - line-height: 1.2; - padding-top: 15px; } .btn { @@ -113,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); } @@ -149,16 +174,7 @@ nav.primary { nav.secondary { .nav-link { - padding: 0.2rem; - color: $darkgrey; - } - - > ul li.current a { - color: darken($darkgrey, 25%); - } - - #inboxanchor { - background-color: lighten($grey, 10%); + padding: 0.3rem; } } @@ -193,10 +209,9 @@ body.small-nav { flex-direction: column; height: auto; min-height: $headerHeight; - background: #fff; &.closed nav { - display: none; + display: none !important; } .search_forms { @@ -204,9 +219,7 @@ body.small-nav { } } - #sidebar .search_forms, - #edit_tab, - #export_tab { + #sidebar .search_forms { display: none; } @@ -214,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%; } @@ -246,7 +261,7 @@ body.small-nav { /* Utility for styling notification numbers */ .count-number { - background: lighten($green, 30%); + background: transparentize(lighten($green, 25%), .25); color: $gray-800; font-weight: $font-weight-normal; } @@ -329,7 +344,6 @@ body.small-nav { .overlay-sidebar #sidebar { position: absolute; - z-index: 1000; height: auto; overflow: hidden; @@ -374,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 { @@ -382,13 +404,7 @@ body.small-nav { float: right; width: 250px; height: 100%; - background: white; overflow: auto; - - .section { - border-bottom: 1px solid $grey; - padding: $spacer; - } } } @@ -402,13 +418,12 @@ body.small-nav { } #map-ui { - z-index: 9999; width: 100%; height: 50%; overflow-y: scroll; } - .overlay-sidebar { + .overlay-sidebar.overlay-right-sidebar { #sidebar { position: absolute; width: 350px; @@ -416,7 +431,7 @@ body.small-nav { overflow: hidden; } - #map, #map-ui { + #map { height: 100%; } } @@ -424,51 +439,21 @@ body.small-nav { } .layers-ui { - .base-layers { - .leaflet-container { - width: 100%; - height: 50px; - cursor: pointer; - } - - li { - overflow: hidden; - border-radius: 3px; - border: 2px solid #fff; - margin-bottom: 8px; - position: relative; - transition: border-color 0.08s ease-in; - - label { - position: absolute; - top: 0; - left: 0; - padding: 2px 6px; - border-bottom-right-radius: 3px; - cursor: pointer; - font-weight: 600; - font-size: 16px; - text-stroke: 2px #fff; - background: rgba(255,255,255,.9); - z-index: 1000; - input[type="radio"] { - display: none; - } - } + .base-layers > * { + height: 3.5rem; - &.active { border-color: darken($green, 10%); } - &:hover { - border-color: $grey; - &.active { border-color: darken($green, 20%); } - } + > .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 { + --bs-btn-border-color: var(--bs-primary-border-subtle); } } .overlay-layers { - p { - font-size: 13px; - margin-bottom: 8px; - } li.disabled { color: $darkgrey; } } } @@ -493,24 +478,48 @@ body.small-nav { border-top: 0px !important; } -.leaflet-popup-content-wrapper { - border-radius: 4px !important; +.leaflet-popup-content-wrapper, .leaflet-popup-tip, +.leaflet-contextmenu, .leaflet-contextmenu-item, +.leaflet-control-attribution, .leaflet-control-scale-line { + @extend .bg-body, .text-body; } -/* Rules for attribution text under the main map shown on printouts */ +.leaflet-control-attribution, .leaflet-control-scale-line { + @extend .bg-opacity-75; + text-shadow: none !important; +} -.donate-attr { color: darken($green, 10%) !important; } +.leaflet-contextmenu-item.over { + @extend .bg-body-secondary, .border-secondary, .border-opacity-10; +} + +.leaflet-popup-content-wrapper { + @extend .rounded-1; -/* Rules for the sidebar */ + a { + color: var(--bs-link-color) !important; + } +} -#browse_status { - input { - display: block; - margin-left: auto; - margin-right: auto; +@include color-mode(dark) { + .leaflet-tile-container .leaflet-tile, + .mapkey-table-entry td:first-child > * { + filter: brightness(.8); + } + + .leaflet-control-attribution a { + color: var(--bs-link-color); + } + + .leaflet-control-scale-line { + border-color: rgba(var(--bs-light-rgb), .75) !important; } } +/* Rules for attribution text under the main map shown on printouts */ + +.donate-attr { color: darken($green, 10%) !important; } + /* Temporary label size override until we remove site-wide font customisation */ form { @@ -551,13 +560,15 @@ header .search_forms, display: none; } +.search_form { + .describe_location { + font-size: 10px; + } +} + /* Rules for search sidebar */ #sidebar .search_results_entry { - ul li.selected { - background: $list-highlight; - } - .search_more .loader { display: none; } @@ -566,7 +577,7 @@ header .search_forms, /* Rules for routing */ div.direction { - background-image: image-url('routing-sprite.png'); + background-image: image-url('routing-sprite.svg'); width: 20px; height: 20px; background-repeat: no-repeat; @@ -575,28 +586,34 @@ div.direction { div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; } } +@include color-mode(dark) { + div.direction { + filter: invert(1); + } +} + td.distance { font-size: x-small; } tr.turn { cursor: pointer; } -tr.turn:hover { - background: $list-highlight; -} -.routing_marker { width: 15px; cursor: move; } +.routing_marker_column { + width: 15px; -.browse_status { - display: none; + img { + cursor: move; + } } /* Rules for the history sidebar */ #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; @@ -630,41 +647,16 @@ tr.turn:hover { .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; } } - .note-description { - overflow: hidden; - margin: 0 0 10px 10px; - } - .query-results { display: none; - - ul { - li { - &.query-result { - cursor: pointer; - } - - &.selected { - background: $list-highlight; - } - } - } - } -} - -/* 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; } } @@ -677,32 +669,22 @@ tr.turn:hover { /* Rules for export sidebar */ .export_form { - .export_area_inputs, - .export_button { - text-align: center; - } - .export_area_inputs { - margin-bottom: $spacer; input[type="text"] { width: 100px; - text-align: center; } } .export_boxy { - background: $lightgrey; - - #maxlat { margin-top: -1px; } + > * { + margin: -1px; + } #minlon { - float: left; - /*rtl:ignore*/ margin-left: -1px; + /*rtl:ignore*/ float: left; } #maxlon { - float: right; - /*rtl:ignore*/ margin-right: -1px; + /*rtl:ignore*/ float: right; } - #minlat { margin-bottom: -1px; } } } @@ -726,10 +708,16 @@ tr.turn:hover { 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; @@ -738,26 +726,16 @@ tr.turn:hover { bottom: 0; &.new-user-main { - background-image: image-url("sign-up-illustration.png"); + 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"); - } - - &.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; + background-image: image-url("terms-illustration.svg"); } } @@ -767,6 +745,10 @@ tr.turn:hover { h1 { transform: scaleX(-1); } + + ul { + transform: scaleX(-1); + } } /* Rules for small maps in content areas */ @@ -792,7 +774,6 @@ tr.turn:hover { /* Rules for user popups on maps */ .user_popup { - min-width: 200px; p { padding: 0 0 5px 0; margin: 0 0 0 60px; @@ -834,34 +815,6 @@ tr.turn:hover { } } -/* Rules for messages pages */ - -.messages { - .inbox-row { - background: $offwhite; - } - - .inbox-row-unread td { - background: #CBEEA7; - } -} - -.search_form { - background-color: $lightgrey; - - #query { - z-index: 0; - } - - .describe_location { - font-size: 10px; - } -} - -.directions_form { - background-color: $lightgrey; -} - /* Rules for user images */ img.user_image { @@ -910,15 +863,14 @@ div.secondary-actions { /* Rules for rich text */ -.richtext, -.prose { +.richtext { code { - background: $lightgrey; + background: var(--bs-secondary-bg); padding: 2px 3px; } pre { - background: $lightgrey; + background: var(--bs-secondary-bg); padding: 2px 3px; white-space: pre-wrap; @@ -929,75 +881,23 @@ div.secondary-actions { img { padding: $lineheight; - background-color: $offwhite; + background-color: var(--bs-tertiary-bg); display: block; max-width: 100%; margin: auto; } blockquote { - border-left: $lineheight solid $offwhite; + border-left: $lineheight solid var(--bs-tertiary-bg); padding-left: $lineheight; margin: 0; - color: $darkgrey; + color: var(--bs-secondary-color); } } -/* Rules for the "Welcome" page */ -.site-welcome, .site-fixthemap { - .sprite { - background-image: image-url("welcome-sprite.png"); - background-size: 500px 250px; - display: block; - } - - .sprite.small { - width: 50px; - height: 50px; - } - - .sprite.x { - /*rtl:ignore*/ background-position: -50px 0; - } - - .sprite.term { - margin-right: 10px; - vertical-align: middle; - } - - .sprite.node { - /*rtl:ignore*/ background-position: -100px 0; - } - - .sprite.way { - /*rtl:ignore*/ background-position: -150px 0; - } - - .sprite.tag { - /*rtl:ignore*/ background-position: -200px 0; - } - - .sprite.editor { - /*rtl:ignore*/ background-position: -250px 0; - } - - .sprite.question { - /*rtl:ignore*/ background-position: -300px 0; - } - - .sprite.rules { - /*rtl:ignore*/ background-position: -350px 0; - } - - .icon.note { - background-color: #333; - border-radius: 4px; - } -} +/* Rules for the "About" page */ .site-about #content { - background-color: $lightgrey; - .content-inner { max-width: 760px; } @@ -1030,37 +930,12 @@ 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; } /* Rules for tabs inside secondary background sections */ @@ -1071,4 +946,45 @@ div.secondary-actions { margin-bottom: -1px; } -@import 'browse'; +/* Rules for traces */ + +img.trace_image { + mix-blend-mode: darken; +} + +@include color-mode(dark) { + img.trace_image { + filter: invert(1); + mix-blend-mode: lighten; + } +} + +/* 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); + } + } + } +}