X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/b0c50ab344f924e855d9a9003c1b913685d1bb62..627f2493faa77336e7dcb13abb92dc547ee4db9f:/app/assets/stylesheets/common.scss diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index df0b072e0..54ecb30e2 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -92,25 +92,6 @@ a { } } -/* General styles for tables */ - -table { - width: 100%; - margin-bottom: $lineheight; - th, td { - text-align: left; - padding: $lineheight/4; - line-height: $lineheight; - } - th { - font-weight: 600; - vertical-align: top; - } - td { - vertical-align: middle; - } -} - /* Utility for de-emphasizing content */ .deemphasize { @@ -753,118 +734,6 @@ header .search_forms, 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; - } - - 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; - } - } - - a.reverse_directions { - cursor: pointer; - margin: 0px 0px 5px 25px; - } -} - /* Rules for the map key which appears in the popout sidebar */ #mapkey { @@ -873,9 +742,6 @@ header .search_forms, margin-left: auto; margin-right: auto; } - td { - padding: 0 $lineheight/4 $lineheight/4 $lineheight/4; - } } /* Rules for search sidebar */ @@ -1029,6 +895,7 @@ tr.turn:hover { table-layout: fixed; border-collapse: separate; border-spacing: 0; + width: 100%; th, td { border-bottom: 1px solid $grey; @@ -1300,18 +1167,6 @@ tr.turn:hover { float: right; } -/* Rules for the trace list shown by the traces tab etc */ - -#trace_list { - border-width: 0px; - text-align: right; - - .trace_summary { - font-size: 12px; - color: gray; - } -} - /* Rules for the new trace form */ #new_trace { @@ -1624,43 +1479,21 @@ tr.turn:hover { /* Rules for messages pages */ .messages { - width: 100%; - border: 1px solid $grey; - input[type="submit"] { margin: auto; } - tbody tr { - border-top: 1px solid $grey; - } .inbox-row { background: $offwhite; } .inbox-row-unread { - background:#CBEEA7; + background: #CBEEA7; } .right { float: right; } - - tr td, - tr th { - padding: $lineheight/4; - } - p:last-child, - h2:last-child, - h3:last-child, - ol:last-child, - ul:last-child { - margin-bottom:0; - } - tr td { - height: 30px; - border-right: 1px solid $lightgrey; - } } .inbox-row .inbox-mark-read { @@ -1829,44 +1662,205 @@ tr.turn:hover { float: left; margin-top: 5px; } -} -#remember_me_openid { - display: block; -} + #remember_me_openid { + display: block; + } -select { - padding: 2px; -} + select { + padding: 2px; + } -input[type="checkbox"], -input[type="radio"] { - margin-right: 5px; -} + input[type="checkbox"], + input[type="radio"] { + margin-right: 5px; + } -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; + 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; - &.field_with_errors { - border: 2px solid #ff7070; + &.field_with_errors { + border: 2px solid #ff7070; + } } -} -textarea { - padding: 5px; - width: 100%; - min-height: 50px; - resize: vertical; + textarea { + padding: 5px; + width: 100%; + min-height: 50px; + resize: vertical; + } + + + /* 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; + } + + .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; + } + + 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; + } + } + + a.reverse_directions { + cursor: pointer; + margin: 0px 0px 5px 25px; + } + } } /* Rules for user images */ @@ -1946,54 +1940,6 @@ div.secondary-actions { .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; -} - .buttons { min-width: 200px; input[type="submit"], @@ -2048,16 +1994,11 @@ a.button { } } -/* Rules for doing distinct colour of alternate table rows */ - -.table0, -.item0 { - background: $offwhite; -} +/* Customise the background colour of striped tables */ -.table1, -.item1 { - background: #fff; +.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 */ @@ -2197,15 +2138,7 @@ input.richtext_title[type="text"] { .note_list { tr.creator { - background-color: $lightgrey; - } - - td { - padding: 3px; - } - - p { - margin-bottom: 0px; + background-color: $offwhite; } } @@ -2413,9 +2346,3 @@ input.richtext_title[type="text"] { background: $lightgrey; opacity: 0.7; } - -.issues-list { - td:nth-child(2) { - white-space: nowrap; - } -}