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 5button.white-button, 6button.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 22button.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 29button.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 36button.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 43button.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 50button.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 57button.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 64button.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 71button.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 78button.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 85button.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 92button.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 99button.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 106button.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 113button.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 120input[type='checkbox'] { 121 -webkit-appearance: none; 122 border: none; 123 outline: none; 124} 125 126input[type='checkbox']::after { 127 content: ''; 128 display: block; 129 height: 16px; 130 left: -2px; 131 top: -2px; 132 width: 16px; 133} 134 135input[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 141input[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 147input[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 153input[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 159input[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 165input[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} 170