diff options
author | estade@chromium.org <estade@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2012-02-27 21:45:53 +0000 |
---|---|---|
committer | estade@chromium.org <estade@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2012-02-27 21:45:53 +0000 |
commit | e468816fe2fdde97f56be94b2e06dcc33fbe259e (patch) | |
tree | 17d2213b85f0da9f183797b08ed9a3f0d5f095c5 | |
parent | 9094b60e8dae33f3845b8d3b92e85d60974c199f (diff) | |
download | chromium_src-e468816fe2fdde97f56be94b2e06dcc33fbe259e.zip chromium_src-e468816fe2fdde97f56be94b2e06dcc33fbe259e.tar.gz chromium_src-e468816fe2fdde97f56be94b2e06dcc33fbe259e.tar.bz2 |
css cleanup
1. remove !important from link-button rules. Instead, add :not(.link-button) to the standard button rules. This fixes issues where lots of rules for specific link-buttons were being overruled.
2. Fix coloration of NTP notifications. Also stop using the theme's link color because a) too many themes don't define a value for this and b) those that do define a color that is the same or extremely similar to the standard text color. Use the 'light text' color instead for links and the attribution text (this makes existing themes look better and makes it slightly easier to make new themes).
BUG=103688
TEST=manual
Review URL: https://chromiumcodereview.appspot.com/9463002
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@123808 0039d316-1c4b-4281-b951-d872f2087c98
-rw-r--r-- | chrome/browser/resources/help/help.html | 2 | ||||
-rw-r--r-- | chrome/browser/resources/ntp4/new_tab.css | 13 | ||||
-rw-r--r-- | chrome/browser/resources/ntp4/new_tab_theme.css | 21 | ||||
-rw-r--r-- | chrome/browser/resources/options2/options_page.css | 9 | ||||
-rw-r--r-- | chrome/browser/resources/shared/css/button.css | 56 |
5 files changed, 34 insertions, 67 deletions
diff --git a/chrome/browser/resources/help/help.html b/chrome/browser/resources/help/help.html index 97d6f2b..aa71c63 100644 --- a/chrome/browser/resources/help/help.html +++ b/chrome/browser/resources/help/help.html @@ -40,7 +40,7 @@ <div> <span i18n-content="firmware"></span> <span id="firmware"></span> </div> - <button id="more-info" class="link-button"i18n-content="moreInfoLink"> + <button id="more-info" class="link-button" i18n-content="moreInfoLink"> </button> </if> <if expr="pp_ifdef('_google_chrome') and (is_win or is_macosx or pp_ifdef('chromeos'))"> diff --git a/chrome/browser/resources/ntp4/new_tab.css b/chrome/browser/resources/ntp4/new_tab.css index 4d80c79..e4bfd5a 100644 --- a/chrome/browser/resources/ntp4/new_tab.css +++ b/chrome/browser/resources/ntp4/new_tab.css @@ -49,7 +49,6 @@ html[dir='rtl'] #notification-container { } #notification { - color: black; display: inline-block; font-weight: bold; } @@ -94,10 +93,6 @@ html[dir='rtl'] #notification-container { .link-button { -webkit-margin-start: 0.5em; - color: rgb(0, 102, 204); - cursor: pointer; - display: inline-block; - text-decoration: underline; } #card-slider-frame { @@ -184,6 +179,7 @@ html[dir='rtl'] #attribution { -webkit-box-shadow: none; background: transparent none; border: none; + color: inherit; cursor: pointer; font-size: 1.1em; /* Leave room for the scrollbar. */ @@ -214,11 +210,8 @@ html[dir='rtl'] .login-status-icon { background-position-x: left; } -.profile-name:hover { - text-decoration: underline; -} - -.link-span { +.profile-name:hover, +.link-span:hover { text-decoration: underline; } diff --git a/chrome/browser/resources/ntp4/new_tab_theme.css b/chrome/browser/resources/ntp4/new_tab_theme.css index cedbc3e..5aab3aa 100644 --- a/chrome/browser/resources/ntp4/new_tab_theme.css +++ b/chrome/browser/resources/ntp4/new_tab_theme.css @@ -21,11 +21,12 @@ body { } #attribution, -a.link-color { - color: $9; /* COLOR_NTP_LINK */ +.link-button, +.link-span { + color: $21; /* COLOR_NTP_TEXT_LIGHT */ } -.app span { +.link-button:active { color: $8; /* COLOR_NTP_TEXT */ } @@ -53,20 +54,6 @@ a.link-color { background-color: $21; /* COLOR_NTP_TEXT_LIGHT */ } -/* Login Status. **************************************************************/ - -#login-container { - color: $8; /* COLOR_NTP_TEXT */ -} - -#login-status-sub-header { - color: $21; /* COLOR_NTP_TEXT_LIGHT */ -} - -.link-span { - color: $9; /* COLOR_NTP_LINK */ -} - /* Footer *********************************************************************/ #footer-border { diff --git a/chrome/browser/resources/options2/options_page.css b/chrome/browser/resources/options2/options_page.css index 9a64f76..3aca4f5 100644 --- a/chrome/browser/resources/options2/options_page.css +++ b/chrome/browser/resources/options2/options_page.css @@ -64,15 +64,6 @@ div.disabled { color: #888; } -/* TODO(jhawkins): Refactor back into button.css once more pages are converted. - */ -/* Note |link-button| has no additional styling for focus, hover, or active. */ -.link-button { - color: rgb(48, 57, 66); - padding-left: 0; - padding-right: 0; -} - /* TEXT */ input[type='password'], input[type='text'], diff --git a/chrome/browser/resources/shared/css/button.css b/chrome/browser/resources/shared/css/button.css index 21253c7..d416139 100644 --- a/chrome/browser/resources/shared/css/button.css +++ b/chrome/browser/resources/shared/css/button.css @@ -3,9 +3,9 @@ * found in the LICENSE file. */ -button:not(.custom-appearance), -input[type='button']:not(.custom-appearance), -input[type='submit']:not(.custom-appearance) { +button:not(.custom-appearance):not(.link-button), +input[type='button']:not(.custom-appearance):not(.link-button), +input[type='submit']:not(.custom-appearance):not(.link-button) { -webkit-border-radius: 3px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -webkit-user-select: none; @@ -21,29 +21,29 @@ input[type='submit']:not(.custom-appearance) { padding: 3px 12px; } -button:not(.custom-appearance):hover, -input[type='button']:not(.custom-appearance):hover, -input[type='submit']:not(.custom-appearance):hover { +button:not(.custom-appearance):not(.link-button):hover, +input[type='button']:not(.custom-appearance):not(.link-button):hover, +input[type='submit']:not(.custom-appearance):not(.link-button):hover { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9); border-color: #999; color: #222; } -button:not(.custom-appearance):active, -input[type='button']:not(.custom-appearance):active, -input[type='submit']:not(.custom-appearance):active { +button:not(.custom-appearance):not(.link-button):active, +input[type='button']:not(.custom-appearance):not(.link-button):active, +input[type='submit']:not(.custom-appearance):not(.link-button):active { -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc); color: #333; } -button[disabled]:not(.custom-appearance), -input[type='button'][disabled]:not(.custom-appearance), -input[type='submit'][disabled]:not(.custom-appearance), -button[disabled]:not(.custom-appearance):hover, -input[type='button'][disabled]:not(.custom-appearance):hover, -input[type='submit'][disabled]:not(.custom-appearance):hover { +button[disabled]:not(.custom-appearance):not(.link-button), +input[type='button'][disabled]:not(.custom-appearance):not(.link-button), +input[type='submit'][disabled]:not(.custom-appearance):not(.link-button), +button[disabled]:not(.custom-appearance):not(.link-button):hover, +input[type='button'][disabled]:not(.custom-appearance):not(.link-button):hover, +input[type='submit'][disabled]:not(.custom-appearance):not(.link-button):hover { -webkit-box-shadow: none; background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5); border-color: #aaa; @@ -51,10 +51,10 @@ input[type='submit'][disabled]:not(.custom-appearance):hover { } /* TODO(estade): remove this. It's duplicated in chrome_shared2.css */ -button:not(.custom-appearance):focus, -input[type='submit']:not(.custom-appearance):focus, -input[type='text']:not(.custom-appearance):focus, -select:not(.custom-appearance):focus { +button:not(.custom-appearance):not(.link-button):focus, +input[type='submit']:not(.custom-appearance):not(.link-button):focus, +input[type='text']:not(.custom-appearance):not(.link-button):focus, +select:not(.custom-appearance):not(.link-button):focus { -webkit-box-shadow: inset 0 1px 2px white, 0 1px 2px rgba(0, 0, 0, .2), 0 0 1px #c0c0c0, @@ -68,23 +68,19 @@ select:not(.custom-appearance):focus { } /* Search boxes use an outline because it follows the contours of the box. */ -input[type='search']:not(.custom-appearance):focus { +input[type='search']:not(.custom-appearance):not(.link-button):focus { outline-color: rgb(64, 128, 250); } -/* TODO(jhawkins): Refactor button styling and remove !important here. This is - * currently necessary because individual page button element selectors have - * higher specificity. - */ .link-button, .link-button:focus { - -webkit-box-shadow: none !important; - background: transparent none !important; - border: none !important; - color: rgb(17, 85, 204) !important; + -webkit-box-shadow: none; + background: transparent none; + border: none; + color: rgb(17, 85, 204); cursor: pointer; margin: 0; - padding: 0 4px !important; + padding: 0 4px; } .link-button:hover { @@ -92,6 +88,6 @@ input[type='search']:not(.custom-appearance):focus { } .link-button:active { - color: rgb(5, 37, 119) !important; + color: rgb(5, 37, 119); text-decoration: underline; } |