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 #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 .raw-button,
  73 .raw-button:hover,
  74 .raw-button:active {
  75   -webkit-box-shadow: none;
  76   background-color: transparent;
  77   background-repeat: no-repeat;
  78   border: none;
  79   min-width: 0;
  80   padding: 1px 6px;
  81 }
  82
  83 .bottom-strip {
  84   border-top: none;
  85   bottom: 0;
  86   padding: 12px;
  87   position: absolute;
  88   right: 0;
  89 }
  90
  91 /* Omit top padding (currently only on #settings) whenever the search page is
  92  * showing.
  93  */
  94 #searchPage:not([hidden]) + #settings {
  95   padding-top: 0;
  96 }
  97
  98 .page list {
  99   /* Min height is a multiple of the list item height (32) */
 100   min-height: 192px;
 101 }
 102
 103 .option {
 104   margin-top: 0;
 105 }
 106
 107 .touch-slider {
 108   -webkit-appearance: slider-horizontal;
 109 }
 110
 111 .settings-list,
 112 .settings-list-empty {
 113   border: 1px solid #d9d9d9;
 114   border-radius: 2px;
 115 }
 116
 117 .settings-list-empty {
 118   background-color: #f4f4f4;
 119   box-sizing: border-box;
 120   min-height: 125px;
 121   padding-left: 20px;
 122   padding-top: 20px;
 123 }
 124
 125
 126 /* Editable text field properties */
 127 .editable-text-field > * {
 128   -webkit-box-align: center;
 129   -webkit-transition: 150ms background-color;
 130   border: none;
 131   box-sizing: border-box;
 132   display: -webkit-box;
 133   height: 20px;
 134   margin: 0;
 135 }
 136
 137 .editable-text-field > .spacer {
 138   /* The above height rule should not apply to spacers. */
 139   height: 0;
 140 }
 141
 142 .editable-text-field .editable-text {
 143   padding: 2px 3px;
 144 }
 145
 146 .editable-text-field .static-text {
 147   height: 24px;
 148   overflow: hidden;
 149   padding: 3px 4px;
 150   text-overflow: ellipsis;
 151   white-space: nowrap;
 152 }
 153
 154 .editable-text-field:not([editable]) > [displaymode='edit'] {
 155   display: none;
 156 }
 157
 158 .editable-text-field[editable] > [displaymode='static'] {
 159   display: none;
 160 }
 161
 162 .editable-text-field[empty] > input[type='text'] {
 163   color: #ccc;
 164   font-style: italic;
 165 }
 166
 167 .editable-text-field[disabled] {
 168   opacity: 0.6;
 169 }
 170
 171 /* Editable List properties */
 172 list > * {
 173   -webkit-box-align: center;
 174   -webkit-transition: 150ms background-color;
 175   border: none;
 176   border-radius: 0;  /* TODO(dbeam): Is this necessary? */
 177   box-sizing: border-box;
 178   display: -webkit-box;
 179   height: 32px;
 180   margin: 0;
 181 }
 182
 183 list > .spacer {
 184   /* The above height rule should not apply to spacers. When redraw is called
 185      on the list they will be given an explicit element height but this ensures
 186      they have 0 height to begin with. */
 187   height: 0;
 188 }
 189
 190 list:not([disabled]) > :hover {
 191   background-color: rgb(228, 236, 247);
 192 }
 193
 194 /* TODO(stuartmorgan): Once this becomes the list style for other WebUI pages
 195  * these rules can be simplified (since they wont need to override other rules).
 196  */
 197
 198 list:not([has-element-focus]) > [selected],
 199 list:not([has-element-focus]) > [lead][selected] {
 200   background-color: #d0d0d0;
 201   background-image: none;
 202 }
 203
 204 list[has-element-focus] > [selected],
 205 list[has-element-focus] > [lead][selected],
 206 list:not([has-element-focus]) > [selected]:hover,
 207 list:not([has-element-focus]) > [selected][lead]:hover {
 208   background-color: rgb(187, 206, 233);
 209   background-image: none;
 210 }
 211
 212 .settings-list[has-element-focus] > [lead],
 213 .settings-list[has-element-focus] > [lead][selected] {
 214   border-bottom: 1px solid rgb(120, 146, 180);
 215   border-top: 1px solid rgb(120, 146, 180);
 216 }
 217
 218 .settings-list[has-element-focus] > [lead]:nth-child(2),
 219 .settings-list[has-element-focus] > [lead][selected]:nth-child(2) {
 220   border-top: 1px solid transparent;
 221 }
 222
 223 .settings-list[has-element-focus] > [lead]:nth-last-child(2),
 224 .settings-list[has-element-focus] > [lead][selected]:nth-last-child(2) {
 225   border-bottom: 1px solid transparent;
 226 }
 227
 228 .settings-list[disabled] > [lead][selected],
 229 .settings-list[disabled]:focus > [lead][selected] {
 230   border: none;
 231 }
 232
 233 list[disabled] {
 234   opacity: 0.6;
 235 }
 236
 237 list > .heading {
 238   color: #666;
 239 }
 240
 241 list > .heading:hover {
 242   background-color: transparent;
 243   border-color: transparent;
 244 }
 245
 246 list .deletable-item {
 247   -webkit-box-align: center;
 248 }
 249
 250 list .deletable-item > :first-child {
 251   -webkit-box-align: center;
 252   -webkit-box-flex: 1;
 253   -webkit-padding-end: 5px;
 254   display: -webkit-box;
 255 }
 256
 257 list .row-delete-button {
 258   -webkit-transition: 150ms opacity;
 259   background-color: transparent;
 260   /* TODO(stuartmorgan): Replace with real images once they are available. */
 261   background-image: -webkit-image-set(
 262       url('../../../../ui/resources/default_100_percent/close_2.png') 1x,
 263       url('../../../../ui/resources/default_200_percent/close_2.png') 2x);
 264   border: none;
 265   display: block;
 266   height: 16px;
 267   opacity: 1;
 268   width: 16px;
 269 }
 270
 271 list > *:not(:hover):not([selected]):not([lead]) .row-delete-button,
 272 list:not([has-element-focus]) > *:not(:hover):not([selected])
 273     .row-delete-button,
 274 list[disabled] .row-delete-button,
 275 list .row-delete-button[disabled] {
 276   opacity: 0;
 277   pointer-events: none;
 278 }
 279
 280 /* HostedApp entries use the disabled closing button to display the App's
 281  * favicon, as an indicator that instead of deleting the permission here
 282  * the user has to remove the hosted app.*/
 283 list div[role='listitem'][managedby='HostedApp'] .row-delete-button {
 284   opacity: 1;
 285 }
 286
 287 list .row-delete-button:hover {
 288   background-image: -webkit-image-set(
 289       url('../../../../ui/resources/default_100_percent/close_2_hover.png') 1x,
 290       url('../../../../ui/resources/default_200_percent/close_2_hover.png') 2x);
 291 }
 292
 293 list .row-delete-button:active {
 294   background-image: -webkit-image-set(
 295       url('../../../../ui/resources/default_100_percent/close_2_pressed.png')
 296           1x,
 297       url('../../../../ui/resources/default_200_percent/close_2_pressed.png')
 298           2x);
 299 }
 300
 301 list .static-text {
 302   overflow: hidden;
 303   text-overflow: ellipsis;
 304   white-space: nowrap;
 305 }
 306
 307 list[type='text'][inlineeditable] input {
 308   box-sizing: border-box;
 309   margin: 0;
 310   width: 100%;
 311 }
 312
 313 list > :not([editing]) [displaymode='edit'] {
 314   display: none;
 315 }
 316
 317 list > [editing] [displaymode='static'] {
 318   /* Don't use display:none because we need to keep an element focusable. */
 319   left: 0;
 320   pointer-events: none;
 321   position: absolute;
 322   visibility: hidden;
 323 }
 324
 325 list > [editing] input:invalid {
 326   /* TODO(stuartmorgan): Replace with validity badge */
 327   background-color: pink;
 328 }
 329
 330 .list-inline-button {
 331   -webkit-appearance: none;
 332   -webkit-transition: opacity 150ms;
 333   background: rgb(138, 170, 237);
 334   border: none;
 335   border-radius: 2px;
 336   color: white;
 337   font-weight: bold;
 338   opacity: 0.7;
 339 }
 340
 341 .list-inline-button:hover {
 342   opacity: 1;
 343 }
 344
 345 .option-name {
 346   padding-right: 5px;
 347 }
 348
 349 html[dir=rtl].option-name {
 350   padding-left: 5px;
 351 }
 352
 353 .favicon-cell {
 354   -webkit-padding-start: 20px;
 355   background-position: left;
 356   background-repeat: no-repeat;
 357   background-size: 16px;
 358 }
 359
 360 input[type='url'].favicon-cell {
 361   -webkit-padding-start: 22px;
 362   background-position-x: 4px;
 363 }
 364
 365 html[dir=rtl] input.favicon-cell {
 366   background-position-x: -webkit-calc(100% - 4px);
 367 }
 368
 369 list .favicon-cell {
 370   -webkit-margin-start: 7px;
 371   -webkit-padding-start: 26px;
 372   display: block;
 373   overflow: hidden;
 374   text-overflow: ellipsis;
 375   white-space: nowrap;
 376 }
 377
 378 html[dir=rtl] list .favicon-cell {
 379   background-position: right;
 380 }
 381
 382 html[enable-background-mode=false] #background-mode-section {
 383  display: none;
 384 }
 385
 386 /* UI Controls */
 387
 388 /* LIST */
 389 .settings-list[has-element-focus] {
 390 <if expr="not is_macosx">
 391   outline: 1px solid rgba(0, 128, 256, 0.5);
 392   outline-offset: -2px;
 393 </if>
 394 <if expr="is_macosx">
 395   /* This matches the native list outline on Mac */
 396   outline-color: rgb(117, 154, 217);
 397   outline-offset: -1px;
 398   outline-style: auto;
 399   outline-width: 5px;
 400 </if>
 401 }
 402
 403 .suboption {
 404   -webkit-margin-start: 23px;
 405 }
 406
 407 list.autocomplete-suggestions {
 408   background-color: white;
 409   border: 1px solid #aaa;
 410   border-radius: 2px;
 411   min-height: 0;
 412   opacity: 0.9;
 413   position: fixed;
 414   z-index: 3;
 415 }
 416
 417 list.autocomplete-suggestions > div {
 418   height: auto;
 419 }
 420
 421 list.autocomplete-suggestions:not([has-element-focus]) > [selected],
 422 list.autocomplete-suggestions:not([has-element-focus]) > [lead][selected] {
 423   background-color: rgb(187, 206, 233);
 424 }
 425
 426 html:not(.focus-outline-visible)
 427 :enabled:focus:-webkit-any(input[type='checkbox'], input[type='radio']) {
 428   /* Cancel border-color for :focus specified in widgets.css. */
 429   border-color: rgba(0, 0, 0, 0.25);
 430 }
 431
 432 html:not([hasFlashPlugin]) .flash-plugin-area,
 433 /* If the Flash plug-in supports the NPP_ClearSiteData API, we don't need to
 434  * show the link to the Flash storage settings manager:
 435  */
 436 html[flashPluginSupportsClearSiteData] .flash-plugin-area,
 437 html:not([flashPluginSupportsClearSiteData]) .clear-plugin-lso-data-enabled,
 438 html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled,
 439 html:not([enablePepperFlashSettings]) .pepper-flash-settings {
 440   display: none;
 441 }