OLD | NEW |
| (Empty) |
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 | |
47 html[dir='ltr'] .list-item .icon { | |
48 left: 0; | |
49 } | |
50 | |
51 html[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 | |
67 html[dir='ltr'] .list-item .title { | |
68 -webkit-mask-image: linear-gradient( | |
69 to right, | |
70 rgba(0,0,0,1), | |
71 rgba(0,0,0,1) 85%, | |
72 rgba(0,0,0,0) 95%, | |
73 rgba(0,0,0,0)) | |
74 ); | |
75 left: 50px; | |
76 right: 0; | |
77 } | |
78 | |
79 html[dir='rtl'] .list-item .title { | |
80 -webkit-mask-image: linear-gradient( | |
81 to right, | |
82 rgba(0,0,0,0)), | |
83 rgba(0,0,0,0) 5%, | |
84 rgba(0,0,0,1) 15%, | |
85 rgba(0,0,0,1)) | |
86 ); | |
87 left: 0; | |
88 right: 50px; | |
89 } | |
90 | |
91 .list-item .session_container { | |
92 width: 100%; | |
93 } | |
94 | |
95 .list-item .session_title { | |
96 display: inline-block; | |
97 line-height: 50px; | |
98 } | |
99 | |
100 .session-header .list-item { | |
101 background: #ebebeb; | |
102 } | |
103 | |
104 .title .session-name { | |
105 color: #4c4c4c; | |
106 font-weight: bold; | |
107 } | |
108 | |
109 .title .session-last-synced { | |
110 color: #8f8f8f; | |
111 font-weight: bold; | |
112 } | |
113 | |
114 .session-children-container { | |
115 -webkit-transition: height 200ms ease-in-out; | |
116 height: 100%; /* needed for collapse animation */ | |
117 overflow: hidden; | |
118 } | |
119 | |
120 .session-header { | |
121 position: relative; | |
122 } | |
123 | |
124 .expando { | |
125 background-size: 100%; | |
126 height: 13px; | |
127 margin-top: -6.5px; | |
128 position: absolute; | |
129 top: 50%; | |
130 width: 14px; | |
131 } | |
132 | |
133 html[dir='ltr'] .expando { | |
134 right: 18.5px; | |
135 } | |
136 | |
137 html[dir='rtl'] .expando { | |
138 left: 18.5px; | |
139 } | |
140 | |
141 .expando.open { | |
142 background-image: url(images/disclosure_open_mdpi.png); | |
143 } | |
144 | |
145 html[dir='rtl'] .expando.open { | |
146 -webkit-transform: scaleX(-1); | |
147 } | |
148 | |
149 .expando.closed { | |
150 background-image: url(images/disclosure_closed_mdpi.png); | |
151 } | |
152 | |
153 html[dir='rtl'] .expando.closed { | |
154 -webkit-transform: scaleX(-1); | |
155 } | |
156 | |
157 .session-icon.laptop { | |
158 background-image: url(../../../../ui/webui/resources/images/laptop.png); | |
159 } | |
160 | |
161 html[dir='rtl'] .session-icon.laptop { | |
162 -webkit-transform: scaleX(-1); | |
163 } | |
164 | |
165 .session-icon.tablet { | |
166 background-image: url(../../../../ui/webui/resources/images/tablet.png); | |
167 } | |
168 | |
169 html[dir='rtl'] .session-icon.tablet { | |
170 -webkit-transform: scaleX(-1); | |
171 } | |
172 | |
173 .session-icon.phone { | |
174 background-image: url(../../../../ui/webui/resources/images/phone.png); | |
175 } | |
176 | |
177 html[dir='rtl'] .session-icon.phone { | |
178 -webkit-transform: scaleX(-1); | |
179 } | |
180 | |
181 .session-icon.documents { | |
182 background-image: url(images/sent_mdpi.png); | |
183 } | |
184 | |
185 html[dir='rtl'] .session-icon.documents { | |
186 -webkit-transform: scaleX(-1); | |
187 } | |
188 | |
189 @media screen and (-webkit-min-device-pixel-ratio: 1.5) { | |
190 .expando.open { | |
191 background-image: url(images/disclosure_open_hdpi.png); | |
192 } | |
193 .expando.closed { | |
194 background-image: url(images/disclosure_closed_hdpi.png); | |
195 } | |
196 .session-icon.laptop { | |
197 background-image: | |
198 url(../../../../ui/webui/resources/images/1.5x/laptop.png); | |
199 } | |
200 .session-icon.tablet { | |
201 background-image: | |
202 url(../../../../ui/webui/resources/images/1.5x/tablet.png); | |
203 } | |
204 .session-icon.phone { | |
205 background-image: url(../../../../ui/webui/resources/images/1.5x/phone.png); | |
206 } | |
207 .session-icon.documents { | |
208 background-image: url(images/sent_hdpi.png); | |
209 } | |
210 } | |
211 | |
212 @media screen and (-webkit-min-device-pixel-ratio: 2.0) { | |
213 .expando.open { | |
214 background-image: url(images/disclosure_open_xhdpi.png); | |
215 } | |
216 .expando.closed { | |
217 background-image: url(images/disclosure_closed_xhdpi.png); | |
218 } | |
219 .session-icon.laptop { | |
220 background-image: url(../../../../ui/webui/resources/images/2x/laptop.png); | |
221 } | |
222 .session-icon.tablet { | |
223 background-image: url(../../../../ui/webui/resources/images/2x/tablet.png); | |
224 } | |
225 .session-icon.phone { | |
226 background-image: url(../../../../ui/webui/resources/images/2x/phone.png); | |
227 } | |
228 .session-icon.documents { | |
229 background-image: url(images/sent_xhdpi.png); | |
230 } | |
231 } | |
232 | |
233 .session-icon { | |
234 background-position: center; | |
235 background-repeat: no-repeat; | |
236 background-size: 32px 32px; | |
237 height: 48px; | |
238 width: 48px; | |
239 } | |
OLD | NEW |