X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/2452576333c8b0e76bf3a921d8321fbcc267f146..2ac8b4b76057c293fc93f492359933db87abfc59:/app/assets/stylesheets/common.scss?ds=sidebyside diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 7038bb69c..2df8b7e65 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -466,90 +466,6 @@ nav.secondary { margin-top: 50px; } -/* Rules for bootstrap tooltips */ - -.tooltip { - position: absolute; - display: none; - color: #333; - text-align: left; - font-size: 12px; - max-width: 250px; -} - -.tooltip.in { - opacity: 0.8; - z-index: 1030; - height: auto; - display: block; -} - -.tooltip.top { - margin-top: -10px; - text-align: center; -} - -.tooltip.right { - margin-left: 10px; -} - -.tooltip.bottom { - margin-top: 10px; - text-align: center; -} - -.tooltip.left { - margin-left: -10px; - text-align: right; -} - -.tooltip-inner { - display: inline-block; - padding: 10px; - font-weight: normal; - background-color: white; -} - -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.tooltip.top .tooltip-arrow { - bottom: -5px; - left: 50%; - margin-left: -5px; - border-top-color: white; - border-width: 5px 5px 0; -} - -.tooltip.right .tooltip-arrow { - top: 50%; - left: -5px; - margin-top: -5px; - border-right-color: white; - border-width: 5px 5px 5px 0; -} - -.tooltip.left .tooltip-arrow { - top: 50%; - right: -5px; - margin-top: -5px; - border-left-color: white; - border-width: 5px 0 5px 5px; -} - -.tooltip.bottom .tooltip-arrow { - top: -5px; - left: 50%; - margin-left: -5px; - border-bottom-color: white; - border-width: 0 5px 5px; -} - /* Rules for Leaflet maps */ .leaflet-control .control-button { @@ -636,6 +552,12 @@ nav.secondary { float: right; cursor: pointer; } + + p.error { + background-color: #ff7070; + padding: 10px; + font-weight: bold; + } } .welcome { @@ -688,6 +610,10 @@ nav.secondary { &.query-disabled { cursor: not-allowed; } + + .leaflet-marker-draggable { + cursor: move; + } } #map-ui { @@ -857,6 +783,10 @@ nav.secondary { #attribution { display: none; + + table { + width: 100% + } } .attribution_license, @@ -907,13 +837,15 @@ nav.secondary { } } -/* Rules for the search box */ +/* Rules for the search and direction forms */ -header .search_form { +header .search_forms, +.directions_form { display: none; } -.search_form { +.search_form, +.directions_form { position: relative; padding: $lineheight/2; background-color: $lightgrey; @@ -927,23 +859,37 @@ header .search_form { input[type=text] { width: 100%; height: 30px; - border-right: none; - transition: 300ms linear; } + input[type=text].overflow { + border-right: none; + } + input:focus { outline: none; box-shadow: 0px 0px 7px #9ED485; } - input[type=submit] { + input[type=submit].float { float: right; width: auto; min-width: 0; border-radius: 0 2px 2px 0; } + 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; @@ -951,6 +897,51 @@ header .search_form { font-size: 10px; color: $blue; } + + .switch_link { + float: right; + width: auto; + min-width: 0; + margin-left: 6px; + } + + img.button { + display: block; + } + + span.force_width { + width: 100%; + padding-right: 25px; + display: block; + } + + select.routing_engines { + min-height: 30px; + margin: 0px 0px 5px 25px; + } + + input.routing_go { + min-width: 100px; + float: right; + } + + div.header { + width: 100%; + height: 30px; + } + + div.line { + width: 100%; + margin: 0px 0px 5px 0px; + } + + div.loader_copy { + display: none; + + img { + vertical-align: middle; + } + } } /* Rules for the map key which appears in the popout sidebar */ @@ -973,7 +964,7 @@ header .search_form { border-bottom: $keyline; cursor: pointer; &:first-child { border-top: $keyline; } - &.selected { background: #FFFFE6; } + &.selected { background: $list-highlight; } } .search_details { @@ -989,6 +980,47 @@ header .search_form { color: #f00; } +/* Rules for routing */ + +#sidebar_content>table { + padding: 5px 20px 10px 15px; + width: 100%; + border-collapse: separate; +} + +div.direction { + background-image: image-url('routing-sprite.png'); + width: 20px; + height: 20px; + background-repeat: no-repeat; +} +@for $i from 1 through 17 { +div.direction.i#{$i} { background-position: #{($i)*-20+20}px 0px; } +} + +p#routing_summary { + padding: 0 $lineheight $lineheight/4; +} + +td.instruction, td.distance { + padding-top: $lineheight/5; + padding-bottom: $lineheight/5; + border-bottom: 1px solid #DDD; +} +td.distance { + color: #BBB; + text-align: right; + font-size: x-small; +} +tr.turn { + cursor: pointer; +} +tr.turn:hover { + background: $list-highlight; +} +.routing_engines, #route_from, #route_to { margin-left: 25px; } +.routing_marker { width: 15px; position: absolute; cursor: move; } + /* Rules for entity history */ #sidebar_content { @@ -1010,7 +1042,7 @@ header .search_form { border-bottom: 1px solid #ddd; cursor: pointer; - &.selected { background: #FFFFE6; } + &.selected { background: $list-highlight; } /* color is derived from changeset bbox fillColor in history.js */ } @@ -1167,7 +1199,7 @@ header .search_form { } &.selected { - background: #FFFFE6; + background: $list-highlight; } } } @@ -1228,6 +1260,15 @@ header .search_form { } } +/* Rules for the routing sidebar */ + +#sidebar_content { + #routing_credit { + text-align: center; + padding: 0.5em; + } +} + /* Rules for edit pages */ .site-edit { @@ -1583,11 +1624,11 @@ header .search_form { /* Rules for the log in page */ -#login_openid_buttons { +#login_auth_buttons { margin-bottom: 0; } -#login_openid_buttons li { +#login_auth_buttons li { float: left; padding: $lineheight/4 $lineheight/2; } @@ -1746,19 +1787,26 @@ header .search_form { /* Rules for "flash" notice boxes shown at the top of the content area */ -.error { +.flash { padding: $lineheight; - background-color: #ff7070; -} -.warning { - padding: $lineheight; - background-color: #ffe0cc; -} + &.error { + background-color: #ff7070; + } -.notice { - padding: $lineheight; - background-color: #CBEEA7; + &.warning { + background-color: #ffe0cc; + } + + &.notice { + background-color: #CBEEA7; + } + + div.message { + display: inline-block; + margin-left: $lineheight / 2; + vertical-align: middle; + } } /* Rules for highlighting fields with rails validation errors */ @@ -1861,6 +1909,10 @@ header .search_form { display: block; } +select { + padding: 2px; +} + input[type="checkbox"], input[type="radio"] { margin-right: 5px; @@ -1871,6 +1923,7 @@ input[type="email"], input[type="url"], input[type="password"], textarea { + color: #222; background-color: #fff; border: 1px solid #ccc; padding: 2px 5px;