X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/7c4dff7445568b9791f79b5c201c808eb83d100e..9026b84d844fce847820626b495d6c4fcaa55ea1:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index d71538e66..a4b126b94 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -19,17 +19,17 @@ small, aside { font-size: 12px; } +time[title] { + text-decoration: underline dotted; +} + #container { position: relative; } .small_icon { vertical-align: middle; - margin-right: $lineheight/4; + margin-right: $lineheight * 0.25; } -[dir=rtl] { /* no-r2 */ text-align: right; } - -[dir=ltr] { /* no-r2 */ text-align: left; } - /* Rules for icons */ .icon { @@ -43,23 +43,23 @@ small, aside { 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; } -.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; } +.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 */ @@ -80,11 +80,12 @@ small, aside { /* Rules for the header */ #menu-icon { - display: none !important; - float: right; + display: none; + position: absolute; + top: 0; + right: 0; background: image-url("menu-icon.png") no-repeat; background-size: 30px 30px; - display: block; width: 30px; height: 30px; margin: 14px 10px 0 0; @@ -103,48 +104,30 @@ header { > * { height: 100%; - padding: $lineheight/2; - } - - h1, nav.primary { - float: left; - } - - a, a:hover { - text-decoration: none; + padding: $lineheight * 0.5; } img.logo { - width: 30px; - height: 30px; margin-top: -2px; - vertical-align: middle; } h1 { 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; + } +} nav.primary { - .btn-outline-primary { + & > .btn-group .btn-outline-primary { @include button-outline-variant($green, $color-hover: $white, $active-color: $white); } @@ -176,9 +159,6 @@ nav.primary { } nav.secondary { - position: absolute; - right: 0; - .nav-link { padding: 0.2rem; color: $darkgrey; @@ -188,35 +168,8 @@ nav.secondary { color: darken($darkgrey, 25%); } - .login-menu { - .btn-outline-secondary { - @include button-outline-variant($darkgrey, $color-hover: $white, $active-color: $white); - } - } - - .user-menu { - .btn-outline-secondary { - @include button-outline-variant($darkgrey, $color-hover: $darkgrey, $active-background: white, $active-border: $darkgrey); - border-color: $grey; - &:hover { - border-color: $grey; - } - } - } - #inboxanchor { - display: inline-block; - height: 25px; - margin: 3px 0 3px 3px; background-color: lighten($grey, 10%); - line-height: 20px; - border-radius: 3; - } - - .dropdown-menu { - .count-number { - font-size: 14px; - } } } @@ -244,18 +197,11 @@ body.compact-nav { body.small-nav { #menu-icon { - display: inline-block !important; - } - - nav.primary, - nav.secondary { - float: none !important; - position: relative; display: block; - clear: both; } header { + flex-direction: column; height: auto; min-height: $headerHeight; background: #fff; @@ -276,6 +222,7 @@ body.small-nav { } nav.primary { + margin-right: 0; padding: 0; ul, li { @@ -305,7 +252,7 @@ body.small-nav { } nav.secondary { - .user-menu { + .user-menu, .login-menu { width: 100%; } } @@ -318,48 +265,40 @@ body.small-nav { display: inline-block; } - .overlay-sidebar #sidebar .welcome.visible { + .overlay-sidebar #sidebar .welcome { display: none; } .overlay-sidebar #sidebar #banner { display: none; } - - .leaflet-top.leaflet-right { - top: 10px !important; - } } /* 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; + 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, @@ -378,26 +317,18 @@ body.small-nav { 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 */ @@ -426,17 +357,6 @@ body.small-nav { #sidebar_loader { display: none; } - - #sidebar_content { - padding: $spacer; - } - - > div { - position: relative; - float: left; - clear: both; - width: 100%; - } } .overlay-sidebar #sidebar { @@ -450,11 +370,7 @@ body.small-nav { } .welcome { - display: none; - - &.visible { - display: block; - } + display: block; } #sidebar_content { @@ -464,11 +380,6 @@ body.small-nav { .welcome { display: none; - - p { - font-size: 110%; - font-weight: 300; - } } #banner { @@ -508,15 +419,7 @@ body.small-nav { .section { border-bottom: 1px solid $grey; - padding: 10px 20px; - } - - .tooltip { - opacity: 1; - border: 1px solid $grey; - .tooltip-arrow { - border-top-color: $grey; - } + padding: $spacer; } } } @@ -530,6 +433,13 @@ body.small-nav { height: 50%; } + #map-ui { + z-index: 9999; + width: 100%; + height: 50%; + overflow-y: scroll; + } + .overlay-sidebar { #sidebar { position: absolute; @@ -538,23 +448,10 @@ body.small-nav { overflow: hidden; } - #map { + #map, #map-ui { height: 100%; } } - - #map-ui { - z-index: 9999; - width: 100%; - overflow-y: scroll; - } - } -} - -.layers-ui, -.share-ui { - li:last-child { - margin-bottom: 0; } } @@ -609,62 +506,13 @@ body.small-nav { } .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; - } - - .share-link { - input[type=text], - textarea { - width: 100%; - font-family: monospace; - font-size: small; - line-height: 1.3; - } - } - - .share-image { - label { - margin-right: 10px; - } - } - - #embed_html { - resize: vertical; - } - #mapnik_scale { width: 100px; } } .leaflet-top { - top: $lineheight/2 !important; + top: 10px !important; .leaflet-control { margin-right: 0px !important; margin-top: 0px !important; @@ -683,59 +531,16 @@ body.small-nav { /* Rules for attribution text under the main map shown on printouts */ -#attribution { - display: none; - - table { - width: 100% - } -} - -.attribution_license, -.attribution_project { - text-align: left; -} - -.attribution_notice { - text-align: center; -} - .donate-attr { color: darken($green, 10%) !important; } /* Rules for the sidebar */ -.sidebar_heading { - position: relative; - padding: $lineheight/2 $lineheight; - // background: $offwhite; - // border-bottom: 1px solid $grey; -} - #browse_status { input { display: block; margin-left: auto; margin-right: auto; } - - > div { - padding: $spacer; - } -} - -#sidebar { - #sidebar_loader, - .search_more { - width: 100%; - margin: $lineheight auto; - } - - .loader { - text-align: center; - margin: auto; - width: 40px; - display: block; - } } /* Temporary label size override until we remove site-wide font customisation */ @@ -744,6 +549,9 @@ form { label { font-size: 16px; } + .col-form-label { + font-size: 16px; + } } /* Stop bootstrap 5 from floating legends when they don't need to be */ @@ -788,22 +596,15 @@ header .search_forms, /* Rules for search sidebar */ #sidebar .search_results_entry { - ul li { - cursor: pointer; - &.selected { background: $list-highlight; } + ul li.selected { + background: $list-highlight; } .search_more .loader { display: none; - width: 100%; } } -.search_results_error { - color: #f00; - padding: 10px 20px; -} - /* Rules for routing */ div.direction { @@ -816,14 +617,7 @@ div.direction { div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; } } -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 { @@ -835,15 +629,6 @@ tr.turn:hover { .routing_marker { width: 15px; cursor: move; } -/* Rules for entity history */ - -#sidebar_content { - .browse_details { - position: relative; - border-bottom: $keyline; - } -} - .browse_status { display: none; } @@ -861,14 +646,6 @@ tr.turn:hover { } } - .comments { - color: $darkgrey; - } - - .comments-0 { - opacity: 0.5; - } - .changeset_more .loader { display: none; width: 100%; @@ -893,64 +670,20 @@ tr.turn:hover { } .browse-tag-list { - background-color: $offwhite; table-layout: fixed; - border-collapse: separate; - border-spacing: 0; - width: 100%; - margin-bottom: $spacer; - - th, td { - border-bottom: 1px solid $grey; - } + white-space: pre-wrap; 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: ; } } - .note-comments li, .changeset-comments li { - margin: $lineheight/2 0; - - p { - margin: 10px 6px 0 6px; - line-height: 1.5; - } - } - - .subscribe-buttons input { - font-size: 90%; - line-height: 15px; - min-height: 20px; - } - span.action-button:hover { cursor: pointer; text-decoration: underline; @@ -988,6 +721,12 @@ tr.turn:hover { } } +/* Force LTR/RTL alignment for placeholder text */ + +.form-control::placeholder { + text-align: left; +} + /* Rules for export sidebar */ .export_form { @@ -1010,26 +749,14 @@ tr.turn:hover { #maxlat { margin-top: -1px; } #minlon { float: left; - /* no-r2 */ margin-left: -1px; + /*rtl:ignore*/ margin-left: -1px; } #maxlon { float: right; - /* no-r2 */ margin-right: -1px; + /*rtl:ignore*/ margin-right: -1px; } #minlat { margin-bottom: -1px; } } - - .export_bound { - margin: $lineheight/4; - } - - dl { - padding-left: $lineheight/2; - dd { - margin-left: 0; - margin-bottom: 10px; - } - } } /* Rules for edit pages */ @@ -1041,11 +768,6 @@ tr.turn:hover { bottom: 0; width: 100%; } - - #map { - height: 100%; - overflow: hidden; - } } /* Rules for non-map content pages */ @@ -1098,15 +820,10 @@ tr.turn:hover { [dir=rtl] .header-illustration { transform: scaleX(-1); -} -#content.maximised { - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 0; - z-index: 2000; + h1 { + transform: scaleX(-1); + } } /* Rules for small maps in content areas */ @@ -1125,7 +842,7 @@ tr.turn:hover { /* Rules for the user map */ .content_map .leaflet-popup-content { - margin: $lineheight/2; + margin: $spacer; min-height: 50px; } @@ -1135,71 +852,26 @@ tr.turn:hover { min-width: 200px; p { padding: 0 0 5px 0; - margin-top: 0 0 0 60px; + margin: 0 0 0 60px; font-size: 12px; } } -/* Rules for the user list */ - -#user_list { - width: 100%; -} - -/* Rules for the diary list page */ - -.diary_post { - position: relative; - padding-top: $lineheight; - padding-bottom: $lineheight/2; - border-top: 1px solid $grey; - - &.deleted { - background-color: #fee; - } -} - /* Rules for the diary entry page */ .diary_entries { #map { height: 400px; display: none; - margin-bottom: $lineheight; } .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; } - &.deleted { - background-color: #fee; - } - p { - margin-bottom: $lineheight/2; - } - .comment-heading { - margin-bottom: 0; - margin-top: 0; - } - } -} - -/* Rules for the log in page */ - -#login_auth_buttons { - margin-bottom: 0; - - li { - float: left; - padding: $lineheight/4 $lineheight/2; } } @@ -1222,166 +894,32 @@ tr.turn:hover { } } -/* Rules for the account settings page */ - -#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; -} - -/* Rules for the oauth authorization page */ - -.oauth-authorize ul { - list-style: none; -} - /* Rules for messages pages */ .messages { - button[type="submit"] { - margin: auto; - white-space: nowrap; - } - .inbox-row { background: $offwhite; } - .inbox-row-unread { + .inbox-row-unread td { 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 { - &.error { - background-color: #ff7070; - } - - &.warning { - background-color: #ffe0cc; - } - - &.notice { - background-color: #CBEEA7; - } -} - -/* 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; - } } .search_form { background-color: $lightgrey; + #query { + z-index: 0; + } + .describe_location { - top: 6px; - right: 6px; font-size: 10px; - color: $blue; } } .directions_form { background-color: $lightgrey; - - .loader_copy { - display: none; - - img { - vertical-align: middle; - } - } } /* Rules for user images */ @@ -1397,21 +935,13 @@ img.user_thumbnail { } img.user_thumbnail_tiny { - width: auto; - height: auto; - max-width: 25px; - max-height: 25px; -} - -/* Rules for geo microformats */ - -abbr.geo { - border-bottom: none; + width: 25px; + height: 25px; + object-fit: contain; } /* General styles for action lists / subnavs */ - nav.secondary-actions { margin-left: -11px; overflow: hidden; @@ -1426,9 +956,9 @@ nav.secondary-actions { flex-basis: auto; list-style: none; border-left: 1px solid $grey; - padding-left: $lineheight/2; - margin-right: $lineheight/2; - margin-bottom: $lineheight/8; + padding-left: $lineheight * 0.5; + margin-right: $lineheight * 0.5; + margin-bottom: $lineheight * 0.125; } } } @@ -1438,24 +968,6 @@ div.secondary-actions { text-align: center; } -/* Create a single-line dl */ - -dl.dl-inline { - dt, dd { - display: inline-block; - } - dd { - margin-right: 1em; - } -} - -/* Rules for OpenID logo */ - -.openid_logo { - vertical-align: text-bottom; - border: 0; -} - /* Rules for rich text */ .richtext, @@ -1491,21 +1003,6 @@ dl.dl-inline { } } -/* Rules for the user notes list */ - -.note_list { - tr.creator { - background-color: $offwhite; - } -} - -/* Rules for the iD editor */ - -.id-embed { - width: 100%; - height: 100%; -} - /* Rules for the "Welcome" page */ .site-welcome, .site-fixthemap { .sprite { @@ -1514,22 +1011,13 @@ dl.dl-inline { display: block; } - .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; + /*rtl:ignore*/ background-position: -50px 0; } .sprite.term { @@ -1538,27 +1026,27 @@ dl.dl-inline { } .sprite.node { - /* no-r2 */ background-position: -100px 0; + /*rtl:ignore*/ background-position: -100px 0; } .sprite.way { - /* no-r2 */ background-position: -150px 0; + /*rtl:ignore*/ background-position: -150px 0; } .sprite.tag { - /* no-r2 */ background-position: -200px 0; + /*rtl:ignore*/ background-position: -200px 0; } .sprite.editor { - /* no-r2 */ background-position: -250px 0; + /*rtl:ignore*/ background-position: -250px 0; } .sprite.question { - /* no-r2 */ background-position: -300px 0; + /*rtl:ignore*/ background-position: -300px 0; } .sprite.rules { - /* no-r2 */ background-position: -350px 0; + /*rtl:ignore*/ background-position: -350px 0; } .icon.note { @@ -1609,27 +1097,27 @@ dl.dl-inline { background: 40px 40px image-url('about/sprite.png') no-repeat; &.local { - /* no-r2 */ + /*rtl:ignore*/ background-position: 0px 0px; } &.community { - /* no-r2 */ + /*rtl:ignore*/ background-position: 0px -40px; } &.open { - /* no-r2 */ + /*rtl:ignore*/ background-position: 0px -80px; } &.partners { - /* no-r2 */ + /*rtl:ignore*/ background-position: 0px -120px; } &.infringement { - /* no-r2 */ + /*rtl:ignore*/ background-position: 0px -160px; } &.legal { - /* no-r2 */ + /*rtl:ignore*/ background-position: -45px -160px; } }