OLD | NEW |
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 { | |
6 margin: 0; | |
7 padding: 0; | |
8 } | |
9 | |
10 .picture img { | 5 .picture img { |
11 border-radius: 50%; | 6 border-radius: 50%; |
12 max-height: 100%; | 7 max-height: 100%; |
13 max-width: 100%; | 8 max-width: 100%; |
14 } | 9 } |
15 | 10 |
16 .container { | |
17 background-color: white; | |
18 color: #333; | |
19 overflow: hidden; | |
20 width: 448px; | |
21 } | |
22 | |
23 .top-title-bar { | |
24 align-items: center; | |
25 border-bottom: 1px solid lightgray; | |
26 display: flex; | |
27 font-size: 16px; | |
28 height: 52px; | |
29 padding: 0 24px; | |
30 } | |
31 | |
32 .details { | 11 .details { |
33 padding: 0 24px; | 12 padding: 0 24px; |
34 } | 13 } |
35 | 14 |
36 #picture-container { | 15 #picture-container { |
37 align-items: center; | 16 align-items: center; |
38 display: flex; | 17 display: flex; |
39 justify-content: center; | 18 justify-content: center; |
40 padding-bottom: 32px; | 19 padding-bottom: 32px; |
41 padding-top: 24px; | 20 padding-top: 24px; |
(...skipping 24 matching lines...) Expand all Loading... |
66 -webkit-margin-end: 20px; | 45 -webkit-margin-end: 20px; |
67 background-size: cover; | 46 background-size: cover; |
68 flex-shrink: 0; | 47 flex-shrink: 0; |
69 height: 20px; | 48 height: 20px; |
70 position: relative; | 49 position: relative; |
71 top: -2px; | 50 top: -2px; |
72 width: 20px; | 51 width: 20px; |
73 } | 52 } |
74 | 53 |
75 #chrome-logo { | 54 #chrome-logo { |
76 background-image: url(../../../../ui/webui/resources/images/200-logo_chrome.pn
g); | 55 background-image: url(../../../../../ui/webui/resources/images/200-logo_chrome
.png); |
77 } | 56 } |
78 | 57 |
79 #googleg-logo { | 58 #googleg-logo { |
80 background-image: url(../../../../ui/webui/resources/images/200-logo_googleg.p
ng); | 59 background-image: url(../../../../../ui/webui/resources/images/200-logo_google
g.png); |
81 } | 60 } |
82 | 61 |
83 .message-container .title { | 62 .message-container .title { |
84 font-weight: 500; | 63 font-weight: 500; |
85 margin-bottom: 4px; | 64 margin-bottom: 4px; |
86 } | 65 } |
87 | 66 |
88 .message-container .body { | 67 .message-container .body { |
89 color: #646464; | 68 color: #646464; |
90 } | 69 } |
91 | 70 |
92 .message-container .text { | 71 .message-container .text { |
93 line-height: 20px; | 72 line-height: 20px; |
94 } | 73 } |
95 | 74 |
96 .message-container #activityControlsCheckbox { | 75 .message-container #activityControlsCheckbox { |
97 -webkit-margin-start: 40px; | 76 -webkit-margin-start: 40px; |
98 } | 77 } |
99 | 78 |
100 .action-container { | |
101 display: flex; | |
102 justify-content: flex-end; | |
103 padding: 16px; | |
104 } | |
105 | |
106 #confirmButton, | |
107 #undoButton { | |
108 line-height: 16px; | |
109 margin: 0; | |
110 padding: 8px 16px; | |
111 } | |
112 | |
113 #undoButton { | 79 #undoButton { |
114 -webkit-margin-start: 8px; | 80 -webkit-margin-start: 8px; |
115 } | 81 } |
116 | 82 |
117 #illustration { | 83 #illustration { |
118 height: 96px; | 84 height: 96px; |
119 margin: 0 auto; | 85 margin: 0 auto; |
120 position: relative; | 86 position: relative; |
121 width: 264px; | 87 width: 264px; |
122 } | 88 } |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
167 animation-delay: 200ms; | 133 animation-delay: 200ms; |
168 animation-duration: 1.4s; | 134 animation-duration: 1.4s; |
169 animation-fill-mode: forwards; | 135 animation-fill-mode: forwards; |
170 animation-timing-function: cubic-bezier(0.25, 0.45, 0.4, 0.7); | 136 animation-timing-function: cubic-bezier(0.25, 0.45, 0.4, 0.7); |
171 background-size: cover; | 137 background-size: cover; |
172 opacity: 0; | 138 opacity: 0; |
173 position: absolute; | 139 position: absolute; |
174 } | 140 } |
175 | 141 |
176 #icon-bookmarks { | 142 #icon-bookmarks { |
177 background: url(../../../../ui/webui/resources/images/icon_bookmarks.svg); | 143 background: url(../../../../../ui/webui/resources/images/icon_bookmarks.svg); |
178 height: 36px; | 144 height: 36px; |
179 left: 58px; | 145 left: 58px; |
180 top: 0; | 146 top: 0; |
181 width: 36px; | 147 width: 36px; |
182 } | 148 } |
183 | 149 |
184 #icon-extensions { | 150 #icon-extensions { |
185 background: url(../../../../ui/webui/resources/images/icon_extensions.svg); | 151 background: url(../../../../../ui/webui/resources/images/icon_extensions.svg); |
186 height: 24px; | 152 height: 24px; |
187 left: 30px; | 153 left: 30px; |
188 top: 30px; | 154 top: 30px; |
189 width: 24px; | 155 width: 24px; |
190 } | 156 } |
191 | 157 |
192 | 158 |
193 #icon-passwords { | 159 #icon-passwords { |
194 background: url(../../../../ui/webui/resources/images/icon_passwords.svg); | 160 background: url(../../../../../ui/webui/resources/images/icon_passwords.svg); |
195 height: 30px; | 161 height: 30px; |
196 left: 38px; | 162 left: 38px; |
197 top: 66px; | 163 top: 66px; |
198 width: 40px; | 164 width: 40px; |
199 } | 165 } |
200 | 166 |
201 #icon-history { | 167 #icon-history { |
202 background: url(../../../../ui/webui/resources/images/icon_history.svg); | 168 background: url(../../../../../ui/webui/resources/images/icon_history.svg); |
203 height: 36px; | 169 height: 36px; |
204 left: 190px; | 170 left: 190px; |
205 top: 6px; | 171 top: 6px; |
206 width: 36px; | 172 width: 36px; |
207 } | 173 } |
208 | 174 |
209 #icon-tabs { | 175 #icon-tabs { |
210 background: url(../../../../ui/webui/resources/images/icon_tabs.svg); | 176 background: url(../../../../../ui/webui/resources/images/icon_tabs.svg); |
211 height: 24px; | 177 height: 24px; |
212 left: 222px; | 178 left: 222px; |
213 top: 44px; | 179 top: 44px; |
214 width: 24px; | 180 width: 24px; |
215 } | 181 } |
216 | 182 |
217 #icon-themes { | 183 #icon-themes { |
218 background: url(../../../../ui/webui/resources/images/icon_themes.svg); | 184 background: url(../../../../../ui/webui/resources/images/icon_themes.svg); |
219 height: 30px; | 185 height: 30px; |
220 left: 184px; | 186 left: 184px; |
221 top: 62px; | 187 top: 62px; |
222 width: 32px; | 188 width: 32px; |
223 } | 189 } |
224 | 190 |
225 #icon-circle-open { | 191 #icon-circle-open { |
226 border: 2px solid #000; | 192 border: 2px solid #000; |
227 border-radius: 50%; | 193 border-radius: 50%; |
228 height: 8px; | 194 height: 8px; |
(...skipping 111 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
340 @keyframes fade-in-icon-bottom-right { | 306 @keyframes fade-in-icon-bottom-right { |
341 from { | 307 from { |
342 opacity: 0; | 308 opacity: 0; |
343 transform: translate(0, 0); | 309 transform: translate(0, 0); |
344 } | 310 } |
345 to { | 311 to { |
346 opacity: 0.1; | 312 opacity: 0.1; |
347 transform: translate(4px, 4px); | 313 transform: translate(4px, 4px); |
348 } | 314 } |
349 } | 315 } |
OLD | NEW |