| Index: chrome/browser/resources/options/options_page.css
|
| diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
|
| deleted file mode 100644
|
| index 040cd7139ebcd996a077e9400a9df35c63eb1975..0000000000000000000000000000000000000000
|
| --- a/chrome/browser/resources/options/options_page.css
|
| +++ /dev/null
|
| @@ -1,742 +0,0 @@
|
| -.hbox {
|
| - display: -webkit-box;
|
| - -webkit-box-orient: horizontal;
|
| -}
|
| -
|
| -.vbox {
|
| - display: -webkit-box;
|
| - -webkit-box-orient: vertical;
|
| -}
|
| -
|
| -.stretch {
|
| - -webkit-box-flex: 1;
|
| -}
|
| -
|
| -.frozen,
|
| -.subpage-sheet-container.frozen {
|
| - position: fixed;
|
| -}
|
| -
|
| -#search-field {
|
| - font-size: inherit;
|
| - margin: 0;
|
| - width: 100%;
|
| -}
|
| -
|
| -#searchPageNav {
|
| - -webkit-padding-start: 20px;
|
| -}
|
| -
|
| -/*
|
| - * Add padding to increase the touchable area of search box. Use original font
|
| - * size to avoid the width of search box exceeding the width of navbar.
|
| - */
|
| -html[touch-optimized] #search-field {
|
| - font-size: 13px;
|
| - padding: 5px;
|
| -}
|
| -html[touch-optimized] #search-field::-webkit-search-cancel-button {
|
| - -webkit-transform: scale(1.5);
|
| -}
|
| -
|
| -/*
|
| - * For touch-optimized UI, make the radio/checkbox input boxes in
|
| - * options/preference pages easier to touch.
|
| - * TODO(rbyers): We need to solve this more generally for all web pages
|
| - * (crbug.com/99981), and perhaps temporarily for all WebUI (crbug.com/102482).
|
| - */
|
| -html[touch-optimized] div.radio > label > span,
|
| -html[touch-optimized] div.checkbox > label > span {
|
| - -webkit-padding-start: 5px;
|
| -}
|
| -
|
| -html[touch-optimized] label > input[type=checkbox],
|
| -html[touch-optimized] label > input[type=radio] {
|
| - -webkit-transform: scale(1.4);
|
| -}
|
| -
|
| -/*
|
| - * Override the font-size rule in shared_options.css file.
|
| - * 16 px font-size proved to be more touch friendly. It increases the touchable
|
| - * area for buttons and input boxes.
|
| - */
|
| -html[touch-optimized] body {
|
| - font-size: 16px;
|
| -}
|
| -
|
| -.overlay {
|
| - -webkit-box-align: center;
|
| - -webkit-box-orient: vertical;
|
| - -webkit-box-pack: center;
|
| - -webkit-transition: 250ms opacity;
|
| - background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
|
| - rgba(127, 127, 127, 0.5) 35%,
|
| - rgba(0, 0, 0, 0.7));
|
| - bottom: 0;
|
| - display: -webkit-box;
|
| - left: 0;
|
| - overflow: auto;
|
| - padding: 20px;
|
| - padding-bottom: 130px;
|
| - position: fixed;
|
| - right: 0;
|
| - top: 0;
|
| - z-index: 10;
|
| -}
|
| -
|
| -.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;
|
| -}
|
| -
|
| -.close-subpage {
|
| - background-image: url('../../../../ui/resources/close_bar.png');
|
| - height: 16px;
|
| - min-width: 0;
|
| - position: relative;
|
| - top: 16px;
|
| - width: 16px;
|
| -}
|
| -
|
| -.close-subpage:hover {
|
| - background-image: url('../../../../ui/resources/close_bar_h.png');
|
| -}
|
| -
|
| -.close-subpage:active {
|
| - background-image: url('../../../../ui/resources/close_bar_p.png');
|
| -}
|
| -
|
| -html[dir='ltr'] .close-subpage {
|
| - float: right;
|
| - right: 20px;
|
| -}
|
| -
|
| -html[dir='rtl'] .close-subpage {
|
| - float: left;
|
| - left: 20px;
|
| -}
|
| -
|
| -html.hide-menu .close-subpage {
|
| - display: none
|
| -}
|
| -
|
| -.content-area {
|
| - padding: 10px 15px 5px 15px;
|
| -}
|
| -
|
| -.action-area {
|
| - -webkit-box-align: center;
|
| - -webkit-box-orient: horizontal;
|
| - -webkit-box-pack: end;
|
| - border-top: 1px solid rgba(188, 193, 208, .5);
|
| - display: -webkit-box;
|
| - padding: 12px;
|
| -}
|
| -
|
| -html[dir='rtl'] .action-area {
|
| - left: 0;
|
| -}
|
| -
|
| -.action-area-right {
|
| - display: -webkit-box;
|
| -}
|
| -
|
| -.button-strip {
|
| - -webkit-box-orient: horizontal;
|
| - display: -webkit-box;
|
| -}
|
| -
|
| -.button-strip > button {
|
| - -webkit-margin-start: 10px;
|
| - display: block;
|
| -}
|
| -
|
| -.bottom-strip {
|
| - padding: 12px;
|
| - position: absolute;
|
| - right: 0;
|
| - bottom: 0;
|
| - border-top: none;
|
| -}
|
| -
|
| -.overlay .page {
|
| - -webkit-box-shadow: 0 5px 80px #505050;
|
| - background: white;
|
| - border: 1px solid rgb(188, 193, 208);
|
| - border-radius: 2px;
|
| - min-width: 400px;
|
| - padding: 0;
|
| - position: relative;
|
| -}
|
| -
|
| -#subpage-backdrop {
|
| - -webkit-transition: 250ms opacity;
|
| - background-color: rgba(233, 238, 242, .5);
|
| - height: 100%;
|
| - left: 216px;
|
| - right: 216px;
|
| - position: fixed;
|
| - top: 0;
|
| - width: 100%;
|
| -}
|
| -
|
| -.subpage-sheet-container {
|
| - -webkit-transition: 250ms opacity, 100ms padding-left, 100ms padding-right;
|
| - box-sizing: border-box;
|
| - min-height: 100%;
|
| - position: absolute;
|
| - /* We set both left and right for the sake of RTL. */
|
| - left: 0;
|
| - right: 0;
|
| - top: 0;
|
| - width: 100%;
|
| -}
|
| -
|
| -#subpage-sheet-container-1 {
|
| - -webkit-padding-start: 40px;
|
| - z-index: 5;
|
| -}
|
| -
|
| -#subpage-sheet-container-2 {
|
| - -webkit-padding-start: 80px;
|
| - z-index: 10;
|
| -}
|
| -
|
| -.subpage-sheet {
|
| - -webkit-box-shadow: #666 0 2px 5px;
|
| - background-color: white;
|
| - border-left: 1px solid #b8b8b8;
|
| - box-sizing: border-box;
|
| - min-height: 100%;
|
| - width: 100%;
|
| - min-width: 651px;
|
| -}
|
| -
|
| -.subpage-sheet-contents {
|
| - box-sizing: border-box;
|
| - max-width: 900px;
|
| - min-width: 650px;
|
| - padding: 0 20px 20px 20px;
|
| - width: 95%;
|
| -}
|
| -
|
| -.managed-prefs-banner {
|
| - background: -webkit-linear-gradient(#fff2b7, #fae691 97%, #878787);
|
| - height: 31px;
|
| - width: 100%;
|
| - margin: 0;
|
| - padding: 0;
|
| - position: relative;
|
| - vertical-align: middle;
|
| - z-index: 11;
|
| -}
|
| -
|
| -.managed-prefs-banner.clickable:active {
|
| - background: -webkit-linear-gradient(#878787, #fae691 3%, #fff2b7);
|
| -}
|
| -
|
| -.managed-prefs-icon {
|
| - background-image: url("chrome://theme/IDR_WARNING");
|
| - background-repeat: no-repeat;
|
| - background-position:center;
|
| - display: inline-block;
|
| - padding: 5px;
|
| - height: 21px;
|
| - vertical-align: middle;
|
| - width: 24px;
|
| -}
|
| -
|
| -.managed-prefs-text {
|
| - vertical-align: middle;
|
| -}
|
| -
|
| -.subpage-sheet .page h1 {
|
| - margin-bottom: 10px;
|
| -}
|
| -
|
| -.overlay .page h1 {
|
| - background: -webkit-linear-gradient(white, #F8F8F8);
|
| - border-bottom: 1px solid rgba(188, 193, 208, .5);
|
| - font-size: 105%;
|
| - font-weight: bold;
|
| - padding: 10px 15px 8px 15px;
|
| -}
|
| -
|
| -.page list {
|
| - /* Min height is a multiple of the list item height (32) */
|
| - min-height: 192px;
|
| -}
|
| -
|
| -/**
|
| - * TODO(kevers): Standardize formatting of sections to use display tables.
|
| - * For now, we require separate specialized rules for sections that are
|
| - * formatted as table rows.
|
| - */
|
| -section {
|
| - -webkit-box-orient: horizontal;
|
| - border-bottom: 1px solid #eeeeee;
|
| - display: -webkit-box;
|
| - margin-top: 17px;
|
| - padding-bottom: 20px;
|
| -}
|
| -
|
| -div.page section:last-child {
|
| - border-bottom: none;
|
| -}
|
| -
|
| -h3 {
|
| - font-size: 105%;
|
| - font-weight: bold;
|
| - margin: 20px 0 10px 0;
|
| -}
|
| -
|
| -section > h3 {
|
| - margin: 0;
|
| - vertical-align: middle;
|
| - width: 130px;
|
| - -webkit-padding-end: 10px;
|
| -}
|
| -
|
| -section > div:only-of-type {
|
| - -webkit-box-flex: 1;
|
| -}
|
| -
|
| -/* Don't allow edge margin on the first/last child of a section. */
|
| -section > h3 + * > *:last-child {
|
| - margin-bottom: 0;
|
| -}
|
| -section > h3 + * > *:first-child {
|
| - margin-top: 0;
|
| -}
|
| -
|
| -.option {
|
| - margin-top: 0;
|
| -}
|
| -
|
| -/* [hidden] does display:none, but its priority is too low in some cases. */
|
| -[hidden] {
|
| - display: none !important;
|
| -}
|
| -
|
| -.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;
|
| -}
|
| -
|
| -list > * {
|
| - -webkit-box-align: center;
|
| - -webkit-transition: 150ms background-color;
|
| - box-sizing: border-box;
|
| - border-radius: 0;
|
| - display: -webkit-box;
|
| - height: 32px;
|
| - border: none;
|
| - 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: #e4ecf7;
|
| -}
|
| -
|
| -/* 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: #bbcee9;
|
| - background-image: none;
|
| -}
|
| -
|
| -list[hasElementFocus] > [lead],
|
| -list[hasElementFocus] > [lead][selected] {
|
| - border-top: 1px solid #7892b4;
|
| - border-bottom: 1px solid #7892b4;
|
| -}
|
| -
|
| -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: #666666;
|
| -}
|
| -
|
| -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 .close-button {
|
| - -webkit-transition: 150ms opacity;
|
| - background-color: transparent;
|
| - /* TODO(stuartmorgan): Replace with real images once they are available. */
|
| - background-image: url("../../../../ui/resources/close_bar.png");
|
| - border: none;
|
| - display: block;
|
| - height: 16px;
|
| - opacity: 1;
|
| - width: 16px;
|
| -}
|
| -
|
| -list > *:not(:hover):not([lead]) .close-button,
|
| -list > *:not(:hover):not([selected]) .close-button,
|
| -list:not([hasElementFocus]) > *:not(:hover) .close-button,
|
| -list[disabled] .close-button,
|
| -list .close-button[disabled] {
|
| - opacity: 0;
|
| - pointer-events: none;
|
| -}
|
| -
|
| -list .close-button:hover {
|
| - background-image: url("../../../../ui/resources/close_bar_h.png");
|
| -}
|
| -
|
| -list .close-button:active {
|
| - background-image: url("../../../../ui/resources/close_bar_p.png");
|
| -}
|
| -
|
| -list .static-text {
|
| - overflow: hidden;
|
| - text-overflow: ellipsis;
|
| - white-space: nowrap;
|
| -}
|
| -
|
| -list[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;
|
| -}
|
| -
|
| -.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;
|
| - text-overflow: ellipsis;
|
| - overflow: hidden;
|
| - 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 */
|
| -html:not([os=mac]) list[hasElementFocus] {
|
| - outline: 1px solid rgba(0, 128, 256, 0.5);
|
| - outline-offset: -2px;
|
| -}
|
| -
|
| -/* This matches the native list outline on Mac */
|
| -html[os=mac] list[hasElementFocus] {
|
| - outline-color: #759ad9;
|
| - outline-offset: -1px;
|
| - outline-style: auto;
|
| - outline-width: 5px;
|
| -}
|
| -
|
| -.suboption {
|
| - -webkit-margin-start: 23px;
|
| -}
|
| -
|
| -.informational-text {
|
| - color: grey;
|
| -}
|
| -
|
| -#main-content 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: #bbcee9;
|
| -}
|
| -
|
| -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 {
|
| - display: none;
|
| -}
|
| -
|
| -
|
| -/* Display a collection of sections as a table in order to display nicely
|
| - * in multiple locales.
|
| - */
|
| -.displaytable {
|
| - display: table;
|
| - width: 100%;
|
| -}
|
| -
|
| -.displaytable > section {
|
| - display: table-row;
|
| -}
|
| -
|
| -/* right table column containing settable options */
|
| -.displaytable > section > h3 + div,
|
| -.displaytable > section > h3 + table {
|
| - padding-bottom: 20px;
|
| -}
|
| -
|
| -/* Setting the padding on the header so the alignment doesn't depend on the
|
| - * contents of the right table column. */
|
| -.displaytable > section > h3 {
|
| - padding-top: 17px;
|
| -}
|
| -
|
| -.displaytable > section > * {
|
| - display: table-cell;
|
| - vertical-align: baseline;
|
| - border-bottom: 1px solid #eeeeee;
|
| -}
|
| -
|
| -/* do not display a border after the last section in the table */
|
| -.displaytable:not([searching='true']) > section:last-child > * {
|
| - border-bottom: 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');
|
| -}
|
| -
|
| -.controlled-setting-indicator[controlled-by='policy'] summary:hover {
|
| - background-image:
|
| - url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY');
|
| -}
|
| -
|
| -.controlled-setting-indicator[controlled-by='extension'] summary {
|
| - background-image:
|
| - url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_GRAY');
|
| -}
|
| -
|
| -.controlled-setting-indicator[controlled-by='extension'] summary:hover {
|
| - background-image:
|
| - url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION');
|
| -}
|
| -
|
| -.controlled-setting-indicator[controlled-by='recommended'] summary {
|
| - background-image:
|
| - url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_GRAY');
|
| -}
|
| -
|
| -.controlled-setting-indicator[controlled-by='recommended'] summary:hover {
|
| - background-image:
|
| - url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED');
|
| -}
|
| -
|
| -.controlled-setting-bubble {
|
| - -webkit-margin-start: -20px;
|
| - background-color: white;
|
| - border-radius: 4px;
|
| - border: 1px solid #ccc;
|
| - 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');
|
| -}
|
| -
|
| -.controlled-setting-indicator[controlled-by='extension']
|
| - .controlled-setting-bubble-text {
|
| - background-image:
|
| - url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_LARGE');
|
| -}
|
| -
|
| -.controlled-setting-indicator[controlled-by='recommended']
|
| - .controlled-setting-bubble-text {
|
| - background-image:
|
| - url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_LARGE');
|
| -}
|
| -
|
| -html[dir='rtl'] .controlled-setting-bubble-text {
|
| - background-position: right top;
|
| -}
|
| -
|
| -.controlled-setting-bubble-action {
|
| - padding: 0 !important;
|
| -}
|
|
|