Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(240)

Side by Side Diff: ui/webui/resources/css/overlay.css

Issue 1549903002: Replace -webkit-transform with transform in Chrome UI (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase CL Created 4 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « ui/webui/resources/css/dialogs.css ('k') | ui/webui/resources/css/trash.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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 /* TODO(dbeam): remove perspective when http://crbug.com/374970 is fixed. */ 10 /* TODO(dbeam): remove perspective when http://crbug.com/374970 is fixed. */
11 -webkit-perspective: 1px; 11 -webkit-perspective: 1px;
12 -webkit-transition: 200ms opacity; 12 -webkit-transition: 200ms opacity;
13 background-color: rgba(255, 255, 255, 0.75); 13 background-color: rgba(255, 255, 255, 0.75);
14 bottom: 0; 14 bottom: 0;
15 display: -webkit-box; 15 display: -webkit-box;
16 left: 0; 16 left: 0;
17 overflow: auto; 17 overflow: auto;
18 padding: 20px; 18 padding: 20px;
19 position: fixed; 19 position: fixed;
20 right: 0; 20 right: 0;
21 top: 0; 21 top: 0;
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 -webkit-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 -webkit-transform; 35 -webkit-transition: 200ms transform;
36 background: white; 36 background: white;
37 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15); 37 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
38 color: #333; 38 color: #333;
39 display: -webkit-box; 39 display: -webkit-box;
40 min-width: 400px; 40 min-width: 400px;
41 padding: 0; 41 padding: 0;
42 position: relative; 42 position: relative;
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 -webkit-transition-duration: 0ms !important;
50 } 50 }
51 51
52 /* keyframes used to pulse the overlay */ 52 /* keyframes used to pulse the overlay */
53 @-webkit-keyframes pulse { 53 @-webkit-keyframes pulse {
54 0% { 54 0% {
55 -webkit-transform: scale(1); 55 transform: scale(1);
56 } 56 }
57 40% { 57 40% {
58 -webkit-transform: scale(1.02); 58 transform: scale(1.02);
59 } 59 }
60 60% { 60 60% {
61 -webkit-transform: scale(1.02); 61 transform: scale(1.02);
62 } 62 }
63 100% { 63 100% {
64 -webkit-transform: scale(1); 64 transform: scale(1);
65 } 65 }
66 } 66 }
67 67
68 .overlay .page.pulse { 68 .overlay .page.pulse {
69 -webkit-animation-duration: 180ms; 69 -webkit-animation-duration: 180ms;
70 -webkit-animation-iteration-count: 1; 70 -webkit-animation-iteration-count: 1;
71 -webkit-animation-name: pulse; 71 -webkit-animation-name: pulse;
72 -webkit-animation-timing-function: ease-in-out; 72 -webkit-animation-timing-function: ease-in-out;
73 } 73 }
74 74
(...skipping 121 matching lines...) Expand 10 before | Expand all | Expand 10 after
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 }
OLDNEW
« no previous file with comments | « ui/webui/resources/css/dialogs.css ('k') | ui/webui/resources/css/trash.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698