1 /* 2 * Copyright 2014 The Chromium Authors. All rights reserved. 3 * Use of this source code is governed by a BSD-style license that can be 4 * found in the LICENSE file. 5 * 6 * This stylesheet is used to apply Chrome styles to extension pages that opt in 7 * to using them. These styles have been copied from 8 * ui/webui/resources/css/chrome_shared.css and 9 * ui/webui/resources/css/widgets.css. This is to prevent WebUI changes from 10 * breaking extensions, however please keep the files in sync if possible. 11 */ 12 13 /* Prevent CSS from overriding the hidden property. */ 14 [hidden] { 15 display: none !important; 16 } 17 18 html.loading * { 19 -webkit-transition-delay: 0 !important; 20 -webkit-transition-duration: 0 !important; 21 } 22 23 body { 24 cursor: default; 25 margin: 0; 26 } 27 28 p { 29 line-height: 1.8em; 30 } 31 32 h1, 33 h2, 34 h3 { 35 -webkit-user-select: none; 36 font-weight: normal; 37 /* Makes the vertical size of the text the same for all fonts. */ 38 line-height: 1; 39 } 40 41 h1 { 42 font-size: 1.5em; 43 } 44 45 h2 { 46 font-size: 1.3em; 47 margin-bottom: 0.4em; 48 } 49 50 h3 { 51 color: black; 52 font-size: 1.2em; 53 margin-bottom: 0.8em; 54 } 55 56 a { 57 color: rgb(17, 85, 204); 58 text-decoration: underline; 59 } 60 61 a:active { 62 color: rgb(5, 37, 119); 63 } 64 65 /* Elements that need to be LTR even in an RTL context, but should align 66 * right. (Namely, URLs, search engine names, etc.) 67 */ 68 html[dir='rtl'] .weakrtl { 69 direction: ltr; 70 text-align: right; 71 } 72 73 /* Input fields in search engine table need to be weak-rtl. Since those input 74 * fields are generated for all cr.ListItem elements (and we only want weakrtl 75 * on some), the class needs to be on the enclosing div. 76 */ 77 html[dir='rtl'] div.weakrtl input { 78 direction: ltr; 79 text-align: right; 80 } 81 82 html[dir='rtl'] .favicon-cell.weakrtl { 83 -webkit-padding-end: 22px; 84 -webkit-padding-start: 0; 85 } 86 87 /* weakrtl for selection drop downs needs to account for the fact that 88 * Webkit does not honor the text-align attribute for the select element. 89 * (See Webkit bug #40216) 90 */ 91 html[dir='rtl'] select.weakrtl { 92 direction: rtl; 93 } 94 95 html[dir='rtl'] select.weakrtl option { 96 direction: ltr; 97 } 98 99 /* WebKit does not honor alignment for text specified via placeholder attribute. 100 * This CSS is a workaround. Please remove once WebKit bug is fixed. 101 * https://bugs.webkit.org/show_bug.cgi?id=63367 102 */ 103 html[dir='rtl'] input.weakrtl::-webkit-input-placeholder, 104 html[dir='rtl'] .weakrtl input::-webkit-input-placeholder { 105 direction: rtl; 106 } 107 108 /* Default state **************************************************************/ 109 110 :-webkit-any(button, 111 input[type='button'], 112 input[type='submit']):not(.custom-appearance):not(.link-button), 113 select, 114 input[type='checkbox'], 115 input[type='radio'] { 116 -webkit-appearance: none; 117 -webkit-user-select: none; 118 background-image: linear-gradient(#ededed, #ededed 38%, #dedede); 119 border: 1px solid rgba(0, 0, 0, 0.25); 120 border-radius: 2px; 121 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 122 inset 0 1px 2px rgba(255, 255, 255, 0.75); 123 color: #444; 124 font: inherit; 125 margin: 0 1px 0 0; 126 outline: none; 127 text-shadow: 0 1px 0 rgb(240, 240, 240); 128 } 129 130 :-webkit-any(button, 131 input[type='button'], 132 input[type='submit']):not(.custom-appearance):not(.link-button), 133 select { 134 min-height: 2em; 135 min-width: 4em; 136 <if expr="is_win"> 137 /* The following platform-specific rule is necessary to get adjacent 138 * buttons, text inputs, and so forth to align on their borders while also 139 * aligning on the text's baselines. */ 140 padding-bottom: 1px; 141 </if> 142 } 143 144 :-webkit-any(button, 145 input[type='button'], 146 input[type='submit']):not(.custom-appearance):not(.link-button) { 147 -webkit-padding-end: 10px; 148 -webkit-padding-start: 10px; 149 } 150 151 select { 152 -webkit-appearance: none; 153 -webkit-padding-end: 20px; 154 -webkit-padding-start: 6px; 155 /* OVERRIDE */ 156 background-image: url("../../../ui/webui/resources/images/select.png"), 157 linear-gradient(#ededed, #ededed 38%, #dedede); 158 background-position: right center; 159 background-repeat: no-repeat; 160 } 161 162 html[dir='rtl'] select { 163 background-position: center left; 164 } 165 166 input[type='checkbox'] { 167 bottom: 2px; 168 height: 13px; 169 position: relative; 170 vertical-align: middle; 171 width: 13px; 172 } 173 174 input[type='radio'] { 175 /* OVERRIDE */ 176 border-radius: 100%; 177 bottom: 3px; 178 height: 15px; 179 position: relative; 180 vertical-align: middle; 181 width: 15px; 182 } 183 184 /* TODO(estade): add more types here? */ 185 input[type='number'], 186 input[type='password'], 187 input[type='search'], 188 input[type='text'], 189 input[type='url'], 190 input:not([type]), 191 textarea { 192 border: 1px solid #bfbfbf; 193 border-radius: 2px; 194 box-sizing: border-box; 195 color: #444; 196 font: inherit; 197 margin: 0; 198 /* Use min-height to accommodate addditional padding for touch as needed. */ 199 min-height: 2em; 200 padding: 3px; 201 outline: none; 202 <if expr="is_win or is_macosx or is_ios"> 203 /* For better alignment between adjacent buttons and inputs. */ 204 padding-bottom: 4px; 205 </if> 206 } 207 208 input[type='search'] { 209 -webkit-appearance: textfield; 210 /* NOTE: Keep a relatively high min-width for this so we don't obscure the end 211 * of the default text in relatively spacious languages (i.e. German). */ 212 min-width: 160px; 213 } 214 215 /* Remove when https://bugs.webkit.org/show_bug.cgi?id=51499 is fixed. 216 * TODO(dbeam): are there more types that would benefit from this? */ 217 input[type='search']::-webkit-textfield-decoration-container { 218 direction: inherit; 219 } 220 221 /* Checked ********************************************************************/ 222 223 input[type='checkbox']:checked::before { 224 -webkit-user-select: none; 225 background-image: url("../../../ui/webui/resources/images/check.png"); 226 background-size: 100% 100%; 227 content: ''; 228 display: block; 229 height: 100%; 230 width: 100%; 231 } 232 233 input[type='radio']:checked::before { 234 background-color: #666; 235 border-radius: 100%; 236 bottom: 3px; 237 content: ''; 238 display: block; 239 left: 3px; 240 position: absolute; 241 right: 3px; 242 top: 3px; 243 } 244 245 /* Hover **********************************************************************/ 246 247 :enabled:hover:-webkit-any( 248 select, 249 input[type='checkbox'], 250 input[type='radio'], 251 :-webkit-any( 252 button, 253 input[type='button'], 254 input[type='submit']):not(.custom-appearance):not(.link-button)) { 255 background-image: linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 256 border-color: rgba(0, 0, 0, 0.3); 257 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 258 inset 0 1px 2px rgba(255, 255, 255, 0.95); 259 color: black; 260 } 261 262 :enabled:hover:-webkit-any(select) { 263 /* OVERRIDE */ 264 background-image: url("../../../ui/webui/resources/images/select.png"), 265 linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 266 } 267 268 /* Active *********************************************************************/ 269 270 :enabled:active:-webkit-any( 271 select, 272 input[type='checkbox'], 273 input[type='radio'], 274 :-webkit-any( 275 button, 276 input[type='button'], 277 input[type='submit']):not(.custom-appearance):not(.link-button)) { 278 background-image: linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 279 box-shadow: none; 280 text-shadow: none; 281 } 282 283 :enabled:active:-webkit-any(select) { 284 /* OVERRIDE */ 285 background-image: url("../../../ui/webui/resources/images/select.png"), 286 linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 287 } 288 289 /* Disabled *******************************************************************/ 290 291 :disabled:-webkit-any( 292 button, 293 input[type='button'], 294 input[type='submit']):not(.custom-appearance):not(.link-button), 295 select:disabled { 296 background-image: linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 297 border-color: rgba(80, 80, 80, 0.2); 298 box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), 299 inset 0 1px 2px rgba(255, 255, 255, 0.75); 300 color: #aaa; 301 } 302 303 select:disabled { 304 /* OVERRIDE */ 305 background-image: url("../../../ui/webui/resources/images/disabled_select.png"), 306 linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 307 } 308 309 input:disabled:-webkit-any([type='checkbox'], 310 [type='radio']) { 311 opacity: .75; 312 } 313 314 input:disabled:-webkit-any([type='password'], 315 [type='search'], 316 [type='text'], 317 [type='url'], 318 :not([type])) { 319 color: #999; 320 } 321 322 /* Focus **********************************************************************/ 323 324 :enabled:focus:-webkit-any( 325 select, 326 input[type='checkbox'], 327 input[type='number'], 328 input[type='password'], 329 input[type='radio'], 330 input[type='search'], 331 input[type='text'], 332 input[type='url'], 333 input:not([type]), 334 :-webkit-any( 335 button, 336 input[type='button'], 337 input[type='submit']):not(.custom-appearance):not(.link-button)) { 338 /* OVERRIDE */ 339 -webkit-transition: border-color 200ms; 340 /* We use border color because it follows the border radius (unlike outline). 341 * This is particularly noticeable on mac. */ 342 border-color: rgb(77, 144, 254); 343 outline: none; 344 } 345 346 /* Link buttons ***************************************************************/ 347 348 .link-button { 349 box-shadow: none; 350 background: transparent none; 351 border: none; 352 color: rgb(17, 85, 204); 353 cursor: pointer; 354 /* Input elements have -webkit-small-control which can override the body font. 355 * Resolve this by using 'inherit'. */ 356 font: inherit; 357 margin: 0; 358 padding: 0 4px; 359 } 360 361 .link-button:hover { 362 text-decoration: underline; 363 } 364 365 .link-button:active { 366 color: rgb(5, 37, 119); 367 text-decoration: underline; 368 } 369 370 .link-button[disabled] { 371 color: #999; 372 cursor: default; 373 text-decoration: none; 374 } 375 376 /* Checkbox/radio helpers ****************************************************** 377 * 378 * .checkbox and .radio classes wrap labels. Checkboxes and radios should use 379 * these classes with the markup structure: 380 * 381 * <div class="checkbox"> 382 * <label> 383 * <input type="checkbox"></input> 384 * <span> 385 * </label> 386 * </div> 387 */ 388 389 :-webkit-any(.checkbox, .radio) label { 390 /* Don't expand horizontally: <http://crbug.com/112091>. */ 391 display: inline-flex; 392 padding-bottom: 7px; 393 padding-top: 7px; 394 } 395 396 :-webkit-any(.checkbox, .radio) label input ~ span { 397 -webkit-margin-start: 0.6em; 398 /* Make sure long spans wrap at the same horizontal position they start. */ 399 display: block; 400 } 401 402 :-webkit-any(.checkbox, .radio) label:hover { 403 color: black; 404 } 405 406 label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span { 407 color: #999; 408 } 409