15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * found in the LICENSE file. */ 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* The shield that overlays the background. */ 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay { 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-align: center; 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-orient: vertical; 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-pack: center; 10cedac228d2dd51db4b79ea1e72c7f249408ee061Torne (Richard Coles) /* TODO(dbeam): remove perspective when http://crbug.com/374970 is fixed. */ 11cedac228d2dd51db4b79ea1e72c7f249408ee061Torne (Richard Coles) -webkit-perspective: 1px; 125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: 200ms opacity; 135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-color: rgba(255, 255, 255, 0.75); 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bottom: 0; 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: -webkit-box; 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left: 0; 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) overflow: auto; 185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 20px; 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: fixed; 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) right: 0; 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) top: 0; 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Used to slide in the overlay. */ 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay.transparent .page { 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated 275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */ 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transform: scale(0.99) translateY(-20px); 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* The foreground dialog. */ 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page { 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-border-radius: 3px; 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-orient: vertical; 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: 200ms -webkit-transform; 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background: white; 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15); 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #333; 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: -webkit-box; 405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) min-width: 400px; 415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 0; 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: relative; 432a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) z-index: 0; 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* If the options page is loading don't do the transition. */ 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).loading .overlay, 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).loading .overlay .page { 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition-duration: 0 !important; 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* keyframes used to pulse the overlay */ 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)@-webkit-keyframes pulse { 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 0% { 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transform: scale(1); 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 40% { 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transform: scale(1.02); 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 60% { 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transform: scale(1.02); 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 100% { 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transform: scale(1); 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) } 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page.pulse { 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-animation-duration: 180ms; 705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-animation-iteration-count: 1; 715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-animation-name: pulse; 725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-animation-timing-function: ease-in-out; 735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page > .close-button { 762a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) background-image: url('chrome://theme/IDR_CLOSE_DIALOG'); 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-position: center; 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-repeat: no-repeat; 795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 14px; 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: absolute; 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) right: 7px; 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) top: 7px; 835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 14px; 842a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) z-index: 1; 855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir='rtl'] .overlay .page > .close-button { 885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left: 10px; 895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) right: auto; 905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page > .close-button:hover { 932a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) background-image: url('chrome://theme/IDR_CLOSE_DIALOG_H'); 945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page > .close-button:active { 972a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) background-image: url('chrome://theme/IDR_CLOSE_DIALOG_P'); 985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page h1 { 1015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-end: 24px; 1025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-user-select: none; 1035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #333; 1045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* 120% of the body's font-size of 84% is 16px. This will keep the relative 1055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * size between the body and these titles consistent. */ 1065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) font-size: 120%; 1075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* TODO(flackr): Pages like sync-setup and delete user collapse the margin 1085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * above the top of the page. Use padding instead to make sure that the 1095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * headers of these pages have the correct spacing, but this should not be 1105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * necessary. See http://crbug.com/119029. */ 1115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: 0; 1125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 14px 17px 14px; 1135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-shadow: white 0 1px 2px; 1145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page .content-area { 1175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-flex: 1; 1185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) overflow: auto; 1195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 6px 17px 6px; 1205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: relative; 1215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page .action-area { 1245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-align: center; 1255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-orient: horizontal; 1265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-pack: end; 1275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: -webkit-box; 1285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 14px 17px; 1295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir='rtl'] .overlay .page .action-area { 1325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left: 0; 1335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page .action-area-right { 1365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: -webkit-box; 1375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page .button-strip { 1405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-orient: horizontal; 1415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: -webkit-box; 1425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page .button-strip > button { 1455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-margin-start: 10px; 1465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 1475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1495e3f23d412006dc4db4e659864679f29341e113fTorne (Richard Coles).overlay .page .button-strip > .default-button:not(:focus) { 1505e3f23d412006dc4db4e659864679f29341e113fTorne (Richard Coles) border-color: rgba(0, 0, 0, 0.5); 1515e3f23d412006dc4db4e659864679f29341e113fTorne (Richard Coles)} 1525e3f23d412006dc4db4e659864679f29341e113fTorne (Richard Coles) 1535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* On OSX 10.7, hidden scrollbars may prevent the user from realizing that the 1545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * overlay contains scrollable content. To resolve this, style the scrollbars on 1555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * OSX so they are always visible. See http://crbug.com/123010. */ 1563551c9c881056c480085172ff9840cab31610854Torne (Richard Coles)<if expr="is_macosx or is_ios"> 1575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page .content-area::-webkit-scrollbar { 1585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-appearance: none; 1595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 11px; 1605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page .content-area::-webkit-scrollbar-thumb { 1635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-color: rgba(0, 0, 0, 0.2); 1645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: 2px solid white; 1655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 8px; 1665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).overlay .page .content-area::-webkit-scrollbar-thumb:hover { 1695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-color: rgba(0, 0, 0, 0.5); 1705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)</if> 172ba5b9a6411cb1792fd21f0a078d7a25cd1ceec16Ben Murdoch 173ba5b9a6411cb1792fd21f0a078d7a25cd1ceec16Ben Murdoch.gray-bottom-bar { 174ba5b9a6411cb1792fd21f0a078d7a25cd1ceec16Ben Murdoch background-color: #f5f5f5; 175ba5b9a6411cb1792fd21f0a078d7a25cd1ceec16Ben Murdoch border-color: #e7e7e7; 176ba5b9a6411cb1792fd21f0a078d7a25cd1ceec16Ben Murdoch border-top-style: solid; 177ba5b9a6411cb1792fd21f0a078d7a25cd1ceec16Ben Murdoch border-width: 1px; 178ba5b9a6411cb1792fd21f0a078d7a25cd1ceec16Ben Murdoch color: #888; 179ba5b9a6411cb1792fd21f0a078d7a25cd1ceec16Ben Murdoch display: -webkit-box; 180ba5b9a6411cb1792fd21f0a078d7a25cd1ceec16Ben Murdoch padding: 14px 17px; 181ba5b9a6411cb1792fd21f0a078d7a25cd1ceec16Ben Murdoch} 1825f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) 1835f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)/* Prevent the page underneath the overlay from scrolling. */ 1845f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles).frozen { 1855f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) position: fixed; 1865f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)} 1875f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) 1885f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)#overlay-container-1 { 1895f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) z-index: 11; 1905f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)} 1915f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)#overlay-container-2 { 1925f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) z-index: 12; 1935f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)} 1945f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) 1955f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles).transparent { 1965f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles) opacity: 0; 1975f1c94371a64b3196d4be9466099bb892df9b88eTorne (Richard Coles)} 198