1/* Copyright 2014 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 6.tutorial-slide { 7 -webkit-transition: opacity 200ms ease-in-out; 8 background-color: white; 9 border-radius: 2px; 10 bottom: 0; 11 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); 12 height: 408px; 13 left: 0; 14 margin: auto; 15 position: absolute; 16 right: 0; 17 top: 0; 18 width: 320px; 19 z-index: 100; 20} 21 22.tutorial-slide.single-pod { 23 margin-left: 30px; 24} 25 26html[dir=rtl] .tutorial-slide.single-pod { 27 margin-right: 30px; 28} 29 30.hidden { 31 opacity: 0; 32 pointer-events: none; 33} 34 35#slide-guests { 36 bottom: 20px; 37 left: 20px; 38 margin: 0; 39 top: auto; 40} 41 42html[dir=rtl] #slide-guests { 43 right: 20px; 44} 45 46#slide-friends, 47#slide-not-you { 48 bottom: 20px; 49 left: 60px; 50 margin: 0; 51 top: auto; 52} 53 54html[dir=rtl] #slide-friends, 55html[dir=rtl] #slide-not-you { 56 right: 60px; 57} 58 59#slide-not-you { 60 height: 100px; 61 left: 100px; 62 margin: 0; 63 width: 240px; 64} 65 66html[dir=rtl] #slide-not-you { 67 right: 100px; 68} 69 70.slide-contents { 71 padding: 0 20px; 72 text-align: center; 73} 74 75.slide-title { 76 color: black; 77 font-size: 20px; 78 line-height: 20px; 79 margin: 30px 0; 80} 81 82.slide-text { 83 color: #666; 84 font-size: 15px; 85 line-height: 20px; 86} 87 88.slide-buttons { 89 bottom: 20px; 90 position: absolute; 91 text-align: center; 92 width: 100%; 93} 94 95.slide-buttons .link-button { 96 width: 100%; 97} 98 99.slide-buttons button { 100 bottom: 0; 101 height: 35px; 102 padding: 0 15px; 103 width: 138px; 104} 105 106.slide-buttons button.left { 107 left: 16px; 108 position: absolute; 109} 110 111html[dir=rtl] .slide-buttons button.left { 112 right: 16px; 113} 114 115.slide-buttons button.right { 116 bottom: 0; 117 position: absolute; 118} 119 120.arrow-down { 121 border-left: 15px solid transparent; 122 border-right: 15px solid transparent; 123 border-top: 15px solid white; 124 bottom: -15px; 125 height: 0; 126 left: 120px; 127 position: absolute; 128 width: 0; 129} 130 131#slide-not-you .arrow-down { 132 left: 100px; 133} 134 135html[dir=rtl] #slide-not-you .arrow-down { 136 right: 100px; 137} 138 139#slide-guests .arrow-down { 140 left: 60px; 141} 142 143html[dir=rtl] #slide-guests .arrow-down { 144 right: 60px; 145} 146 147.slide-image { 148 height: 182px; 149} 150 151#slide-your-chrome .slide-image { 152 background-color: rgb(241, 202, 58); 153 background-image: url( 154 'chrome://theme/IDR_ICON_USER_MANAGER_TUTORIAL_YOUR_CHROME'); 155} 156 157#slide-guests .slide-image { 158 background-color: rgb(90, 196, 144); 159 background-image: url('chrome://theme/IDR_ICON_USER_MANAGER_TUTORIAL_GUESTS'); 160} 161 162#slide-friends .slide-image { 163 background-color: rgb(179, 229, 252); 164 background-image: url( 165 'chrome://theme/IDR_ICON_USER_MANAGER_TUTORIAL_FRIENDS'); 166} 167 168#slide-complete .slide-image { 169 background-color: white; 170 background-image: url( 171 'chrome://theme/IDR_ICON_USER_MANAGER_TUTORIAL_COMPLETE'); 172} 173 174#slide-not-you #dismiss-bubble-button { 175 background-image: url('chrome://theme/IDR_CLOSE_1'); 176 cursor: pointer; 177 height: 16px; 178 position: absolute; 179 right: 5px; 180 top: 5px; 181 width: 16px; 182} 183 184html[dir=rtl] #slide-not-you #dismiss-bubble-button { 185 left: 5px; 186} 187