| /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| body { |
| position: relative; |
| } |
| |
| #main-content { |
| bottom: 0; |
| display: -webkit-box; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| } |
| |
| #mainview { |
| -webkit-box-align: stretch; |
| bottom: 0; |
| left: 0; |
| margin: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| z-index: 1; |
| } |
| |
| #mainview-content { |
| min-height: 100%; |
| position: relative; |
| } |
| |
| #page-container { |
| box-sizing: border-box; |
| max-width: 888px; |
| min-width: 600px; |
| } |
| |
| body.uber-frame #searchBox { |
| position: fixed; |
| z-index: 4; |
| } |
| |
| div.disabled { |
| color: #999; |
| } |
| |
| .settings-row { |
| display: block; |
| margin: 0.65em 0; |
| } |
| |
| .hbox { |
| -webkit-box-orient: horizontal; |
| display: -webkit-box; |
| } |
| |
| .vbox { |
| -webkit-box-orient: vertical; |
| display: -webkit-box; |
| } |
| |
| .box-align-center { |
| -webkit-box-align: center; |
| } |
| |
| .stretch { |
| -webkit-box-flex: 1; |
| } |
| |
| .frozen { |
| position: fixed; |
| } |
| |
| #overlay-container-1 { |
| z-index: 11; |
| } |
| #overlay-container-2 { |
| z-index: 12; |
| } |
| #overlay-container-3 { |
| z-index: 13; |
| } |
| |
| .raw-button, |
| .raw-button:hover, |
| .raw-button:active { |
| -webkit-box-shadow: none; |
| background-color: transparent; |
| background-repeat: no-repeat; |
| border: none; |
| min-width: 0; |
| padding: 1px 6px; |
| } |
| |
| .bottom-strip { |
| border-top: none; |
| bottom: 0; |
| padding: 12px; |
| position: absolute; |
| right: 0; |
| } |
| |
| /* Omit top padding (currently only on #settings) whenever the search page is |
| * showing. |
| */ |
| #searchPage:not([hidden]) + #settings { |
| padding-top: 0; |
| } |
| |
| .page list { |
| /* Min height is a multiple of the list item height (32) */ |
| min-height: 192px; |
| } |
| |
| .option { |
| margin-top: 0; |
| } |
| |
| .transparent { |
| opacity: 0; |
| } |
| |
| .touch-slider { |
| -webkit-appearance: slider-horizontal; |
| } |
| |
| .settings-list, |
| .settings-list-empty { |
| border: 1px solid #d9d9d9; |
| border-radius: 2px; |
| } |
| |
| .settings-list-empty { |
| background-color: #f4f4f4; |
| box-sizing: border-box; |
| min-height: 125px; |
| padding-left: 20px; |
| padding-top: 20px; |
| } |
| |
| |
| /* Editable text field properties */ |
| .editable-text-field > * { |
| -webkit-box-align: center; |
| -webkit-transition: 150ms background-color; |
| border: none; |
| box-sizing: border-box; |
| display: -webkit-box; |
| height: 20px; |
| margin: 0; |
| } |
| |
| .editable-text-field > .spacer { |
| /* The above height rule should not apply to spacers. */ |
| height: 0; |
| } |
| |
| .editable-text-field .editable-text { |
| padding: 2px 3px; |
| } |
| |
| .editable-text-field .static-text { |
| height: 24px; |
| overflow: hidden; |
| padding: 3px 4px; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| .editable-text-field:not([editable]) > [displaymode='edit'] { |
| display: none; |
| } |
| |
| .editable-text-field[editable] > [displaymode='static'] { |
| display: none; |
| } |
| |
| .editable-text-field[empty] > input[type='text'] { |
| color: #ccc; |
| font-style: italic; |
| } |
| |
| .editable-text-field[disabled] { |
| opacity: 0.6; |
| } |
| |
| /* Editable List properties */ |
| list > * { |
| -webkit-box-align: center; |
| -webkit-transition: 150ms background-color; |
| border: none; |
| border-radius: 0; /* TODO(dbeam): Is this necessary? */ |
| box-sizing: border-box; |
| display: -webkit-box; |
| height: 32px; |
| margin: 0; |
| } |
| |
| list > .spacer { |
| /* The above height rule should not apply to spacers. When redraw is called |
| on the list they will be given an explicit element height but this ensures |
| they have 0 height to begin with. */ |
| height: 0; |
| } |
| |
| list:not([disabled]) > :hover { |
| background-color: rgb(228, 236, 247); |
| } |
| |
| /* TODO(stuartmorgan): Once this becomes the list style for other WebUI pages |
| * these rules can be simplified (since they wont need to override other rules). |
| */ |
| |
| list:not([hasElementFocus]) > [selected], |
| list:not([hasElementFocus]) > [lead][selected] { |
| background-color: #d0d0d0; |
| background-image: none; |
| } |
| |
| list[hasElementFocus] > [selected], |
| list[hasElementFocus] > [lead][selected], |
| list:not([hasElementFocus]) > [selected]:hover, |
| list:not([hasElementFocus]) > [selected][lead]:hover { |
| background-color: rgb(187, 206, 233); |
| background-image: none; |
| } |
| |
| list[hasElementFocus] > [lead], |
| list[hasElementFocus] > [lead][selected] { |
| border-bottom: 1px solid rgb(120, 146, 180); |
| border-top: 1px solid rgb(120, 146, 180); |
| } |
| |
| list[hasElementFocus] > [lead]:nth-child(2), |
| list[hasElementFocus] > [lead][selected]:nth-child(2) { |
| border-top: 1px solid transparent; |
| } |
| |
| list[hasElementFocus] > [lead]:nth-last-child(2), |
| list[hasElementFocus] > [lead][selected]:nth-last-child(2) { |
| border-bottom: 1px solid transparent; |
| } |
| |
| list[disabled] > [lead][selected], |
| list[disabled]:focus > [lead][selected] { |
| border: none; |
| } |
| |
| list[disabled] { |
| opacity: 0.6; |
| } |
| |
| list > .heading { |
| color: #666; |
| } |
| |
| list > .heading:hover { |
| background-color: transparent; |
| border-color: transparent; |
| } |
| |
| list .deletable-item { |
| -webkit-box-align: center; |
| } |
| |
| list .deletable-item > :first-child { |
| -webkit-box-align: center; |
| -webkit-box-flex: 1; |
| -webkit-padding-end: 5px; |
| display: -webkit-box; |
| } |
| |
| list .row-delete-button { |
| -webkit-transition: 150ms opacity; |
| background-color: transparent; |
| /* TODO(stuartmorgan): Replace with real images once they are available. */ |
| background-image: -webkit-image-set( |
| url('../../../../ui/resources/default_100_percent/close_2.png') 1x, |
| url('../../../../ui/resources/default_200_percent/close_2.png') 2x); |
| border: none; |
| display: block; |
| height: 16px; |
| opacity: 1; |
| width: 16px; |
| } |
| |
| list > *:not(:hover):not([selected]):not([lead]) .row-delete-button, |
| list:not([hasElementFocus]) > *:not(:hover):not([selected]) .row-delete-button, |
| list[disabled] .row-delete-button, |
| list .row-delete-button[disabled] { |
| opacity: 0; |
| pointer-events: none; |
| } |
| |
| /* HostedApp entries use the disabled closing button to display the App's |
| * favicon, as an indicator that instead of deleting the permission here |
| * the user has to remove the hosted app.*/ |
| list div[role='listitem'][managedby='HostedApp'] .row-delete-button { |
| opacity: 1; |
| } |
| |
| list .row-delete-button:hover { |
| background-image: -webkit-image-set( |
| url('../../../../ui/resources/default_100_percent/close_2_hover.png') 1x, |
| url('../../../../ui/resources/default_200_percent/close_2_hover.png') 2x); |
| } |
| |
| list .row-delete-button:active { |
| background-image: -webkit-image-set( |
| url('../../../../ui/resources/default_100_percent/close_2_pressed.png') |
| 1x, |
| url('../../../../ui/resources/default_200_percent/close_2_pressed.png') |
| 2x); |
| } |
| |
| list .static-text { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| list[type='text'][inlineeditable] input { |
| box-sizing: border-box; |
| margin: 0; |
| width: 100%; |
| } |
| |
| list > :not([editing]) [displaymode='edit'] { |
| display: none; |
| } |
| |
| list > [editing] [displaymode='static'] { |
| display: none; |
| } |
| |
| list > [editing] input:invalid { |
| /* TODO(stuartmorgan): Replace with validity badge */ |
| background-color: pink; |
| } |
| |
| .list-inline-button { |
| -webkit-appearance: none; |
| -webkit-transition: opacity 150ms; |
| background: rgb(138, 170, 237); |
| border: none; |
| border-radius: 2px; |
| color: white; |
| font-weight: bold; |
| opacity: 0.7; |
| } |
| |
| .list-inline-button:hover { |
| opacity: 1; |
| } |
| |
| .option-name { |
| padding-right: 5px; |
| } |
| |
| html[dir=rtl].option-name { |
| padding-left: 5px; |
| } |
| |
| .favicon-cell { |
| -webkit-padding-start: 20px; |
| background-position: left; |
| background-repeat: no-repeat; |
| background-size: 16px; |
| } |
| |
| input[type='url'].favicon-cell { |
| -webkit-padding-start: 22px; |
| background-position-x: 4px; |
| } |
| |
| html[dir=rtl] input.favicon-cell { |
| background-position-x: -webkit-calc(100% - 4px); |
| } |
| |
| list .favicon-cell { |
| -webkit-margin-start: 7px; |
| -webkit-padding-start: 26px; |
| display: block; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| html[dir=rtl] list .favicon-cell { |
| background-position: right; |
| } |
| |
| html[enable-background-mode=false] #background-mode-section { |
| display: none; |
| } |
| |
| /* UI Controls */ |
| |
| /* LIST */ |
| list[hasElementFocus] { |
| <if expr="not is_macosx"> |
| outline: 1px solid rgba(0, 128, 256, 0.5); |
| outline-offset: -2px; |
| </if> |
| <if expr="is_macosx"> |
| /* This matches the native list outline on Mac */ |
| outline-color: rgb(117, 154, 217); |
| outline-offset: -1px; |
| outline-style: auto; |
| outline-width: 5px; |
| </if> |
| } |
| |
| .suboption { |
| -webkit-margin-start: 23px; |
| } |
| |
| list.autocomplete-suggestions { |
| background-color: white; |
| border: 1px solid #aaa; |
| border-radius: 2px; |
| min-height: 0; |
| opacity: 0.9; |
| position: fixed; |
| z-index: 3; |
| } |
| |
| list.autocomplete-suggestions > div { |
| height: auto; |
| } |
| |
| list.autocomplete-suggestions:not([hasElementFocus]) > [selected], |
| list.autocomplete-suggestions:not([hasElementFocus]) > [lead][selected] { |
| background-color: rgb(187, 206, 233); |
| } |
| |
| html:not(.focus-outline-visible) |
| :enabled:focus:-webkit-any(input[type='checkbox'], input[type='radio']) { |
| /* Cancel border-color for :focus specified in widgets.css. */ |
| border-color: rgba(0, 0, 0, 0.25); |
| } |
| |
| html:not([hasFlashPlugin]) .flash-plugin-area, |
| /* If the Flash plug-in supports the NPP_ClearSiteData API, we don't need to |
| * show the link to the Flash storage settings manager: |
| */ |
| html[flashPluginSupportsClearSiteData] .flash-plugin-area, |
| html:not([flashPluginSupportsClearSiteData]) .clear-plugin-lso-data-enabled, |
| html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled, |
| html:not([enablePepperFlashSettings]) .pepper-flash-settings { |
| display: none; |
| } |
| |
| /* Controlled setting indicator and bubble. */ |
| |
| .controlled-setting-with-label { |
| -webkit-box-align: center; |
| display: -webkit-box; |
| padding-bottom: 7px; |
| padding-top: 7px; |
| } |
| |
| .controlled-setting-with-label > input + span { |
| -webkit-box-align: center; |
| -webkit-box-flex: 1; |
| -webkit-margin-start: 0.6em; |
| display: -webkit-box; |
| } |
| |
| .controlled-setting-with-label > input:disabled + span label { |
| color: #999; |
| } |
| |
| .controlled-setting-with-label label { |
| display: inline; |
| padding: 0; |
| } |
| |
| input:-webkit-any([type='text'],[type='url'],:not([type])) + |
| .controlled-setting-indicator { |
| -webkit-margin-start: 5px; |
| } |
| |
| .controlled-setting-indicator:not([controlled-by]) { |
| display: none; |
| } |
| |
| .controlled-setting-indicator[controlled-by='policy'] > div { |
| background-image: |
| url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY'); |
| } |
| |
| .controlled-setting-indicator[controlled-by='policy'] > |
| div:-webkit-any(:hover,.showing-bubble) { |
| background-image: |
| url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY'); |
| } |
| |
| .controlled-setting-indicator[controlled-by='extension'] > div { |
| background-image: |
| url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_GRAY'); |
| } |
| |
| .controlled-setting-indicator[controlled-by='extension'] > |
| div:-webkit-any(:hover,.showing-bubble) { |
| background-image: |
| url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION'); |
| } |
| |
| .controlled-setting-indicator:-webkit-any([controlled-by='recommended'], |
| [controlled-by='hasRecommendation']) > div { |
| background-image: |
| url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_GRAY'); |
| } |
| |
| .controlled-setting-indicator:-webkit-any([controlled-by='recommended'], |
| [controlled-by='hasRecommendation']) > |
| div:-webkit-any(:hover,.showing-bubble) { |
| background-image: |
| url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED'); |
| } |
| |
| .controlled-setting-bubble-content { |
| -webkit-padding-start: 30px; |
| background-repeat: no-repeat; |
| background-size: 22px; |
| min-height: 32px; |
| } |
| |
| .controlled-setting-bubble-content[controlled-by='policy'] { |
| background-image: |
| url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_LARGE'); |
| } |
| |
| .controlled-setting-bubble-content[controlled-by='extension'] { |
| background-image: |
| url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_LARGE'); |
| } |
| |
| .controlled-setting-bubble-content:-webkit-any([controlled-by='recommended'], |
| [controlled-by='hasRecommendation']) { |
| background-image: |
| url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_LARGE'); |
| } |
| |
| html[dir='rtl'] .controlled-setting-bubble-content { |
| background-position: right top; |
| } |
| |
| .controlled-setting-bubble-action { |
| padding: 0 !important; |
| } |