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