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 5body { 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 40body.uber-frame #searchBox { 41 position: fixed; 42 z-index: 4; 43} 44 45div.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.frozen { 73 position: fixed; 74} 75 76#overlay-container-1 { 77 z-index: 11; 78} 79#overlay-container-2 { 80 z-index: 12; 81} 82#overlay-container-3 { 83 z-index: 13; 84} 85 86.raw-button, 87.raw-button:hover, 88.raw-button:active { 89 -webkit-box-shadow: none; 90 background-color: transparent; 91 background-repeat: no-repeat; 92 border: none; 93 min-width: 0; 94 padding: 1px 6px; 95} 96 97.bottom-strip { 98 border-top: none; 99 bottom: 0; 100 padding: 12px; 101 position: absolute; 102 right: 0; 103} 104 105/* Omit top padding (currently only on #settings) whenever the search page is 106 * showing. 107 */ 108#searchPage:not([hidden]) + #settings { 109 padding-top: 0; 110} 111 112.page list { 113 /* Min height is a multiple of the list item height (32) */ 114 min-height: 192px; 115} 116 117.option { 118 margin-top: 0; 119} 120 121.transparent { 122 opacity: 0; 123} 124 125.touch-slider { 126 -webkit-appearance: slider-horizontal; 127} 128 129.settings-list, 130.settings-list-empty { 131 border: 1px solid #d9d9d9; 132 border-radius: 2px; 133} 134 135.settings-list-empty { 136 background-color: #f4f4f4; 137 box-sizing: border-box; 138 min-height: 125px; 139 padding-left: 20px; 140 padding-top: 20px; 141} 142 143 144/* Editable text field properties */ 145.editable-text-field > * { 146 -webkit-box-align: center; 147 -webkit-transition: 150ms background-color; 148 border: none; 149 box-sizing: border-box; 150 display: -webkit-box; 151 height: 20px; 152 margin: 0; 153} 154 155.editable-text-field > .spacer { 156 /* The above height rule should not apply to spacers. */ 157 height: 0; 158} 159 160.editable-text-field .editable-text { 161 padding: 2px 3px; 162} 163 164.editable-text-field .static-text { 165 height: 24px; 166 overflow: hidden; 167 padding: 3px 4px; 168 text-overflow: ellipsis; 169 white-space: nowrap; 170} 171 172.editable-text-field:not([editable]) > [displaymode='edit'] { 173 display: none; 174} 175 176.editable-text-field[editable] > [displaymode='static'] { 177 display: none; 178} 179 180.editable-text-field[empty] > input[type='text'] { 181 color: #ccc; 182 font-style: italic; 183} 184 185.editable-text-field[disabled] { 186 opacity: 0.6; 187} 188 189/* Editable List properties */ 190list > * { 191 -webkit-box-align: center; 192 -webkit-transition: 150ms background-color; 193 border: none; 194 border-radius: 0; /* TODO(dbeam): Is this necessary? */ 195 box-sizing: border-box; 196 display: -webkit-box; 197 height: 32px; 198 margin: 0; 199} 200 201list > .spacer { 202 /* The above height rule should not apply to spacers. When redraw is called 203 on the list they will be given an explicit element height but this ensures 204 they have 0 height to begin with. */ 205 height: 0; 206} 207 208list:not([disabled]) > :hover { 209 background-color: rgb(228, 236, 247); 210} 211 212/* TODO(stuartmorgan): Once this becomes the list style for other WebUI pages 213 * these rules can be simplified (since they wont need to override other rules). 214 */ 215 216list:not([hasElementFocus]) > [selected], 217list:not([hasElementFocus]) > [lead][selected] { 218 background-color: #d0d0d0; 219 background-image: none; 220} 221 222list[hasElementFocus] > [selected], 223list[hasElementFocus] > [lead][selected], 224list:not([hasElementFocus]) > [selected]:hover, 225list:not([hasElementFocus]) > [selected][lead]:hover { 226 background-color: rgb(187, 206, 233); 227 background-image: none; 228} 229 230list[hasElementFocus] > [lead], 231list[hasElementFocus] > [lead][selected] { 232 border-bottom: 1px solid rgb(120, 146, 180); 233 border-top: 1px solid rgb(120, 146, 180); 234} 235 236list[hasElementFocus] > [lead]:nth-child(2), 237list[hasElementFocus] > [lead][selected]:nth-child(2) { 238 border-top: 1px solid transparent; 239} 240 241list[hasElementFocus] > [lead]:nth-last-child(2), 242list[hasElementFocus] > [lead][selected]:nth-last-child(2) { 243 border-bottom: 1px solid transparent; 244} 245 246list[disabled] > [lead][selected], 247list[disabled]:focus > [lead][selected] { 248 border: none; 249} 250 251list[disabled] { 252 opacity: 0.6; 253} 254 255list > .heading { 256 color: #666; 257} 258 259list > .heading:hover { 260 background-color: transparent; 261 border-color: transparent; 262} 263 264list .deletable-item { 265 -webkit-box-align: center; 266} 267 268list .deletable-item > :first-child { 269 -webkit-box-align: center; 270 -webkit-box-flex: 1; 271 -webkit-padding-end: 5px; 272 display: -webkit-box; 273} 274 275list .row-delete-button { 276 -webkit-transition: 150ms opacity; 277 background-color: transparent; 278 /* TODO(stuartmorgan): Replace with real images once they are available. */ 279 background-image: -webkit-image-set( 280 url('../../../../ui/resources/default_100_percent/close_2.png') 1x, 281 url('../../../../ui/resources/default_200_percent/close_2.png') 2x); 282 border: none; 283 display: block; 284 height: 16px; 285 opacity: 1; 286 width: 16px; 287} 288 289list > *:not(:hover):not([selected]):not([lead]) .row-delete-button, 290list:not([hasElementFocus]) > *:not(:hover):not([selected]) .row-delete-button, 291list[disabled] .row-delete-button, 292list .row-delete-button[disabled] { 293 opacity: 0; 294 pointer-events: none; 295} 296 297/* HostedApp entries use the disabled closing button to display the App's 298 * favicon, as an indicator that instead of deleting the permission here 299 * the user has to remove the hosted app.*/ 300list div[role='listitem'][managedby='HostedApp'] .row-delete-button { 301 opacity: 1; 302} 303 304list .row-delete-button:hover { 305 background-image: -webkit-image-set( 306 url('../../../../ui/resources/default_100_percent/close_2_hover.png') 1x, 307 url('../../../../ui/resources/default_200_percent/close_2_hover.png') 2x); 308} 309 310list .row-delete-button:active { 311 background-image: -webkit-image-set( 312 url('../../../../ui/resources/default_100_percent/close_2_pressed.png') 313 1x, 314 url('../../../../ui/resources/default_200_percent/close_2_pressed.png') 315 2x); 316} 317 318list .static-text { 319 overflow: hidden; 320 text-overflow: ellipsis; 321 white-space: nowrap; 322} 323 324list[type='text'][inlineeditable] input { 325 box-sizing: border-box; 326 margin: 0; 327 width: 100%; 328} 329 330list > :not([editing]) [displaymode='edit'] { 331 display: none; 332} 333 334list > [editing] [displaymode='static'] { 335 display: none; 336} 337 338list > [editing] input:invalid { 339 /* TODO(stuartmorgan): Replace with validity badge */ 340 background-color: pink; 341} 342 343.list-inline-button { 344 -webkit-appearance: none; 345 -webkit-transition: opacity 150ms; 346 background: rgb(138, 170, 237); 347 border: none; 348 border-radius: 2px; 349 color: white; 350 font-weight: bold; 351 opacity: 0.7; 352} 353 354.list-inline-button:hover { 355 opacity: 1; 356} 357 358.option-name { 359 padding-right: 5px; 360} 361 362html[dir=rtl].option-name { 363 padding-left: 5px; 364} 365 366.favicon-cell { 367 -webkit-padding-start: 20px; 368 background-position: left; 369 background-repeat: no-repeat; 370 background-size: 16px; 371} 372 373input[type='url'].favicon-cell { 374 -webkit-padding-start: 22px; 375 background-position-x: 4px; 376} 377 378html[dir=rtl] input.favicon-cell { 379 background-position-x: -webkit-calc(100% - 4px); 380} 381 382list .favicon-cell { 383 -webkit-margin-start: 7px; 384 -webkit-padding-start: 26px; 385 display: block; 386 overflow: hidden; 387 text-overflow: ellipsis; 388 white-space: nowrap; 389} 390 391html[dir=rtl] list .favicon-cell { 392 background-position: right; 393} 394 395html[enable-background-mode=false] #background-mode-section { 396 display: none; 397} 398 399/* UI Controls */ 400 401/* LIST */ 402list[hasElementFocus] { 403<if expr="not is_macosx"> 404 outline: 1px solid rgba(0, 128, 256, 0.5); 405 outline-offset: -2px; 406</if> 407<if expr="is_macosx"> 408 /* This matches the native list outline on Mac */ 409 outline-color: rgb(117, 154, 217); 410 outline-offset: -1px; 411 outline-style: auto; 412 outline-width: 5px; 413</if> 414} 415 416.suboption { 417 -webkit-margin-start: 23px; 418} 419 420list.autocomplete-suggestions { 421 background-color: white; 422 border: 1px solid #aaa; 423 border-radius: 2px; 424 min-height: 0; 425 opacity: 0.9; 426 position: fixed; 427 z-index: 3; 428} 429 430list.autocomplete-suggestions > div { 431 height: auto; 432} 433 434list.autocomplete-suggestions:not([hasElementFocus]) > [selected], 435list.autocomplete-suggestions:not([hasElementFocus]) > [lead][selected] { 436 background-color: rgb(187, 206, 233); 437} 438 439html:not(.focus-outline-visible) 440:enabled:focus:-webkit-any(input[type='checkbox'], input[type='radio']) { 441 /* Cancel border-color for :focus specified in widgets.css. */ 442 border-color: rgba(0, 0, 0, 0.25); 443} 444 445html:not([hasFlashPlugin]) .flash-plugin-area, 446/* If the Flash plug-in supports the NPP_ClearSiteData API, we don't need to 447 * show the link to the Flash storage settings manager: 448 */ 449html[flashPluginSupportsClearSiteData] .flash-plugin-area, 450html:not([flashPluginSupportsClearSiteData]) .clear-plugin-lso-data-enabled, 451html[flashPluginSupportsClearSiteData] .clear-plugin-lso-data-disabled, 452html:not([enablePepperFlashSettings]) .pepper-flash-settings { 453 display: none; 454} 455 456/* Controlled setting indicator and bubble. */ 457 458.controlled-setting-with-label { 459 -webkit-box-align: center; 460 display: -webkit-box; 461 padding-bottom: 7px; 462 padding-top: 7px; 463} 464 465.controlled-setting-with-label > input + span { 466 -webkit-box-align: center; 467 -webkit-box-flex: 1; 468 -webkit-margin-start: 0.6em; 469 display: -webkit-box; 470} 471 472.controlled-setting-with-label > input:disabled + span label { 473 color: #999; 474} 475 476.controlled-setting-with-label label { 477 display: inline; 478 padding: 0; 479} 480 481input:-webkit-any([type='text'],[type='url'],:not([type])) + 482 .controlled-setting-indicator { 483 -webkit-margin-start: 5px; 484} 485 486.controlled-setting-indicator:not([controlled-by]) { 487 display: none; 488} 489 490.controlled-setting-indicator[controlled-by='policy'] > div { 491 background-image: 492 url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_GRAY'); 493} 494 495.controlled-setting-indicator[controlled-by='policy'] > 496 div:-webkit-any(:hover,.showing-bubble) { 497 background-image: 498 url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY'); 499} 500 501.controlled-setting-indicator[controlled-by='extension'] > div { 502 background-image: 503 url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_GRAY'); 504} 505 506.controlled-setting-indicator[controlled-by='extension'] > 507 div:-webkit-any(:hover,.showing-bubble) { 508 background-image: 509 url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION'); 510} 511 512.controlled-setting-indicator:-webkit-any([controlled-by='recommended'], 513 [controlled-by='hasRecommendation']) > div { 514 background-image: 515 url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_GRAY'); 516} 517 518.controlled-setting-indicator:-webkit-any([controlled-by='recommended'], 519 [controlled-by='hasRecommendation']) > 520 div:-webkit-any(:hover,.showing-bubble) { 521 background-image: 522 url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED'); 523} 524 525.controlled-setting-bubble-content { 526 -webkit-padding-start: 30px; 527 background-repeat: no-repeat; 528 background-size: 22px; 529 min-height: 32px; 530} 531 532.controlled-setting-bubble-content[controlled-by='policy'] { 533 background-image: 534 url('chrome://theme/IDR_CONTROLLED_SETTING_MANDATORY_LARGE'); 535} 536 537.controlled-setting-bubble-content[controlled-by='extension'] { 538 background-image: 539 url('chrome://theme/IDR_CONTROLLED_SETTING_EXTENSION_LARGE'); 540} 541 542.controlled-setting-bubble-content:-webkit-any([controlled-by='recommended'], 543 [controlled-by='hasRecommendation']) { 544 background-image: 545 url('chrome://theme/IDR_CONTROLLED_SETTING_RECOMMENDED_LARGE'); 546} 547 548html[dir='rtl'] .controlled-setting-bubble-content { 549 background-position: right top; 550} 551 552.controlled-setting-bubble-action { 553 padding: 0 !important; 554} 555