Commit 134810b1eb402974cb75a279dfa5ce270ce4c0f4
1 parent
afaabc4c
Exists in
master
and in
1 other branch
Improved consistency of styles - inverted shading of tabs at top to match notice…
… info tabs (grey for unselected, light for selected) [ci skip]
Showing
2 changed files
with
24 additions
and
17 deletions
Show diff stats
public/stylesheets/application.css
| 1 | html { | 1 | html { |
| 2 | margin: 0; padding: 0; | 2 | margin: 0; padding: 0; |
| 3 | - color: #585858; background-color: #d0d0d0; | 3 | + color: #585858; |
| 4 | + background-color: #e3e3e3; | ||
| 4 | font-size: 62.8%; font-family: Helvetica, "Lucida Grande","Lucida Sans",Arial,sans-serif; | 5 | font-size: 62.8%; font-family: Helvetica, "Lucida Grande","Lucida Sans",Arial,sans-serif; |
| 5 | } | 6 | } |
| 6 | body { | 7 | body { |
| @@ -111,7 +112,8 @@ a.action { float: right; font-size: 0.9em;} | @@ -111,7 +112,8 @@ a.action { float: right; font-size: 0.9em;} | ||
| 111 | height: 34px; | 112 | height: 34px; |
| 112 | margin-right: 12px; | 113 | margin-right: 12px; |
| 113 | color: #666; | 114 | color: #666; |
| 114 | - background: #FFF url(images/button-bg.png) 0 -2px repeat-x; | 115 | + background-color: #d0d0d0; |
| 116 | + background-image: none; | ||
| 115 | border-top-left-radius: 12px; | 117 | border-top-left-radius: 12px; |
| 116 | border-top-right-radius: 12px; | 118 | border-top-right-radius: 12px; |
| 117 | -moz-border-top-left-radius: 12px; | 119 | -moz-border-top-left-radius: 12px; |
| @@ -120,6 +122,17 @@ a.action { float: right; font-size: 0.9em;} | @@ -120,6 +122,17 @@ a.action { float: right; font-size: 0.9em;} | ||
| 120 | -webkit-border-top-right-radius: 12px; | 122 | -webkit-border-top-right-radius: 12px; |
| 121 | border: 1px solid #bbb; | 123 | border: 1px solid #bbb; |
| 122 | } | 124 | } |
| 125 | +#nav-bar li.active { | ||
| 126 | + border-color: #fff; | ||
| 127 | + background: #FFF url(images/button-bg.png) 0 -2px repeat-x; | ||
| 128 | + border-width:1px 1px 0; | ||
| 129 | + margin-bottom:-2px; | ||
| 130 | + height: 37px; | ||
| 131 | +} | ||
| 132 | +#nav-bar li.active a { | ||
| 133 | + color: #333; | ||
| 134 | +} | ||
| 135 | + | ||
| 123 | #nav-bar li a { | 136 | #nav-bar li a { |
| 124 | color: #666; | 137 | color: #666; |
| 125 | display: block; | 138 | display: block; |
| @@ -141,14 +154,6 @@ a.action { float: right; font-size: 0.9em;} | @@ -141,14 +154,6 @@ a.action { float: right; font-size: 0.9em;} | ||
| 141 | -moz-box-shadow: 0 0 3px #69c; | 154 | -moz-box-shadow: 0 0 3px #69c; |
| 142 | -webkit-box-shadow: 0 0 3px #69c; | 155 | -webkit-box-shadow: 0 0 3px #69c; |
| 143 | } | 156 | } |
| 144 | -#nav-bar li.active { | ||
| 145 | - border-color: #fff; | ||
| 146 | - background-color: #d0d0d0; | ||
| 147 | - background-image: none; | ||
| 148 | - border-width:1px 1px 0; | ||
| 149 | - margin-bottom:-2px; | ||
| 150 | - height: 37px; | ||
| 151 | -} | ||
| 152 | 157 | ||
| 153 | /* Content Wrapper */ | 158 | /* Content Wrapper */ |
| 154 | #content-wrapper { | 159 | #content-wrapper { |
| @@ -169,7 +174,7 @@ a.action { float: right; font-size: 0.9em;} | @@ -169,7 +174,7 @@ a.action { float: right; font-size: 0.9em;} | ||
| 169 | padding: 0; margin: 0; | 174 | padding: 0; margin: 0; |
| 170 | width: 85%; | 175 | width: 85%; |
| 171 | border: none; | 176 | border: none; |
| 172 | - color: #666; | 177 | + color: #636363; |
| 173 | font-size: 2em; line-height: 1em; font-weight: bold; font-family: arial, sans-serif; | 178 | font-size: 2em; line-height: 1em; font-weight: bold; font-family: arial, sans-serif; |
| 174 | word-wrap: break-word; | 179 | word-wrap: break-word; |
| 175 | } | 180 | } |
| @@ -458,7 +463,7 @@ a.button { | @@ -458,7 +463,7 @@ a.button { | ||
| 458 | padding: 0 0.8em; | 463 | padding: 0 0.8em; |
| 459 | margin-left: 0.5em; | 464 | margin-left: 0.5em; |
| 460 | color: #666; | 465 | color: #666; |
| 461 | - background-color: #EBEBEB; | 466 | + background-color: #dadada; |
| 462 | border: 1px solid #BBB; | 467 | border: 1px solid #BBB; |
| 463 | border-radius: 30px; | 468 | border-radius: 30px; |
| 464 | -moz-border-radius: 30px; | 469 | -moz-border-radius: 30px; |
| @@ -466,14 +471,15 @@ a.button { | @@ -466,14 +471,15 @@ a.button { | ||
| 466 | line-height: 30px; | 471 | line-height: 30px; |
| 467 | min-width: 54px; | 472 | min-width: 54px; |
| 468 | text-align: center; | 473 | text-align: center; |
| 474 | + text-shadow: 0 1px 0 #fff; | ||
| 469 | } | 475 | } |
| 470 | input[type="submit"]:hover.button, | 476 | input[type="submit"]:hover.button, |
| 471 | a:hover.button { | 477 | a:hover.button { |
| 472 | - box-shadow: 0px 0px 4px #ccc; | ||
| 473 | - -moz-box-shadow: 0px 0px 4px #ccc; | ||
| 474 | - -webkit-box-shadow: 0px 0px 4px #ccc; | 478 | + box-shadow: 0px 0px 4px #bfbfbf; |
| 479 | + -moz-box-shadow: 0px 0px 4px #bfbfbf; | ||
| 480 | + -webkit-box-shadow: 0px 0px 4px #bfbfbf; | ||
| 475 | text-decoration: none; | 481 | text-decoration: none; |
| 476 | - background-color: #eee; | 482 | + background-color: #e5e5e5; |
| 477 | } | 483 | } |
| 478 | a.button.active { | 484 | a.button.active { |
| 479 | border-color: #fff; | 485 | border-color: #fff; |
| @@ -496,7 +502,8 @@ a.button.active { | @@ -496,7 +502,8 @@ a.button.active { | ||
| 496 | height:30px; | 502 | height:30px; |
| 497 | } | 503 | } |
| 498 | #content .tab-bar a.button.active { | 504 | #content .tab-bar a.button.active { |
| 499 | - background-color:white; | 505 | + background: #FFF; |
| 506 | + color: #444; | ||
| 500 | border-color:#ccc; | 507 | border-color:#ccc; |
| 501 | border-style:solid; | 508 | border-style:solid; |
| 502 | border-width:1px 1px 0; | 509 | border-width:1px 1px 0; |
public/stylesheets/images/button-bg.png
