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