X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/8c64595415e15fda7b2a70e01c8fb53e3e6ac1cc..510a82230f7c070ce60ae28f245d4da29be53f15:/app/assets/stylesheets/common.scss?ds=sidebyside diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 2cdb617be..d551462b2 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -16,8 +16,6 @@ time[title] { text-decoration: underline dotted; } -#container { position: relative; } - /* Rules for icons */ .icon { @@ -50,7 +48,7 @@ time[title] { /* Utility for de-emphasizing content */ -.text-muted a { +.text-body-secondary a { color: $blue; } @@ -79,7 +77,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; @@ -98,23 +96,13 @@ header { position: relative; 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 { @@ -124,6 +112,10 @@ header { nav.primary { margin-right: auto; } + + .username { + max-width: 12em; + } } nav.primary { @@ -160,7 +152,7 @@ nav.primary { nav.secondary { .nav-link { - padding: 0.2rem; + padding: 0.3rem; } } @@ -197,7 +189,7 @@ body.small-nav { min-height: $headerHeight; &.closed nav { - display: none; + display: none !important; } .search_forms { @@ -222,6 +214,8 @@ body.small-nav { } nav.secondary { + flex-direction: column; + .user-menu, .login-menu { width: 100%; } @@ -401,7 +395,7 @@ body.small-nav { overflow-y: scroll; } - .overlay-sidebar { + .overlay-sidebar.overlay-right-sidebar { #sidebar { position: absolute; width: 350px; @@ -409,7 +403,7 @@ body.small-nav { overflow: hidden; } - #map, #map-ui { + #map { height: 100%; } } @@ -418,9 +412,12 @@ body.small-nav { .layers-ui { .base-layers > * { - height: 56px; + height: 3.5rem; > .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 { @@ -429,10 +426,6 @@ body.small-nav { } .overlay-layers { - p { - font-size: 13px; - margin-bottom: 8px; - } li.disabled { color: $darkgrey; } } } @@ -499,16 +492,6 @@ body.small-nav { .donate-attr { color: darken($green, 10%) !important; } -/* Rules for the sidebar */ - -#browse_status { - input { - display: block; - margin-left: auto; - margin-right: auto; - } -} - /* Temporary label size override until we remove site-wide font customisation */ form { @@ -588,10 +571,12 @@ tr.turn { cursor: pointer; } -.routing_marker { width: 15px; cursor: move; } +.routing_marker_column { + width: 15px; -.browse_status { - display: none; + img { + cursor: move; + } } /* Rules for the history sidebar */ @@ -642,26 +627,11 @@ tr.turn { } } - .note-description { - overflow: hidden; - margin: 0 0 10px 10px; - } - .query-results { display: none; } } -/* 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; - } -} - /* Force LTR/RTL alignment for placeholder text */ .form-control::placeholder { @@ -710,10 +680,16 @@ tr.turn { 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; @@ -722,16 +698,16 @@ tr.turn { bottom: 0; &.new-user-main { - background-image: image-url("sign-up-illustration.png"); - background-position-x: 50px; + 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"); + background-image: image-url("terms-illustration.svg"); } } @@ -891,52 +867,7 @@ div.secondary-actions { } } -/* 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; - } -} +/* Rules for the "About" page */ .site-about #content { .content-inner { @@ -971,41 +902,12 @@ div.secondary-actions { margin-left: -1em; } } - - .icon { - width: 30px; - height: 30px; - background: 40px 40px image-url('about/sprite.png') no-repeat; - - &.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; - } - } } -.auth-container { - max-width: 600px; +/* Rules for block pages */ + +#block_list .username { + max-width: 20em; } /* Rules for tabs inside secondary background sections */