X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/d8a1cbd27bcaeba879662f26f91efd0e76bb1f1f..9b533b2789df4876a789f54e992e4e9b00ece56d:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 39cdaa47a..4bedf42b6 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1,53 +1,21 @@ +@use "sass:map"; @import "parameters"; +@import "browse"; @import "bootstrap"; +@import "rails_bootstrap_forms"; /* Styles common to large and small screens */ -.fillL { background-color: white; } - /* Default rules for the body of every page */ body { - font-family: 'Helvetica Neue',Arial,sans-serif; font-size: $typeheight; - line-height: 1.6666; - color: #222; - background-color: #fff; - margin: 0px; - padding: 0px; - text-align: left; - height: 100%; -} - -p > img { - width: auto; - max-width: 100%; -} - -small, aside { - font-size: 12px; -} - -#container { position: relative; } - -.column-1 { - width: 50%; - margin: 0 0 $lineheight/2 0; } -.small_icon { - vertical-align: middle; - margin-right: $lineheight/4; +time[title] { + text-decoration: underline dotted; } -.red { color: $red; } - -.piwik { border: 0; } - -[dir=rtl] { /* no-r2 */ text-align: right; } - -[dir=ltr] { /* no-r2 */ text-align: left; } - /* Rules for icons */ .icon { @@ -55,121 +23,126 @@ small, aside { vertical-align: top; width: 20px; height: 20px; - background: transparent image-url("sprite.png") no-repeat 0 0; - background-image: image-url("sprite.svg"); + background: transparent image-url("sprite.svg") no-repeat 0 0; text-indent: -9999px; overflow: hidden; } -.icon.search { /* no-r2 */ background-position: 0 0; } -.icon.donate { /* no-r2 */ background-position: -20px 0; } -.icon.zoomin { /* no-r2 */ background-position: -40px 0; } -.icon.zoomout { /* no-r2 */ background-position: -60px 0; } -.icon.geolocate { /* no-r2 */ background-position: -80px 0; } -.active .icon.geolocate { /* no-r2 */ background-position: -80px -20px; } -.icon.layers { /* no-r2 */ background-position: -100px 0; } -.icon.key { /* no-r2 */ background-position: -120px 0; } -.icon.share { /* no-r2 */ background-position: -140px 0; } -.icon.clipboard { /* no-r2 */ background-position: -160px 0; } -.icon.link { /* no-r2 */ background-position: -180px 0; } -.icon.close { /* no-r2 */ background-position: -200px 0; } -.close-wrap:hover .icon.close, -.icon.close:hover { /* no-r2 */ background-position: -200px -20px; } -.icon.check { /* no-r2 */ background-position: -220px 0; } -.icon.note { /* no-r2 */ background-position: -240px 0; } -.icon.note.grey { /* no-r2 */ background-position: -240px -20px; } -.icon.query { /* no-r2 */ background-position: -260px 0; } - -/* Rules for links */ - -a { - color: #24d; - text-decoration: none; - -webkit-appearance: none; - outline: 0; - &:hover { - text-decoration: underline; - } -} +.icon.search { /*rtl:ignore*/ background-position: 0 0; } +.icon.donate { /*rtl:ignore*/ background-position: -20px 0; } +.icon.zoomin { /*rtl:ignore*/ background-position: -40px 0; } +.icon.zoomout { /*rtl:ignore*/ background-position: -60px 0; } +.icon.geolocate { /*rtl:ignore*/ background-position: -80px 0; } +.active .icon.geolocate { /*rtl:ignore*/ background-position: -80px -20px; } +.icon.layers { /*rtl:ignore*/ background-position: -100px 0; } +.icon.key { /*rtl:ignore*/ background-position: -120px 0; } +.icon.share { /*rtl:ignore*/ background-position: -140px 0; } +.icon.clipboard { /*rtl:ignore*/ background-position: -160px 0; } +.icon.link { /*rtl:ignore*/ background-position: -180px 0; } +.icon.close { /*rtl:ignore*/ background-position: -200px 0; } +.icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; } +.icon.check { /*rtl:ignore*/ background-position: -220px 0; } +.icon.note { /*rtl:ignore*/ background-position: -240px 0; } +.icon.note.grey { /*rtl:ignore*/ background-position: -240px -20px; } +.icon.query { /*rtl:ignore*/ background-position: -260px 0; } /* Utility for de-emphasizing content */ -.deemphasize { - color: $darkgrey; - a { - color: $blue; +.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 { - display: none !important; - float: right; - background: image-url("menu-icon.png") no-repeat; + display: none; + position: absolute; + top: 0; + right: 0; + background: image-url("menu-icon.svg") no-repeat; background-size: 30px 30px; - display: block; width: 30px; height: 30px; margin: 14px 10px 0 0; 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/2; - } - - h1, nav.primary { - float: left; - } - - a, a:hover { - text-decoration: none; - } - - img.logo { - width: 30px; - height: 30px; - margin-top: -2px; - vertical-align: middle; + padding: $lineheight * 0.5; } h1 { + height: $headerHeight; font-size: 18px; - font-weight: 600; - line-height: 1.2; - margin: 0; - padding-top: 15px; - - a { - color: #000; - } - - a:hover { - color: #000; - } } .btn { font-size: 14px; } -} + nav.primary { + margin-right: auto; + } + + .username { + max-width: 12em; + } +} nav.primary { - .btn-outline-primary { - @include button-outline-variant($green, $white); + #edit_tab .btn-outline-primary { + @include button-outline-variant($green, $color-hover: $white, $active-color: $white); } .disabled { @@ -200,83 +173,87 @@ nav.primary { } nav.secondary { - position: absolute; - right: 0; - .nav-link { - padding: 0.2rem; - color: $darkgrey; + padding: 0.3rem; } +} - > ul li.current a { - color: darken($darkgrey, 25%); +nav.primary, nav.secondary { + .dropdown-item { + &:hover, &:active { + background-color: $green; + color: white; + } } +} - .login-menu { - .btn-outline-secondary { - @include button-outline-variant($darkgrey); - } +#compact-secondary-nav { + display: none; +} + +body.compact-nav { + #compact-secondary-nav { + display: inline-block; + } + .compact-hide { + display: none; } +} - .user-menu { - .btn-outline-secondary { - @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey); - border-color: $grey; - &:hover { - border-color: $grey; - } - &:focus { - background-color: white; - box-shadow: none; - } +body.small-nav { + #menu-icon { + display: block; + } + + header { + flex-direction: column; + height: auto; + min-height: $headerHeight; + + &.closed nav { + display: none !important; } - &.show .btn-outline-secondary { - background-color: white; - &:focus { - box-shadow: none; - } + + .search_forms { + display: block; } } - img.user_thumbnail_tiny { - border: 0; - border-radius: 3px; + #sidebar .search_forms { + display: none; } - #inboxanchor { - display: inline-block; - height: 25px; - margin: 3px 0 3px 3px; - background-color: lighten($grey, 10%); - line-height: 20px; - border-radius: 3; - } + nav.primary { + margin-right: 0; + padding: 0; - .dropdown-menu { - .count-number { - font-size: 14px; + #edit_tab { + width: 100%; + padding: 10px; } } -} -nav.primary, nav.secondary { - .dropdown-item { - &:hover, &:active { - background-color: $green; - color: white; + nav.secondary { + flex-direction: column; + + .user-menu, .login-menu { + width: 100%; } } -} - -#compact-secondary-nav { - display: none; -} -body.compact { #compact-secondary-nav { - display: inline-block; + display: none; } + .compact-hide { + display: inline-block; + } + + .overlay-sidebar #sidebar .welcome { + display: none; + } + + .overlay-sidebar #sidebar #banner { display: none; } } @@ -284,35 +261,32 @@ body.compact { /* Utility for styling notification numbers */ .count-number { - padding: 2px $lineheight/4; - border-radius: 2px; - background: lighten($green, 30%); - margin: 0 2px; - font-size: 11px; - color: #333; + background: transparentize(lighten($green, 25%), .25); + color: $gray-800; + font-weight: $font-weight-normal; } -/* Rules for the message shown in place of the map when javascript is disabled */ +/* Rules for Leaflet maps */ -#noscript { - z-index: 20000000; - margin-left: 400px; - margin-top: 50px; +.leaflet-top.leaflet-right, +.leaflet-top.leaflet-left { + height: 100%; + column-gap: 10px; + display: flex; + flex-direction: column; + flex-wrap: wrap-reverse; } -/* Rules for Leaflet maps */ - .leaflet-control .control-button { display: block; height: 40px; width: 40px; background-color: #333; background-color: rgba(0,0,0,.6); - border-radius: 4px 0 0 4px; - margin-bottom: 10px; outline: none; - &:hover { + &:hover, + &:focus { background-color: black; } @@ -327,26 +301,18 @@ body.compact { background-color: $vibrant-green; } - .icon { - margin: 10px; + &-first { + border-start-start-radius: 4px; } -} - -.leaflet-control .zoomin, -.control-layers .control-button { - margin-bottom: 0px; - border-radius: 4px 0 0 0; -} -.leaflet-control .zoomout, -.control-key .control-button { - margin-bottom: 0; - border-radius: 0; -} + &-last { + border-end-start-radius: 4px; + margin-bottom: 10px; + } -.control-locate .control-button, -.control-share .control-button { - border-radius: 0 0 0 4px; + .icon { + margin: 10px; + } } /* Rules for the sidebar and main map area */ @@ -370,67 +336,14 @@ body.compact { #sidebar { float: left; width: $sidebarWidth; - background: #fff; #sidebar_loader { display: none; } - - > div { - position: relative; - float: left; - clear: both; - width: 100%; - } - - h2 { - padding: $lineheight $lineheight $lineheight/2; - font-size: 1.5rem; - } - - h3, h4 { - margin-top: $lineheight; - margin-bottom: $lineheight/2; - font-size: 1.25rem; - } - - .close-wrap { - cursor: pointer; - position: absolute; - top: 0; - right: 0; - width: 60px; - height: 60px; - - .icon.close { - pointer-events: none; - position: absolute; - right: 20px; - top: 20px; - } - } - - .icon.close { - float: right; - cursor: pointer; - } - - .flash { - padding: 15px; - - picture { - margin-right: -25px; - } - - div.message { - margin-left: 30px; - } - } } .overlay-sidebar #sidebar { position: absolute; - z-index: 1000; height: auto; overflow: hidden; @@ -439,11 +352,7 @@ body.compact { } .welcome { - display: none; - - &.visible { - display: block; - } + display: block; } #sidebar_content { @@ -453,26 +362,6 @@ body.compact { .welcome { display: none; - padding-bottom: 5px; - - p { - padding: $lineheight/2 $lineheight $lineheight; - font-size: 110%; - font-weight: 300; - } - - .button { - width: 50%; - float: left; - margin: 0; - border-radius: 0; - font-weight: normal; - padding: .6em; - - &.learn-more { - border-right: 1px solid #fff; - } - } } #banner { @@ -499,6 +388,14 @@ body.compact { .leaflet-marker-draggable { cursor: move; } + + .query-marker { + animation: 1500ms forwards query-marker-fade; + + @keyframes query-marker-fade { + to { opacity: 0 } + } + } } #map-ui { @@ -507,147 +404,68 @@ body.compact { float: right; width: 250px; height: 100%; - background: white; overflow: auto; - - .section { - border-bottom: 1px solid $grey; - padding: 10px 20px; - } - - a.close-button { - float: right; - padding:5px; - font-size:20px; - line-height:10px; - color:#222; - border:1px solid $grey; - } - - .tooltip { - opacity: 1; - border: 1px solid $grey; - .tooltip-arrow { - border-top-color: $grey; - } - } - } -} - -.layers-ui, -.share-ui { - li:last-child { - margin-bottom: 0; } } -.layers-ui { - .base-layers { - .leaflet-container { +@include media-breakpoint-down(md) { + body.map-layout { + #sidebar, #map { + position: relative; + overflow-x: hidden; width: 100%; - height: 50px; - cursor: pointer; + height: 50%; } - li { - overflow: hidden; - border-radius: 3px; - border: 2px solid #fff; - margin-bottom: 8px; - position: relative; - transition: border-color 0.08s ease-in; + #map-ui { + width: 100%; + height: 50%; + overflow-y: scroll; + } - label { + .overlay-sidebar.overlay-right-sidebar { + #sidebar { 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; - } + width: 350px; + height: auto; + overflow: hidden; } - &.active { border-color: darken($green, 10%); } - &:hover { - border-color: $grey; - &.active { border-color: darken($green, 20%); } + #map { + height: 100%; } } } - - .overlay-layers { - p { - font-size: 13px; - margin-bottom: 8px; - } - li.disabled { color: $darkgrey; } - } } -.share-ui { - .share-tabs { - margin-bottom: 10px; - - a { - color: #fff; - text-decoration: none; - background-color: $lightblue; - padding: 5px 10px; - border-right: 1px solid #fff; - } - - a:first-child { - border-right: 1px solid #fff; - border-radius: 4px 0 0 4px; - } - - a:last-child { - border-radius: 0 4px 4px 0; - } - - a.active { - background-color: $blue; - } - } - - .share-tab { - display: none; - } +.layers-ui { + .base-layers > * { + height: 3.5rem; - .share-link { - input[type=text], - textarea { - width: 100%; - font-family: monospace; - font-size: small; - line-height: 1.3; + > .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); } - } - - .share-image { - label { - margin-right: 10px; + > .btn:hover { + --bs-btn-border-color: var(--bs-primary-border-subtle); } } - #embed_html { - resize: vertical; + .overlay-layers { + li.disabled { color: $darkgrey; } } +} +.share-ui { #mapnik_scale { width: 100px; } } .leaflet-top { - top: $lineheight/2 !important; + top: 10px !important; .leaflet-control { margin-right: 0px !important; margin-top: 0px !important; @@ -660,71 +478,79 @@ body.compact { 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; +} -#attribution { - display: none; +.leaflet-contextmenu-item.over { + @extend .bg-body-secondary, .border-secondary, .border-opacity-10; +} + +.leaflet-popup-content-wrapper { + @extend .rounded-1; - table { - width: 100% + a { + color: var(--bs-link-color) !important; } } -.attribution_license, -.attribution_project { - text-align: left; -} +@include color-mode(dark) { + .leaflet-tile-container .leaflet-tile, + .mapkey-table-entry td:first-child > * { + filter: brightness(.8); + } -.attribution_notice { - text-align: center; + .leaflet-container .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; } -/* Rules for the sidebar */ +/* Temporary label size override until we remove site-wide font customisation */ -.sidebar_heading { - position: relative; - padding: $lineheight/2 $lineheight; - // background: $offwhite; - // border-bottom: 1px solid $grey; - > .close { - float: right; - margin-top: 2px; - cursor: pointer; +form { + label { + font-size: 16px; + } + .col-form-label { + font-size: 16px; } } -#browse_status { - p { - padding: $lineheight; - } +/* Stop bootstrap 5 from floating legends when they don't need to be */ +legend { + float: none; +} - input { - display: block; - margin-left: auto; - margin-right: auto; - } +/* Override the text colour for primary and secondary buttons, to match our + bootstrap 4 colours. Note this has accessibility issues, which is why + bootstrap 5 calculates black as the appropriate colour, and we should + reconsider our colours at some point with that in mind. */ + +.btn-primary { + @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white); } -#sidebar { - #sidebar_loader, - .search_more { - width: 100%; - margin: $lineheight auto; - } +.btn-secondary { + @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white); +} - .loader, - .load_more { - text-align: center; - margin: auto; - width: 40px; - display: block; - } +.btn-outline-secondary { + @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white); } /* Rules for the search and direction forms */ @@ -734,158 +560,24 @@ header .search_forms, display: none; } -.search_form, -.directions_form { - position: relative; - padding: $lineheight/2; - background-color: $lightgrey; - - .query_wrapper { - position: relative; - overflow: hidden; - border-radius: 2px 0 0 2px; - } - - input[type=text] { - width: 100%; - height: 30px; - transition: 300ms linear; - } - - input[type=text].overflow { - border-right: none; - border-radius: 3px 0px 0px 3px; - } - - input:focus { - outline: none; - box-shadow: 0px 0px 7px $vibrant-green; - } - - input[type=submit].float { - float: right; - width: auto; - min-width: 0; - border-radius: 0 2px 2px 0; - } - - input.error { - background-color: rgba($red, 0.4); - } - - select { - /* this next line is to polyfill the vertical alignment of text within a select element, - * which is different between firefox and chrome. */ - padding: 0.3em 0; - } - - .query_options { - text-align: right; - font-size: 10px; - color: $blue; - } - +.search_form { .describe_location { - position: absolute; - top: 6px; - right: 6px; font-size: 10px; - color: $blue; - } - - .switch_link { - float: right; - width: auto; - min-width: 0; - margin-left: 6px; - } - - img.button { - display: block; - width: 20px; - height: 20px; - } - - span.force_width { - width: 100%; - padding-right: 25px; - display: block; - } - - select.routing_engines { - min-height: 30px; - margin: 0px 0px 5px 25px; - } - - input.routing_go { - min-width: 100px; - float: right; - } - - div.header { - width: 100%; - height: 30px; - } - - div.line { - width: 100%; - margin: 0px 0px 5px 0px; - } - - div.loader_copy { - display: none; - - img { - vertical-align: middle; - } - } - - a.reverse_directions { - cursor: pointer; - margin: 0px 0px 5px 25px; - } -} - -/* Rules for the map key which appears in the popout sidebar */ - -#mapkey { - .mapkey-table-key img { - display: block; - margin-left: auto; - margin-right: auto; } } /* Rules for search sidebar */ #sidebar .search_results_entry { - ul li { - cursor: pointer; - &.selected { background: $list-highlight; } - } - .search_more .loader { display: none; - width: 100%; } } -.search_results_error { - color: #f00; - padding: 10px 20px; -} - /* Rules for routing */ -#sidebar_content>table { - padding: 5px 20px 10px 15px; - width: 100%; - border-collapse: separate; - border-spacing: 0; -} - div.direction { - background-image: image-url('routing-sprite.png'); + background-image: image-url('routing-sprite.svg'); width: 20px; height: 20px; background-repeat: no-repeat; @@ -894,59 +586,39 @@ div.direction { div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; } } -p#routing_summary { - padding: 0 $lineheight $lineheight/4; +@include color-mode(dark) { + div.direction { + filter: invert(1); + } } -td.instruction, td.distance { - padding-top: $lineheight/5; - padding-bottom: $lineheight/5; - border-bottom: 1px solid $grey; -} td.distance { - color: $darkgrey; - text-align: right; font-size: x-small; } tr.turn { cursor: pointer; } -tr.turn:hover { - background: $list-highlight; -} -.routing_engines, #route_from, #route_to { margin-left: 25px; } -.routing_marker { width: 15px; position: absolute; cursor: move; } -/* Rules for entity history */ +.routing_marker_column { + width: 15px; -#sidebar_content { - .browse_details { - position: relative; - border-bottom: $keyline; + img { + cursor: move; } } -.browse_status { - display: none; -} - /* Rules for the history sidebar */ #sidebar .changesets { li { - cursor: pointer; - - &.selected { background: $list-highlight; } - /* color is derived from changeset bbox fillColor in history.js */ - } - - .comments { - float: right; - color: $darkgrey; - } + &.selected { + @extend :hover; + } - .comments-0 { - opacity: 0.5; + a.stretched-link > span, a:not(.stretched-link), [title] { + position: relative; + z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */ + } } .changeset_more .loader { @@ -959,11 +631,11 @@ tr.turn:hover { #sidebar_content { .browse-section { - padding: $lineheight/2 $lineheight; + padding-bottom: $spacer; + margin-bottom: $spacer; border-bottom: 1px solid $grey; h4:first-child { - margin-top: 0; word-wrap: break-word; } } @@ -972,208 +644,50 @@ tr.turn:hover { border-bottom: none; } - .paginate { - float: right; - padding: 1px 6px; - border: 1px solid $lightgrey; - border-radius: 3px; - } - - .browse-field { - margin-bottom: 10px; - - h4 { - padding: 5px 0 5px 10px; - font-size: 12px; - border: 1px solid $grey; - border-radius: 4px 4px 0 0; - background-color: $offwhite; - } - - p { - padding: 7px 10px; - font-size: 12px; - background-color: #FFF; - border: 1px solid $grey; - border-top: 0; - border-radius: 0 0 4px 4px; - } - } - .browse-tag-list { - background-color: $offwhite; - border: 1px solid $grey; - border-radius: 3px; table-layout: fixed; - border-collapse: separate; - border-spacing: 0; - width: 100%; - - th, td { - border-bottom: 1px solid $grey; - } + white-space: pre-wrap; + word-wrap: break-word; + word-break: break-word; tr:last-child th, tr:last-child td { border-bottom: 0; } - - .browse-tag-k, - .browse-tag-v { - width: 50%; - padding: 6px 10px; - word-wrap: break-word; - white-space: pre-wrap; - } - - .browse-tag-k { - font-weight: 500; - background-color: $offwhite; - } - - .browse-tag-v { - border-left: 1px solid $grey; - background-color: #fff; - } - - .colour-preview-box { - float: right; - width: 14px; - height: 14px; - margin: 4px 0px; - border: 1px solid rgba(0, 0, 0, .1); - // add color via inline css on element: background-color: ; - } - } - - .warning { - margin: 0 0 $lineheight/2 0; - padding: 0 $lineheight/2; - } - - .note-comments li, .changeset-comments li { - margin: $lineheight/2 0; - - p { - margin: 10px 6px 0 6px; - line-height: 1.5; - } - } - - .comments-header { - float: left; - } - - .subscribe-buttons { - float: left; - margin: 18px 10px 10px; - min-width: 80px; - } - - .subscribe-buttons input { - font-size: 90%; - line-height: 15px; - min-height: 20px; - } - - span.action-button:hover { - cursor: pointer; - text-decoration: underline; - } - - .note-description { - overflow: hidden; - margin: 0 0 10px 10px; - } - - .query-intro p { - padding: $lineheight $lineheight $lineheight/2; } .query-results { display: none; - padding-bottom: $lineheight/2; - - h3 { - padding: 0 $lineheight; - } + } +} - ul { - li { - &.query-result { - cursor: pointer; - } +/* Force LTR/RTL alignment for placeholder text */ - &.selected { - background: $list-highlight; - } - } - } - } +.form-control::placeholder { + text-align: left; } /* Rules for export sidebar */ .export_form { - padding: $lineheight; - - .export_area_inputs, - .export_button { - text-align: center; - } - .export_area_inputs { - margin-bottom: $lineheight/2; input[type="text"] { - width: 80px; - text-align: center; - margin-bottom: 5px; + width: 100px; } } .export_boxy { - background: $lightgrey; - border: 1px solid $grey; - border-radius: 3px; - - #maxlat { margin-top: -1px; } + > * { + margin: -1px; + } #minlon { - float: left; - /* no-r2 */ margin-left: -1px; + /*rtl:ignore*/ float: left; } #maxlon { - float: right; - /* no-r2 */ margin-right: -1px; - } - #minlat { margin-bottom: 0; } - } - - .export_bound { - margin: $lineheight/4; - } - - .export_button { - margin-top: $lineheight; - margin-bottom: $lineheight; - } - - dl { - padding-left: $lineheight/2; - dd { - margin-left: 0; - margin-bottom: 10px; + /*rtl:ignore*/ float: right; } } } -/* Rules for the routing sidebar */ - -#sidebar_content { - #routing_credit { - text-align: center; - padding: 0.5em; - } -} - /* Rules for edit pages */ .site-edit { @@ -1183,682 +697,161 @@ tr.turn:hover { bottom: 0; width: 100%; } - - #map { - height: 100%; - overflow: hidden; - } } /* Rules for non-map content pages */ -.content-heading { - background: $lightgrey; -} - -.content-body { - h1, h2, h3, p, ul, ol { - margin-bottom: $lineheight; - } - - h1, h2, h3 { - margin-top: $lineheight/2; - } -} - .content-inner { position: relative; - max-width: 900px; + max-width: 960px; margin: auto; padding: $lineheight; } -/* Overrides for pages that use new layout conventions */ +/* Rules for login and signup pages */ -.users-new, -.users-create, -.users-terms, -.users-confirm { - .content-heading .content-inner { - height: 200px; +.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: absolute; - height: 200px; + position: relative; + min-height: 200px; width: 100%; left: 0; 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: 260px; - top: 160px; - background-image: image-url("sign-up-illustration-arm.png"); - z-index: 100; + background-image: image-url("terms-illustration.svg"); } } [dir=rtl] .header-illustration { transform: scaleX(-1); -} - -#content.maximised { - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 0; - z-index: 2000; -} - -/* Rules for small maps in content areas */ - -.content_map { - position: relative; - width: 45%; - height: 400px; - border: 1px solid $grey; - margin-bottom: $lineheight; - float: right; -} -/* Rules for the new trace form */ - -#new_trace { - input[type=text] { - width: 50%; - width: calc(100% - 150px); - max-width: 500px; - } -} - -/* Rules for the edit trace form */ - -.edit_trace { - .standard-form-row p { - margin-bottom: 0px; - } - - input[type=text] { - width: 50%; - width: calc(100% - 150px); - max-width: 500px; - } -} - -/* Rules for the user profile page */ - -#userinformation { - - min-height: 100px; - .userinformation-inner { - float: left; - } - h2 { - margin-top: 0; - } - .user-description { - width: 100%; - clear: both; - } - .deemphasize { - margin: 0; + h1 { + transform: scaleX(-1); } -} -.admin-user-info small { - margin-bottom: $lineheight/2; - display: inline; - margin-right: $lineheight; -} - -.activity-block { - clear: left; - border-bottom: 1px solid $grey; - padding-bottom: $lineheight; - float: left; - h3 { - margin-bottom: $lineheight/2; + ul { + transform: scaleX(-1); } } -.contact-activity { - margin-top: $lineheight; - width: 100%; -} +/* Rules for small maps in content areas */ -.activity-details p { - margin-left: 70px; - margin-bottom: 0; +.content_map { + height: 200px; + margin-bottom: $lineheight; } -.users-show { - // Silly exception; remove when user page is redesigned. - .content-inner { - max-width: none; - } - p#no_home_location { - margin: $lineheight; - } - .user_thumbnail { - margin-top: $lineheight/4; - float: left; +@include media-breakpoint-up(md) { + .content_map { + height: 400px; } } /* Rules for the user map */ .content_map .leaflet-popup-content { - margin: $lineheight/2; + margin: $spacer; min-height: 50px; } /* Rules for user popups on maps */ .user_popup { - min-width: 200px; p { padding: 0 0 5px 0; - margin-top: 0 0 0 60px; + margin: 0 0 0 60px; font-size: 12px; } - img.user_thumbnail { - float: left; - margin: 0 $lineheight/2 0 0; - } } -/* Rules for the user list */ - -#user_list { - width: 100%; +/* Rules for the diary entry page */ - tr { - vertical-align: middle; +.diary_entries { + #map { + height: 400px; + display: none; } - - p { - margin-top: 0px; - margin-bottom: 0px; + .diary-comment .col-auto { + width: 62px; + } + .diary-comment .col { + max-width: 690px; } } -#user_list_actions { - float: right; - margin-top: $lineheight/2; -} +/* Rules for the account confirmation page */ -/* Rules for the diary list page */ +.users-terms { + .legale { + padding: $lineheight; + margin-bottom: $lineheight; + overflow: auto; + height: 20em; -.diary_post { - position: relative; - padding-top: $lineheight; - padding-bottom: $lineheight/2; - border-top: 1px solid $grey; + li { + list-style: inherit; + } - &:first-of-type { - margin-top: $lineheight/2; + ol ol { + list-style-type: lower-alpha; + } } +} - &.deemphasize { - background-color: #fee; - } - - .post_heading { - margin-bottom: $lineheight; - - h2 { - margin-top: 0; - margin-bottom: $lineheight/2; - } - } - - img.user_thumbnail { - float: left; - } - - small.deemphasize { - float: left; - display: block; - } -} - -.pagination { - padding-top: $lineheight; -} - -/* Rules for the diary entry page */ - -.diary_entries { - #map { - position: relative; - width: 90%; - height: 400px; - border: 1px solid $grey; - display: none; - margin-bottom: $lineheight; - } - #newcomment { - border-top: 1px solid $grey; - padding-top: $lineheight; - margin-top: $lineheight/2; - } - .comments { - max-width: 740px; - } - .diary-comment { - border-top: 1px dashed $grey; - padding-top: $lineheight/2; - padding-bottom: $lineheight/2; - &:first-child { - margin-top: $lineheight/2; - padding-top: $lineheight; - border-top: 1px solid $grey; - } - &.deemphasize { - background-color: #fee; - } - p { - margin-bottom: $lineheight/2; - } - .comment-heading { - margin-bottom: 0; - margin-top: 0; - } - } -} - -.diary_entries-show img.user_thumbnail { - float: left; -} - - -.diary-subscribe-buttons { - position:relative; - top: -30px; - left: 130px; -} - -/* Rules for the log in page */ - -#login_auth_buttons { - margin-bottom: 0; -} - -#login_auth_buttons li { - float: left; - padding: $lineheight/4 $lineheight/2; -} - -/* Rules for the account confirmation page */ - -.users-terms { - .legale { - border: 1px solid $grey; - padding: $lineheight; - margin-bottom: $lineheight; - overflow: auto; - height: 20em; - - li { - list-style: inherit; - } - - ol ol { - list-style-type: lower-alpha; - } - } - - #decline { - background: $lightblue; - &:hover { - background: darken($lightblue, $hovercolor); - } - } -} - -/* Rules for the account settings page */ - -#accountForm .user_map { - position: relative; - width: 500px; - height: 400px; - border: 1px solid $grey; -} - -#accountForm .user_image { - margin-bottom: 0; -} - -#accountForm #user_image { - margin-left: 20px; -} - -#accountForm ul.accountImage-options { - margin-left: 120px; -} - -.nohome .location { - display: none; -} - -#homerow .message { - display: none; -} - -.nohome .message { - display: inline !important; -} - -.content_map.settings_map { - width: 50%; - float: none; -} - -/* Rules for the oauth settings page */ - -.oauth_clients .buttons .oauth-edit { - border-radius: 2px 0 0 2px; -} - -.oauth_clients .buttons .oauth-delete { - border-radius: 0 2px 2px 0; -} - -/* Rules for the oauth authorization page */ - -.oauth-authorize ul { - list-style: none; -} - -/* Rules for messages pages */ - -.messages { - input[type="submit"] { - margin: auto; - } - - .inbox-row { - background: $offwhite; - } - - .inbox-row-unread { - background: #CBEEA7; - } - - .right { - float: right; - } -} - -.inbox-row .inbox-mark-read { - display: none; -} - -.info-line { - margin-bottom: $lineheight; - padding: $lineheight/4 0px 4px 0px; - border-bottom: 1px solid $grey; - - form, form div { - display: inline; - } -} - -.info-line .user_thumbnail_tiny { - vertical-align: middle; -} - -.inbox-sent { - white-space: nowrap; -} - -.inbox-mark-unread, -.inbox-mark-read, -.inbox-delete { - width: 1%; -} - -.inbox-row-unread .inbox-mark-unread { - display: none; -} - -/* Rules for "flash" notice boxes shown at the top of the content area */ - -.flash { - padding: $lineheight; - - &.error { - background-color: #ff7070; - } - - &.warning { - background-color: #ffe0cc; - } - - &.notice { - background-color: #CBEEA7; - } - - div.message { - display: inline-block; - margin-left: $lineheight / 2; - vertical-align: middle; - - p { - margin-top: $lineheight * 0.5; - margin-bottom: $lineheight * 0.5; - - &:first-child { - margin-top: 0px; - } - - &:last-child { - margin-bottom: 0px; - } - } - } -} - -/* Rules for highlighting fields with rails validation errors */ - -.formError { - display: inline-block; - padding: 5px 10px; - margin-top: 5px; - border-radius: 4px; - font-size: 12px; - color: #fff; - background-color: #ff7070; -} - -/* Rules for rails validation error boxes */ - -#errorExplanation { - width: 400px; - border: 2px solid #ff7070; - padding: 0 $lineheight/2; - margin-bottom: $lineheight; - background-color: #f0f0f0; - - h2 { - margin: 0 -10px 10px -10px; - padding: $lineheight/4 $lineheight/4 $lineheight/4 15px; - font-weight: bold; - font-size: 12px; - background-color: #c00; - color: #fff; - text-align: left; - } - - p { - color: #333; - margin-bottom: 0px; - padding: $lineheight/4; - } -} - -/* Rules for forms */ - -.standard-form { - fieldset { - margin-bottom: $lineheight; - } - label.standard-label { - display: block; - margin-bottom: $lineheight/4; - font-size: $typeheight; - font-weight: bold; - line-height: 1.5; - } - label.standard-label.secondary { - display: inline-block; - font-weight: normal; - } - .form-help { - font-weight: normal; - } - .form-column { - float: left; - margin-right: 20px; - } - .form-divider { - margin-top: $lineheight; - padding-top: $lineheight; - border-top: 1px solid $lightgrey; - } - .horizontal-list .standard-form-row { - float: left; - padding-right: 10px; - } - .standard-form-row { - margin-bottom: $lineheight/2; - } - .form-list { - margin-bottom: 0; - } - .form-list li { - margin-bottom: 5px; - list-style-type: none; - } - input[type="checkbox"], - input[type="radio"] { - float: left; - margin-top: 5px; - } -} - -#remember_me_openid { - display: block; -} - -select { - padding: 2px; -} - -input[type="checkbox"], -input[type="radio"] { - margin-right: 5px; -} - -input[type="text"], -input[type="email"], -input[type="url"], -input[type="password"], -textarea { - color: #222; - background-color: #fff; - border: 1px solid $grey; - border-radius: 3px; - padding: 2px 5px; - margin: 0; - width: 200px; - - &.field_with_errors { - border: 2px solid #ff7070; - } -} - -textarea { - padding: 5px; - width: 100%; - min-height: 50px; - resize: vertical; -} - -/* Rules for user images */ +/* Rules for user images */ img.user_image { max-width: 100px; max-height: 100px; - border: 1px solid $grey; - margin-bottom: $lineheight; - float: left; - margin-right: $lineheight; } img.user_thumbnail { max-width: 50px; max-height: 50px; - border: 1px solid $grey; - margin-right: $lineheight; } img.user_thumbnail_tiny { - width: auto; - height: auto; - max-width: 25px; - max-height: 25px; - border: 1px solid $grey; + width: 25px; + height: 25px; + object-fit: contain; } -/* Rules for geo microformats */ +/* General styles for action lists / subnavs */ -abbr.geo { - border-bottom: none; -} - -/* General styles for action lists / subnavs / pager navs */ - -ul.secondary-actions { - font-style: normal; - margin-bottom: 0; - margin-left: 0; - padding: 0; - &.pager { - display: inline-block; - margin-right: 60px; - } - > li { - display: block; - float: left; - list-style: none; - border-left: 1px solid $grey; - padding-left: $lineheight/2; - margin-right: $lineheight/2; - &:first-child { - border-left: 0; - padding-left: 0; - } - &:last-child { - margin-right: 0px; +nav.secondary-actions { + margin-left: -11px; + overflow: hidden; + > ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-bottom: 0; + margin-left: -1px; + padding: 0; + > li { + flex-basis: auto; + list-style: none; + border-left: 1px solid $grey; + padding-left: $lineheight * 0.5; + margin-right: $lineheight * 0.5; + margin-bottom: $lineheight * 0.125; } } } @@ -1868,147 +861,16 @@ div.secondary-actions { text-align: center; } -/* Utility for managing inner content areas */ - -.inner22 { padding: $lineheight;} - -.inner12 { padding: $lineheight/2 $lineheight;} - -.inner11 { padding: $lineheight/2;} - -.inner20 { padding: $lineheight 0;} - -.inner02 { padding: 0 $lineheight;} - -/* Utility for general button styles */ - -input[type="button"], -input[type="submit"], -input[type="reset"], -a.button { - cursor: pointer; - border: 0; - display: inline-block; - padding: $lineheight/4 $lineheight/2; - min-height: 20px + $lineheight/2; - min-width: 120px; - margin: 0 0 $lineheight/2 0; - color: white; - background: $blue; - text-align: center; - border-radius: 2px; - &:hover { - background: darken($blue, $hovercolor); - text-decoration: none; - } - &.deemphasize { - background: $lightblue; - &:hover { - background: darken($lightblue, $hovercolor); - } - } - &:disabled { - background: $lightgrey; - &:hover { - background: $lightgrey; - } - } - &:last-child { - margin-bottom: 0; - } -} - -input[type="button"], -input[type="submit"], -input[type="reset"] { - line-height: normal; -} - -a.button { - line-height: 20px; -} - -.buttons { - min-width: 200px; - input[type="submit"], - input[type="button"], - input[type="reset"], - .button, - .button_to { - box-sizing: border-box; - float: left; - border-radius: 0; - margin:0; - min-width: 75px; - max-width: 180px; - border-right:1px solid white; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - input:first-child, - .button:first-child, - .button_to:first-child { - border-radius:2px 0 0 2px; - } - input:last-child, - .button:last-child, - .button_to:last-child { - border-radius:0 2px 2px 0; - border-right-width: 0; - } - input:only-child, - .button:only-child, - .button_to:only-child, - *[value="Hide"] + input:last-child, - *[value="Hide"] + .button:last-child, - *[value="Hide"] + .button_to:last-child { - border-radius:2px; - border-right-width: 0; - } - /* if a 3-button set has a hidden middle button */ - *[value="Hide"] + input:nth-child(3), - *[value="Hide"] + .button:nth-child(3), - *[value="Hide"] + .button_to:nth-child(3) { - border-radius:0 2px 2px 0; - border-right-width: 0; - } - /* if a 3-button set starts with a hidden button */ - *[value="Hide"] + input:nth-child(2):not(:last-child), - *[value="Hide"] + .button:nth-child(2):not(:last-child), - *[value="Hide"] + .button_to:nth-child(2):not(:last-child) { - border-radius:2px 0 0 2px; - border-right-width: 1px; - } -} - -/* Customise the background colour of striped tables */ - -.table-striped > tbody > tr:nth-child(2n+1) > td, -.table-striped > tbody > tr:nth-child(2n+1) > th { - background-color: $offwhite; -} - -/* Rules for OpenID logo */ - -.openid_logo { - vertical-align: text-bottom; - border: 0; -} - /* Rules for rich text */ -.richtext, -.prose { +.richtext { code { - font-size: 13px; - background: $lightgrey; + background: var(--bs-secondary-bg); padding: 2px 3px; } pre { - font-size: 13px; - background: $lightgrey; + background: var(--bs-secondary-bg); padding: 2px 3px; white-space: pre-wrap; @@ -2019,246 +881,37 @@ a.button { 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; - } -} - -.diary_post .richtext { - margin-top: $lineheight; - } - -.comments .richtext { - margin-left: 70px; - margin-top: 0; -} - -/* Rules for rich text editors */ - -input.richtext_title[type="text"] { - width: 50%; - width: calc(100% - 235px); - - @media only screen and (max-width:768px) { - width: 100%; - } -} - -.richtext_container { - margin-bottom: $lineheight; - - .richtext_content { - width: 50%; - width: calc(100% - 235px); - display: inline-block; - vertical-align: top; - - @media only screen and (max-width:768px) { - width: 100%; - } - - .richtext_preview { - display: inline-block; - padding: $lineheight; - background-color: $offwhite; - overflow-x: auto; - - &.loading { - background-image: image-url("loading.gif"); - background-repeat: no-repeat; - background-position: center; - } - - > :first-child { - margin-top: 0px; - } - } - } - - .richtext_help { - display: inline-block; - vertical-align: top; - margin-left: 15px; - background-color: $offwhite; - padding: $lineheight/2; - width: 220px; - - ul { - margin-bottom: 0; - } - - h4.heading, li { - border-bottom: 1px solid $grey; - margin-bottom: $lineheight/4; - padding-bottom: $lineheight/4; - } - - li h4, li span, li p { - display: inline-block; - vertical-align: top; - font-size: 11px; - } - - li h4 { - width: 40%; - margin: 0; - } - - li span, li p { - width: 50%; - margin-left: $lineheight/2; - margin-bottom: $lineheight/4; - white-space: nowrap; - } - } -} - -/* Rules for the user notes list */ - -.note_list { - tr.creator { - background-color: $offwhite; + color: var(--bs-secondary-color); } } -/* Rules for the iD editor */ - -.id-embed { - width: 100%; - height: 100%; -} - -/* Rules for the "Welcome" page */ -.site-welcome, .site-fixthemap { - .center { - text-align: center; - .sprite { - float: none; - margin: auto; - } - } - - .sprite { - background-image: image-url("welcome-sprite.png"); - background-size: 500px 250px; - display: block; - float: left; - } - - .icon-list { - padding-bottom: 20px; - div { - margin-bottom: 10px; - p { - padding-top: 10px; - } - } - } - .sprite.small { - width: 50px; - height: 50px; - } - - .sprite.x { - /* no-r2 */ background-position: -50px 0; - } - - .sprite.term { - margin-right: 10px; - vertical-align: middle; - } - - .sprite.node { - /* no-r2 */ background-position: -100px 0; - } - - .sprite.way { - /* no-r2 */ background-position: -150px 0; - } - - .sprite.tag { - /* no-r2 */ background-position: -200px 0; - } - - .sprite.editor { - /* no-r2 */ background-position: -250px 0; - } - - .sprite.question { - /* no-r2 */ background-position: -300px 0; - } - - .sprite.rules { - /* no-r2 */ background-position: -350px 0; - } - - .start-mapping { - margin: auto; - cursor: pointer; - border: none; - padding: 20px 40px; - font-size: 30px; - text-decoration: none; - } - - .icon.note { - background-color: #333; - border-radius: 4px; - } -} +/* Rules for the "About" page */ .site-about #content { - background-color: $lightgrey; - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: cover; - background-attachment: fixed; - - .content-inner { - position: relative; - color: #333; - min-width: 320px; - max-width: 640px; - } - - .text { - background: white; - padding: 40px; + max-width: 760px; } .attr { - position: relative; - padding: 170px 40px 20px; - background: #333; - background: rgba(0, 0, 0, .8); - margin-bottom: 0; margin-top: -20px; h1 { - display: block; - color: white; - font-weight: 300; - font-size: 34px; span { color: $vibrant-green; } } .user-image { - position: absolute; - top: 0px; - right: 240px; - left: 0px; height: 150px; background-position: 0 50%; background-repeat: no-repeat; @@ -2268,69 +921,74 @@ input.richtext_title[type="text"] { } .byosm { - position: absolute; - top: 0px; - right: 0px; - z-index: 1; - width: 240px; - height: 150px; - padding: 20px 20px 20px 40px; - font: 500 20px/24px Helvetica, Arial, sans-serif; - white-space: nowrap; - color: #fff; background: $vibrant-green; } .byosm span { display: inline-block; - width: 20px; - margin-left: -20px; + width: 1em; + margin-left: -1em; } } +} - .icon { - width: 30px; - height: 30px; - margin-right: 10px; - vertical-align: middle; - background: 40px 40px image-url('about/sprite.png') no-repeat; - - &.local { - /* no-r2 */ - background-position: 0px 0px; - } - &.community { - /* no-r2 */ - background-position: 0px -40px; - } - &.open { - /* no-r2 */ - background-position: 0px -80px; - } - &.partners { - /* no-r2 */ - background-position: 0px -120px; - } - &.infringement { - /* no-r2 */ - background-position: 0px -160px; - } - &.legal { - /* no-r2 */ - background-position: -45px -160px; - } +/* Rules for block pages */ + +#block_list .username { + max-width: 20em; +} + +/* Rules for tabs inside secondary background sections */ + +.bg-body-secondary .nav-tabs { + --bs-border-color: var(--bs-secondary-border-subtle); + --bs-secondary-bg: var(--bs-secondary-border-subtle); + margin-bottom: -1px; +} + +/* Rules for traces */ + +img.trace_image { + mix-blend-mode: darken; +} + +@include color-mode(dark) { + img.trace_image { + filter: invert(1); + mix-blend-mode: lighten; } } -@import 'browse'; +/* Rules for map sidebar icons */ -@media only screen and (max-width:960px) { - .header-illustration.new-user-arm { - display: none; +.browse-section { + .node::before, + .way::before, + .relation::before { + display: inline-block; + width: 25px; + margin-left: -25px; } + + .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'); } } -.read-reports { - background: $lightgrey; - opacity: 0.7; +@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); + } + } + } }