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([has-element-focus]) > [selected],
 217 list:not([has-element-focus]) > [lead][selected] {
 218   background-color: #d0d0d0;
 219   background-image: none;
 220 }
 221
 222 list[has-element-focus] > [selected],
 223 list[has-element-focus] > [lead][selected],
 224 list:not([has-element-focus]) > [selected]:hover,
 225 list:not([has-element-focus]) > [selected][lead]:hover {
 226   background-color: rgb(187, 206, 233);
 227   background-image: none;
 228 }
 229
 230 .settings-list[has-element-focus] > [lead],
 231 .settings-list[has-element-focus] > [lead][selected] {
 232   border-bottom: 1px solid rgb(120, 146, 180);
 233   border-top: 1px solid rgb(120, 146, 180);
 234 }
 235
 236 .settings-list[has-element-focus] > [lead]:nth-child(2),
 237 .settings-list[has-element-focus] > [lead][selected]:nth-child(2) {
 238   border-top: 1px solid transparent;
 239 }
 240
 241 .settings-list[has-element-focus] > [lead]:nth-last-child(2),
 242 .settings-list[has-element-focus] > [lead][selected]:nth-last-child(2) {
 243   border-bottom: 1px solid transparent;
 244 }
 245
 246 .settings-list[disabled] > [lead][selected],
 247 .settings-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([has-element-focus]) > *:not(:hover):not([selected])
 291     .row-delete-button,
 292 list[disabled] .row-delete-button,
 293 list .row-delete-button[disabled] {
 294   opacity: 0;
 295   pointer-events: none;
 296 }
 297
 298 /* HostedApp entries use the disabled closing button to display the App's
 299  * favicon, as an indicator that instead of deleting the permission here
 300  * the user has to remove the hosted app.*/
 301 list div[role='listitem'][managedby='HostedApp'] .row-delete-button {
 302   opacity: 1;
 303 }
 304
 305 list .row-delete-button:hover {
 306   background-image: -webkit-image-set(
 307       url('../../../../ui/resources/default_100_percent/close_2_hover.png') 1x,
 308       url('../../../../ui/resources/default_200_percent/close_2_hover.png') 2x);
 309 }
 310
 311 list .row-delete-button:active {
 312   background-image: -webkit-image-set(
 313       url('../../../../ui/resources/default_100_percent/close_2_pressed.png')
 314           1x,
 315       url('../../../../ui/resources/default_200_percent/close_2_pressed.png')
 316           2x);
 317 }
 318
 319 list .static-text {
 320   overflow: hidden;
 321   text-overflow: ellipsis;
 322   white-space: nowrap;
 323 }
 324
 325 list[type='text'][inlineeditable] input {
 326   box-sizing: border-box;
 327   margin: 0;
 328   width: 100%;
 329 }
 330
 331 list > :not([editing]) [displaymode='edit'] {
 332   display: none;
 333 }
 334
 335 list > [editing] [displaymode='static'] {
 336   /* Don't use display:none because we need to keep an element focusable. */
 337   left: 0;
 338   pointer-events: none;
 339   position: absolute;
 340   visibility: hidden;
 341 }
 342
 343 list > [editing] input:invalid {
 344   /* TODO(stuartmorgan): Replace with validity badge */
 345   background-color: pink;
 346 }
 347
 348 .list-inline-button {
 349   -webkit-appearance: none;
 350   -webkit-transition: opacity 150ms;
 351   background: rgb(138, 170, 237);
 352   border: none;
 353   border-radius: 2px;
 354   color: white;
 355   font-weight: bold;
 356   opacity: 0.7;
 357 }
 358
 359 .list-inline-button:hover {
 360   opacity: 1;
 361 }
 362
 363 .option-name {
 364   padding-right: 5px;
 365 }
 366
 367 html[dir=rtl].option-name {
 368   padding-left: 5px;
 369 }
 370
 371 .favicon-cell {
 372   -webkit-padding-start: 20px;
 373   background-position: left;
 374   background-repeat: no-repeat;
 375   background-size: 16px;
 376 }
 377
 378 input[type='url'].favicon-cell {
 379   -webkit-padding-start: 22px;
 380   background-position-x: 4px;
 381 }
 382
 383 html[dir=rtl] input.favicon-cell {
 384   background-position-x: -webkit-calc(100% - 4px);
 385 }
 386
 387 list .favicon-cell {
 388   -webkit-margin-start: 7px;
 389   -webkit-padding-start: 26px;
 390   display: block;
 391   overflow: hidden;
 392   text-overflow: ellipsis;
 393   white-space: nowrap;
 394 }
 395
 396 html[dir=rtl] list .favicon-cell {
 397   background-position: right;
 398 }
 399
 400 html[enable-background-mode=false] #background-mode-section {
 401  display: none;
 402 }
 403
 404 /* UI Controls */
 405
 406 /* LIST */
 407 .settings-list[has-element-focus] {
 408 <if expr="not is_macosx">
 409   outline: 1px solid rgba(0, 128, 256, 0.5);
 410   outline-offset: -2px;
 411 </if>
 412 <if expr="is_macosx">
 413   /* This matches the native list outline on Mac */
 414   outline-color: rgb(117, 154, 217);
 415   outline-offset: -1px;
 416   outline-style: auto;
 417   outline-width: 5px;
 418 </if>
 419 }
 420
 421 .suboption {
 422   -webkit-margin-start: 23px;
 423 }
 424
 425 list.autocomplete-suggestions {
 426   background-color: white;
 427   border: 1px solid #aaa;
 428   border-radius: 2px;
 429   min-height: 0;
 430   opacity: 0.9;
 431   position: fixed;
 432   z-index: 3;
 433 }
 434
 435 list.autocomplete-suggestions > div {
 436   height: auto;
 437 }
 438
 439 list.autocomplete-suggestions:not([has-element-focus]) > [selected],
 440 list.autocomplete-suggestions:not([has-element-focus]) > [lead][selected] {
 441   background-color: rgb(187, 206, 233);
 442 }
 443
 444 html:not(.focus-outline-visible)
 445 :enabled:focus:-webkit-any(input[type='checkbox'], input[type='radio']) {
 446   /* Cancel border-color for :focus specified in widgets.css. */
 447   border-color: rgba(0, 0, 0, 0.25);
 448 }
 449
 450 html:not([hasFlashPlugin]) .flash-plugin-area,
 451 /* If the Flash plug-in supports the NPP_ClearSiteData API, we don't need to
 452  * show the link to the Flash storage settings manager:
 453  */
 454 html[flashPluginSupportsClearSiteData] .flash-plugin-area,
 455 html:not([flashPluginSupportsClearSiteData]) .clear-plugin-lso-data-enabled,
 456 html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled,
 457 html:not([enablePepperFlashSettings]) .pepper-flash-settings {
 458   display: none;
 459 }