ui/webui/resources/css/widgets.css

   1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2  * Use of this source code is governed by a BSD-style license that can be
   3  * found in the LICENSE file. */
   4
   5 /* This file defines styles for form controls. The order of rule blocks is
   6  * important as there are some rules with equal specificity that rely on order
   7  * as a tiebreaker. These are marked with OVERRIDE. */
   8
   9 @import url(action_link.css);
  10
  11 /* Default state **************************************************************/
  12
  13 :-webkit-any(button,
  14              input[type='button'],
  15              input[type='submit']):not(.custom-appearance),
  16 select,
  17 input[type='checkbox'],
  18 input[type='radio'] {
  19   -webkit-appearance: none;
  20   -webkit-user-select: none;
  21   background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
  22   border: 1px solid rgba(0, 0, 0, 0.25);
  23   border-radius: 2px;
  24   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
  25       inset 0 1px 2px rgba(255, 255, 255, 0.75);
  26   color: #444;
  27   font: inherit;
  28   margin: 0 1px 0 0;
  29   outline: none;
  30   text-shadow: 0 1px 0 rgb(240, 240, 240);
  31 }
  32
  33 :-webkit-any(button,
  34              input[type='button'],
  35              input[type='submit']):not(.custom-appearance),
  36 select {
  37   min-height: 2em;
  38   min-width: 4em;
  39 <if expr="is_win">
  40   /* The following platform-specific rule is necessary to get adjacent
  41    * buttons, text inputs, and so forth to align on their borders while also
  42    * aligning on the text's baselines. */
  43   padding-bottom: 1px;
  44 </if>
  45 }
  46
  47 :-webkit-any(button,
  48              input[type='button'],
  49              input[type='submit']):not(.custom-appearance) {
  50   -webkit-padding-end: 10px;
  51   -webkit-padding-start: 10px;
  52 }
  53
  54 select {
  55   -webkit-appearance: none;
  56   -webkit-padding-end: 20px;
  57   -webkit-padding-start: 6px;
  58   /* OVERRIDE */
  59   background-image: url(../images/select.png),
  60       -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
  61   background-position: right center;
  62   background-repeat: no-repeat;
  63 }
  64
  65 html[dir='rtl'] select {
  66   background-position: center left;
  67 }
  68
  69 input[type='checkbox'] {
  70   height: 13px;
  71   position: relative;
  72   vertical-align: middle;
  73   width: 13px;
  74 }
  75
  76 input[type='radio'] {
  77   /* OVERRIDE */
  78   border-radius: 100%;
  79   height: 15px;
  80   position: relative;
  81   vertical-align: middle;
  82   width: 15px;
  83 }
  84
  85 /* TODO(estade): add more types here? */
  86 input[type='number'],
  87 input[type='password'],
  88 input[type='search'],
  89 input[type='text'],
  90 input[type='url'],
  91 input:not([type]),
  92 textarea {
  93   border: 1px solid #bfbfbf;
  94   border-radius: 2px;
  95   box-sizing: border-box;
  96   color: #444;
  97   font: inherit;
  98   margin: 0;
  99   /* Use min-height to accommodate addditional padding for touch as needed. */
 100   min-height: 2em;
 101   padding: 3px;
 102   outline: none;
 103 <if expr="is_win or is_macosx or is_ios">
 104   /* For better alignment between adjacent buttons and inputs. */
 105   padding-bottom: 4px;
 106 </if>
 107 }
 108
 109 input[type='search'] {
 110   -webkit-appearance: textfield;
 111   /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
 112    * of the default text in relatively spacious languages (i.e. German). */
 113   min-width: 160px;
 114 }
 115
 116 /* Remove when https://bugs.webkit.org/show_bug.cgi?id=51499 is fixed.
 117  * TODO(dbeam): are there more types that would benefit from this? */
 118 input[type='search']::-webkit-textfield-decoration-container {
 119   direction: inherit;
 120 }
 121
 122 /* Checked ********************************************************************/
 123
 124 input[type='checkbox']:checked::before {
 125   -webkit-user-select: none;
 126   background-image: url(../images/check.png);
 127   background-size: 100% 100%;
 128   content: '';
 129   display: block;
 130   height: 100%;
 131   width: 100%;
 132 }
 133
 134 input[type='radio']:checked::before {
 135   background-color: #666;
 136   border-radius: 100%;
 137   bottom: 3px;
 138   content: '';
 139   display: block;
 140   left: 3px;
 141   position: absolute;
 142   right: 3px;
 143   top: 3px;
 144 }
 145
 146 /* Hover **********************************************************************/
 147
 148 :enabled:hover:-webkit-any(
 149     select,
 150     input[type='checkbox'],
 151     input[type='radio'],
 152     :-webkit-any(
 153         button,
 154         input[type='button'],
 155         input[type='submit']):not(.custom-appearance)) {
 156   background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 157   border-color: rgba(0, 0, 0, 0.3);
 158   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
 159       inset 0 1px 2px rgba(255, 255, 255, 0.95);
 160   color: black;
 161 }
 162
 163 :enabled:hover:-webkit-any(select) {
 164   /* OVERRIDE */
 165   background-image: url(../images/select.png),
 166       -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 167 }
 168
 169 /* Active *********************************************************************/
 170
 171 :enabled:active:-webkit-any(
 172     select,
 173     input[type='checkbox'],
 174     input[type='radio'],
 175     :-webkit-any(
 176         button,
 177         input[type='button'],
 178         input[type='submit']):not(.custom-appearance)) {
 179   background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
 180   box-shadow: none;
 181   text-shadow: none;
 182 }
 183
 184 :enabled:active:-webkit-any(select) {
 185   /* OVERRIDE */
 186   background-image: url(../images/select.png),
 187       -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
 188 }
 189
 190 /* Disabled *******************************************************************/
 191
 192 :disabled:-webkit-any(
 193     button,
 194     input[type='button'],
 195     input[type='submit']):not(.custom-appearance),
 196 select:disabled {
 197   background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
 198   border-color: rgba(80, 80, 80, 0.2);
 199   box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
 200       inset 0 1px 2px rgba(255, 255, 255, 0.75);
 201   color: #aaa;
 202 }
 203
 204 select:disabled {
 205   /* OVERRIDE */
 206   background-image: url(../images/disabled_select.png),
 207       -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
 208 }
 209
 210 input:disabled:-webkit-any([type='checkbox'],
 211                            [type='radio']) {
 212   opacity: .75;
 213 }
 214
 215 input:disabled:-webkit-any([type='password'],
 216                            [type='search'],
 217                            [type='text'],
 218                            [type='url'],
 219                            :not([type])) {
 220   color: #999;
 221 }
 222
 223 /* Focus **********************************************************************/
 224
 225 :enabled:focus:-webkit-any(
 226     select,
 227     input[type='checkbox'],
 228     input[type='number'],
 229     input[type='password'],
 230     input[type='radio'],
 231     input[type='search'],
 232     input[type='text'],
 233     input[type='url'],
 234     input:not([type]),
 235     :-webkit-any(
 236          button,
 237          input[type='button'],
 238          input[type='submit']):not(.custom-appearance)) {
 239   /* OVERRIDE */
 240   -webkit-transition: border-color 200ms;
 241   /* We use border color because it follows the border radius (unlike outline).
 242    * This is particularly noticeable on mac. */
 243   border-color: rgb(77, 144, 254);
 244   outline: none;
 245 }
 246
 247 /* Checkbox/radio helpers ******************************************************
 248  *
 249  * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
 250  * these classes with the markup structure:
 251  *
 252  *   <div class="checkbox">
 253  *     <label>
 254  *       <input type="checkbox"></input>
 255  *       <span>
 256  *     </label>
 257  *   </div>
 258  */
 259
 260 :-webkit-any(.checkbox, .radio) label {
 261   -webkit-user-select: none;
 262   /* Don't expand horizontally: <http://crbug.com/112091>. */
 263   align-items: center;
 264   display: inline-flex;
 265   padding-bottom: 7px;
 266   padding-top: 7px;
 267 }
 268
 269 :-webkit-any(.checkbox, .radio) label input {
 270   flex-shrink: 0;
 271 }
 272
 273 :-webkit-any(.checkbox, .radio) label input ~ span {
 274   -webkit-margin-start: 0.6em;
 275   /* Make sure long spans wrap at the same horizontal position they start. */
 276   display: block;
 277 }
 278
 279 :-webkit-any(.checkbox, .radio) label:hover {
 280   color: black;
 281 }
 282
 283 label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
 284   color: #999;
 285 }
 286
 287 extensionview {
 288   display: inline-block;
 289   height: 300px;
 290   width: 300px;
 291 }