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

Side by Side Diff: chrome/browser/resources/md_user_manager/user_manager.css

Issue 1630903002: material design user manager with create profile flow (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: addressed tommy's comments Created 4 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
OLDNEW
1 /* Copyright 2013 The Chromium Authors. All rights reserved. 1 /* Copyright 2016 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 5
6 /* Overrides for the desktop user manager screen. */ 6 /* Overrides for the desktop user manager screen. */
7 7
8 .oobe-display { 8 .oobe-display {
9 background-color: #eee; 9 background-color: #eee;
10 } 10 }
11 11
12 #outer-container { 12 #outer-container {
13 min-height: 0; 13 min-height: 0;
14 } 14 }
15 15
16 .bubble.faded { 16 .bubble.faded {
17 opacity: 0; 17 opacity: 0;
18 } 18 }
19 19
20 .pod { 20 .pod {
21 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 21 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
tommycli 2016/02/08 18:45:19 Why did the spaces go away?
Moe 2016/02/09 00:15:33 used an external css cleanup tool...
22 height: 226px; 22 height: 226px;
23 /* On non-retina desktop, the text is blurry if we use the scale3d() 23 /* On non-retina desktop, the text is blurry if we use the scale3d()
24 inherited from user_pod_row.js */ 24 inherited from user_pod_row.js */
25 transform: scale(0.9); 25 transform: scale(0.9);
26 } 26 }
27 27
28 podrow[ncolumns='6'] .pod { 28 podrow[ncolumns='6'] .pod {
29 transform: scale(0.8); 29 transform: scale(0.8);
30 } 30 }
31 31
32 /* Because of crbug.com/406529, the text in the .name div is janky if there's 32 /* Because of crbug.com/406529, the text in the .name div is janky if there's
33 both a transform:scale and a transition:opacity applied to a div, so we must 33 both a transform:scale and a transition:opacity applied to a div, so we must
34 apply the opacity change to the children instead. */ 34 apply the opacity change to the children instead. */
35 .pod.faded { 35 .pod.faded {
36 opacity: 1; 36 opacity: 1;
37 } 37 }
38 38
39 .pod.faded .user-image-pane, 39 .pod.faded .user-image-pane,
40 .pod.faded .main-pane { 40 .pod.faded .main-pane {
41 opacity: .4; 41 opacity: .4;
42 } 42 }
43 43
44 .pod.hovered:not(.focused) { 44 .pod.hovered:not(.focused) {
45 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 45 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
46 } 46 }
47 47
48 .pod.focused { 48 .pod.focused {
49 box-shadow: 0 16px 21px rgba(0, 0, 0, 0.2); 49 box-shadow: 0 16px 21px rgba(0,0,0,0.2);
50 transform: scale(1) !important; 50 transform: scale(1) !important;
51 } 51 }
52 52
53 .pod.focused.locked { 53 .pod.focused.locked {
54 box-shadow: 0 12px 21px rgba(0, 0, 0, 0.2); 54 box-shadow: 0 12px 21px rgba(0,0,0,0.2);
55 height: 220px; 55 height: 220px;
56 } 56 }
57 57
58 .user-image-pane { 58 .user-image-pane {
59 border-top-left-radius: 2px; 59 border-top-left-radius: 2px;
60 border-top-right-radius: 2px; 60 border-top-right-radius: 2px;
61 height: 180px; 61 height: 180px;
62 left: 0; 62 left: 0;
63 top: 0; 63 top: 0;
64 width: 180px; 64 width: 180px;
(...skipping 11 matching lines...) Expand all
76 height: 180px; 76 height: 180px;
77 width: 180px; 77 width: 180px;
78 } 78 }
79 79
80 .pod input[type='password'] { 80 .pod input[type='password'] {
81 height: 45px; /* 1px shorter as to not overlap the pod's rounded corners */ 81 height: 45px; /* 1px shorter as to not overlap the pod's rounded corners */
82 top: 1px; 82 top: 1px;
83 } 83 }
84 84
85 .pod .indicator-container { 85 .pod .indicator-container {
86 background-color: rgba(255, 255, 255, 0.85); 86 background-color: rgba(255,255,255,0.85);
87 border-radius: 16px; 87 border-radius: 16px;
88 height: 32px; 88 height: 32px;
89 left: 8px; 89 left: 8px;
90 position: absolute; 90 position: absolute;
91 top: 8px; 91 top: 8px;
92 } 92 }
93 93
94 html[dir=rtl] .pod .indicators { 94 html[dir=rtl] .pod .indicators {
95 left: auto; 95 left: auto;
96 right: 8px; 96 right: 8px;
(...skipping 11 matching lines...) Expand all
108 108
109 /* Using -webkit-mask on the indicators allows us to tweak the color. */ 109 /* Using -webkit-mask on the indicators allows us to tweak the color. */
110 .pod .indicator-container > div { 110 .pod .indicator-container > div {
111 -webkit-mask-position: center; 111 -webkit-mask-position: center;
112 -webkit-mask-repeat: no-repeat; 112 -webkit-mask-repeat: no-repeat;
113 -webkit-mask-size: 24px; 113 -webkit-mask-size: 24px;
114 } 114 }
115 115
116 .pod.locked .locked-indicator { 116 .pod.locked .locked-indicator {
117 -webkit-mask-image: url(../../../../ui/webui/resources/images/lock.svg); 117 -webkit-mask-image: url(../../../../ui/webui/resources/images/lock.svg);
118 background-color: #757575; 118 background-color: rgb(117,117,117);
119 display: initial; 119 display: initial;
120 } 120 }
121 121
122 .pod.legacy-supervised .legacy-supervised-indicator { 122 .pod.legacy-supervised .legacy-supervised-indicator {
123 -webkit-mask-image: 123 -webkit-mask-image:
124 url(../../../../ui/webui/resources/images/supervisor_account.svg); 124 url(../../../../ui/webui/resources/images/supervisor_account.svg);
125 background-color: rgb(66, 133, 244); 125 background-color: rgb(66,133,244);
126 display: initial; 126 display: initial;
127 } 127 }
128 128
129 .pod.child .child-indicator { 129 .pod.child .child-indicator {
130 -webkit-mask-image: 130 -webkit-mask-image:
131 url(../../../../ui/webui/resources/images/account_child_invert.svg); 131 url(../../../../ui/webui/resources/images/account_child_invert.svg);
132 background-color: rgb(66, 133, 244); 132 background-color: rgb(66,133,244);
133 display: initial; 133 display: initial;
134 } 134 }
135 135
136 .main-pane { 136 .main-pane {
137 left: 0; 137 left: 0;
138 top: 0; 138 top: 0;
139 } 139 }
140 140
141 html[dir=rtl] .main-pane { 141 html[dir=rtl] .main-pane {
142 right: 0; 142 right: 0;
143 } 143 }
144 144
145 .name-container, 145 .name-container,
146 .pod.focused:not(.multiprofiles-policy-applied) .auth-container { 146 .pod.focused:not(.multiprofiles-policy-applied) .auth-container {
147 top: 180px; 147 top: 180px;
148 width: 180px; 148 width: 180px;
149 } 149 }
150 150
151 .pod.focused:not(.locked) .name-container { 151 .pod.focused:not(.locked) .name-container {
152 display: block; 152 display: block;
153 } 153 }
154 154
155 .pod .name { 155 .pod .name {
156 color: #363636; 156 color: rgb(54,54,54);
157 font-size: 15px; 157 font-size: 15px;
158 margin-top: 11px; 158 margin-top: 11px;
159 } 159 }
160 160
161 .pod.focused:not(.locked) .auth-container { 161 .pod.focused:not(.locked) .auth-container {
162 display: none; 162 display: none;
163 } 163 }
164 164
165 .pod[auth-type='offlinePassword'].focused.locked .password-entry-container { 165 .pod[auth-type='offlinePassword'].focused.locked .password-entry-container {
166 display: flex; 166 display: flex;
167 flex: auto; 167 flex: auto;
168 } 168 }
169 169
170 .action-box-area { 170 .action-box-area {
171 background-color: #f5f5f5; 171 background-color: rgb(245,245,245);
172 height: 24px; 172 height: 24px;
173 /* Because of crbug.com/406529, the text in the .name div is janky if there's 173 /* Because of crbug.com/406529, the text in the .name div is janky if there's
174 an opacity transition in this div. */ 174 an opacity transition in this div. */
175 transition: none; 175 transition: none;
176 width: 24px; 176 width: 24px;
177 } 177 }
178 178
179 .action-box-button, 179 .action-box-button,
180 .action-box-button:hover, 180 .action-box-button:hover,
181 .action-box-area.active .action-box-button { 181 .action-box-area.active .action-box-button {
(...skipping 17 matching lines...) Expand all
199 .action-box-remove-user-warning .remove-warning-button { 199 .action-box-remove-user-warning .remove-warning-button {
200 height: 30px; 200 height: 30px;
201 } 201 }
202 202
203 .action-box-remove-user-warning .remove-warning-button:focus { 203 .action-box-remove-user-warning .remove-warning-button:focus {
204 /* Override the default blue border inherited from 204 /* Override the default blue border inherited from
205 button.custom-appearance:focus. */ 205 button.custom-appearance:focus. */
206 border: 1px solid transparent !important; 206 border: 1px solid transparent !important;
207 box-shadow: inset 0 0 0 1px #fff; 207 box-shadow: inset 0 0 0 1px #fff;
208 } 208 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698