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