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

Side by Side Diff: chrome/browser/resources/shared/css/overlay.css

Issue 9352010: Settings: Shake the overlay when the user clicks on the overlay shield. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Created 8 years, 10 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 | Annotate | Revision Log
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 -webkit-transition: 200ms opacity; 10 -webkit-transition: 200ms opacity;
11 background-color: rgba(255, 255, 255, 0.75); 11 background-color: rgba(255, 255, 255, 0.75);
12 bottom: 0; 12 bottom: 0;
13 display: -webkit-box; 13 display: -webkit-box;
14 left: 0; 14 left: 0;
15 overflow: auto; 15 overflow: auto;
16 padding: 20px; 16 padding: 20px;
17 padding-bottom: 130px; 17 padding-bottom: 130px;
18 position: fixed; 18 position: fixed;
19 right: 0; 19 right: 0;
20 top: 0; 20 top: 0;
21 } 21 }
22 22
23 /* The foregrounded dialog. */ 23 /* The foreground dialog. */
csilv 2012/02/07 18:57:33 lol
24 .overlay .page { 24 .overlay .page {
25 background: white; 25 background: white;
26 box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3), 0 3px 57px rgba(0, 0, 0, 0.3); 26 box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3), 0 3px 57px rgba(0, 0, 0, 0.3);
27 min-width: 400px; 27 min-width: 400px;
28 padding: 0; 28 padding: 0;
29 position: relative; 29 position: relative;
30 } 30 }
31 31
32 /* keyframes used to shake the overlay */
33 @-webkit-keyframes shake {
34 0% {
35 -webkit-transform: translateX(-5px) rotateZ(-0.5deg) translateY(-2px);
36 }
37 50% {
38 -webkit-transform: translateX(0px) rotateZ(0deg) translateY(0px);
39 }
40 100% {
41 -webkit-transform: translateX(5px) rotateZ(0.5deg) translateY(-2px);
42 }
43 }
44
45 .overlay .page.shake {
46 -webkit-animation-direction: alternate;
47 -webkit-animation-duration: 60ms;
48 -webkit-animation-iteration-count: 7;
49 -webkit-animation-name: shake;
50 -webkit-animation-timing-function: ease-in-out;
51 }
52
32 .overlay .page h1 { 53 .overlay .page h1 {
33 -webkit-padding-end: 24px; 54 -webkit-padding-end: 24px;
34 -webkit-user-select: none; 55 -webkit-user-select: none;
35 background: -webkit-linear-gradient(white, #F8F8F8); 56 background: -webkit-linear-gradient(white, #F8F8F8);
36 border-bottom: 1px solid rgba(188, 193, 208, .5); 57 border-bottom: 1px solid rgba(188, 193, 208, .5);
37 color: #333; 58 color: #333;
38 font-size: 105%; 59 font-size: 105%;
39 font-weight: bold; 60 font-weight: bold;
40 margin: 0; 61 margin: 0;
41 padding: 10px 15px 8px; 62 padding: 10px 15px 8px;
(...skipping 23 matching lines...) Expand all
65 86
66 .overlay .page .button-strip { 87 .overlay .page .button-strip {
67 -webkit-box-orient: horizontal; 88 -webkit-box-orient: horizontal;
68 display: -webkit-box; 89 display: -webkit-box;
69 } 90 }
70 91
71 .overlay .page .button-strip > button { 92 .overlay .page .button-strip > button {
72 -webkit-margin-start: 10px; 93 -webkit-margin-start: 10px;
73 display: block; 94 display: block;
74 } 95 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698