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

Side by Side Diff: chrome/browser/resources/chromeos/login/user_pod_row.css

Issue 9864032: [WebUI] Fix all CSS nits in chrome/browser/resources/chromeos. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: removing screen_account_picker.css Created 8 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 | 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 * This is the stylesheet used by user pods row of account picker UI. 5 * This is the stylesheet used by user pods row of account picker UI.
6 */ 6 */
7 7
8 podrow { 8 podrow {
9 -webkit-box-align: center; 9 -webkit-box-align: center;
10 -webkit-box-pack: center; 10 -webkit-box-pack: center;
11 -webkit-transition: all 200ms ease-in-out; 11 -webkit-transition: all 200ms ease-in-out;
12 display: -webkit-box; 12 display: -webkit-box;
13 height: 225px; 13 height: 225px;
14 position: relative; 14 position: relative;
15 } 15 }
16 16
17 .pod { 17 .pod {
18 -webkit-transition: all 230ms ease; 18 -webkit-transition: all 230ms ease;
19 border-radius: 2px; 19 border-radius: 2px;
20 cursor: pointer; 20 cursor: pointer;
21 margin: 0 10px; 21 margin: 0 10px;
22 outline: none; 22 outline: none;
23 padding: 10px; 23 padding: 10px;
24 position: relative; 24 position: relative;
25 text-align: center; 25 text-align: center;
26 width: 170px; 26 width: 170px;
27 } 27 }
28 28
29 .pod .user-image { 29 .pod .user-image {
30 -webkit-box-shadow: 0 3px 12px #ccc;
31 -webkit-transition: all 140ms ease; 30 -webkit-transition: all 140ms ease;
32 background-color: #fff; 31 background-color: #fff;
33 border: 1px solid #ccc; 32 border: 1px solid #ccc;
34 border-radius: 2px; 33 border-radius: 2px;
34 box-shadow: 0 3px 12px #ccc;
35 height: 160px; 35 height: 160px;
36 margin-bottom: 10px; 36 margin-bottom: 10px;
37 padding: 4px; 37 padding: 4px;
38 width: 160px; 38 width: 160px;
39 } 39 }
40 40
41 .pod.focused { 41 .pod.focused {
42 cursor: default; 42 cursor: default;
43 } 43 }
44 44
45 .pod.faded { 45 .pod.faded {
46 opacity: .75; 46 opacity: .75;
47 } 47 }
48 48
49 .pod.focused .user-image { 49 .pod.focused .user-image {
50 -webkit-box-shadow: 0 6px 16px #a4a4a4;
51 -webkit-transform: translateY(-1px); 50 -webkit-transform: translateY(-1px);
51 box-shadow: 0 6px 16px #a4a4a4;
52 } 52 }
53 53
54 .pod.init { 54 .pod.init {
55 -webkit-transform: scale(2.4);
55 opacity: 0; 56 opacity: 0;
56 -webkit-transform: scale(2.4);
57 } 57 }
58 58
59 .pod.left { 59 .pod.left {
60 -webkit-transform: translateX(-25px); 60 -webkit-transform: translateX(-25px);
61 opacity: 0; 61 opacity: 0;
62 } 62 }
63 63
64 .pod.right { 64 .pod.right {
65 -webkit-transform: translateX(25px); 65 -webkit-transform: translateX(25px);
66 opacity: 0; 66 opacity: 0;
(...skipping 16 matching lines...) Expand all
83 .name.init { 83 .name.init {
84 opacity: 0; 84 opacity: 0;
85 } 85 }
86 86
87 .pod.focused .name { 87 .pod.focused .name {
88 display: none; 88 display: none;
89 } 89 }
90 90
91 .pod input[type='password'] { 91 .pod input[type='password'] {
92 -webkit-border-radius: 2px; 92 -webkit-border-radius: 2px;
93 -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1), 93 -webkit-transition: box-shadow 100ms, background 100ms, border 500ms;
94 0 1px 0 white,
95 0 0 1px transparent,
96 0 0 1px transparent,
97 0 0 1px transparent;
98 -webkit-transition: -webkit-box-shadow 100ms, background 100ms, border 500ms;
99 border: 1px solid #aaa; 94 border: 1px solid #aaa;
95 box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1),
96 0 1px 0 white,
97 0 0 1px transparent,
98 0 0 1px transparent,
99 0 0 1px transparent;
100 box-sizing: border-box; 100 box-sizing: border-box;
101 height: 26px; 101 height: 26px;
102 padding: 4px 6px; 102 padding: 4px 6px;
103 width: 100%; 103 width: 100%;
104 } 104 }
105 105
106 .pod:not(.focused) input[type='password'] { 106 .pod:not(.focused) input[type='password'] {
107 display: none; 107 display: none;
108 } 108 }
109 109
110 .pod input[type='password']:focus { 110 .pod input[type='password']:focus {
111 -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .15), 111 -webkit-transition: box-shadow 200ms, background 200ms, border 200ms;
112 0 1px 0 transparent,
113 0 0 1px #c0c0c0,
114 0 0 1px #c0c0c0,
115 0 0 1px #c0c0c0;
116 -webkit-transition: -webkit-box-shadow 200ms, background 200ms, border 200ms;
117 background: #f8f8f8; 112 background: #f8f8f8;
118 border-color: #4080fa; 113 border-color: rgb(64, 128, 250);
114 box-shadow: inset 0 2px 2px rgba(0, 0, 0, .15),
115 0 1px 0 transparent,
116 0 0 1px #c0c0c0,
117 0 0 1px #c0c0c0,
118 0 0 1px #c0c0c0;
119 outline: none; 119 outline: none;
120 } 120 }
121 121
122 .pod .enter-guest-button, 122 .pod .enter-guest-button,
123 .pod .signin-button { 123 .pod .signin-button {
124 box-sizing: border-box; 124 box-sizing: border-box;
125 display: inline-block; 125 display: inline-block;
126 height: 26px; 126 height: 26px;
127 max-width: 100%;
128 min-width: 94px;
127 padding: 4px 8px; 129 padding: 4px 8px;
128 min-width: 94px;
129 max-width: 100%;
130 } 130 }
131 131
132 .pod:not(.focused) .enter-guest-button, 132 .pod:not(.focused) .enter-guest-button,
133 .pod:not(.focused) .signin-button { 133 .pod:not(.focused) .signin-button {
134 display: none; 134 display: none;
135 } 135 }
136 136
137 /* TODO(ivankr): this element is anchored to .pod while should be to 137 /* TODO(ivankr): this element is anchored to .pod while should be to
138 * .password. Perhaps add a DIV container for both .password and .password-hint. 138 * .password. Perhaps add a DIV container for both .password and .password-hint.
139 */ 139 */
(...skipping 17 matching lines...) Expand all
157 .pod.focused input[type='password']:not([hidden]).empty + .password-hint { 157 .pod.focused input[type='password']:not([hidden]).empty + .password-hint {
158 visibility: visible; 158 visibility: visible;
159 } 159 }
160 160
161 .pod .capslock-hint { 161 .pod .capslock-hint {
162 cursor: text; 162 cursor: text;
163 padding: 4px 8px; 163 padding: 4px 8px;
164 position: absolute; 164 position: absolute;
165 right: 10px; 165 right: 10px;
166 top: 194px; 166 top: 194px;
167 visibility: hidden;
167 z-index: 1; 168 z-index: 1;
168 visibility: hidden;
169 } 169 }
170 170
171 html[dir=rtl] .pod .capslock-hint { 171 html[dir=rtl] .pod .capslock-hint {
172 left: 10px; 172 left: 10px;
173 right: auto; 173 right: auto;
174 } 174 }
175 175
176 .capslock-on .pod.focused input[type='password']:not([hidden]) ~ .capslock-hint { 176 .capslock-on .pod.focused input[type='password']:not([hidden]) ~ .capslock-hint {
177 visibility: visible; 177 visibility: visible;
178 } 178 }
179 179
180 .remove-user-button { 180 .remove-user-button {
181 -webkit-transition: width 100ms ease-in-out, background 200ms ease-in-out; 181 -webkit-transition: width 100ms ease-in-out, background 200ms ease-in-out;
182 -webkit-box-shadow: none;
183 background: url('../../../../../ui/resources/close_bar.png') center center no- repeat; 182 background: url('../../../../../ui/resources/close_bar.png') center center no- repeat;
184 border: 0; 183 border: 0;
184 box-shadow: none;
185 height: 16px; 185 height: 16px;
186 margin: 0; 186 margin: 0;
187 min-width: 16px; 187 min-width: 16px;
188 padding: 0; 188 padding: 0;
189 position: absolute; 189 position: absolute;
190 right: 14px; 190 right: 14px;
191 top: 14px; 191 top: 14px;
192 width: 16px; 192 width: 16px;
193 } 193 }
194 194
195 .remove-user-button:hover { 195 .remove-user-button:hover {
196 -webkit-box-shadow: none;
197 background: url('../../../../../ui/resources/close_bar_h.png') center center n o-repeat; 196 background: url('../../../../../ui/resources/close_bar_h.png') center center n o-repeat;
197 box-shadow: none;
198 } 198 }
199 199
200 .remove-user-button.active { 200 .remove-user-button.active {
201 background-color: #e94949; 201 background-color: rgb(233, 73, 73);
202 background-image: none; 202 background-image: none;
203 border-radius: 4px; 203 border-radius: 4px;
204 color: white; 204 color: white;
205 font-size: 10px; 205 font-size: 10px;
206 height: initial; 206 height: initial;
207 padding: 2px 4px; 207 padding: 2px 4px;
208 width: initial; 208 width: initial;
209 } 209 }
210 210
211 .signed-in-indicator { 211 .signed-in-indicator {
212 -webkit-transition: all 140ms ease; 212 -webkit-transition: all 140ms ease;
213 background: rgba(0, 0, 0, 0.5); 213 background: rgba(0, 0, 0, 0.5);
214 color: white; 214 color: white;
215 font-size: small; 215 font-size: small;
216 margin: 5px; 216 margin: 5px;
217 padding: 3px 0; 217 padding: 3px 0;
218 position: absolute; 218 position: absolute;
219 /* Width of .user-image. */ 219 /* Width of .user-image. */
220 width: 160px; 220 width: 160px;
221 z-index: 1; 221 z-index: 1;
222 } 222 }
223 223
224 .pod.focused .signed-in-indicator { 224 .pod.focused .signed-in-indicator {
225 /* Track shifting of .user-image on pod focus. */ 225 /* Track shifting of .user-image on pod focus. */
226 -webkit-transform: translateY(-1px); 226 -webkit-transform: translateY(-1px);
227 } 227 }
OLDNEW
« no previous file with comments | « chrome/browser/resources/chromeos/login/screen_gaia_signin.css ('k') | chrome/browser/resources/chromeos/menu.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698