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 |