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 5 /* The shield that overlays the background. */ 6 .overlay { 7 -webkit-box-align: center; 8 -webkit-box-orient: vertical; 9 -webkit-box-pack: center; 10 -webkit-transition: 200ms opacity; 11 background-color: rgba(255, 255, 255, 0.75); 12 bottom: 0; 13 display: -webkit-box; 14 left: 0; 15 overflow: auto; 16 padding: 20px; 17 position: fixed; 18 right: 0; 19 top: 0; 20 } 21 22 /* Used to slide in the overlay. */ 23 .overlay.transparent .page { 24 /* TODO(flackr): Add perspective(500px) rotateX(5deg) when accelerated 25 * compositing is enabled on chrome:// pages. See http://crbug.com/116800. */ 26 -webkit-transform: scale(0.99) translateY(-20px); 27 } 28 29 /* The foreground dialog. */ 30 .overlay .page { 31 -webkit-border-radius: 3px; 32 -webkit-box-orient: vertical; 33 -webkit-transition: 200ms -webkit-transform; 34 background: white; 35 box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15); 36 color: #333; 37 display: -webkit-box; 38 min-width: 400px; 39 padding: 0; 40 position: relative; 41 } 42 43 /* If the options page is loading don't do the transition. */ 44 .loading .overlay, 45 .loading .overlay .page { 46 -webkit-transition-duration: 0 !important; 47 } 48 49 /* keyframes used to pulse the overlay */ 50 @-webkit-keyframes pulse { 51 0% { 52 -webkit-transform: scale(1); 53 } 54 40% { 55 -webkit-transform: scale(1.02); 56 } 57 60% { 58 -webkit-transform: scale(1.02); 59 } 60 100% { 61 -webkit-transform: scale(1); 62 } 63 } 64 65 .overlay .page.pulse { 66 -webkit-animation-duration: 180ms; 67 -webkit-animation-iteration-count: 1; 68 -webkit-animation-name: pulse; 69 -webkit-animation-timing-function: ease-in-out; 70 } 71 72 .overlay .page > .close-button { 73 background-image: url('chrome://resources/images/x.png'); 74 background-position: center; 75 background-repeat: no-repeat; 76 height: 24px; 77 position: absolute; 78 right: 10px; 79 top: 10px; 80 width: 24px; 81 } 82 83 html[dir='rtl'] .overlay .page > .close-button { 84 left: 10px; 85 right: auto; 86 } 87 88 .overlay .page > .close-button:hover { 89 background-image: url('chrome://resources/images/x-hover.png'); 90 } 91 92 .overlay .page h1 { 93 -webkit-padding-end: 24px; 94 -webkit-user-select: none; 95 color: #333; 96 /* 120% of the body's font-size of 84% is 16px. This will keep the relative 97 * size between the body and these titles consistent. */ 98 font-size: 120%; 99 /* TODO(flackr): Pages like sync-setup and delete user collapse the margin 100 * above the top of the page. Use padding instead to make sure that the 101 * headers of these pages have the correct spacing, but this should not be 102 * necessary. See http://crbug.com/119029. */ 103 margin: 0; 104 padding: 14px 17px 14px; 105 text-shadow: white 0 1px 2px; 106 } 107 108 .overlay .page .content-area { 109 -webkit-box-flex: 1; 110 overflow: auto; 111 padding: 6px 17px 6px; 112 } 113 114 .overlay .page .action-area { 115 -webkit-box-align: center; 116 -webkit-box-orient: horizontal; 117 -webkit-box-pack: end; 118 display: -webkit-box; 119 padding: 14px; 120 } 121 122 html[dir='rtl'] .overlay .page .action-area { 123 left: 0; 124 } 125 126 .overlay .page .action-area-right { 127 display: -webkit-box; 128 } 129 130 .overlay .page .button-strip { 131 -webkit-box-orient: horizontal; 132 display: -webkit-box; 133 } 134 135 .overlay .page .button-strip > button { 136 -webkit-margin-start: 10px; 137 display: block; 138 } 139
