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   background-color: transparent;
  76   background-repeat: no-repeat;
  77   border: none;
  78   box-shadow: 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   outline: none;
 249 }
 250
 251 list .deletable-item > :first-child {
 252   -webkit-box-align: center;
 253   -webkit-box-flex: 1;
 254   -webkit-padding-end: 5px;
 255   display: -webkit-box;
 256 }
 257
 258 list .row-delete-button {
 259   -webkit-transition: 150ms opacity;
 260   background-color: transparent;
 261   /* TODO(stuartmorgan): Replace with real images once they are available. */
 262   background-image: -webkit-image-set(
 263       url(../../../../ui/resources/default_100_percent/close_2.png) 1x,
 264       url(../../../../ui/resources/default_200_percent/close_2.png) 2x);
 265   border: none;
 266   display: block;
 267   height: 16px;
 268   opacity: 1;
 269   width: 16px;
 270 }
 271
 272 list > *:not(:hover):not([selected]):not([lead]) .row-delete-button,
 273 list:not([has-element-focus]) > *:not(:hover):not([selected])
 274     .row-delete-button,
 275 list[disabled] .row-delete-button,
 276 list .row-delete-button[disabled] {
 277   opacity: 0;
 278   pointer-events: none;
 279 }
 280
 281 /* HostedApp entries use the disabled closing button to display the App's
 282  * favicon, as an indicator that instead of deleting the permission here
 283  * the user has to remove the hosted app.*/
 284 list div[role='listitem'][managedby='HostedApp'] .row-delete-button {
 285   opacity: 1;
 286 }
 287
 288 list .row-delete-button:hover {
 289   background-image: -webkit-image-set(
 290       url(../../../../ui/resources/default_100_percent/close_2_hover.png) 1x,
 291       url(../../../../ui/resources/default_200_percent/close_2_hover.png) 2x);
 292 }
 293
 294 list .row-delete-button:active {
 295   background-image: -webkit-image-set(
 296       url(../../../../ui/resources/default_100_percent/close_2_pressed.png)
 297           1x,
 298       url(../../../../ui/resources/default_200_percent/close_2_pressed.png)
 299           2x);
 300 }
 301
 302 list .static-text {
 303   overflow: hidden;
 304   text-overflow: ellipsis;
 305   white-space: nowrap;
 306 }
 307
 308 list[type='text'][inlineeditable] input {
 309   box-sizing: border-box;
 310   margin: 0;
 311   width: 100%;
 312 }
 313
 314 list > :not([editing]) [displaymode='edit'] {
 315   display: none;
 316 }
 317
 318 list > [editing] [displaymode='static'] {
 319   /* Don't use display:none or visibility:hidden because we need to keep an
 320    * element focusable.
 321    * We shrink only height.  We don't shrink width to avoid to change the size
 322    * of containing boxes.
 323    */
 324   border-bottom: 0 !important;
 325   border-top: 0 !important;
 326   height: 0 !important;
 327   margin-bottom: 0 !important;
 328   margin-top: 0 !important;
 329   overflow: hidden;
 330   pointer-events: none;
 331 }
 332
 333 list > [editing] input:invalid {
 334   /* TODO(stuartmorgan): Replace with validity badge */
 335   background-color: pink;
 336 }
 337
 338 .list-inline-button {
 339   -webkit-appearance: none;
 340   -webkit-transition: opacity 150ms;
 341   background: rgb(138, 170, 237);
 342   border: none;
 343   border-radius: 2px;
 344   color: white;
 345   font-weight: bold;
 346   opacity: 0.7;
 347 }
 348
 349 .list-inline-button:hover {
 350   opacity: 1;
 351 }
 352
 353 .option-name {
 354   -webkit-padding-end: 5px;
 355 }
 356
 357 .favicon-cell {
 358   -webkit-padding-start: 20px;
 359   background-position: left;
 360   background-repeat: no-repeat;
 361   background-size: 16px;
 362 }
 363
 364 input[type='url'].favicon-cell {
 365   -webkit-padding-start: 22px;
 366   background-position-x: 4px;
 367 }
 368
 369 html[dir=rtl] input.favicon-cell,
 370 input[dir=rtl].favicon-cell {
 371   background-position-x: -webkit-calc(100% - 4px);
 372 }
 373
 374 list .favicon-cell {
 375   -webkit-margin-start: 7px;
 376   -webkit-padding-start: 26px;
 377   display: block;
 378   overflow: hidden;
 379   text-overflow: ellipsis;
 380   white-space: nowrap;
 381 }
 382
 383 html[dir=rtl] list .favicon-cell {
 384   background-position: right;
 385 }
 386
 387 html[enable-background-mode=false] #background-mode-section {
 388  display: none;
 389 }
 390
 391 /* UI Controls */
 392
 393 /* LIST */
 394 .settings-list[has-element-focus] {
 395 <if expr="not is_macosx">
 396   outline: 1px solid rgba(0, 128, 256, 0.5);
 397   outline-offset: -2px;
 398 </if>
 399 <if expr="is_macosx">
 400   /* This matches the native list outline on Mac */
 401   outline-color: rgb(117, 154, 217);
 402   outline-offset: -1px;
 403   outline-style: auto;
 404   outline-width: 5px;
 405 </if>
 406 }
 407
 408 .suboption {
 409   -webkit-margin-start: 23px;
 410 }
 411
 412 list.autocomplete-suggestions {
 413   background-color: white;
 414   border: 1px solid #aaa;
 415   border-radius: 2px;
 416   min-height: 0;
 417   opacity: 0.9;
 418   position: fixed;
 419   z-index: 3;
 420 }
 421
 422 list.autocomplete-suggestions > div {
 423   height: auto;
 424 }
 425
 426 list.autocomplete-suggestions:not([has-element-focus]) > [selected],
 427 list.autocomplete-suggestions:not([has-element-focus]) > [lead][selected] {
 428   background-color: rgb(187, 206, 233);
 429 }
 430
 431 html:not(.focus-outline-visible)
 432 :enabled:focus:-webkit-any(input[type='checkbox'], input[type='radio']) {
 433   /* Cancel border-color for :focus specified in widgets.css. */
 434   border-color: rgba(0, 0, 0, 0.25);
 435 }
 436
 437 html:not([hasFlashPlugin]) .flash-plugin-area,
 438 /* If the Flash plug-in supports the NPP_ClearSiteData API, we don't need to
 439  * show the link to the Flash storage settings manager:
 440  */
 441 html[flashPluginSupportsClearSiteData] .flash-plugin-area,
 442 html:not([flashPluginSupportsClearSiteData]) .clear-plugin-lso-data-enabled,
 443 html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled,
 444 html:not([enablePepperFlashSettings]) .pepper-flash-settings {
 445   display: none;
 446 }
 447
 448 .standalone-action-link {
 449   padding: 0;
 450 }
 451
 452 :-webkit-any(.checkbox, .radio) label + a {
 453   display: inline-block;
 454   /* Matches padding of -webkit-any(.checkbox, .radio) */
 455   padding-bottom: 7px;
 456   vertical-align: bottom;
 457 }