X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/d45c1435e6649c6af91d5799a5162dfaa661c72b..84c898173778ece298b6bcd6d9839c207a831a86:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index b8c874fb8..f0746117d 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 { @@ -37,29 +37,28 @@ 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; } -.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 */ @@ -81,7 +80,9 @@ small, aside { #menu-icon { display: none; - float: right; + position: absolute; + top: 0; + right: 0; background: image-url("menu-icon.png") no-repeat; background-size: 30px 30px; width: 30px; @@ -102,48 +103,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); } @@ -175,9 +158,6 @@ nav.primary { } nav.secondary { - position: absolute; - right: 0; - .nav-link { padding: 0.2rem; color: $darkgrey; @@ -187,22 +167,6 @@ 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 { background-color: lighten($grey, 10%); } @@ -235,15 +199,8 @@ body.small-nav { display: block; } - nav.primary, - nav.secondary { - float: none !important; - position: relative; - display: block; - clear: both; - } - header { + flex-direction: column; height: auto; min-height: $headerHeight; background: #fff; @@ -264,28 +221,9 @@ body.small-nav { } nav.primary { + margin-right: 0; padding: 0; - ul, li { - border: none; - border-radius: 0; - width: 100%; - } - - ul { - border-top: 1px solid #eee; - li { - border-bottom: 1px solid #eee; - border-right: none; - > a { - border-radius: 0; - width: 100%; - text-align: center; - font-size: 15px; - } - } - } - .btn-group { width: 100%; padding: 10px; @@ -323,14 +261,6 @@ body.small-nav { font-weight: $font-weight-normal; } -/* Rules for the message shown in place of the map when javascript is disabled */ - -#noscript { - z-index: 20000000; - margin-left: 400px; - margin-top: 50px; -} - /* Rules for Leaflet maps */ .leaflet-top.leaflet-right, @@ -406,14 +336,6 @@ body.small-nav { #sidebar_loader { display: none; } - - #sidebar_content { - padding: $spacer; - } - - > div { - position: relative; - } } .overlay-sidebar #sidebar { @@ -437,11 +359,6 @@ body.small-nav { .welcome { display: none; - - p { - font-size: 110%; - font-weight: 300; - } } #banner { @@ -451,11 +368,6 @@ body.small-nav { display: block; width: $sidebarWidth; } - - button.btn-close { - background-color: rgba(255, 255, 255, 0.5); - opacity: 1.0; - } } #map { @@ -598,10 +510,6 @@ body.small-nav { /* Rules for attribution text under the main map shown on printouts */ -#attribution { - display: none; -} - .donate-attr { color: darken($green, 10%) !important; } /* Rules for the sidebar */ @@ -612,10 +520,6 @@ body.small-nav { margin-left: auto; margin-right: auto; } - - > div { - padding: $spacer; - } } /* Temporary label size override until we remove site-wide font customisation */ @@ -658,22 +562,11 @@ header .search_forms, display: none; } -/* 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; } + ul li.selected { + background: $list-highlight; } .search_more .loader { @@ -681,11 +574,6 @@ header .search_forms, } } -.search_results_error { - color: #f00; - padding: 10px 20px; -} - /* Rules for routing */ div.direction { @@ -698,14 +586,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 { @@ -734,14 +615,6 @@ tr.turn:hover { } } - .comments { - color: $darkgrey; - } - - .comments-0 { - opacity: 0.5; - } - .changeset_more .loader { display: none; width: 100%; @@ -766,62 +639,12 @@ 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 { @@ -861,6 +684,12 @@ tr.turn:hover { } } +/* Force LTR/RTL alignment for placeholder text */ + +.form-control::placeholder { + text-align: left; +} + /* Rules for export sidebar */ .export_form { @@ -883,26 +712,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 */ @@ -914,11 +731,6 @@ tr.turn:hover { bottom: 0; width: 100%; } - - #map { - height: 100%; - overflow: hidden; - } } /* Rules for non-map content pages */ @@ -977,15 +789,6 @@ tr.turn:hover { } } -#content.maximised { - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 0; - z-index: 2000; -} - /* Rules for small maps in content areas */ .content_map { @@ -1017,12 +820,6 @@ tr.turn:hover { } } -/* Rules for the user list */ - -#user_list { - width: 100%; -} - /* Rules for the diary entry page */ .diary_entries { @@ -1060,12 +857,6 @@ tr.turn:hover { } } -/* Rules for the oauth authorization page */ - -.oauth-authorize ul { - list-style: none; -} - /* Rules for messages pages */ .messages { @@ -1073,7 +864,7 @@ tr.turn:hover { background: $offwhite; } - .inbox-row-unread { + .inbox-row-unread td { background: #CBEEA7; } } @@ -1081,11 +872,12 @@ tr.turn:hover { .search_form { background-color: $lightgrey; + #query { + z-index: 0; + } + .describe_location { - top: 6px; - right: 6px; font-size: 10px; - color: $blue; } } @@ -1106,10 +898,9 @@ img.user_thumbnail { } img.user_thumbnail_tiny { - width: auto; - height: auto; - max-width: 25px; - max-height: 25px; + width: 25px; + height: 25px; + object-fit: contain; } /* General styles for action lists / subnavs */ @@ -1147,8 +938,6 @@ div.secondary-actions { code { background: $lightgrey; padding: 2px 3px; - direction: inherit; /* fix for Bootstrap < 5.2 */ - unicode-bidi: unset; /* fix for Bootstrap < 5.2 */ } pre { @@ -1177,13 +966,6 @@ div.secondary-actions { } } -/* Rules for the iD editor */ - -.id-embed { - width: 100%; - height: 100%; -} - /* Rules for the "Welcome" page */ .site-welcome, .site-fixthemap { .sprite { @@ -1198,7 +980,7 @@ div.secondary-actions { } .sprite.x { - /* no-r2 */ background-position: -50px 0; + /*rtl:ignore*/ background-position: -50px 0; } .sprite.term { @@ -1207,27 +989,27 @@ div.secondary-actions { } .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 { @@ -1278,27 +1060,27 @@ div.secondary-actions { 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; } }