X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/8756feab8a902bd1111adf3b1d9514988dde9bf3..b903d8b7462519d6ef8f9175fdbde1df6620ccbb:/app/assets/stylesheets/common.css.scss diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 399ac6e61..451d45948 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -115,6 +115,7 @@ body { margin: 0px; padding: 0px; text-align: left; + height: 100%; } body.slim { @@ -145,6 +146,8 @@ small, aside { font-size: 12px; } +#container { position: relative; } + .column-1 { width: 50%; margin: 0 0 $lineheight/2 0; @@ -240,7 +243,7 @@ table { #menu-icon { display: none !important; float: right; - background: url("/assets/menu-icon.png") no-repeat; + background: image-url("menu-icon.png") no-repeat; background-size: 30px 30px; display: block; width: 30px; @@ -301,9 +304,7 @@ nav.primary { float: left; &:last-child { border-right: 0; - > a { border-radius: 0 $border-radius $border-radius 0; } } - &:first-child > a { border-radius: $border-radius 0 0 $border-radius; } > a:hover { background: lighten($green, 30%); } &.current > a:hover { background: $green; } &.disabled > a:hover { background: lighten($green, 38%); } @@ -397,6 +398,7 @@ nav.secondary { a { padding: 5px 15px; + } &.logged-in > a { @@ -404,7 +406,9 @@ nav.secondary { > .user-button { padding: 5px 10px 5px 6px; display: inline-block; + color: $darkgrey; } + &:hover > .user-button { color: darken($darkgrey, 5%); } } } @@ -433,7 +437,8 @@ nav.secondary { .dropdown-menu { left: auto; - right: 0; + right: -1px; + border-radius: 3px 0 3px 3px; .count-number { float: right; @@ -443,6 +448,24 @@ nav.secondary { } } +#compact-secondary-nav { + display: none; + ul li a { + width: 100%; + color: #333; + &:hover { color: #fff; } + } +} + +@media only screen and (max-width:960px) { + #compact-secondary-nav { + display: inline-block; + } + .compact-hide { + display: none; + } +} + /* Utility for styling notification numbers */ .count-number { @@ -615,6 +638,7 @@ nav.secondary { #sidebar { float: left; width: $sidebarWidth; + background: #fff; h2, h3, h4 { padding: $lineheight $lineheight $lineheight/2; @@ -632,40 +656,39 @@ nav.secondary { cursor: pointer; } - .footer { - position: absolute; - bottom: 0; - } - - p.credits { - font-size: 11px; - color: #999; - - a { - color: #666; - } - } - - p.large-text { - font-size: 1.7em; - line-height: 1.4em; - font-weight: 300; - } + -webkit-transition: margin 300ms linear; + -moz-transition: margin 300ms linear; + transition: margin 300ms linear; } - #sidebar.minimized { + .overlay-sidebar #sidebar { position: absolute; z-index: 1000; height: auto; - border-right: none; + border-radius: 5px; + overflow: hidden; + margin-top: $typeheight; + margin-left: $typeheight; + } - #sidebar_content { - display: none; + .welcome { + p { + padding: $lineheight/2 $lineheight $lineheight; + font-size: 110%; + font-weight: 300; } - #search_form { - background: none; - width: 78%; + .button { + width: 50%; + float: left; + margin: 0; + border-radius: 0; + font-weight: 400; + padding: .6em; + + &.learn-more { + border-right: 1px solid #fff; + } } } @@ -814,7 +837,7 @@ nav.secondary { } } -.leaflet-top.leaflet-right { +.leaflet-top { top: $lineheight !important; .leaflet-control { margin-right: 0px !important; @@ -848,6 +871,8 @@ nav.secondary { text-align: center; } +.donate-attr { color: darken($green, 10%) !important; } + /* Rules for the sidebar */ .sidebar_heading { @@ -862,13 +887,13 @@ nav.secondary { } } -#sidebar_content { - position: absolute; - top: 50px; - bottom: 0; - width: 100%; - overflow-y: auto; +#browse_status { + p { + padding: $lineheight; + } +} +#sidebar_content { .loader, .load_more { text-align: center; @@ -882,7 +907,7 @@ nav.secondary { #search_form { position: relative; - padding: $lineheight/2 $lineheight; + padding: $lineheight/2; background-color: $lightgrey; #query_wrapper { @@ -1041,10 +1066,14 @@ a.donate { &.selected { background: #FFFFE6; } /* color is derived from changeset bbox fillColor in history.js */ + + h4 { + padding: 0; + } } .comment a { - font-weight: bold; + font-weight: 500; color: #000; } } @@ -1058,6 +1087,13 @@ a.donate { h4 { padding: 0; } + + .paginate { + float: right; + padding: 1px 6px; + border: 1px solid #eee; + border-radius: 3px; + } } .paginate ul, .note-comments ul { @@ -1086,12 +1122,15 @@ a.donate { } .browse-tag-list { - border: 1px solid #CCC; - border-radius: 4px; + background-color: #F6F6F6; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; font-size: 12px; + margin-left: -$lineheight; + margin-right: -$lineheight; li { - border-bottom: 1px solid #CCC; + border-bottom: 1px solid #ddd; } li:last-child { @@ -1102,26 +1141,25 @@ a.donate { .browse-tag-v { display: inline-block; width: 50%; - height: 30px; float: left; - padding: 6px 10px; + padding: 6px 10px 6px $lineheight; } .browse-tag-k { font-weight: 500; background-color: #F6F6F6; - border-radius: 4px 0 0 4px; } .browse-tag-v { - border-left: 1px solid #CCC; + border-left: 1px solid #ddd; + background-color: #fff; } } } /* Rules for export information which appears in the popout sidebar */ -.export_bounds { +.export_bounds, .export_button { text-align: center; } @@ -2281,6 +2319,7 @@ a.button { list-style: none; background-color: #ffffff; border: 1px solid #ccc; + border-radius: 0 3px 3px; *border-right-width: 2px; *border-bottom-width: 2px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); @@ -2580,7 +2619,7 @@ a.button { &.local { background-position: 0px 0px; } &.community { background-position: 0px -40px; } &.open { background-position: 0px -80px; } - &.contributors { background-position: 0px -120px; } + &.partners { background-position: 0px -120px; } &.infringement { background-position: 0px -160px; } } }