src/chrome/browser/resources/options/options_page.css

   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_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
 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_2_hover.png') 1x,
 307       url('../../../../ui/resources/default_200_percent/close_2_hover.png') 2x);
 308 }
 309
 310 list .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
 318 list .static-text {
 319   overflow: hidden;
 320   text-overflow: ellipsis;
 321   white-space: nowrap;
 322 }
 323
 324 list[type='text'][inlineeditable] input {
 325   box-sizing: border-box;
 326   margin: 0;
 327   width: 100%;
 328 }
 329
 330 list > :not([editing]) [displaymode='edit'] {
 331   display: none;
 332 }
 333
 334 list > [editing] [displaymode='static'] {
 335   display: none;
 336 }
 337
 338 list > [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
 362 html[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
 373 input[type='url'].favicon-cell {
 374   -webkit-padding-start: 22px;
 375   background-position-x: 4px;
 376 }
 377
 378 html[dir=rtl] input.favicon-cell {
 379   background-position-x: -webkit-calc(100% - 4px);
 380 }
 381
 382 list .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
 391 html[dir=rtl] list .favicon-cell {
 392   background-position: right;
 393 }
 394
 395 html[enable-background-mode=false] #background-mode-section {
 396  display: none;
 397 }
 398
 399 /* UI Controls */
 400
 401 /* LIST */
 402 list[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
 420 list.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
 430 list.autocomplete-suggestions > div {
 431   height: auto;
 432 }
 433
 434 list.autocomplete-suggestions:not([hasElementFocus]) > [selected],
 435 list.autocomplete-suggestions:not([hasElementFocus]) > [lead][selected] {
 436   background-color: rgb(187, 206, 233);
 437 }
 438
 439 html: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
 445 html: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  */
 449 html[flashPluginSupportsClearSiteData] .flash-plugin-area,
 450 html:not([flashPluginSupportsClearSiteData]) .clear-plugin-lso-data-enabled,
 451 html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled,
 452 html: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
 481 input:-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='owner'] > div {
 502   background-image:
 503       url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY');
 504 }
 505
 506 .controlled-setting-indicator[controlled-by='owner'] >
 507     div:-webkit-any(:hover, .showing-bubble) {
 508   background-image:
 509       url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
 510 }
 511
 512 .controlled-setting-indicator[controlled-by='extension'] > div {
 513   background-image:
 514       url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_GRAY');
 515 }
 516
 517 .controlled-setting-indicator[controlled-by='extension'] >
 518     div:-webkit-any(:hover, .showing-bubble) {
 519   background-image:
 520       url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION');
 521 }
 522
 523 .controlled-setting-indicator:-webkit-any([controlled-by='recommended'],
 524     [controlled-by='hasRecommendation']) > div {
 525   background-image:
 526       url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_GRAY');
 527 }
 528
 529 .controlled-setting-indicator:-webkit-any([controlled-by='recommended'],
 530     [controlled-by='hasRecommendation']) >
 531     div:-webkit-any(:hover,.showing-bubble) {
 532   background-image:
 533       url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED');
 534 }
 535
 536 .controlled-setting-bubble-content {
 537   -webkit-padding-start: 30px;
 538   background-repeat: no-repeat;
 539   background-size: 22px;
 540   min-height: 32px;
 541 }
 542
 543 .controlled-setting-bubble-content[controlled-by='policy'] {
 544   background-image:
 545       url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_LARGE');
 546 }
 547
 548 .controlled-setting-bubble-content[controlled-by='owner'] {
 549   background-image:
 550       url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_LARGE');
 551 }
 552
 553 .controlled-setting-bubble-content[controlled-by='extension'] {
 554   background-image:
 555       url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_LARGE');
 556 }
 557
 558 .controlled-setting-bubble-content:-webkit-any([controlled-by='recommended'],
 559     [controlled-by='hasRecommendation']) {
 560   background-image:
 561       url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_LARGE');
 562 }
 563
 564 html[dir='rtl'] .controlled-setting-bubble-content {
 565   background-position: right top;
 566 }
 567
 568 .controlled-setting-bubble-action {
 569   padding: 0 !important;
 570 }