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

Side by Side Diff: chrome/browser/resources/options2/options_page.css

Issue 10809005: Options: Rename chrome/browser/resources/options2 -> chrome/browser/resources/options. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Fix. Created 8 years, 4 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 | Annotate | Revision Log
OLDNEW
(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 }
OLDNEW
« no previous file with comments | « chrome/browser/resources/options2/options_focus_manager.js ('k') | chrome/browser/resources/options2/options_page.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698