X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/5cc4e933479b7e74ed7d4425909f0915717fc1db..52c0bb5e734c8bfd0420837ed3f95a6b58754646:/app/assets/stylesheets/common.scss?ds=sidebyside diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 7c4053c4f..27458c6ef 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -1,22 +1,13 @@ @import "parameters"; @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 { @@ -64,35 +55,26 @@ small, aside { .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 */ +/* Utility for de-emphasizing content */ -a { - color: #24d; - text-decoration: none; - outline: 0; - &:hover { - text-decoration: underline; - } +.text-muted a { + color: $blue; } -/* Utility for de-emphasizing content */ - -.deemphasize { - color: $darkgrey; - a { - color: $blue; - } +/* Rules for borders */ +/* These add additional colours to those provided by bootstrap */ +.border-grey { + border-color: $grey !important; } -.text-muted a { - color: $blue; +.border-lightgrey { + border-color: $lightgrey !important; } /* Rules for the header */ @@ -163,7 +145,7 @@ header { nav.primary { .btn-outline-primary { - @include button-outline-variant($green, $white); + @include button-outline-variant($green, $color-hover: $white, $active-color: $white); } .disabled { @@ -208,35 +190,20 @@ nav.secondary { .login-menu { .btn-outline-secondary { - @include button-outline-variant($darkgrey); + @include button-outline-variant($darkgrey, $color-hover: $white, $active-color: $white); } } .user-menu { .btn-outline-secondary { - @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey); + @include button-outline-variant($darkgrey, $color-hover: $darkgrey, $active-background: white, $active-border: $darkgrey); border-color: $grey; &:hover { border-color: $grey; } - &:focus { - background-color: white; - box-shadow: none; - } - } - &.show .btn-outline-secondary { - background-color: white; - &:focus { - box-shadow: none; - } } } - img.user_thumbnail_tiny { - border: 0; - border-radius: 3px; - } - #inboxanchor { display: inline-block; height: 25px; @@ -275,6 +242,95 @@ 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 { + height: auto; + min-height: $headerHeight; + background: #fff; + + &.closed nav { + display: none; + } + + .search_forms { + display: block; + } + } + + #sidebar .search_forms, + #edit_tab, + #export_tab { + display: none; + } + + nav.primary { + 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; + } + } + + nav.secondary { + .user-menu { + width: 100%; + } + } + + #compact-secondary-nav { + display: none; + } + + .compact-hide { + display: inline-block; + } + + .overlay-sidebar #sidebar .welcome.visible { + display: none; + } + + .overlay-sidebar #sidebar #banner { + display: none; + } + + .leaflet-top.leaflet-right { + top: 10px !important; + } +} + /* Utility for styling notification numbers */ .count-number { @@ -302,11 +358,10 @@ body.compact-nav { 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; } @@ -321,26 +376,18 @@ body.compact-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 */ @@ -370,56 +417,16 @@ body.compact-nav { display: none; } + #sidebar_content { + padding: $spacer; + } + > 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 { @@ -447,26 +454,11 @@ body.compact-nav { .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 { @@ -508,21 +500,35 @@ body.compact-nav { 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; +@include media-breakpoint-down(md) { + body.map-layout { + #sidebar, #map { + position: relative; + overflow-x: hidden; + width: 100%; + height: 50%; } - .tooltip { - opacity: 1; - border: 1px solid $grey; - .tooltip-arrow { - border-top-color: $grey; + #map-ui { + z-index: 9999; + width: 100%; + height: 50%; + overflow-y: scroll; + } + + .overlay-sidebar { + #sidebar { + position: absolute; + width: 350px; + height: auto; + overflow: hidden; + } + + #map, #map-ui { + height: 100%; } } } @@ -586,31 +592,6 @@ body.compact-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; } @@ -686,23 +667,18 @@ body.compact-nav { padding: $lineheight/2 $lineheight; // background: $offwhite; // border-bottom: 1px solid $grey; - > .close { - float: right; - margin-top: 2px; - cursor: pointer; - } } #browse_status { - p { - padding: $lineheight; - } - input { display: block; margin-left: auto; margin-right: auto; } + + > div { + padding: $spacer; + } } #sidebar { @@ -712,8 +688,7 @@ body.compact-nav { margin: $lineheight auto; } - .loader, - .load_more { + .loader { text-align: center; margin: auto; width: 40px; @@ -721,123 +696,41 @@ body.compact-nav { } } -/* Rules for the search and direction forms */ - -header .search_forms, -.directions_form { - 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; - } - - .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; - } +/* Temporary label size override until we remove site-wide font customisation */ - span.force_width { - width: 100%; - padding-right: 25px; - display: block; +form { + label { + font-size: 16px; } +} - select.routing_engines { - min-height: 30px; - margin: 0px 0px 5px 25px; - } +/* Stop bootstrap 5 from floating legends when they don't need to be */ +legend { + float: none; +} - input.routing_go { - min-width: 100px; - float: right; - } +/* 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. */ - div.header { - width: 100%; - height: 30px; - } +.btn-primary { + @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white); +} - div.line { - width: 100%; - margin: 0px 0px 5px 0px; - } +.btn-secondary { + @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white); +} - div.loader_copy { - display: none; +.btn-outline-secondary { + @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white); +} - img { - vertical-align: middle; - } - } +/* Rules for the search and direction forms */ - a.reverse_directions { - cursor: pointer; - margin: 0px 0px 5px 25px; - } +header .search_forms, +.directions_form { + display: none; } /* Rules for the map key which appears in the popout sidebar */ @@ -871,13 +764,6 @@ header .search_forms, /* 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'); width: 20px; @@ -888,10 +774,6 @@ div.direction { div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; } } -p#routing_summary { - padding: 0 $lineheight $lineheight/4; -} - td.instruction, td.distance { padding-top: $lineheight/5; padding-bottom: $lineheight/5; @@ -908,8 +790,8 @@ tr.turn { tr.turn:hover { background: $list-highlight; } -.routing_engines, #route_from, #route_to { margin-left: 25px; } -.routing_marker { width: 15px; position: absolute; cursor: move; } + +.routing_marker { width: 15px; cursor: move; } /* Rules for entity history */ @@ -928,14 +810,16 @@ tr.turn:hover { #sidebar .changesets { li { - cursor: pointer; - &.selected { background: $list-highlight; } /* color is derived from changeset bbox fillColor in history.js */ + + 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 */ + } } .comments { - float: right; color: $darkgrey; } @@ -953,11 +837,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; } } @@ -966,42 +850,13 @@ 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%; + margin-bottom: $spacer; th, td { border-bottom: 1px solid $grey; @@ -1039,11 +894,6 @@ tr.turn:hover { } } - .warning { - margin: 0 0 $lineheight/2 0; - padding: 0 $lineheight/2; - } - .note-comments li, .changeset-comments li { margin: $lineheight/2 0; @@ -1053,16 +903,6 @@ tr.turn:hover { } } - .comments-header { - float: left; - } - - .subscribe-buttons { - float: left; - margin: 18px 10px 10px; - min-width: 80px; - } - .subscribe-buttons input { font-size: 90%; line-height: 15px; @@ -1079,17 +919,8 @@ tr.turn:hover { 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 { @@ -1105,29 +936,34 @@ tr.turn:hover { } } +/* 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; + } +} + /* Rules for export sidebar */ .export_form { - padding: $lineheight; - .export_area_inputs, .export_button { text-align: center; } .export_area_inputs { - margin-bottom: $lineheight/2; + margin-bottom: $spacer; input[type="text"] { - width: 80px; + width: 100px; text-align: center; - margin-bottom: 5px; } } .export_boxy { background: $lightgrey; - border: 1px solid $grey; - border-radius: 3px; #maxlat { margin-top: -1px; } #minlon { @@ -1138,18 +974,13 @@ tr.turn:hover { float: right; /* no-r2 */ margin-right: -1px; } - #minlat { margin-bottom: 0; } + #minlat { margin-bottom: -1px; } } .export_bound { margin: $lineheight/4; } - .export_button { - margin-top: $lineheight; - margin-bottom: $lineheight; - } - dl { padding-left: $lineheight/2; dd { @@ -1159,15 +990,6 @@ tr.turn:hover { } } -/* Rules for the routing sidebar */ - -#sidebar_content { - #routing_credit { - text-align: center; - padding: 0.5em; - } -} - /* Rules for edit pages */ .site-edit { @@ -1192,27 +1014,18 @@ tr.turn:hover { .content-inner { position: relative; - max-width: 900px; + max-width: 960px; margin: auto; padding: $lineheight; } /* Overrides for pages that use new layout conventions */ -.users-new, -.users-create, -.users-terms, -.users-confirm { - .content-heading .content-inner { - height: 200px; - } -} - .header-illustration { background-position: 0 0; background-repeat: no-repeat; - position: absolute; - height: 200px; + position: relative; + min-height: 200px; width: 100%; left: 0; bottom: 0; @@ -1232,15 +1045,21 @@ tr.turn:hover { &.new-user-arm { height: 110px; width: 130px; - left: 260px; - top: 160px; + left: 280px; + top: 180px; background-image: image-url("sign-up-illustration-arm.png"); + position: absolute; z-index: 100; + pointer-events: none; } } [dir=rtl] .header-illustration { transform: scaleX(-1); + + h1 { + transform: scaleX(-1); + } } #content.maximised { @@ -1256,7 +1075,6 @@ tr.turn:hover { .content_map { height: 200px; - border: 1px solid $grey; margin-bottom: $lineheight; } @@ -1266,73 +1084,6 @@ tr.turn:hover { } } -/* 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; - } - .user-description { - width: 100%; - clear: both; - } -} - -.admin-user-info small { - margin-bottom: $lineheight/2; - display: inline; - margin-right: $lineheight; -} - -.contact-activity { - margin-top: $lineheight; - width: 100%; -} - -.activity-details p { - margin-left: 70px; - margin-bottom: 0; -} - -.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; - } -} - /* Rules for the user map */ .content_map .leaflet-popup-content { @@ -1346,33 +1097,15 @@ 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; } - img.user_thumbnail { - float: left; - margin: 0 $lineheight/2 0 0; - } } /* Rules for the user list */ #user_list { width: 100%; - - tr { - vertical-align: middle; - } - - p { - margin-top: 0px; - margin-bottom: 0px; - } -} - -#user_list_actions { - float: right; - margin-top: $lineheight/2; } /* Rules for the diary list page */ @@ -1383,53 +1116,19 @@ tr.turn:hover { padding-bottom: $lineheight/2; border-top: 1px solid $grey; - &:first-of-type { - margin-top: $lineheight/2; - } - &.deleted { 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; } @@ -1455,33 +1154,21 @@ tr.turn:hover { } } -.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; + 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; @@ -1495,13 +1182,6 @@ tr.turn:hover { list-style-type: lower-alpha; } } - - #decline { - background: $lightblue; - &:hover { - background: darken($lightblue, $hovercolor); - } - } } /* Rules for the account settings page */ @@ -1530,16 +1210,6 @@ tr.turn:hover { display: inline !important; } -/* 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 { @@ -1549,8 +1219,9 @@ tr.turn:hover { /* Rules for messages pages */ .messages { - input[type="submit"] { + button[type="submit"] { margin: auto; + white-space: nowrap; } .inbox-row { @@ -1601,8 +1272,6 @@ tr.turn:hover { /* Rules for "flash" notice boxes shown at the top of the content area */ .flash { - padding: $lineheight; - &.error { background-color: #ff7070; } @@ -1614,25 +1283,6 @@ tr.turn:hover { &.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 */ @@ -1673,110 +1323,39 @@ tr.turn:hover { } } -/* Rules for forms */ +.search_form { + background-color: $lightgrey; -.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; + .describe_location { + top: 6px; + right: 6px; + font-size: 10px; + color: $blue; } } -#remember_me_openid { - display: block; -} - -select { - padding: 2px; -} - -input[type="checkbox"], -input[type="radio"] { - margin-right: 5px; -} +.directions_form { + background-color: $lightgrey; -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; + .loader_copy { + display: none; - &.field_with_errors { - border: 2px solid #ff7070; + img { + vertical-align: middle; + } } } -textarea { - padding: 5px; - width: 100%; - min-height: 50px; - resize: vertical; -} - /* 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 { @@ -1784,7 +1363,6 @@ img.user_thumbnail_tiny { height: auto; max-width: 25px; max-height: 25px; - border: 1px solid $grey; } /* Rules for geo microformats */ @@ -1793,30 +1371,26 @@ abbr.geo { border-bottom: none; } -/* General styles for action lists / subnavs / pager navs */ +/* General styles for action lists / subnavs */ -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/2; + margin-right: $lineheight/2; + margin-bottom: $lineheight/8; } } } @@ -1826,127 +1400,17 @@ 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; -} +/* Create a single-line dl */ -.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; +dl.dl-inline { + dt, dd { + display: inline-block; } - /* 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; + dd { + margin-right: 1em; } } -/* 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 { @@ -1959,13 +1423,11 @@ a.button { .richtext, .prose { code { - font-size: 13px; background: $lightgrey; padding: 2px 3px; } pre { - font-size: 13px; background: $lightgrey; padding: 2px 3px; white-space: pre-wrap; @@ -1991,95 +1453,6 @@ a.button { } } -.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 { @@ -2097,30 +1470,12 @@ input.richtext_title[type="text"] { /* 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; @@ -2159,15 +1514,6 @@ input.richtext_title[type="text"] { /* 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; @@ -2176,53 +1522,21 @@ input.richtext_title[type="text"] { .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: 28px; span { color: $vibrant-green; } } - @include media-breakpoint-up(sm) { - h1 { - font-size: 34px; - } - } - .user-image { - position: absolute; - top: 0px; - right: 240px; - left: 0px; height: 150px; background-position: 0 50%; background-repeat: no-repeat; @@ -2232,31 +1546,19 @@ 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 { @@ -2287,9 +1589,3 @@ input.richtext_title[type="text"] { } @import 'browse'; - -@media only screen and (max-width:960px) { - .header-illustration.new-user-arm { - display: none; - } -}