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. */
19 -webkit-box-align: stretch;
35 box-sizing: border-box;
55 -webkit-box-orient: horizontal;
60 -webkit-box-orient: vertical;
65 -webkit-box-align: center;
75 -webkit-box-shadow: none;
76 background-color: transparent;
77 background-repeat: no-repeat;
91 /* Omit top padding (currently only on #settings) whenever the search page is
94 #searchPage:not([hidden]) + #settings {
99 /* Min height is a multiple of the list item height (32) */
108 -webkit-appearance: slider-horizontal;
112 .settings-list-empty {
113 border: 1px solid #d9d9d9;
117 .settings-list-empty {
118 background-color: #f4f4f4;
119 box-sizing: border-box;
126 /* Editable text field properties */
127 .editable-text-field > * {
128 -webkit-box-align: center;
129 -webkit-transition: 150ms background-color;
131 box-sizing: border-box;
132 display: -webkit-box;
137 .editable-text-field > .spacer {
138 /* The above height rule should not apply to spacers. */
142 .editable-text-field .editable-text {
146 .editable-text-field .static-text {
150 text-overflow: ellipsis;
154 .editable-text-field:not([editable]) > [displaymode='edit'] {
158 .editable-text-field[editable] > [displaymode='static'] {
162 .editable-text-field[empty] > input[type='text'] {
167 .editable-text-field[disabled] {
171 /* Editable List properties */
173 -webkit-box-align: center;
174 -webkit-transition: 150ms background-color;
176 border-radius: 0; /* TODO(dbeam): Is this necessary? */
177 box-sizing: border-box;
178 display: -webkit-box;
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. */
190 list:not([disabled]) > :hover {
191 background-color: rgb(228, 236, 247);
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).
198 list:not([has-element-focus]) > [selected],
199 list:not([has-element-focus]) > [lead][selected] {
200 background-color: #d0d0d0;
201 background-image: none;
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;
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);
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;
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;
228 .settings-list[disabled] > [lead][selected],
229 .settings-list[disabled]:focus > [lead][selected] {
241 list > .heading:hover {
242 background-color: transparent;
243 border-color: transparent;
246 list .deletable-item {
247 -webkit-box-align: center;
250 list .deletable-item > :first-child {
251 -webkit-box-align: center;
253 -webkit-padding-end: 5px;
254 display: -webkit-box;
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);
271 list > *:not(:hover):not([selected]):not([lead]) .row-delete-button,
272 list:not([has-element-focus]) > *:not(:hover):not([selected])
274 list[disabled] .row-delete-button,
275 list .row-delete-button[disabled] {
277 pointer-events: none;
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 {
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);
293 list .row-delete-button:active {
294 background-image: -webkit-image-set(
295 url('../../../../ui/resources/default_100_percent/close_2_pressed.png')
297 url('../../../../ui/resources/default_200_percent/close_2_pressed.png')
303 text-overflow: ellipsis;
307 list[type='text'][inlineeditable] input {
308 box-sizing: border-box;
313 list > :not([editing]) [displaymode='edit'] {
317 list > [editing] [displaymode='static'] {
318 /* Don't use display:none because we need to keep an element focusable. */
320 pointer-events: none;
325 list > [editing] input:invalid {
326 /* TODO(stuartmorgan): Replace with validity badge */
327 background-color: pink;
330 .list-inline-button {
331 -webkit-appearance: none;
332 -webkit-transition: opacity 150ms;
333 background: rgb(138, 170, 237);
341 .list-inline-button:hover {
346 -webkit-padding-end: 5px;
350 -webkit-padding-start: 20px;
351 background-position: left;
352 background-repeat: no-repeat;
353 background-size: 16px;
356 input[type='url'].favicon-cell {
357 -webkit-padding-start: 22px;
358 background-position-x: 4px;
361 html[dir=rtl] input.favicon-cell {
362 background-position-x: -webkit-calc(100% - 4px);
366 -webkit-margin-start: 7px;
367 -webkit-padding-start: 26px;
370 text-overflow: ellipsis;
374 html[dir=rtl] list .favicon-cell {
375 background-position: right;
378 html[enable-background-mode=false] #background-mode-section {
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;
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;
400 -webkit-margin-start: 23px;
403 list.autocomplete-suggestions {
404 background-color: white;
405 border: 1px solid #aaa;
413 list.autocomplete-suggestions > div {
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);
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);
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:
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 {