OLD | NEW |
| (Empty) |
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 body { | |
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 | |
40 body.uber-frame #searchBox { | |
41 position: fixed; | |
42 z-index: 4; | |
43 } | |
44 | |
45 div.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 */ | |
190 list > * { | |
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 | |
201 list > .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 | |
208 list: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 | |
216 list:not([hasElementFocus]) > [selected], | |
217 list:not([hasElementFocus]) > [lead][selected] { | |
218 background-color: #d0d0d0; | |
219 background-image: none; | |
220 } | |
221 | |
222 list[hasElementFocus] > [selected], | |
223 list[hasElementFocus] > [lead][selected], | |
224 list:not([hasElementFocus]) > [selected]:hover, | |
225 list:not([hasElementFocus]) > [selected][lead]:hover { | |
226 background-color: rgb(187, 206, 233); | |
227 background-image: none; | |
228 } | |
229 | |
230 list[hasElementFocus] > [lead], | |
231 list[hasElementFocus] > [lead][selected] { | |
232 border-bottom: 1px solid rgb(120, 146, 180); | |
233 border-top: 1px solid rgb(120, 146, 180); | |
234 } | |
235 | |
236 list[hasElementFocus] > [lead]:nth-child(2), | |
237 list[hasElementFocus] > [lead][selected]:nth-child(2) { | |
238 border-top: 1px solid transparent; | |
239 } | |
240 | |
241 list[hasElementFocus] > [lead]:nth-last-child(2), | |
242 list[hasElementFocus] > [lead][selected]:nth-last-child(2) { | |
243 border-bottom: 1px solid transparent; | |
244 } | |
245 | |
246 list[disabled] > [lead][selected], | |
247 list[disabled]:focus > [lead][selected] { | |
248 border: none; | |
249 } | |
250 | |
251 list[disabled] { | |
252 opacity: 0.6; | |
253 } | |
254 | |
255 list > .heading { | |
256 color: #666; | |
257 } | |
258 | |
259 list > .heading:hover { | |
260 background-color: transparent; | |
261 border-color: transparent; | |
262 } | |
263 | |
264 list .deletable-item { | |
265 -webkit-box-align: center; | |
266 } | |
267 | |
268 list .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 | |
275 list .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_bar.png') 1x, | |
281 url('../../../../ui/resources/default_200_percent/close_bar.png') 2x); | |
282 border: none; | |
283 display: block; | |
284 height: 16px; | |
285 opacity: 1; | |
286 width: 16px; | |
287 } | |
288 | |
289 list > *:not(:hover):not([selected]):not([lead]) .row-delete-button, | |
290 list:not([hasElementFocus]) > *:not(:hover):not([selected]) .row-delete-button, | |
291 list[disabled] .row-delete-button, | |
292 list .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.*/ | |
300 list div[role='listitem'][managedby='HostedApp'] .row-delete-button { | |
301 opacity: 1; | |
302 } | |
303 | |
304 list .row-delete-button:hover { | |
305 background-image: -webkit-image-set( | |
306 url('../../../../ui/resources/default_100_percent/close_bar_hover.png') | |
307 1x, | |
308 url('../../../../ui/resources/default_200_percent/close_bar_hover.png') | |
309 2x); | |
310 } | |
311 | |
312 list .row-delete-button:active { | |
313 background-image: -webkit-image-set( | |
314 url('../../../../ui/resources/default_100_percent/close_bar_pressed.png') | |
315 1x, | |
316 url('../../../../ui/resources/default_200_percent/close_bar_pressed.png') | |
317 2x); | |
318 } | |
319 | |
320 list .static-text { | |
321 overflow: hidden; | |
322 text-overflow: ellipsis; | |
323 white-space: nowrap; | |
324 } | |
325 | |
326 list[type='text'][inlineeditable] input { | |
327 box-sizing: border-box; | |
328 margin: 0; | |
329 width: 100%; | |
330 } | |
331 | |
332 list > :not([editing]) [displaymode='edit'] { | |
333 display: none; | |
334 } | |
335 | |
336 list > [editing] [displaymode='static'] { | |
337 display: none; | |
338 } | |
339 | |
340 list > [editing] input:invalid { | |
341 /* TODO(stuartmorgan): Replace with validity badge */ | |
342 background-color: pink; | |
343 } | |
344 | |
345 .list-inline-button { | |
346 -webkit-appearance: none; | |
347 -webkit-transition: opacity 150ms; | |
348 background: rgb(138, 170, 237); | |
349 border: none; | |
350 border-radius: 2px; | |
351 color: white; | |
352 font-weight: bold; | |
353 opacity: 0.7; | |
354 } | |
355 | |
356 .list-inline-button:hover { | |
357 opacity: 1; | |
358 } | |
359 | |
360 .option-name { | |
361 padding-right: 5px; | |
362 } | |
363 | |
364 html[dir=rtl].option-name { | |
365 padding-left: 5px; | |
366 } | |
367 | |
368 .favicon-cell { | |
369 -webkit-padding-start: 20px; | |
370 background-position: left; | |
371 background-repeat: no-repeat; | |
372 } | |
373 | |
374 input[type='url'].favicon-cell { | |
375 -webkit-padding-start: 22px; | |
376 background-position-x: 4px; | |
377 } | |
378 | |
379 /* TODO(jhawkins): Use something better than 99.3% when CSS3 background | |
380 * positioning is available. | |
381 */ | |
382 html[dir=rtl] input.favicon-cell { | |
383 background-position-x: 99.3%; | |
384 } | |
385 | |
386 list .favicon-cell { | |
387 -webkit-margin-start: 7px; | |
388 -webkit-padding-start: 26px; | |
389 display: block; | |
390 overflow: hidden; | |
391 text-overflow: ellipsis; | |
392 white-space: nowrap; | |
393 } | |
394 | |
395 html[dir=rtl] list .favicon-cell { | |
396 background-position: right; | |
397 } | |
398 | |
399 html[enable-background-mode=false] #background-mode-section { | |
400 display: none; | |
401 } | |
402 | |
403 /* UI Controls */ | |
404 | |
405 /* LIST */ | |
406 list[hasElementFocus] { | |
407 <if expr="not is_macosx"> | |
408 outline: 1px solid rgba(0, 128, 256, 0.5); | |
409 outline-offset: -2px; | |
410 </if> | |
411 <if expr="is_macosx"> | |
412 /* This matches the native list outline on Mac */ | |
413 outline-color: rgb(117, 154, 217); | |
414 outline-offset: -1px; | |
415 outline-style: auto; | |
416 outline-width: 5px; | |
417 </if> | |
418 } | |
419 | |
420 .suboption { | |
421 -webkit-margin-start: 23px; | |
422 } | |
423 | |
424 list.autocomplete-suggestions { | |
425 background-color: white; | |
426 border: 1px solid #aaa; | |
427 border-radius: 2px; | |
428 min-height: 0; | |
429 opacity: 0.9; | |
430 position: fixed; | |
431 z-index: 3; | |
432 } | |
433 | |
434 list.autocomplete-suggestions > div { | |
435 height: auto; | |
436 } | |
437 | |
438 list.autocomplete-suggestions:not([hasElementFocus]) > [selected], | |
439 list.autocomplete-suggestions:not([hasElementFocus]) > [lead][selected] { | |
440 background-color: rgb(187, 206, 233); | |
441 } | |
442 | |
443 html:not([hasFlashPlugin]) .flash-plugin-area, | |
444 /* If the Flash plug-in supports the NPP_ClearSiteData API, we don't need to | |
445 * show the link to the Flash storage settings manager: | |
446 */ | |
447 html[flashPluginSupportsClearSiteData] .flash-plugin-area, | |
448 html:not([flashPluginSupportsClearSiteData]) .clear-plugin-lso-data-enabled, | |
449 html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled, | |
450 html:not([enablePepperFlashSettings]) .pepper-flash-settings { | |
451 display: none; | |
452 } | |
453 | |
454 /* Controlled setting indicator and bubble. */ | |
455 .controlled-setting-indicator { | |
456 display: inline-block; | |
457 /* Establish a containing block for absolutely positioning the bubble. */ | |
458 position: relative; | |
459 vertical-align: text-bottom; | |
460 } | |
461 | |
462 .controlled-setting-indicator[controlled-by] summary { | |
463 background-size: contain; | |
464 height: 16px; | |
465 width: 16px; | |
466 } | |
467 | |
468 .controlled-setting-indicator summary::-webkit-details-marker { | |
469 display: none; | |
470 } | |
471 | |
472 .controlled-setting-indicator[controlled-by='policy'] summary { | |
473 background-image: | |
474 url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY'); | |
475 background-size: 16px; | |
476 } | |
477 | |
478 .controlled-setting-indicator[controlled-by='policy'] summary:hover { | |
479 background-image: | |
480 url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY'); | |
481 background-size: 16px; | |
482 } | |
483 | |
484 .controlled-setting-indicator[controlled-by='extension'] summary { | |
485 background-image: | |
486 url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_GRAY'); | |
487 background-size: 16px; | |
488 } | |
489 | |
490 .controlled-setting-indicator[controlled-by='extension'] summary:hover { | |
491 background-image: | |
492 url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION'); | |
493 background-size: 16px; | |
494 } | |
495 | |
496 .controlled-setting-indicator[controlled-by='recommended'] summary { | |
497 background-image: | |
498 url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_GRAY'); | |
499 background-size: 16px; | |
500 } | |
501 | |
502 .controlled-setting-indicator[controlled-by='recommended'] summary:hover { | |
503 background-image: | |
504 url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED'); | |
505 background-size: 16px; | |
506 } | |
507 | |
508 .controlled-setting-bubble { | |
509 -webkit-margin-start: -20px; | |
510 background-color: white; | |
511 border: 1px solid #ccc; | |
512 border-radius: 4px; | |
513 box-shadow: 0 2px 2px #ddd; | |
514 margin-top: 10px; | |
515 padding: 10px; | |
516 position: absolute; | |
517 top: 50%; | |
518 z-index: 10; | |
519 } | |
520 | |
521 html[dir='ltr'] .controlled-setting-bubble { | |
522 left: 50%; | |
523 } | |
524 | |
525 html[dir='rtl'] .controlled-setting-bubble { | |
526 right: 50%; | |
527 } | |
528 | |
529 .controlled-setting-bubble::before { | |
530 -webkit-margin-start: 4px; | |
531 border-color: #ccc transparent; | |
532 border-style: solid; | |
533 border-width: 0 5px 5px; | |
534 content: ''; | |
535 position: absolute; | |
536 top: -5px; | |
537 } | |
538 | |
539 .controlled-setting-bubble::after { | |
540 -webkit-margin-start: 5px; | |
541 border-color: white transparent; | |
542 border-style: solid; | |
543 border-width: 0 4px 4px; | |
544 content: ''; | |
545 position: absolute; | |
546 top: -4px; | |
547 } | |
548 | |
549 .controlled-setting-bubble-text { | |
550 -webkit-padding-start: 30px; | |
551 background-repeat: no-repeat; | |
552 margin: 0; | |
553 min-height: 32px; | |
554 min-width: 200px; | |
555 } | |
556 | |
557 .controlled-setting-indicator[controlled-by='policy'] | |
558 .controlled-setting-bubble-text { | |
559 background-image: | |
560 url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_LARGE'); | |
561 background-size: 22px; | |
562 } | |
563 | |
564 .controlled-setting-indicator[controlled-by='extension'] | |
565 .controlled-setting-bubble-text { | |
566 background-image: | |
567 url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_LARGE'); | |
568 background-size: 22px; | |
569 } | |
570 | |
571 .controlled-setting-indicator[controlled-by='recommended'] | |
572 .controlled-setting-bubble-text { | |
573 background-image: | |
574 url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_LARGE'); | |
575 background-size: 22px; | |
576 } | |
577 | |
578 html[dir='rtl'] .controlled-setting-bubble-text { | |
579 background-position: right top; | |
580 } | |
581 | |
582 .controlled-setting-bubble-action { | |
583 padding: 0 !important; | |
584 } | |
OLD | NEW |