third_party/WebKit/Source/web/resources/pickerButton.css

   1 /*
   2  * Copyright (C) 2013 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions
   6  * are met:
   7  * 1. Redistributions of source code must retain the above copyright
   8  *    notice, this list of conditions and the following disclaimer.
   9  * 2. Redistributions in binary form must reproduce the above copyright
  10  *    notice, this list of conditions and the following disclaimer in the
  11  *    documentation and/or other materials provided with the distribution.
  12  *
  13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' AND ANY
  14  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  15  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  16  * DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  17  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  18  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  19  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
  20  * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  21  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
  22  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  23  */
  24
  25 input[type='button'],
  26 button {
  27     -webkit-appearance: none;
  28     -webkit-user-select: none;
  29     background-image: linear-gradient(#ededed, #ededed 38%, #dedede);
  30     border: 1px solid rgba(0, 0, 0, 0.25);
  31     border-radius: 2px;
  32     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
  33     inset 0 1px 2px rgba(255, 255, 255, 0.75);
  34     color: #444;
  35     font: inherit;
  36     text-shadow: 0 1px 0 rgb(240, 240, 240);
  37     min-height: 2em;
  38     min-width: 4em;
  39     -webkit-padding-end: 10px;
  40     -webkit-padding-start: 10px;
  41     margin: 0;
  42 }
  43
  44 :enabled:hover:-webkit-any(button, input[type='button']) {
  45     background-image: linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
  46     border-color: rgba(0, 0, 0, 0.3);
  47     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.95);
  48     color: black;
  49 }
  50
  51 :enabled:active:-webkit-any(button, input[type='button']) {
  52     background-image: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
  53     box-shadow: none;
  54     text-shadow: none;
  55 }
  56
  57 :disabled:-webkit-any(button, input[type='button']) {
  58     background-image: linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
  59     border-color: rgba(80, 80, 80, 0.2);
  60     box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.75);
  61     color: #aaa;
  62 }
  63
  64 :enabled:focus:-webkit-any(button, input[type='button']) {
  65     transition: border-color 200ms;
  66     /* We use border color because it follows the border radius (unlike outline).
  67     * This is particularly noticeable on mac. */
  68     border-color: rgb(77, 144, 254);
  69     outline: none;
  70 }