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
5body {
6  position: relative;
7}
8
9#main-content {
10  bottom: 0;
11  display: -webkit-box;
12  left: 0;
13  position: absolute;
14  right: 0;
15  top: 0;
16}
17
18#mainview {
19  -webkit-box-align: stretch;
20  bottom: 0;
21  left: 0;
22  margin: 0;
23  position: absolute;
24  right: 0;
25  top: 0;
26  z-index: 1;
27}
28
29#mainview-content {
30  min-height: 100%;
31  position: relative;
32}
33
34#page-container {
35  box-sizing: border-box;
36  max-width: 888px;
37  min-width: 600px;
38}
39
40body.uber-frame #searchBox {
41  position: fixed;
42  z-index: 4;
43}
44
45div.disabled {
46  color: #999;
47}
48
49.settings-row {
50  display: block;
51  margin: 0.65em 0;
52}
53
54.hbox {
55  -webkit-box-orient: horizontal;
56  display: -webkit-box;
57}
58
59.vbox {
60  -webkit-box-orient: vertical;
61  display: -webkit-box;
62}
63
64.box-align-center {
65  -webkit-box-align: center;
66}
67
68.stretch {
69  -webkit-box-flex: 1;
70}
71
72.frozen {
73  position: fixed;
74}
75
76#overlay-container-1 {
77  z-index: 11;
78}
79#overlay-container-2 {
80  z-index: 12;
81}
82#overlay-container-3 {
83  z-index: 13;
84}
85
86.raw-button,
87.raw-button:hover,
88.raw-button:active {
89  -webkit-box-shadow: none;
90  background-color: transparent;
91  background-repeat: no-repeat;
92  border: none;
93  min-width: 0;
94  padding: 1px 6px;
95}
96
97.bottom-strip {
98  border-top: none;
99  bottom: 0;
100  padding: 12px;
101  position: absolute;
102  right: 0;
103}
104
105/* Omit top padding (currently only on #settings) whenever the search page is
106 * showing.
107 */
108#searchPage:not([hidden]) + #settings {
109  padding-top: 0;
110}
111
112.page list {
113  /* Min height is a multiple of the list item height (32) */
114  min-height: 192px;
115}
116
117.option {
118  margin-top: 0;
119}
120
121.transparent {
122  opacity: 0;
123}
124
125.touch-slider {
126  -webkit-appearance: slider-horizontal;
127}
128
129.settings-list,
130.settings-list-empty {
131  border: 1px solid #d9d9d9;
132  border-radius: 2px;
133}
134
135.settings-list-empty {
136  background-color: #f4f4f4;
137  box-sizing: border-box;
138  min-height: 125px;
139  padding-left: 20px;
140  padding-top: 20px;
141}
142
143
144/* Editable text field properties */
145.editable-text-field > * {
146  -webkit-box-align: center;
147  -webkit-transition: 150ms background-color;
148  border: none;
149  box-sizing: border-box;
150  display: -webkit-box;
151  height: 20px;
152  margin: 0;
153}
154
155.editable-text-field > .spacer {
156  /* The above height rule should not apply to spacers. */
157  height: 0;
158}
159
160.editable-text-field .editable-text {
161  padding: 2px 3px;
162}
163
164.editable-text-field .static-text {
165  height: 24px;
166  overflow: hidden;
167  padding: 3px 4px;
168  text-overflow: ellipsis;
169  white-space: nowrap;
170}
171
172.editable-text-field:not([editable]) > [displaymode='edit'] {
173  display: none;
174}
175
176.editable-text-field[editable] > [displaymode='static'] {
177  display: none;
178}
179
180.editable-text-field[empty] > input[type='text'] {
181  color: #ccc;
182  font-style: italic;
183}
184
185.editable-text-field[disabled] {
186  opacity: 0.6;
187}
188
189/* Editable List properties */
190list > * {
191  -webkit-box-align: center;
192  -webkit-transition: 150ms background-color;
193  border: none;
194  border-radius: 0;  /* TODO(dbeam): Is this necessary? */
195  box-sizing: border-box;
196  display: -webkit-box;
197  height: 32px;
198  margin: 0;
199}
200
201list > .spacer {
202  /* The above height rule should not apply to spacers. When redraw is called
203     on the list they will be given an explicit element height but this ensures
204     they have 0 height to begin with. */
205  height: 0;
206}
207
208list:not([disabled]) > :hover {
209  background-color: rgb(228, 236, 247);
210}
211
212/* TODO(stuartmorgan): Once this becomes the list style for other WebUI pages
213 * these rules can be simplified (since they wont need to override other rules).
214 */
215
216list:not([hasElementFocus]) > [selected],
217list:not([hasElementFocus]) > [lead][selected] {
218  background-color: #d0d0d0;
219  background-image: none;
220}
221
222list[hasElementFocus] > [selected],
223list[hasElementFocus] > [lead][selected],
224list:not([hasElementFocus]) > [selected]:hover,
225list:not([hasElementFocus]) > [selected][lead]:hover {
226  background-color: rgb(187, 206, 233);
227  background-image: none;
228}
229
230list[hasElementFocus] > [lead],
231list[hasElementFocus] > [lead][selected] {
232  border-bottom: 1px solid rgb(120, 146, 180);
233  border-top: 1px solid rgb(120, 146, 180);
234}
235
236list[hasElementFocus] > [lead]:nth-child(2),
237list[hasElementFocus] > [lead][selected]:nth-child(2) {
238  border-top: 1px solid transparent;
239}
240
241list[hasElementFocus] > [lead]:nth-last-child(2),
242list[hasElementFocus] > [lead][selected]:nth-last-child(2) {
243  border-bottom: 1px solid transparent;
244}
245
246list[disabled] > [lead][selected],
247list[disabled]:focus > [lead][selected] {
248  border: none;
249}
250
251list[disabled] {
252  opacity: 0.6;
253}
254
255list > .heading {
256  color: #666;
257}
258
259list > .heading:hover {
260  background-color: transparent;
261  border-color: transparent;
262}
263
264list .deletable-item {
265  -webkit-box-align: center;
266}
267
268list .deletable-item > :first-child {
269  -webkit-box-align: center;
270  -webkit-box-flex: 1;
271  -webkit-padding-end: 5px;
272  display: -webkit-box;
273}
274
275list .row-delete-button {
276  -webkit-transition: 150ms opacity;
277  background-color: transparent;
278  /* TODO(stuartmorgan): Replace with real images once they are available. */
279  background-image: -webkit-image-set(
280      url('../../../../ui/resources/default_100_percent/close_2.png') 1x,
281      url('../../../../ui/resources/default_200_percent/close_2.png') 2x);
282  border: none;
283  display: block;
284  height: 16px;
285  opacity: 1;
286  width: 16px;
287}
288
289list > *:not(:hover):not([selected]):not([lead]) .row-delete-button,
290list:not([hasElementFocus]) > *:not(:hover):not([selected]) .row-delete-button,
291list[disabled] .row-delete-button,
292list .row-delete-button[disabled] {
293  opacity: 0;
294  pointer-events: none;
295}
296
297/* HostedApp entries use the disabled closing button to display the App's
298 * favicon, as an indicator that instead of deleting the permission here
299 * the user has to remove the hosted app.*/
300list div[role='listitem'][managedby='HostedApp'] .row-delete-button {
301  opacity: 1;
302}
303
304list .row-delete-button:hover {
305  background-image: -webkit-image-set(
306      url('../../../../ui/resources/default_100_percent/close_2_hover.png') 1x,
307      url('../../../../ui/resources/default_200_percent/close_2_hover.png') 2x);
308}
309
310list .row-delete-button:active {
311  background-image: -webkit-image-set(
312      url('../../../../ui/resources/default_100_percent/close_2_pressed.png')
313          1x,
314      url('../../../../ui/resources/default_200_percent/close_2_pressed.png')
315          2x);
316}
317
318list .static-text {
319  overflow: hidden;
320  text-overflow: ellipsis;
321  white-space: nowrap;
322}
323
324list[type='text'][inlineeditable] input {
325  box-sizing: border-box;
326  margin: 0;
327  width: 100%;
328}
329
330list > :not([editing]) [displaymode='edit'] {
331  display: none;
332}
333
334list > [editing] [displaymode='static'] {
335  display: none;
336}
337
338list > [editing] input:invalid {
339  /* TODO(stuartmorgan): Replace with validity badge */
340  background-color: pink;
341}
342
343.list-inline-button {
344  -webkit-appearance: none;
345  -webkit-transition: opacity 150ms;
346  background: rgb(138, 170, 237);
347  border: none;
348  border-radius: 2px;
349  color: white;
350  font-weight: bold;
351  opacity: 0.7;
352}
353
354.list-inline-button:hover {
355  opacity: 1;
356}
357
358.option-name {
359  padding-right: 5px;
360}
361
362html[dir=rtl].option-name {
363  padding-left: 5px;
364}
365
366.favicon-cell {
367  -webkit-padding-start: 20px;
368  background-position: left;
369  background-repeat: no-repeat;
370  background-size: 16px;
371}
372
373input[type='url'].favicon-cell {
374  -webkit-padding-start: 22px;
375  background-position-x: 4px;
376}
377
378html[dir=rtl] input.favicon-cell {
379  background-position-x: -webkit-calc(100% - 4px);
380}
381
382list .favicon-cell {
383  -webkit-margin-start: 7px;
384  -webkit-padding-start: 26px;
385  display: block;
386  overflow: hidden;
387  text-overflow: ellipsis;
388  white-space: nowrap;
389}
390
391html[dir=rtl] list .favicon-cell {
392  background-position: right;
393}
394
395html[enable-background-mode=false] #background-mode-section {
396 display: none;
397}
398
399/* UI Controls */
400
401/* LIST */
402list[hasElementFocus] {
403<if expr="not is_macosx">
404  outline: 1px solid rgba(0, 128, 256, 0.5);
405  outline-offset: -2px;
406</if>
407<if expr="is_macosx">
408  /* This matches the native list outline on Mac */
409  outline-color: rgb(117, 154, 217);
410  outline-offset: -1px;
411  outline-style: auto;
412  outline-width: 5px;
413</if>
414}
415
416.suboption {
417  -webkit-margin-start: 23px;
418}
419
420list.autocomplete-suggestions {
421  background-color: white;
422  border: 1px solid #aaa;
423  border-radius: 2px;
424  min-height: 0;
425  opacity: 0.9;
426  position: fixed;
427  z-index: 3;
428}
429
430list.autocomplete-suggestions > div {
431  height: auto;
432}
433
434list.autocomplete-suggestions:not([hasElementFocus]) > [selected],
435list.autocomplete-suggestions:not([hasElementFocus]) > [lead][selected] {
436  background-color: rgb(187, 206, 233);
437}
438
439html:not(.focus-outline-visible)
440:enabled:focus:-webkit-any(input[type='checkbox'], input[type='radio']) {
441  /* Cancel border-color for :focus specified in widgets.css. */
442  border-color: rgba(0, 0, 0, 0.25);
443}
444
445html:not([hasFlashPlugin]) .flash-plugin-area,
446/* If the Flash plug-in supports the NPP_ClearSiteData API, we don't need to
447 * show the link to the Flash storage settings manager:
448 */
449html[flashPluginSupportsClearSiteData] .flash-plugin-area,
450html:not([flashPluginSupportsClearSiteData]) .clear-plugin-lso-data-enabled,
451html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled,
452html:not([enablePepperFlashSettings]) .pepper-flash-settings {
453  display: none;
454}
455
456/* Controlled setting indicator and bubble. */
457
458.controlled-setting-with-label {
459  -webkit-box-align: center;
460  display: -webkit-box;
461  padding-bottom: 7px;
462  padding-top: 7px;
463}
464
465.controlled-setting-with-label > input + span {
466  -webkit-box-align: center;
467  -webkit-box-flex: 1;
468  -webkit-margin-start: 0.6em;
469  display: -webkit-box;
470}
471
472.controlled-setting-with-label > input:disabled + span label {
473  color: #999;
474}
475
476.controlled-setting-with-label label {
477  display: inline;
478  padding: 0;
479}
480
481input:-webkit-any([type='text'],[type='url'],:not([type])) +
482    .controlled-setting-indicator {
483  -webkit-margin-start: 5px;
484}
485
486.controlled-setting-indicator:not([controlled-by]) {
487  display: none;
488}
489
490.controlled-setting-indicator[controlled-by='policy'] > div {
491  background-image:
492      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY');
493}
494
495.controlled-setting-indicator[controlled-by='policy'] >
496    div:-webkit-any(:hover,.showing-bubble) {
497  background-image:
498      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
499}
500
501.controlled-setting-indicator[controlled-by='extension'] > div {
502  background-image:
503      url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_GRAY');
504}
505
506.controlled-setting-indicator[controlled-by='extension'] >
507    div:-webkit-any(:hover,.showing-bubble) {
508  background-image:
509      url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION');
510}
511
512.controlled-setting-indicator:-webkit-any([controlled-by='recommended'],
513    [controlled-by='hasRecommendation']) > div {
514  background-image:
515      url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_GRAY');
516}
517
518.controlled-setting-indicator:-webkit-any([controlled-by='recommended'],
519    [controlled-by='hasRecommendation']) >
520    div:-webkit-any(:hover,.showing-bubble) {
521  background-image:
522      url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED');
523}
524
525.controlled-setting-bubble-content {
526  -webkit-padding-start: 30px;
527  background-repeat: no-repeat;
528  background-size: 22px;
529  min-height: 32px;
530}
531
532.controlled-setting-bubble-content[controlled-by='policy'] {
533  background-image:
534      url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_LARGE');
535}
536
537.controlled-setting-bubble-content[controlled-by='extension'] {
538  background-image:
539      url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_LARGE');
540}
541
542.controlled-setting-bubble-content:-webkit-any([controlled-by='recommended'],
543    [controlled-by='hasRecommendation']) {
544  background-image:
545      url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_LARGE');
546}
547
548html[dir='rtl'] .controlled-setting-bubble-content {
549  background-position: right top;
550}
551
552.controlled-setting-bubble-action {
553  padding: 0 !important;
554}
555