src/ui/webui/resources/css/apps/common.css

   1 /* Copyright 2013 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 button.white-button,
   6 button.blue-button {
   7   border: 5px solid transparent;
   8   box-sizing: content-box;
   9   cursor: default;
  10   height: 21px;
  11   line-height: 21px;
  12   margin: 0;
  13   min-height: 21px;
  14   min-width: 55px;
  15   padding: 0 10px;
  16   position: relative;
  17   outline: none;
  18   text-align: center;
  19   z-index: 1;
  20 }
  21
  22 button.white-button {
  23   border-image: -webkit-image-set(
  24     url('chrome://resources/images/apps/button.png') 1x,
  25     url('chrome://resources/images/2x/apps/button.png')
  26         2x) 5 fill / 5px / 2px repeat;
  27 }
  28
  29 button.white-button:hover {
  30   border-image: -webkit-image-set(
  31     url('chrome://resources/images/apps/button_hover.png') 1x,
  32     url('chrome://resources/images/2x/apps/button_hover.png')
  33         2x) 5 fill / 5px / 2px repeat;
  34 }
  35
  36 button.white-button:active {
  37   border-image: -webkit-image-set(
  38     url('chrome://resources/images/apps/button_pressed.png') 1x,
  39     url('chrome://resources/images/2x/apps/button_pressed.png')
  40         2x) 5 fill / 5px / 2px repeat;
  41 }
  42
  43 button.white-button:focus {
  44   border-image: -webkit-image-set(
  45     url('chrome://resources/images/apps/button_focused.png') 1x,
  46     url('chrome://resources/images/2x/apps/button_focused.png')
  47         2x) 5 fill / 5px / 2px repeat;
  48 }
  49
  50 button.white-button:focus:hover {
  51   border-image: -webkit-image-set(
  52     url('chrome://resources/images/apps/button_focused_hover.png') 1x,
  53     url('chrome://resources/images/2x/apps/button_focused_hover.png')
  54         2x) 5 fill / 5px / 2px repeat;
  55 }
  56
  57 button.white-button:focus:active {
  58   border-image: -webkit-image-set(
  59     url('chrome://resources/images/apps/button_focused_pressed.png') 1x,
  60     url('chrome://resources/images/2x/apps/button_focused_pressed.png')
  61         2x) 5 fill / 5px / 2px repeat;
  62 }
  63
  64 button.white-button[disabled] {
  65   border-image: -webkit-image-set(
  66     url('chrome://resources/images/apps/button_inactive.png') 1x,
  67     url('chrome://resources/images/2x/apps/button_inactive.png')
  68         2x) 5 fill / 5px / 2px repeat;
  69 }
  70
  71 button.blue-button {
  72   border-image: -webkit-image-set(
  73     url('chrome://resources/images/apps/blue_button.png') 1x,
  74     url('chrome://resources/images/2x/apps/blue_button.png')
  75         2x) 5 fill / 5px / 2px repeat;
  76 }
  77
  78 button.blue-button:hover {
  79   border-image: -webkit-image-set(
  80     url('chrome://resources/images/apps/blue_button_hover.png') 1x,
  81     url('chrome://resources/images/2x/apps/blue_button_hover.png')
  82         2x) 5 fill / 5px / 2px repeat;
  83 }
  84
  85 button.blue-button:active {
  86   border-image: -webkit-image-set(
  87     url('chrome://resources/images/apps/blue_button_pressed.png') 1x,
  88     url('chrome://resources/images/2x/apps/blue_button_pressed.png')
  89         2x) 5 fill / 5px / 2px repeat;
  90 }
  91
  92 button.blue-button:focus {
  93   border-image: -webkit-image-set(
  94     url('chrome://resources/images/apps/blue_button_focused.png') 1x,
  95     url('chrome://resources/images/2x/apps/blue_button_focused.png')
  96         2x) 5 fill / 5px / 2px repeat;
  97 }
  98
  99 button.blue-button:focus:hover {
 100   border-image: -webkit-image-set(
 101     url('chrome://resources/images/apps/blue_button_focused_hover.png') 1x,
 102     url('chrome://resources/images/2x/apps/blue_button_focused_hover.png')
 103         2x) 5 fill / 5px / 2px repeat;
 104 }
 105
 106 button.blue-button:focus:active {
 107   border-image: -webkit-image-set(
 108     url('chrome://resources/images/apps/blue_button_focused_pressed.png') 1x,
 109     url('chrome://resources/images/2x/apps/blue_button_focused_pressed.png')
 110         2x) 5 fill / 5px / 2px repeat;
 111 }
 112
 113 button.blue-button[disabled] {
 114   border-image: -webkit-image-set(
 115     url('chrome://resources/images/apps/blue_button_inactive.png') 1x,
 116     url('chrome://resources/images/2x/apps/blue_button_inactive.png')
 117         2x) 5 fill / 5px / 2px repeat;
 118 }
 119
 120 input[type='checkbox'] {
 121   -webkit-appearance: none;
 122   border: none;
 123   outline: none;
 124 }
 125
 126 input[type='checkbox']::after {
 127   content: '';
 128   display: block;
 129   height: 16px;
 130   left: -2px;
 131   top: -2px;
 132   width: 16px;
 133 }
 134
 135 input[type='checkbox']:not(:checked)::after {
 136   background-image: -webkit-image-set(
 137     url('chrome://resources/images/apps/checkbox.png') 1x,
 138     url('chrome://resources/images/2x/apps/checkbox.png') 2x);
 139 }
 140
 141 input[type='checkbox']:focus:not(:checked)::after {
 142   background-image: -webkit-image-set(
 143     url('chrome://resources/images/apps/checkbox_focused.png') 1x,
 144     url('chrome://resources/images/2x/apps/checkbox_focused.png') 2x);
 145 }
 146
 147 input[type='checkbox']:disabled:not(:checked)::after {
 148   background-image: -webkit-image-set(
 149     url('chrome://resources/images/apps/checkbox_inactive.png') 1x,
 150     url('chrome://resources/images/2x/apps/checkbox_inactive.png') 2x);
 151 }
 152
 153 input[type='checkbox']:checked::after {
 154   background-image: -webkit-image-set(
 155     url('chrome://resources/images/apps/checkbox_checked.png') 1x,
 156     url('chrome://resources/images/2x/apps/checkbox_checked.png') 2x);
 157 }
 158
 159 input[type='checkbox']:focus:checked::after {
 160   background-image: -webkit-image-set(
 161     url('chrome://resources/images/apps/checkbox_focused_checked.png') 1x,
 162     url('chrome://resources/images/2x/apps/checkbox_focused_checked.png') 2x);
 163 }
 164
 165 input[type='checkbox']:disabled:checked::after {
 166   background-image: -webkit-image-set(
 167     url('chrome://resources/images/apps/checkbox_checked_inactive.png') 1x,
 168     url('chrome://resources/images/2x/apps/checkbox_checked_inactive.png') 2x);
 169 }