OLD | NEW |
| (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> | |
OLD | NEW |