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

Side by Side Diff: chrome/browser/resources/md_user_manager/user_manager_styles.html

Issue 1842703004: Revert "MD user manager (learn more page, user manager tutorial)" (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: 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
OLDNEW
(Empty)
1 <link rel="import" href="chrome://md-user-manager/shared_styles.html">
2
3 <dom-module id="user-manager-styles">
4 <template>
5 <style include="shared-styles">
6 body {
7 background-color: #eee;
8 }
9
10 /* Overrides for the desktop user manager screen. */
11
12 #outer-container {
13 min-height: 0;
14 }
15
16 .bubble.faded {
17 opacity: 0;
18 }
19
20 .pod {
21 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
22 height: 226px;
23 /* On non-retina desktop, the text is blurry if we use the scale3d()
24 inherited from user_pod_row.js */
25 transform: scale(0.9);
26 }
27
28 podrow[ncolumns='6'] .pod {
29 transform: scale(0.8);
30 }
31
32 /* Because of crbug.com/406529, the text in the .name div is janky if ther e's
33 both a transform:scale and a transition:opacity applied to a div, so we mu st
34 apply the opacity change to the children instead. */
35 .pod.faded {
36 opacity: 1;
37 }
38
39 .pod.faded .user-image-pane,
40 .pod.faded .main-pane {
41 opacity: .4;
42 }
43
44 .pod.hovered:not(.focused) {
45 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
46 }
47
48 .pod.focused {
49 box-shadow: 0 16px 21px rgba(0, 0, 0, 0.2);
50 transform: scale(1) !important;
51 }
52
53 .pod.focused.locked {
54 box-shadow: 0 12px 21px rgba(0, 0, 0, 0.2);
55 height: 220px;
56 }
57
58 .user-image-pane {
59 border-top-left-radius: 2px;
60 border-top-right-radius: 2px;
61 height: 180px;
62 left: 0;
63 top: 0;
64 width: 180px;
65 }
66
67 html[dir=rtl] .user-image-pane {
68 right: 0;
69 }
70
71 .pod .name {
72 margin-top: 12px;
73 }
74
75 .pod .user-image {
76 height: 180px;
77 width: 180px;
78 }
79
80 .pod input[type='password'] {
81 height: 45px; /* 1px shorter as to not overlap the pod's rounded corner s */
82 top: 1px;
83 }
84
85 .pod .indicator-container {
86 background-color: rgba(255, 255, 255, 0.85);
87 border-radius: 16px;
88 height: 32px;
89 left: 8px;
90 position: absolute;
91 top: 8px;
92 }
93
94 html[dir=rtl] .pod .indicators {
95 left: auto;
96 right: 8px;
97 }
98
99 .pod .indicator {
100 background-position: center;
101 background-repeat: no-repeat;
102 background-size: 18px;
103 display: none;
104 float: left;
105 height: 32px;
106 width: 32px;
107 }
108
109 /* Using -webkit-mask on the indicators allows us to tweak the color. */
110 .pod .indicator-container > div {
111 -webkit-mask-position: center;
112 -webkit-mask-repeat: no-repeat;
113 -webkit-mask-size: 24px;
114 }
115
116 .pod.locked .locked-indicator {
117 -webkit-mask-image: url(../../../../ui/webui/resources/images/lock.svg);
118 background-color: var(--paper-grey-600);
119 display: initial;
120 }
121
122 .pod.legacy-supervised .legacy-supervised-indicator {
123 -webkit-mask-image:
124 url(../../../../ui/webui/resources/images/supervisor_account.svg);
125 background-color: var(--google-blue-500);
126 display: initial;
127 }
128
129 .pod.child .child-indicator {
130 -webkit-mask-image:
131 url(../../../../ui/webui/resources/images/account_child_invert.svg);
132 background-color: var(--google-blue-500);
133 display: initial;
134 }
135
136 .main-pane {
137 left: 0;
138 top: 0;
139 }
140
141 html[dir=rtl] .main-pane {
142 right: 0;
143 }
144
145 .name-container,
146 .pod.focused:not(.multiprofiles-policy-applied) .auth-container {
147 top: 180px;
148 width: 180px;
149 }
150
151 .pod.focused:not(.locked) .name-container {
152 display: block;
153 }
154
155 .pod .name {
156 color: var(--paper-grey-800);
157 font-size: 15px;
158 margin-top: 11px;
159 }
160
161 .pod.focused:not(.locked) .auth-container {
162 display: none;
163 }
164
165 .pod[auth-type='offlinePassword'].focused.locked .password-entry-container {
166 display: flex;
167 flex: auto;
168 }
169
170 .action-box-area {
171 background-color: var(--google-grey-100);
172 height: 24px;
173 /* Because of crbug.com/406529, the text in the .name div is janky if th ere's
174 an opacity transition in this div. */
175 transition: none;
176 width: 24px;
177 }
178
179 .action-box-button,
180 .action-box-button:hover,
181 .action-box-area.active .action-box-button {
182 background-image: none;
183 border-left: 6px solid transparent;
184 border-right: 6px solid transparent;
185 border-top: 6px solid #989898;
186 height: 0;
187 left: 6px;
188 margin: 0;
189 position: absolute;
190 top: 9px;
191 width: 0;
192 }
193
194 .action-box-button:hover,
195 .action-box-area.active .action-box-button {
196 border-top: 6px solid #4c4c4c;
197 }
198
199 .action-box-remove-user-warning .remove-warning-button {
200 height: 30px;
201 }
202
203 .action-box-remove-user-warning .remove-warning-button:focus {
204 /* Override the default blue border inherited from
205 button.custom-appearance:focus. */
206 border: 1px solid transparent !important;
207 box-shadow: inset 0 0 0 1px #fff;
208 }
209 </style>
210 </template>
211 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698