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.list-item {
6  -webkit-tap-highlight-color: transparent;
7  -webkit-transition: 300ms linear;
8  -webkit-transition-property: background;
9  background: transparent;
10  height: 50px;
11  padding-bottom: auto;
12  padding-top: auto;
13  position: relative; /* So the fader can be positioned at the end */
14}
15
16.list-item-active,
17.session-header .list-item.list-item-active {
18  -webkit-tap-highlight-color: transparent;
19  background: rgba(51, 181, 229, 0.4);
20}
21
22.list-item-active.no-active-delay {
23  -webkit-transition: none;
24}
25
26.list-item.standard-divider {
27  border-bottom: 1px solid #c1c1c1;
28}
29
30.list-item .section-divider {
31  background-color: #777;
32  bottom: 0;
33  height: 2px;
34  position: absolute;
35  width: 100%;
36}
37
38.list-item .icon {
39  background-position: center center;
40  background-repeat: no-repeat;
41  background-size: 24px;
42  height: 48px;
43  position: absolute;
44  width: 48px;
45}
46
47html[dir='ltr'] .list-item .icon {
48  left: 0;
49}
50
51html[dir='rtl'] .list-item .icon {
52  right: 0;
53}
54
55.list-item .title {
56  -webkit-box-align: center;
57  color: #4c4c4c;
58  display: -webkit-box;
59  font-size: 16px;
60  height: 100%;
61  overflow: hidden;
62  position: absolute;
63  top: 0;
64  white-space: nowrap;
65}
66
67html[dir='ltr'] .list-item .title {
68  -webkit-mask-image: -webkit-gradient(
69    linear,
70    left center,
71    right center,
72    from(rgba(0,0,0,1)),
73    color-stop(0.85, rgba(0,0,0,1)),
74    color-stop(0.95, rgba(0,0,0,0)),
75    to(rgba(0,0,0,0))
76  );
77  left: 50px;
78  right: 0;
79}
80
81html[dir='rtl'] .list-item .title {
82  -webkit-mask-image: -webkit-gradient(
83    linear,
84    left center,
85    right center,
86    from(rgba(0,0,0,0)),
87    color-stop(0.15, rgba(0,0,0,1)),
88    color-stop(0.05, rgba(0,0,0,0)),
89    to(rgba(0,0,0,1))
90  );
91  left: 0;
92  right: 50px;
93}
94
95.list-item .session_container {
96  width: 100%;
97}
98
99.list-item .session_title {
100  display: inline-block;
101  line-height: 50px;
102}
103
104.session-header .list-item {
105  background: #ebebeb;
106}
107
108.title .session-name {
109  color: #4c4c4c;
110  font-weight: bold;
111}
112
113.title .session-last-synced {
114  color: #8f8f8f;
115  font-weight: bold;
116}
117
118.session-children-container {
119  -webkit-transition: height 200ms ease-in-out;
120  height: 100%; /* needed for collapse animation */
121  overflow: hidden;
122}
123
124.session-header {
125  position: relative;
126}
127
128.expando {
129  background-size: 100%;
130  height: 13px;
131  margin-top: -6.5px;
132  position: absolute;
133  top: 50%;
134  width: 14px;
135}
136
137html[dir='ltr'] .expando {
138  right: 18.5px;
139}
140
141html[dir='rtl'] .expando {
142  left: 18.5px;
143}
144
145.expando.open {
146  background-image: url(images/disclosure_open_mdpi.png);
147}
148
149html[dir='rtl'] .expando.open {
150  -webkit-transform: scaleX(-1);
151}
152
153.expando.closed {
154  background-image: url(images/disclosure_closed_mdpi.png);
155}
156
157html[dir='rtl'] .expando.closed {
158  -webkit-transform: scaleX(-1);
159}
160
161.session-icon.laptop {
162  background-image: url(../../../../ui/webui/resources/images/laptop.png);
163}
164
165html[dir='rtl'] .session-icon.laptop {
166  -webkit-transform: scaleX(-1);
167}
168
169.session-icon.tablet {
170  background-image: url(../../../../ui/webui/resources/images/tablet.png);
171}
172
173html[dir='rtl'] .session-icon.tablet {
174  -webkit-transform: scaleX(-1);
175}
176
177.session-icon.phone {
178  background-image: url(../../../../ui/webui/resources/images/phone.png);
179}
180
181html[dir='rtl'] .session-icon.phone {
182  -webkit-transform: scaleX(-1);
183}
184
185.session-icon.documents {
186  background-image: url(images/sent_mdpi.png);
187}
188
189html[dir='rtl'] .session-icon.documents {
190  -webkit-transform: scaleX(-1);
191}
192
193@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
194  .expando.open {
195    background-image: url(images/disclosure_open_hdpi.png);
196  }
197  .expando.closed {
198    background-image: url(images/disclosure_closed_hdpi.png);
199  }
200  .session-icon.laptop {
201    background-image:
202        url(../../../../ui/webui/resources/images/1.5x/laptop.png);
203  }
204  .session-icon.tablet {
205    background-image:
206        url(../../../../ui/webui/resources/images/1.5x/tablet.png);
207  }
208  .session-icon.phone {
209    background-image: url(../../../../ui/webui/resources/images/1.5x/phone.png);
210  }
211  .session-icon.documents {
212    background-image: url(images/sent_hdpi.png);
213  }
214}
215
216@media screen and (-webkit-min-device-pixel-ratio: 2.0) {
217  .expando.open {
218    background-image: url(images/disclosure_open_xhdpi.png);
219  }
220  .expando.closed {
221    background-image: url(images/disclosure_closed_xhdpi.png);
222  }
223  .session-icon.laptop {
224    background-image: url(../../../../ui/webui/resources/images/2x/laptop.png);
225  }
226  .session-icon.tablet {
227    background-image: url(../../../../ui/webui/resources/images/2x/tablet.png);
228  }
229  .session-icon.phone {
230    background-image: url(../../../../ui/webui/resources/images/2x/phone.png);
231  }
232  .session-icon.documents {
233    background-image: url(images/sent_xhdpi.png);
234  }
235}
236
237.session-icon {
238  background-position: center;
239  background-repeat: no-repeat;
240  background-size: 32px 32px;
241  height: 48px;
242  width: 48px;
243}
244