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
3 * found in the LICENSE file. */
4
5#change-home-page-section {
6  margin-left: 30px;
7}
8
9#home-page-url {
10  display: inline-block;
11  max-width: 400px;
12  overflow: hidden;
13  text-overflow: ellipsis;
14  vertical-align: top;
15}
16
17#default-browser-state,
18#profiles-supervised-dashboard-tip {
19  margin-top: 6px;
20}
21
22#sync-overview p {
23  display: inline;
24}
25
26#account-picture-wrapper {
27  float: left;
28  margin: 0 2px 10px 0;
29}
30
31html[dir=rtl] #account-picture-wrapper {
32  float: right;
33}
34
35#account-picture-control {
36  border: 1px solid rgba(0, 0, 0, 0.3);
37  border-radius: 4px;
38  display: inline-block;
39  padding: 3px;
40  position: relative;
41}
42
43#account-picture {
44  height: 56px;
45  vertical-align: middle;
46  width: 56px;
47}
48
49#account-picture:disabled {
50  cursor: default;
51}
52
53#change-picture-caption {
54  background: rgba(0, 0, 0, 0.5);
55  bottom: 0;
56  color: white;
57  cursor: pointer;
58  font-size: small;
59  margin: 3px 0;
60  position: absolute;
61  text-align: center;
62  visibility: hidden;
63  /* Width of #account-picture. */
64  width: 56px;
65}
66
67#account-picture:not(:disabled):hover + #change-picture-caption,
68#account-picture:not(:disabled) + #change-picture-caption:hover {
69  visibility: visible;
70}
71
72#account-picture-indicator {
73  -webkit-margin-end: 3px;
74}
75
76#sync-general {
77  -webkit-margin-start: 76px;
78  margin-bottom: 10px;
79}
80
81#sync-buttons {
82  clear: both;
83}
84
85#profiles-list {
86  margin-bottom: 10px;
87  min-height: 0;
88}
89
90#profiles-list .profile-container {
91  -webkit-box-align: center;
92  display: -webkit-box;
93  max-width: 100%;
94}
95
96#profiles-list .profile-name {
97  -webkit-box-flex: 1;
98  overflow: hidden;
99  text-overflow: ellipsis;
100  white-space: nowrap;
101}
102
103#profiles-list .profile-supervised {
104  color: #999;
105  margin-left: 5px;
106}
107
108#profiles-list > * {
109  height: 40px;
110}
111
112#profiles-list:focus {
113  border-color: rgb(77, 144, 254);
114}
115
116.profile-img {
117  height: 31px;
118  padding: 3px;
119  vertical-align: middle;
120  width: 38px;
121}
122
123.profile-item-current {
124  font-weight: bold;
125}
126
127#profiles-buttons {
128  white-space: nowrap;
129}
130
131.sync-error {
132  background: rgb(255, 219, 219);
133  border: 1px solid rgb(206, 76, 76);
134  border-radius: 2px;
135  padding: 10px;
136}
137
138.sync-error .link-button {
139  margin: 0 1ex;
140  padding: 0;
141}
142
143#mac-passwords-warning {
144  margin-top: 10px;
145}
146
147input[type='range'] {
148  vertical-align: middle;
149}
150
151/* CSS tweak to fix crbug.com/151788. Inconsistencies in the CSS rules across
152 * platforms and elements. Too risky to attempt a general fix for M23 at this
153 * time. This fix addresses the immediate problem in the bug report by forcing
154 * the button to align consistently with its neighboring select element.
155 * TODO(kevers): Revisit padding rules for select and buttons to ensure
156 * consistency in the size and baseline across all platforms. */
157#manage-default-search-engines {
158  padding-bottom: 0;
159  padding-top: 0;
160}
161
162.extension-controlled-warning-box {
163  background-color: #fbfbfb;
164  border: 1px solid #cecece;
165  border-radius: 3px;
166  padding: 19px;
167}
168
169.extension-controlled-warning {
170  -webkit-padding-start: 35px;
171  background-repeat: no-repeat;
172  margin-bottom: 14px;
173  padding-bottom: 6px;
174  padding-top: 3px;
175}
176
177/* Override a platform specific rule in Widgets that may no longer be relevant.
178 * Too late in the development cycle to update Widgets.css due to the number
179 * of pages that depend on it.
180 * TODO(kevers): Rivisit padding rules. */
181#default-search-engine {
182  padding-bottom: 0;
183}
184
185.hotword-settings {
186  -webkit-margin-start: 22px;
187}
188
189/* Internet settings */
190
191#network-settings {
192  position: relative;
193}
194
195#network-list {
196  min-height: 0;
197  width: 320px;
198}
199
200#download-location-label.disabled {
201  color: #999;
202}
203
204.network-group {
205  -webkit-box-orient: horizontal;
206  height: 42px;
207  overflow: visible;
208}
209
210list:not([disabled]) > .network-group:hover,
211list:not([disabled]) > .network-group[selected] {
212  background-color: #f8f8f8 !important;
213  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8),
214                                            rgba(255, 255, 255, 0)) !important;
215  box-shadow: inset 0 0 1px 1px #f0f0f0;
216}
217
218.network-group-labels {
219  -webkit-box-flex: 1;
220  -webkit-box-orient: vertical;
221  display: -webkit-box;
222  padding-top: 3px;
223}
224
225.network-icon,
226.network-menu-item-icon {
227  -webkit-margin-end: 8px;
228  background-position: left top;
229  background-size: 25px;
230  height: 25px;
231  width: 25px;
232}
233
234.other-cellulars > .network-menu-item-icon {
235  background-position: left top;
236}
237
238@-webkit-keyframes connecting-animation {
239  0% {
240    background-position: 0 25%;
241  }
242  12.5% {
243    background-position: 0 50%;
244  }
245  25%  {
246    background-position: 0 75%;
247  }
248  37.5%  {
249    background-position: 0 100%;
250  }
251  50%  {
252    background-position: 0 100%;
253  }
254  62.5%  {
255    background-position: 0 75%;
256  }
257  75%  {
258    background-position: 0 50%;
259  }
260  87.5%  {
261    background-position: 0 25%;
262  }
263}
264
265.network-add-connection,
266.network-control-active,
267.network-control-inactive {
268  background-position: center center !important;
269  background-repeat: no-repeat;
270}
271
272.network-add-connection {
273  background-image: url('chrome://theme/IDR_NETWORK_ADD_CONNECTION');
274  background-size: 16px;
275}
276
277.network-control-inactive {
278  background-image: none;
279}
280
281.network-control-active {
282  background-image: url('chrome://theme/IDR_PROFILE_SELECTED');
283  background-size: 16px;
284}
285
286.network-options-button {
287  -webkit-box-flex: 0;
288  -webkit-transform: scale(0.6);
289  background-image: none;
290  background-position: center center;
291  display: block;
292  opacity: 0.5;
293  vertical-align: middle;
294  width: 19px;
295}
296
297.network-group > .controlled-setting-indicator,
298.network-menu-item > .controlled-setting-indicator {
299  -webkit-margin-end: 5px;
300}
301
302.network-options-button:hover {
303  opacity: 1;
304}
305
306@-webkit-keyframes vpn-connecting-animation {
307  from {
308    opacity: 1;
309  }
310  to {
311    opacity: 0.2;
312  }
313}
314
315.network-connecting {
316  -webkit-animation: connecting-animation 1s step-end infinite;
317}
318
319.network-vpn.network-connecting {
320  -webkit-animation: vpn-connecting-animation 500ms alternate infinite;
321}
322
323.network-title {
324  font-weight: 600;
325  line-height: 120%;
326}
327
328.network-subtitle {
329  color: #333;
330  display: inline-block;
331  line-height: 100%;
332  max-width: 260px;
333  opacity: 0.4;
334  overflow: hidden;
335  padding-bottom: 3px;
336  text-overflow: ellipsis;
337  white-space: nowrap;
338}
339
340.network-selector {
341  background: right center no-repeat;
342  background-image: url('../../../../ui/webui/resources/images/select.png');
343  padding-right: 20px;
344}
345
346.network-menu {
347  -webkit-box-shadow:
348      0 0 0 1px rgba(0,0,0,0.1),
349      0 5px 1px 1px rgba(0,0,0,0.1),
350      0 5px 2px 1px rgba(0,0,0,0.1),
351      0 5px 12px 1px rgba(0,0,0,0.5);
352  background: #fff;
353  display: block;
354  position: absolute;
355  width: 320px;
356  z-index: 1;
357}
358
359.network-menu-item {
360  -webkit-box-align: center;
361  -webkit-box-orient: horizontal;
362  display: -webkit-box;
363  height: 32px;
364  margin-left: 4px;
365  margin-right: 4px;
366}
367
368.network-menu-item-label {
369  -webkit-box-flex: 1;
370  color: #555;
371  display: block;
372  overflow-x: hidden;
373  text-overflow: ellipsis;
374  white-space: nowrap;
375}
376
377.active-network {
378   color: black;
379   font-weight: bold;
380}
381
382.network-disabled-control {
383  color: #999;
384}
385
386/* Restrict the size of the networks menu, by limiting the number of
387   visible networks. */
388.network-menu-group {
389    max-height: 192px;
390    overflow-x: hidden;
391    overflow-y: auto;
392    text-overflow: ellipsis;
393}
394
395.network-menu-item:hover {
396  background-color: #eee;
397}
398
399.network-menu > hr {
400  opacity: 0.4;
401}
402
403#shared-proxies {
404  margin-top: 12px;
405}
406
407#web-content-section select,
408.web-content-select-label {
409  min-width: 145px;
410}
411
412.web-content-select-label > span:only-of-type {
413  display: inline-block;
414  min-width: 100px;
415}
416
417#timezone-value {
418  display: inline-block;
419  vertical-align: baseline;
420}
421
422#privacy-explanation {
423  line-height: 1.8em;
424}
425
426#advanced-settings {
427  height: 0;
428  margin-top: 8px;
429  overflow: hidden;
430}
431
432.sliding {
433  -webkit-transition: height 200ms;
434  overflow-y: hidden;
435}
436
437#keyboard-overlay .option-value > select {
438  width: 100%;
439}
440
441#keyboard-overlay table {
442  /* Same as .settings-row {margin}. */
443  -webkit-border-vertical-spacing: 0.65em;
444}
445
446#accessibility-autoclick .controlled-setting-with-label {
447  -webkit-box-align: baseline;
448}
449
450#accessibility-autoclick-dropdown,
451#accessibility-autoclick-label {
452  /* Same as .controlled-setting-with-label > input + span. */
453  -webkit-margin-start: 0.6em;
454}
455
456div[guestmode=true] :-webkit-any(
457<if expr="not chromeos">
458    #searchBox,
459</if>
460    #appearance-section,
461    #startup-section,
462    #reset-profile-settings-section) {
463  display: none;
464}
465
466div[supervisedMode=true] :-webkit-any(
467    #profiles-enable-guest,
468    #profiles-enable-add-person) {
469  display: none;
470}
471
472footer {
473  display: flex;
474}
475
476#about-button {
477  -webkit-margin-end: 30px;
478}
479
480/* An input that has no function except to take up the same amount of space as
481 * a checkbox. */
482.spacer-checkbox {
483  visibility: hidden;
484}
485