Index: chrome/browser/resources/shared/css/widgets.css |
=================================================================== |
--- chrome/browser/resources/shared/css/widgets.css (revision 177292) |
+++ chrome/browser/resources/shared/css/widgets.css (working copy) |
@@ -1,309 +0,0 @@ |
-/* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
- * Use of this source code is governed by a BSD-style license that can be |
- * found in the LICENSE file. */ |
- |
-/* This file defines styles for form controls. The order of rule blocks is |
- * important as there are some rules with equal specificity that rely on order |
- * as a tiebreaker. These are marked with OVERRIDE. */ |
- |
-/* Default state **************************************************************/ |
- |
-:-webkit-any(button, |
- input[type='button'], |
- input[type='submit']):not(.custom-appearance):not(.link-button), |
-select, |
-input[type='checkbox'], |
-input[type='radio'] { |
- -webkit-appearance: none; |
- -webkit-user-select: none; |
- background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); |
- border: 1px solid rgba(0, 0, 0, 0.25); |
- border-radius: 2px; |
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), |
- inset 0 1px 2px rgba(255, 255, 255, 0.75); |
- color: #444; |
- font: inherit; |
- margin: 0 1px 0 0; |
- text-shadow: 0 1px 0 rgb(240, 240, 240); |
-} |
- |
-:-webkit-any(button, |
- input[type='button'], |
- input[type='submit']):not(.custom-appearance):not(.link-button), |
-select { |
- min-height: 2em; |
- min-width: 4em; |
-<if expr="is_win"> |
- /* The following platform-specific rule is necessary to get adjacent |
- * buttons, text inputs, and so forth to align on their borders while also |
- * aligning on the text's baselines. */ |
- padding-bottom: 1px; |
-</if> |
-} |
- |
-:-webkit-any(button, |
- input[type='button'], |
- input[type='submit']):not(.custom-appearance):not(.link-button) { |
- -webkit-padding-end: 10px; |
- -webkit-padding-start: 10px; |
-} |
- |
-select { |
- -webkit-appearance: none; |
- -webkit-padding-end: 20px; |
- -webkit-padding-start: 6px; |
- /* OVERRIDE */ |
- background-image: url('../images/select.png'), |
- -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); |
- background-position: right center; |
- background-repeat: no-repeat; |
-} |
- |
-html[dir='rtl'] select { |
- background-position: center left; |
-} |
- |
-input[type='checkbox'] { |
- bottom: 2px; |
- height: 13px; |
- position: relative; |
- vertical-align: middle; |
- width: 13px; |
-} |
- |
-input[type='radio'] { |
- /* OVERRIDE */ |
- border-radius: 100%; |
- bottom: 3px; |
- height: 15px; |
- position: relative; |
- vertical-align: middle; |
- width: 15px; |
-} |
- |
-/* TODO(estade): add more types here? */ |
-input[type='password'], |
-input[type='search'], |
-input[type='text'], |
-input[type='url'], |
-input:not([type]), |
-textarea { |
- border: 1px solid #bfbfbf; |
- border-radius: 2px; |
- box-sizing: border-box; |
- color: #444; |
- font: inherit; |
- margin: 0; |
- /* Use min-height to accommodate addditional padding for touch as needed. */ |
- min-height: 2em; |
- padding: 3px; |
-<if expr="is_win or is_macosx"> |
- /* For better alignment between adjacent buttons and inputs. */ |
- padding-bottom: 4px; |
-</if> |
-} |
- |
-input[type='search'] { |
- -webkit-appearance: textfield; |
- /* NOTE: Keep a relatively high min-width for this so we don't obscure the end |
- * of the default text in relatively spacious languages (i.e. German). */ |
- min-width: 160px; |
-} |
- |
-/* Remove when https://bugs.webkit.org/show_bug.cgi?id=51499 is fixed. |
- * TODO(dbeam): are there more types that would benefit from this? */ |
-input[type='search']::-webkit-textfield-decoration-container { |
- direction: inherit; |
-} |
- |
-/* Checked ********************************************************************/ |
- |
-input[type='checkbox']:checked::before { |
- -webkit-user-select: none; |
- background-image: url('../images/check.png'); |
- background-size: 100% 100%; |
- content: ''; |
- display: block; |
- height: 100%; |
- width: 100%; |
-} |
- |
-html[dir='rtl'] input[type='checkbox']:checked::before { |
- -webkit-transform: scaleX(-1); |
-} |
- |
-input[type='radio']:checked::before { |
- background-color: #666; |
- border-radius: 100%; |
- bottom: 3px; |
- content: ''; |
- display: block; |
- left: 3px; |
- position: absolute; |
- right: 3px; |
- top: 3px; |
-} |
- |
-/* Hover **********************************************************************/ |
- |
-:enabled:hover:-webkit-any( |
- select, |
- input[type='checkbox'], |
- input[type='radio'], |
- :-webkit-any( |
- button, |
- input[type='button'], |
- input[type='submit']):not(.custom-appearance):not(.link-button)) { |
- background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); |
- border-color: rgba(0, 0, 0, 0.3); |
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), |
- inset 0 1px 2px rgba(255, 255, 255, 0.95); |
- color: black; |
-} |
- |
-:enabled:hover:-webkit-any(select) { |
- /* OVERRIDE */ |
- background-image: url('../images/select.png'), |
- -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); |
-} |
- |
-/* Active *********************************************************************/ |
- |
-:enabled:active:-webkit-any( |
- select, |
- input[type='checkbox'], |
- input[type='radio'], |
- :-webkit-any( |
- button, |
- input[type='button'], |
- input[type='submit']):not(.custom-appearance):not(.link-button)) { |
- background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); |
- box-shadow: none; |
- text-shadow: none; |
-} |
- |
-:enabled:active:-webkit-any(select) { |
- /* OVERRIDE */ |
- background-image: url('../images/select.png'), |
- -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); |
-} |
- |
-/* Disabled *******************************************************************/ |
- |
-:disabled:-webkit-any( |
- button, |
- input[type='button'], |
- input[type='submit']):not(.custom-appearance):not(.link-button), |
-select:disabled { |
- background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); |
- border-color: rgba(80, 80, 80, 0.2); |
- box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), |
- inset 0 1px 2px rgba(255, 255, 255, 0.75); |
- color: #aaa; |
-} |
- |
-select:disabled { |
- /* OVERRIDE */ |
- background-image: url('../images/disabled_select.png'), |
- -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); |
-} |
- |
-input:disabled:-webkit-any([type='checkbox'], |
- [type='radio']) { |
- opacity: .75; |
-} |
- |
-input:disabled:-webkit-any([type='password'], |
- [type='search'], |
- [type='text'], |
- [type='url'], |
- :not([type])) { |
- color: #999; |
-} |
- |
-/* Focus **********************************************************************/ |
- |
-:enabled:focus:-webkit-any( |
- select, |
- input[type='checkbox'], |
- input[type='password'], |
- input[type='radio'], |
- input[type='search'], |
- input[type='text'], |
- input[type='url'], |
- input:not([type]), |
- :-webkit-any( |
- button, |
- input[type='button'], |
- input[type='submit']):not(.custom-appearance):not(.link-button)) { |
- /* OVERRIDE */ |
- -webkit-transition: border-color 200ms; |
- /* We use border color because it follows the border radius (unlike outline). |
- * This is particularly noticeable on mac. */ |
- border-color: rgb(77, 144, 254); |
- outline: none; |
-} |
- |
-/* Link buttons ***************************************************************/ |
- |
-.link-button { |
- -webkit-box-shadow: none; |
- background: transparent none; |
- border: none; |
- color: rgb(17, 85, 204); |
- cursor: pointer; |
- /* Input elements have -webkit-small-control which can override the body font. |
- * Resolve this by using 'inherit'. */ |
- font: inherit; |
- margin: 0; |
- padding: 0 4px; |
-} |
- |
-.link-button:hover { |
- text-decoration: underline; |
-} |
- |
-.link-button:active { |
- color: rgb(5, 37, 119); |
- text-decoration: underline; |
-} |
- |
-.link-button[disabled] { |
- color: #999; |
- cursor: default; |
- text-decoration: none; |
-} |
- |
-/* Checkbox/radio helpers ****************************************************** |
- * |
- * .checkbox and .radio classes wrap labels. Checkboxes and radios should use |
- * these classes with the markup structure: |
- * |
- * <div class="checkbox"> |
- * <label> |
- * <input type="checkbox"></input> |
- * <span> |
- * </label> |
- * </div> |
- */ |
- |
-:-webkit-any(.checkbox, .radio) label { |
- /* Don't expand horizontally: <http://crbug.com/112091>. */ |
- display: -webkit-inline-box; |
- padding-bottom: 7px; |
- padding-top: 7px; |
-} |
- |
-:-webkit-any(.checkbox, .radio) label input ~ span { |
- -webkit-margin-start: 0.6em; |
- /* Make sure long spans wrap at the same horizontal position they start. */ |
- display: block; |
-} |
- |
-:-webkit-any(.checkbox, .radio) label:hover { |
- color: black; |
-} |
- |
-label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span { |
- color: #999; |
-} |