| OLD | NEW |
| (Empty) |
| 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 /* Special attribute to hide elements. */ | |
| 6 [hidden] { | |
| 7 display: none !important; | |
| 8 } | |
| 9 | |
| 10 /* This file contains "borrowed" copy of standard styles. To simplify merging, | |
| 11 * when altering, please preserve original property value by adding comments. */ | |
| 12 input.common[type='checkbox'], | |
| 13 input.common[type='radio'] { | |
| 14 -webkit-appearance: none; | |
| 15 border: 1px solid #555; | |
| 16 border-radius: 1px; | |
| 17 box-sizing: border-box; | |
| 18 cursor: default; | |
| 19 height: 13px; | |
| 20 margin: 0; | |
| 21 opacity: 0.4; | |
| 22 width: 13px; | |
| 23 } | |
| 24 | |
| 25 input.common[type='checkbox']:hover, | |
| 26 input.common[type='checkbox']:checked, | |
| 27 input.common[type='radio']:hover, | |
| 28 input.common[type='radio']:checked { | |
| 29 opacity: 1; | |
| 30 } | |
| 31 | |
| 32 input.common[type='checkbox'] { | |
| 33 position: relative; | |
| 34 } | |
| 35 | |
| 36 input.common[type='checkbox']:checked::after { | |
| 37 background-image: -webkit-image-set( | |
| 38 url('../images/common/check_no_box.png') 1x, | |
| 39 url('../images/common/2x/check_no_box.png') 2x); | |
| 40 background-position: -3px -4px; | |
| 41 background-repeat: no-repeat; | |
| 42 } | |
| 43 | |
| 44 input.common[type='checkbox'].white { | |
| 45 border: none; | |
| 46 } | |
| 47 | |
| 48 input.common[type='checkbox'].white:not(:checked)::after { | |
| 49 background-image: -webkit-image-set( | |
| 50 url('../images/common/checkbox_white_unchecked.png') 1x, | |
| 51 url('../images/common/2x/checkbox_white_unchecked.png') 2x); | |
| 52 background-position: -1px 0; | |
| 53 } | |
| 54 | |
| 55 input.common[type='checkbox'].white:checked::after { | |
| 56 background-image: -webkit-image-set( | |
| 57 url('../images/common/checkbox_white_checked.png') 1x, | |
| 58 url('../images/common/2x/checkbox_white_checked.png') 2x); | |
| 59 background-position: -1px 0; | |
| 60 } | |
| 61 | |
| 62 input.common[type='checkbox']::after { | |
| 63 content: ''; | |
| 64 display: -webkit-box; | |
| 65 height: 15px; | |
| 66 left: -2px; | |
| 67 position: absolute; | |
| 68 top: -2px; | |
| 69 width: 17px; | |
| 70 } | |
| 71 | |
| 72 .bubble { | |
| 73 background: #FFF; | |
| 74 border-radius: 2px; | |
| 75 cursor: default; | |
| 76 outline: 1px solid rgba(0, 0, 0, 0.2); | |
| 77 padding: 16px; | |
| 78 } | |
| 79 | |
| 80 .bubble .pointer { | |
| 81 background: -webkit-image-set( | |
| 82 url('../images/common/bubble_point_white.png') 1x, | |
| 83 url('../images/common/2x/bubble_point_white.png') 2x); | |
| 84 display: block; | |
| 85 height: 11px; | |
| 86 left: 24px; | |
| 87 margin: 0 0 0 -5px; | |
| 88 outline: none; | |
| 89 position: absolute; | |
| 90 width: 17px; | |
| 91 } | |
| 92 | |
| 93 .bubble .pointer:not(.bottom) { | |
| 94 top: -11px; | |
| 95 } | |
| 96 | |
| 97 .bubble .pointer.bottom { | |
| 98 -webkit-transform: rotate(180deg); | |
| 99 bottom: -11px; | |
| 100 } | |
| 101 | |
| 102 .bubble .close-x { | |
| 103 background: -webkit-image-set( | |
| 104 url('../images/common/close_x_gray.png') 1x, | |
| 105 url('../images/common/2x/close_x_gray.png') 2x); | |
| 106 height: 21px; | |
| 107 opacity: 0.3; | |
| 108 position: absolute; | |
| 109 right: 3px; | |
| 110 top: 3px; | |
| 111 width: 21px; | |
| 112 } | |
| 113 | |
| 114 .bubble .close-x:hover { | |
| 115 opacity: 0.7; | |
| 116 } | |
| 117 | |
| 118 .buttonbar { | |
| 119 display: -webkit-box; | |
| 120 height: 31px; | |
| 121 } | |
| 122 | |
| 123 .buttonbar button:active img { | |
| 124 opacity: 1.0; | |
| 125 } | |
| 126 | |
| 127 .buttonbar button:hover img { | |
| 128 opacity: 0.72; | |
| 129 } | |
| 130 | |
| 131 .buttonbar button[disabled] img { | |
| 132 opacity: 0.9; | |
| 133 } | |
| 134 | |
| 135 .buttonbar button img { | |
| 136 display: inline-block; | |
| 137 margin: -3px 0 0; | |
| 138 opacity: 0.55; | |
| 139 vertical-align: middle; | |
| 140 } | |
| 141 | |
| 142 .buttonbar button.menubutton span.disclosureindicator { | |
| 143 -webkit-transform: rotate(90deg); | |
| 144 float: right; | |
| 145 margin-left: 7px; | |
| 146 margin-top: 10px; | |
| 147 opacity: .8; | |
| 148 transition: none; | |
| 149 } | |
| 150 | |
| 151 span.disclosureindicator { | |
| 152 background-image: -webkit-image-set( | |
| 153 url('../images/common/disclosure_arrow_dk_grey.png') 1x, | |
| 154 url('../images/common/2x/disclosure_arrow_dk_grey.png') 2x); | |
| 155 background-position: center; | |
| 156 background-repeat: no-repeat; | |
| 157 display: inline-block; | |
| 158 height: 7px; | |
| 159 width: 5px; | |
| 160 } | |
| 161 | |
| 162 /* "chrome-menu" class overrides some standard menu.css styles, to make custom | |
| 163 menus in FileBrowser look like native ChromeOS menus. */ | |
| 164 | |
| 165 menu.chrome-menu { | |
| 166 background-color: rgb(250, 250, 250); | |
| 167 border-radius: 3px; | |
| 168 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5); | |
| 169 color: rgb(34, 34, 34); | |
| 170 outline: none; | |
| 171 overflow: hidden; | |
| 172 padding: 5px 0; | |
| 173 transition: opacity 200ms ease-in; | |
| 174 z-index: 600; /* Must be below the overlay pane (1000). */ | |
| 175 } | |
| 176 | |
| 177 menu.chrome-menu[hidden] { | |
| 178 display: block !important; /* Overrides default [hidden] for animation. */ | |
| 179 opacity: 0; | |
| 180 pointer-events: none; | |
| 181 visibility: hidden; | |
| 182 } | |
| 183 | |
| 184 menu.chrome-menu.hide-delayed[hidden] { | |
| 185 transition-delay: 120ms; | |
| 186 transition-property: opacity, visibility; | |
| 187 } | |
| 188 | |
| 189 menu.chrome-menu > :not(hr) { | |
| 190 background-position: right 10px center; | |
| 191 background-repeat: no-repeat; | |
| 192 line-height: 30px; | |
| 193 padding-left: 20px; | |
| 194 padding-right: 20px; | |
| 195 } | |
| 196 | |
| 197 menu.chrome-menu > .menuitem-button { | |
| 198 background-position: center; | |
| 199 background-repeat: no-repeat; | |
| 200 border: 1px solid rgb(235, 235, 235); | |
| 201 height: 42px; | |
| 202 margin: -36px -1px -1px 0; | |
| 203 min-width: 60px; | |
| 204 padding: 0; | |
| 205 position: absolute; | |
| 206 width: 60px; | |
| 207 } | |
| 208 | |
| 209 menu.chrome-menu > .menuitem-button[checked] { | |
| 210 background-color: rgb(235, 235, 235); | |
| 211 } | |
| 212 | |
| 213 menu.chrome-menu > .menuitem-button.left { | |
| 214 right: 59px; | |
| 215 } | |
| 216 | |
| 217 html[dir='rtl'] menu.chrome-menu > .menuitem-button.left { | |
| 218 left: 59px; | |
| 219 right: auto; | |
| 220 } | |
| 221 | |
| 222 menu.chrome-menu > .menuitem-button.right { | |
| 223 right: 0; | |
| 224 } | |
| 225 | |
| 226 html[dir='rtl'] menu.chrome-menu > .menuitem-button.right { | |
| 227 left: 0; | |
| 228 right: auto; | |
| 229 } | |
| 230 | |
| 231 menu.chrome-menu > menuitem[disabled] { | |
| 232 color: rgb(153, 153, 153); | |
| 233 } | |
| 234 | |
| 235 menu.chrome-menu > menuitem:not([disabled])[selected], | |
| 236 menu.chrome-menu > menuitem:not([disabled])[selected]:active { | |
| 237 background-color: rgb(66, 129, 244); | |
| 238 color: white; | |
| 239 } | |
| 240 | |
| 241 menu.chrome-menu > hr { | |
| 242 background: rgb(235, 235, 235); | |
| 243 height: 1px; | |
| 244 margin: 5px 0; | |
| 245 } | |
| 246 | |
| 247 menu.chrome-menu > menuitem[checked] { | |
| 248 background-image: -webkit-image-set( | |
| 249 url('../images/common/check_no_box.png') 1x, | |
| 250 url('../images/common/2x/check_no_box.png') 2x); | |
| 251 } | |
| 252 | |
| 253 menu.chrome-menu > [checked]::before { | |
| 254 display: none; | |
| 255 } | |
| 256 | |
| 257 menu[showShortcuts] > menuitem[shortcutText][selected]:not([disabled])::after { | |
| 258 color: white; | |
| 259 } | |
| 260 | |
| 261 /** | |
| 262 * Ok/Cancel style buttons | |
| 263 * Height: 31px (content:21px + border:5px * 2) | |
| 264 **/ | |
| 265 button, | |
| 266 input[type='button'], | |
| 267 input[type='submit'], | |
| 268 select { | |
| 269 background-color: rgb(250, 250, 250); | |
| 270 background-image: none; | |
| 271 background-position: center; | |
| 272 background-repeat: no-repeat; | |
| 273 border: 5px solid transparent; | |
| 274 border-image: -webkit-image-set( | |
| 275 url('chrome://resources/images/apps/button.png') 1x, | |
| 276 url('chrome://resources/images/2x/apps/button.png') | |
| 277 2x) 5 / 5px / 2px repeat; | |
| 278 box-sizing: content-box; | |
| 279 color: rgb(34, 34, 34); | |
| 280 cursor: default; | |
| 281 height: 21px; | |
| 282 line-height: 21px; | |
| 283 margin: 0; | |
| 284 min-height: 21px; | |
| 285 min-width: 55px; | |
| 286 padding: 0 10px; | |
| 287 position: relative; | |
| 288 text-align: center; | |
| 289 z-index: 1; | |
| 290 } | |
| 291 | |
| 292 .buttonbar button { | |
| 293 -webkit-margin-start: 10px; | |
| 294 } | |
| 295 | |
| 296 button:hover, | |
| 297 input[type='button']:hover, | |
| 298 input[type='submit']:hover, | |
| 299 select:hover { | |
| 300 border-image: -webkit-image-set( | |
| 301 url('chrome://resources/images/apps/button_hover.png') 1x, | |
| 302 url('chrome://resources/images/2x/apps/button_hover.png') | |
| 303 2x) 5 fill / 5px / 2px repeat; | |
| 304 color: #222; | |
| 305 } | |
| 306 | |
| 307 button:active, | |
| 308 input[type='button']:active, | |
| 309 input[type='submit']:active { | |
| 310 border-image: -webkit-image-set( | |
| 311 url('chrome://resources/images/apps/button_pressed.png') 1x, | |
| 312 url('chrome://resources/images/2x/apps/button_pressed.png') | |
| 313 2x) 5 fill / 5px / 2px repeat; | |
| 314 color: #333; | |
| 315 } | |
| 316 | |
| 317 button[disabled], | |
| 318 input[type='button'][disabled], | |
| 319 input[type='submit'][disabled], | |
| 320 button[disabled]:hover, | |
| 321 input[type='button'][disabled]:hover, | |
| 322 input[type='submit'][disabled]:hover { | |
| 323 background-color: rgb(250, 250, 250); | |
| 324 background-image: none; | |
| 325 border-image: -webkit-image-set( | |
| 326 url('chrome://resources/images/apps/button.png') 1x, | |
| 327 url('chrome://resources/images/2x/apps/button.png') | |
| 328 2x) 5 fill / 5px / 2px repeat; | |
| 329 color: rgb(150, 150, 150); | |
| 330 } | |
| 331 | |
| 332 select:not([size]):hover, | |
| 333 select[size='0']:hover, | |
| 334 select[size='1']:hover { | |
| 335 /* Original value is '5 fill', which hides the dropdown triangle. */ | |
| 336 border-image-slice: 5; | |
| 337 } | |
| 338 | |
| 339 /* Gray progress bar. */ | |
| 340 .progress-bar { | |
| 341 background-color: #e6e6e6; | |
| 342 border-radius: 3px; | |
| 343 height: 6px; | |
| 344 } | |
| 345 | |
| 346 .progress-track { | |
| 347 background-color: #888; | |
| 348 border-radius: 3px; | |
| 349 height: 6px; | |
| 350 min-width: 6px; | |
| 351 } | |
| 352 | |
| 353 .progress-track.smoothed { | |
| 354 transition: width 1s linear; | |
| 355 } | |
| 356 | |
| 357 /* Icons for the action choice dialog and choosing the default app. */ | |
| 358 div.import-photos-to-drive-icon { | |
| 359 background-image: -webkit-image-set( | |
| 360 url('../images/media/drive.png') 1x, | |
| 361 url('../images/media/2x/drive.png') 2x); | |
| 362 } | |
| 363 | |
| 364 div.view-files-icon { | |
| 365 background-image: -webkit-image-set( | |
| 366 url('../../common/images/icon32.png') 1x, | |
| 367 url('../../common/images/icon64.png') 2x); | |
| 368 } | |
| 369 | |
| 370 div.watch-single-video-icon { | |
| 371 background-image: -webkit-image-set( | |
| 372 url('../images/media/watch.png') 1x, | |
| 373 url('../images/media/2x/watch.png') 2x); | |
| 374 } | |
| 375 | |
| 376 /* Pop-up dialogs. */ | |
| 377 | |
| 378 .cr-dialog-container { | |
| 379 -webkit-box-align: center; | |
| 380 -webkit-box-pack: center; | |
| 381 -webkit-user-select: none; | |
| 382 display: -webkit-box; | |
| 383 height: 100%; | |
| 384 left: 0; | |
| 385 overflow: hidden; | |
| 386 position: absolute; | |
| 387 top: 0; | |
| 388 transition: opacity 250ms linear; | |
| 389 width: 100%; | |
| 390 z-index: 9999; | |
| 391 } | |
| 392 | |
| 393 .cr-dialog-frame { | |
| 394 -webkit-box-orient: vertical; | |
| 395 background-color: rgb(250, 250, 250); | |
| 396 border: 1px solid rgb(255, 255, 255); | |
| 397 border-radius: 2px; | |
| 398 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5); | |
| 399 color: rgb(34, 34, 34); | |
| 400 cursor: default; | |
| 401 display: -webkit-box; | |
| 402 padding: 20px; | |
| 403 position: relative; | |
| 404 width: 460px; | |
| 405 } | |
| 406 | |
| 407 .cr-dialog-frame:focus { | |
| 408 outline: none; | |
| 409 } | |
| 410 | |
| 411 @-webkit-keyframes pulse { | |
| 412 0% { | |
| 413 -webkit-transform: scale(1); | |
| 414 } | |
| 415 40% { | |
| 416 -webkit-transform: scale(1.02); | |
| 417 } | |
| 418 60% { | |
| 419 -webkit-transform: scale(1.02); | |
| 420 } | |
| 421 100% { | |
| 422 -webkit-transform: scale(1); | |
| 423 } | |
| 424 } | |
| 425 | |
| 426 .cr-dialog-frame.pulse { | |
| 427 -webkit-animation-duration: 180ms; | |
| 428 -webkit-animation-iteration-count: 1; | |
| 429 -webkit-animation-name: pulse; | |
| 430 -webkit-animation-timing-function: ease-in-out; | |
| 431 } | |
| 432 | |
| 433 .shown > .cr-dialog-frame { | |
| 434 -webkit-transform: perspective(500px) scale(1) | |
| 435 translateY(0) rotateX(0); | |
| 436 opacity: 1; | |
| 437 } | |
| 438 | |
| 439 .cr-dialog-frame { | |
| 440 -webkit-transform: perspective(500px) scale(0.99) | |
| 441 translateY(-20px) rotateX(5deg); | |
| 442 opacity: 0; | |
| 443 transition: all 180ms; | |
| 444 transition-duration: 250ms; | |
| 445 } | |
| 446 | |
| 447 .cr-dialog-shield { | |
| 448 background-color: white; | |
| 449 bottom: 0; | |
| 450 display: block; | |
| 451 left: 0; | |
| 452 opacity: 0; | |
| 453 pointer-events: none; | |
| 454 position: absolute; | |
| 455 right: 0; | |
| 456 top: 0; | |
| 457 transition: opacity 500ms; | |
| 458 } | |
| 459 | |
| 460 .shown > .cr-dialog-shield { | |
| 461 opacity: 0.5; | |
| 462 transition: opacity 500ms; | |
| 463 } | |
| 464 | |
| 465 .cr-dialog-title { | |
| 466 -webkit-margin-after: 10px; | |
| 467 -webkit-margin-end: 20px; | |
| 468 display: block; | |
| 469 font-size: 125%; | |
| 470 white-space: nowrap; | |
| 471 word-wrap: normal; | |
| 472 } | |
| 473 | |
| 474 .cr-dialog-text { | |
| 475 margin: 13px 0; | |
| 476 } | |
| 477 | |
| 478 .cr-dialog-text, | |
| 479 .cr-dialog-title { | |
| 480 overflow: hidden; | |
| 481 text-overflow: ellipsis; | |
| 482 } | |
| 483 | |
| 484 .cr-dialog-frame input { | |
| 485 box-sizing: border-box; | |
| 486 width: 100%; | |
| 487 } | |
| 488 | |
| 489 .cr-dialog-buttons { | |
| 490 -webkit-box-orient: horizontal; | |
| 491 -webkit-box-pack: end; | |
| 492 display: -webkit-box; | |
| 493 padding-top: 10px; | |
| 494 } | |
| 495 | |
| 496 .cr-dialog-buttons button { | |
| 497 -webkit-margin-start: 8px; | |
| 498 line-height: 1.8; | |
| 499 } | |
| 500 | |
| 501 .cr-dialog-close { | |
| 502 background: url('chrome://theme/IDR_CLOSE_DIALOG') center no-repeat; | |
| 503 display: inline-block; | |
| 504 height: 44px; | |
| 505 opacity: 0.7; | |
| 506 position: absolute; | |
| 507 right: 0; | |
| 508 top: 0; | |
| 509 width: 44px; | |
| 510 } | |
| 511 | |
| 512 .cr-dialog-close:hover { | |
| 513 background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H'); | |
| 514 } | |
| 515 | |
| 516 .cr-dialog-close:active { | |
| 517 background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P'); | |
| 518 } | |
| OLD | NEW |