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   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   height: 15px;
  78   position: relative;
  79   vertical-align: middle;
  80   width: 15px;
  81 }
  82
  83 /* TODO(estade): add more types here? */
  84 input[type='number'],
  85 input[type='password'],
  86 input[type='search'],
  87 input[type='text'],
  88 input[type='url'],
  89 input:not([type]),
  90 textarea {
  91   border: 1px solid #bfbfbf;
  92   border-radius: 2px;
  93   box-sizing: border-box;
  94   color: #444;
  95   font: inherit;
  96   margin: 0;
  97   /* Use min-height to accommodate addditional padding for touch as needed. */
  98   min-height: 2em;
  99   padding: 3px;
 100   outline: none;
 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)) {
 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)) {
 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),
 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)) {
 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 /* Action links ***************************************************************/
 246
 247 [is='action-link'] {
 248   cursor: pointer;
 249   display: inline-block;
 250   text-decoration: none;
 251 }
 252
 253 [is='action-link']:hover {
 254   text-decoration: underline;
 255 }
 256
 257 [is='action-link']:active {
 258   color: rgb(5, 37, 119);
 259   text-decoration: underline;
 260 }
 261
 262 [is='action-link'][disabled] {
 263   color: #999;
 264   cursor: default;
 265   pointer-events: none;
 266   text-decoration: none;
 267 }
 268
 269 [is='action-link'].no-outline {
 270   outline: none;
 271 }
 272
 273 /* Checkbox/radio helpers ******************************************************
 274  *
 275  * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
 276  * these classes with the markup structure:
 277  *
 278  *   <div class="checkbox">
 279  *     <label>
 280  *       <input type="checkbox"></input>
 281  *       <span>
 282  *     </label>
 283  *   </div>
 284  */
 285
 286 :-webkit-any(.checkbox, .radio) label {
 287   -webkit-user-select: none;
 288   /* Don't expand horizontally: <http://crbug.com/112091>. */
 289   align-items: center;
 290   display: inline-flex;
 291   padding-bottom: 7px;
 292   padding-top: 7px;
 293 }
 294
 295 :-webkit-any(.checkbox, .radio) label input {
 296   flex-shrink: 0;
 297 }
 298
 299 :-webkit-any(.checkbox, .radio) label input ~ span {
 300   -webkit-margin-start: 0.6em;
 301   /* Make sure long spans wrap at the same horizontal position they start. */
 302   display: block;
 303 }
 304
 305 :-webkit-any(.checkbox, .radio) label:hover {
 306   color: black;
 307 }
 308
 309 label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
 310   color: #999;
 311 }
 312
 313 extensionview {
 314   display: inline-block;
 315   height: 300px;
 316   width: 300px;
 317 }