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   -webkit-padding-end: 5px;
 347 }
 348
 349 .favicon-cell {
 350   -webkit-padding-start: 20px;
 351   background-position: left;
 352   background-repeat: no-repeat;
 353   background-size: 16px;
 354 }
 355
 356 input[type='url'].favicon-cell {
 357   -webkit-padding-start: 22px;
 358   background-position-x: 4px;
 359 }
 360
 361 html[dir=rtl] input.favicon-cell {
 362   background-position-x: -webkit-calc(100% - 4px);
 363 }
 364
 365 list .favicon-cell {
 366   -webkit-margin-start: 7px;
 367   -webkit-padding-start: 26px;
 368   display: block;
 369   overflow: hidden;
 370   text-overflow: ellipsis;
 371   white-space: nowrap;
 372 }
 373
 374 html[dir=rtl] list .favicon-cell {
 375   background-position: right;
 376 }
 377
 378 html[enable-background-mode=false] #background-mode-section {
 379  display: none;
 380 }
 381
 382 /* UI Controls */
 383
 384 /* LIST */
 385 .settings-list[has-element-focus] {
 386 <if expr="not is_macosx">
 387   outline: 1px solid rgba(0, 128, 256, 0.5);
 388   outline-offset: -2px;
 389 </if>
 390 <if expr="is_macosx">
 391   /* This matches the native list outline on Mac */
 392   outline-color: rgb(117, 154, 217);
 393   outline-offset: -1px;
 394   outline-style: auto;
 395   outline-width: 5px;
 396 </if>
 397 }
 398
 399 .suboption {
 400   -webkit-margin-start: 23px;
 401 }
 402
 403 list.autocomplete-suggestions {
 404   background-color: white;
 405   border: 1px solid #aaa;
 406   border-radius: 2px;
 407   min-height: 0;
 408   opacity: 0.9;
 409   position: fixed;
 410   z-index: 3;
 411 }
 412
 413 list.autocomplete-suggestions > div {
 414   height: auto;
 415 }
 416
 417 list.autocomplete-suggestions:not([has-element-focus]) > [selected],
 418 list.autocomplete-suggestions:not([has-element-focus]) > [lead][selected] {
 419   background-color: rgb(187, 206, 233);
 420 }
 421
 422 html:not(.focus-outline-visible)
 423 :enabled:focus:-webkit-any(input[type='checkbox'], input[type='radio']) {
 424   /* Cancel border-color for :focus specified in widgets.css. */
 425   border-color: rgba(0, 0, 0, 0.25);
 426 }
 427
 428 html:not([hasFlashPlugin]) .flash-plugin-area,
 429 /* If the Flash plug-in supports the NPP_ClearSiteData API, we don't need to
 430  * show the link to the Flash storage settings manager:
 431  */
 432 html[flashPluginSupportsClearSiteData] .flash-plugin-area,
 433 html:not([flashPluginSupportsClearSiteData]) .clear-plugin-lso-data-enabled,
 434 html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled,
 435 html:not([enablePepperFlashSettings]) .pepper-flash-settings {
 436   display: none;
 437 }