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