| OLD | NEW |
| 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 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 | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
| 4 | 4 |
| 5 /* The shield that overlays the background. */ | 5 /* The shield that overlays the background. */ |
| 6 .overlay { | 6 .overlay { |
| 7 -webkit-box-align: center; | 7 -webkit-box-align: center; |
| 8 -webkit-box-orient: vertical; | 8 -webkit-box-orient: vertical; |
| 9 -webkit-box-pack: center; | 9 -webkit-box-pack: center; |
| 10 -webkit-transition: 200ms opacity; | |
| 11 background-color: rgba(255, 255, 255, 0.75); | 10 background-color: rgba(255, 255, 255, 0.75); |
| 12 bottom: 0; | 11 bottom: 0; |
| 13 display: -webkit-box; | 12 display: -webkit-box; |
| 14 left: 0; | 13 left: 0; |
| 15 overflow: auto; | 14 overflow: auto; |
| 16 padding: 20px; | 15 padding: 20px; |
| 17 /* TODO(dbeam): remove perspective when http://crbug.com/374970 is fixed. */ | 16 /* TODO(dbeam): remove perspective when http://crbug.com/374970 is fixed. */ |
| 18 perspective: 1px; | 17 perspective: 1px; |
| 19 position: fixed; | 18 position: fixed; |
| 20 right: 0; | 19 right: 0; |
| 21 top: 0; | 20 top: 0; |
| 21 transition: 200ms opacity; |
| 22 } | 22 } |
| 23 | 23 |
| 24 /* Used to slide in the overlay. */ | 24 /* Used to slide in the overlay. */ |
| 25 .overlay.transparent .page { | 25 .overlay.transparent .page { |
| 26 /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated | 26 /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated |
| 27 * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */ | 27 * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */ |
| 28 transform: scale(0.99) translateY(-20px); | 28 transform: scale(0.99) translateY(-20px); |
| 29 } | 29 } |
| 30 | 30 |
| 31 /* The foreground dialog. */ | 31 /* The foreground dialog. */ |
| 32 .overlay .page { | 32 .overlay .page { |
| 33 -webkit-border-radius: 3px; | 33 -webkit-border-radius: 3px; |
| 34 -webkit-box-orient: vertical; | 34 -webkit-box-orient: vertical; |
| 35 -webkit-transition: 200ms transform; | |
| 36 background: white; | 35 background: white; |
| 37 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15); | 36 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15); |
| 38 color: #333; | 37 color: #333; |
| 39 display: -webkit-box; | 38 display: -webkit-box; |
| 40 min-width: 400px; | 39 min-width: 400px; |
| 41 padding: 0; | 40 padding: 0; |
| 42 position: relative; | 41 position: relative; |
| 42 transition: 200ms transform; |
| 43 z-index: 0; | 43 z-index: 0; |
| 44 } | 44 } |
| 45 | 45 |
| 46 /* If the options page is loading don't do the transition. */ | 46 /* If the options page is loading don't do the transition. */ |
| 47 .loading .overlay, | 47 .loading .overlay, |
| 48 .loading .overlay .page { | 48 .loading .overlay .page { |
| 49 -webkit-transition-duration: 0ms !important; | 49 transition-duration: 0ms !important; |
| 50 } | 50 } |
| 51 | 51 |
| 52 /* keyframes used to pulse the overlay */ | 52 /* keyframes used to pulse the overlay */ |
| 53 @keyframes pulse { | 53 @keyframes pulse { |
| 54 0% { | 54 0% { |
| 55 transform: scale(1); | 55 transform: scale(1); |
| 56 } | 56 } |
| 57 40% { | 57 40% { |
| 58 transform: scale(1.02); | 58 transform: scale(1.02); |
| 59 } | 59 } |
| (...skipping 136 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 196 #overlay-container-1 { | 196 #overlay-container-1 { |
| 197 z-index: 11; | 197 z-index: 11; |
| 198 } | 198 } |
| 199 #overlay-container-2 { | 199 #overlay-container-2 { |
| 200 z-index: 12; | 200 z-index: 12; |
| 201 } | 201 } |
| 202 | 202 |
| 203 .transparent { | 203 .transparent { |
| 204 opacity: 0; | 204 opacity: 0; |
| 205 } | 205 } |
| OLD | NEW |