diff options
Diffstat (limited to 'chrome/browser/resources/options/options_page.css')
| -rw-r--r-- | chrome/browser/resources/options/options_page.css | 584 |
1 files changed, 584 insertions, 0 deletions
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css new file mode 100644 index 0000000..90d9c70 --- /dev/null +++ b/chrome/browser/resources/options/options_page.css @@ -0,0 +1,584 @@ +/* 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_bar.png') 1x, + url('../../../../ui/resources/default_200_percent/close_bar.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_bar_hover.png') + 1x, + url('../../../../ui/resources/default_200_percent/close_bar_hover.png') + 2x); +} + +list .row-delete-button:active { + background-image: -webkit-image-set( + url('../../../../ui/resources/default_100_percent/close_bar_pressed.png') + 1x, + url('../../../../ui/resources/default_200_percent/close_bar_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; +} + +input[type='url'].favicon-cell { + -webkit-padding-start: 22px; + background-position-x: 4px; +} + +/* TODO(jhawkins): Use something better than 99.3% when CSS3 background + * positioning is available. + */ +html[dir=rtl] input.favicon-cell { + background-position-x: 99.3%; +} + +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([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-indicator { + display: inline-block; + /* Establish a containing block for absolutely positioning the bubble. */ + position: relative; + vertical-align: text-bottom; +} + +.controlled-setting-indicator[controlled-by] summary { + background-size: contain; + height: 16px; + width: 16px; +} + +.controlled-setting-indicator summary::-webkit-details-marker { + display: none; +} + +.controlled-setting-indicator[controlled-by='policy'] summary { + background-image: + url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY'); + background-size: 16px; +} + +.controlled-setting-indicator[controlled-by='policy'] summary:hover { + background-image: + url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY'); + background-size: 16px; +} + +.controlled-setting-indicator[controlled-by='extension'] summary { + background-image: + url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_GRAY'); + background-size: 16px; +} + +.controlled-setting-indicator[controlled-by='extension'] summary:hover { + background-image: + url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION'); + background-size: 16px; +} + +.controlled-setting-indicator[controlled-by='recommended'] summary { + background-image: + url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_GRAY'); + background-size: 16px; +} + +.controlled-setting-indicator[controlled-by='recommended'] summary:hover { + background-image: + url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED'); + background-size: 16px; +} + +.controlled-setting-bubble { + -webkit-margin-start: -20px; + background-color: white; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: 0 2px 2px #ddd; + margin-top: 10px; + padding: 10px; + position: absolute; + top: 50%; + z-index: 10; +} + +html[dir='ltr'] .controlled-setting-bubble { + left: 50%; +} + +html[dir='rtl'] .controlled-setting-bubble { + right: 50%; +} + +.controlled-setting-bubble::before { + -webkit-margin-start: 4px; + border-color: #ccc transparent; + border-style: solid; + border-width: 0 5px 5px; + content: ''; + position: absolute; + top: -5px; +} + +.controlled-setting-bubble::after { + -webkit-margin-start: 5px; + border-color: white transparent; + border-style: solid; + border-width: 0 4px 4px; + content: ''; + position: absolute; + top: -4px; +} + +.controlled-setting-bubble-text { + -webkit-padding-start: 30px; + background-repeat: no-repeat; + margin: 0; + min-height: 32px; + min-width: 200px; +} + +.controlled-setting-indicator[controlled-by='policy'] + .controlled-setting-bubble-text { + background-image: + url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_LARGE'); + background-size: 22px; +} + +.controlled-setting-indicator[controlled-by='extension'] + .controlled-setting-bubble-text { + background-image: + url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_LARGE'); + background-size: 22px; +} + +.controlled-setting-indicator[controlled-by='recommended'] + .controlled-setting-bubble-text { + background-image: + url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_LARGE'); + background-size: 22px; +} + +html[dir='rtl'] .controlled-setting-bubble-text { + background-position: right top; +} + +.controlled-setting-bubble-action { + padding: 0 !important; +} |