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

Side by Side Diff: chrome/browser/resources/sync_confirmation/sync_confirmation.css

Issue 1806353002: Enhanced Sync Confirmation modal (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase 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 | « no previous file | chrome/browser/resources/sync_confirmation/sync_confirmation.html » ('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 2015 The Chromium Authors. All rights reserved. 1 /* Copyright 2015 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 body { 5 body {
6 margin: 0; 6 margin: 0;
7 padding: 0; 7 padding: 0;
8 } 8 }
9 9
10 a {
11 color: rgb(85, 149, 254);
12 text-decoration: none;
13 }
14
15 .picture img { 10 .picture img {
16 border-radius: 50%; 11 border-radius: 50%;
17 max-height: 100%; 12 max-height: 100%;
18 max-width: 100%; 13 max-width: 100%;
19 } 14 }
20 15
21 .container { 16 .container {
22 background-color: white; 17 background-color: white;
18 color: #333;
23 overflow: hidden; 19 overflow: hidden;
24 width: 448px; 20 width: 448px;
25 } 21 }
26 22
27 .top-title-bar { 23 .top-title-bar {
28 -webkit-padding-start: 24px;
29 align-items: center; 24 align-items: center;
30 border-bottom: 1px solid lightgray; 25 border-bottom: 1px solid lightgray;
31 color: #333;
32 display: flex; 26 display: flex;
33 font-size: 16px; 27 font-size: 16px;
34 height: 52px; 28 height: 52px;
29 padding: 0 24px;
35 } 30 }
36 31
37 .details { 32 .details {
38 font-size: 13px; 33 padding: 0 24px;
39 padding: 20px 24px;
40 }
41
42 .sync-message {
43 color: #595959;
44 line-height: 150%;
45 padding-bottom: 32px;
46 } 34 }
47 35
48 #picture-container { 36 #picture-container {
49 align-items: center; 37 align-items: center;
50 display: flex; 38 display: flex;
51 justify-content: center; 39 justify-content: center;
52 padding-bottom: 32px; 40 padding-bottom: 32px;
41 padding-top: 24px;
53 } 42 }
54 43
55 .picture { 44 .picture {
56 -webkit-margin-start: 84px; 45 -webkit-margin-start: 84px;
57 height: 96px; 46 height: 96px;
58 position: relative; 47 position: relative;
59 width: 96px; 48 width: 96px;
60 } 49 }
61 50
62 #profile-picture, 51 #profile-picture,
63 .checkmark-circle { 52 .checkmark-circle {
64 position: absolute; 53 position: absolute;
65 } 54 }
66 55
56 .message-container {
57 display: flex;
58 margin-bottom: 16px;
59 }
60
61 .message-container:last-child {
62 margin-bottom: 32px;
63 }
64
65 .message-container .logo {
66 -webkit-margin-end: 20px;
67 background-size: cover;
68 flex-shrink: 0;
69 height: 20px;
70 width: 20px;
71 }
72
73 #chrome-logo {
74 background-image: url(../../../../ui/webui/resources/images/200-logo_chrome.pn g);
75 }
76
77 #googleg-logo {
78 background-image: url(../../../../ui/webui/resources/images/200-logo_googleg.p ng);
79 }
80
81 .message-container .title {
82 font-weight: 500;
83 margin-bottom: 4px;
84 }
85
86 .message-container .body {
87 color: #646464;
88 }
89
90 .message-container .text {
91 line-height: 20px;
92 }
93
94 .message-container #activityControlsCheckbox {
95 -webkit-margin-start: 40px;
96 }
97
67 .action-container { 98 .action-container {
68 align-items: baseline;
69 display: flex; 99 display: flex;
70 justify-content: flex-end; 100 justify-content: flex-end;
101 padding: 16px;
71 } 102 }
72 103
73 paper-button { 104 #confirmButton,
105 #undoButton {
74 font-weight: 500; 106 font-weight: 500;
75 line-height: 16px; 107 line-height: 16px;
76 margin: 0; 108 margin: 0;
77 padding: 8px 16px; 109 padding: 8px 16px;
78 } 110 }
79 111
80 paper-button + paper-button {
81 -webkit-margin-start: 8px;
82 }
83
84 #confirmButton { 112 #confirmButton {
85 background-color: rgb(66, 133, 244); 113 background-color: rgb(66, 133, 244);
86 color: white; 114 color: white;
87 } 115 }
88 116
89 #undoButton { 117 #undoButton {
118 -webkit-margin-start: 8px;
90 color: #5A5A5A; 119 color: #5A5A5A;
91 } 120 }
92 121
93 #illustration { 122 #illustration {
94 height: 96px; 123 height: 96px;
95 margin: 0 auto; 124 margin: 0 auto;
96 position: relative; 125 position: relative;
97 width: 264px; 126 width: 264px;
98 } 127 }
99 128
(...skipping 216 matching lines...) Expand 10 before | Expand all | Expand 10 after
316 @keyframes fade-in-icon-bottom-right { 345 @keyframes fade-in-icon-bottom-right {
317 from { 346 from {
318 opacity: 0; 347 opacity: 0;
319 transform: translate(0, 0); 348 transform: translate(0, 0);
320 } 349 }
321 to { 350 to {
322 opacity: 0.1; 351 opacity: 0.1;
323 transform: translate(4px, 4px); 352 transform: translate(4px, 4px);
324 } 353 }
325 } 354 }
OLDNEW
« no previous file with comments | « no previous file | chrome/browser/resources/sync_confirmation/sync_confirmation.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698