| 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 /* Begin top bar */ | |
| 6 | |
| 7 #bookmarks_title_wrapper { | |
| 8 border-bottom: 1px solid #d0d0d0; | |
| 9 display: -webkit-box; | |
| 10 font-size: 17px; | |
| 11 height: 44px; | |
| 12 line-height: 44px; | |
| 13 overflow: hidden; | |
| 14 white-space: nowrap; | |
| 15 } | |
| 16 | |
| 17 .section-title { | |
| 18 -webkit-box-flex: 1; | |
| 19 -webkit-box-orient: horizontal; | |
| 20 display: -webkit-box; | |
| 21 overflow: hidden; | |
| 22 position: absolute; | |
| 23 } | |
| 24 | |
| 25 .section-title-mask { | |
| 26 -webkit-box-flex: 1; | |
| 27 overflow: hidden; | |
| 28 position: relative; | |
| 29 } | |
| 30 | |
| 31 .overflow-left-mask { | |
| 32 background: linear-gradient( | |
| 33 to right, | |
| 34 rgba(50,50,50,0.3), | |
| 35 rgba(0,0,0,0) | |
| 36 ); | |
| 37 height: 100%; | |
| 38 left: 0; | |
| 39 position: absolute; | |
| 40 top: 0; | |
| 41 width: 10px; | |
| 42 } | |
| 43 | |
| 44 .overflow-right-mask { | |
| 45 background: linear-gradient( | |
| 46 to right, | |
| 47 rgba(0,0,0,0), | |
| 48 rgba(50,50,50,0.2) | |
| 49 ); | |
| 50 height: 100%; | |
| 51 position: absolute; | |
| 52 right: 0; | |
| 53 top: 0; | |
| 54 width: 10px; | |
| 55 } | |
| 56 | |
| 57 .bookmark-separator { | |
| 58 background-image: url(images/breadcrumb_mdpi.png); | |
| 59 background-position: center; | |
| 60 background-repeat: no-repeat; | |
| 61 background-size: 8px 20px; /* this matches the background image size */ | |
| 62 height: 44px; | |
| 63 width: 10px; | |
| 64 } | |
| 65 | |
| 66 html[dir='rtl'] .bookmark-separator { | |
| 67 -webkit-transform: scaleX(-1); | |
| 68 } | |
| 69 | |
| 70 #bookmarks_title_wrapper .title-crumb { | |
| 71 color: #555; | |
| 72 margin: 0 10px; | |
| 73 } | |
| 74 | |
| 75 #bookmarks_title_wrapper .title-crumb-active { | |
| 76 font-weight: bold; | |
| 77 margin-right: 0; | |
| 78 padding-right: 10px; | |
| 79 } | |
| 80 | |
| 81 /* Begin Bookmark Cell Items */ | |
| 82 | |
| 83 .favicon-cell { | |
| 84 -webkit-tap-highlight-color: transparent; | |
| 85 display: inline-block; | |
| 86 height: 105px; | |
| 87 padding: 11px; | |
| 88 text-align: center; | |
| 89 vertical-align: top; | |
| 90 width: 80px; | |
| 91 } | |
| 92 | |
| 93 .favicon-cell-active { | |
| 94 -webkit-tap-highlight-color: transparent; | |
| 95 background: rgba(51, 181, 229, .4); | |
| 96 } | |
| 97 | |
| 98 .favicon-box { | |
| 99 -webkit-border-radius: 10px; | |
| 100 -webkit-box-orient: vertical; | |
| 101 -webkit-box-pack: center; | |
| 102 background-repeat: no-repeat; | |
| 103 background-size: 100% 100%; | |
| 104 display: -webkit-box; | |
| 105 height: 64px; /* icon container size */ | |
| 106 margin: auto; /* horizontally center */ | |
| 107 position: relative; | |
| 108 text-align: center; | |
| 109 width: 64px; /* icon container size */ | |
| 110 } | |
| 111 | |
| 112 .favicon-box.folder { | |
| 113 background-image: url(images/bookmark_folder_mdpi.png); | |
| 114 } | |
| 115 | |
| 116 .favicon-cell .title { | |
| 117 -webkit-box-orient: vertical; | |
| 118 -webkit-line-clamp: 2; | |
| 119 display: -webkit-box; | |
| 120 height: 30px; | |
| 121 line-height: 18px; | |
| 122 overflow: hidden; | |
| 123 padding-bottom: 8px; | |
| 124 padding-top: 10px; | |
| 125 text-overflow: ellipsis; | |
| 126 word-wrap: break-word; | |
| 127 } | |
| 128 | |
| 129 .favicon-icon { | |
| 130 background-position: center; | |
| 131 background-repeat: no-repeat; | |
| 132 height: 100%; | |
| 133 width: 100%; | |
| 134 } | |
| 135 | |
| 136 .favicon-icon.document { | |
| 137 left: 0; | |
| 138 position: absolute; | |
| 139 top: 0; | |
| 140 } | |
| 141 | |
| 142 .bookmark-border { | |
| 143 background-image: url(images/bookmark_border_mdpi.png); | |
| 144 background-size: 100%; | |
| 145 height: 64px; | |
| 146 left: 0; | |
| 147 position: absolute; | |
| 148 top: 0; | |
| 149 width: 64px; | |
| 150 } | |
| 151 | |
| 152 .favicon-box.document { | |
| 153 /* a 'document' favicon looks like a little web page with the favicon | |
| 154 in top left corner */ | |
| 155 background-image: url(images/bookmark_bg_mdpi.png); | |
| 156 margin: auto; /* horizontally center */ | |
| 157 margin-bottom: 0; | |
| 158 margin-top: 0; | |
| 159 } | |
| 160 | |
| 161 .favicon-box.document .fold-container { | |
| 162 position: absolute; | |
| 163 right: 7px; | |
| 164 top: 3px; | |
| 165 } | |
| 166 | |
| 167 .favicon-box.document .fold { | |
| 168 box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2); | |
| 169 height: 12px; | |
| 170 width: 12px; | |
| 171 } | |
| 172 | |
| 173 .favicon-box.document .active-shade { | |
| 174 /* Shade overlay for favicon's when pressed */ | |
| 175 background-color: #000; | |
| 176 height: 100%; | |
| 177 left: 0; | |
| 178 opacity: 0; | |
| 179 position: absolute; | |
| 180 top: 0; | |
| 181 width: 100%; | |
| 182 } | |
| 183 | |
| 184 .favicon-box.document .active-shade:active { | |
| 185 opacity: 0.15; | |
| 186 } | |
| 187 | |
| 188 .favicon-box.document .color-strip { | |
| 189 /* the color strip is an overlay across the bottom of the icon */ | |
| 190 border-bottom-left-radius: 2px; | |
| 191 border-bottom-right-radius: 2px; | |
| 192 bottom: 3px; | |
| 193 height: 4px; | |
| 194 left: 7px; | |
| 195 position: absolute; | |
| 196 width: 50px; | |
| 197 } | |
| 198 | |
| 199 .favicon-box.document .favicon-icon { | |
| 200 background-size: 16px 16px; | |
| 201 } | |
| 202 | |
| 203 .favicon-icon.touch-icon { | |
| 204 background-size: 100%; | |
| 205 border-radius: 16px; /* remove any junk in the corners of the favicon */ | |
| 206 height: 57px; /* touch-icon size */ | |
| 207 margin: auto; /* horizontally center */ | |
| 208 margin-bottom: 4px; | |
| 209 margin-top: 3px; /* (64 - 57) / 2 = 3.5 */ | |
| 210 width: 57px; /* touch-icon size */ | |
| 211 } | |
| 212 | |
| 213 @media screen and (-webkit-min-device-pixel-ratio: 1.32) { | |
| 214 .favicon-box.document { | |
| 215 background-image: url(images/bookmark_bg_tvdpi.png); | |
| 216 } | |
| 217 .bookmark-border { | |
| 218 background-image: url(images/bookmark_border_tvdpi.png); | |
| 219 } | |
| 220 .favicon-box.folder { | |
| 221 background-image: url(images/bookmark_folder_tvdpi.png); | |
| 222 } | |
| 223 .bookmark-separator { | |
| 224 background-image: url(images/breadcrumb_tvdpi.png); | |
| 225 } | |
| 226 | |
| 227 /* tweaked spacing, presumably because of rounding error */ | |
| 228 .favicon-box { | |
| 229 width: 65px; | |
| 230 } | |
| 231 .favicon-box.document .fold-container { | |
| 232 right: 8px; | |
| 233 } | |
| 234 .favicon-box.document .color-strip { | |
| 235 left: 8px; | |
| 236 width: 48px; | |
| 237 } | |
| 238 } | |
| 239 | |
| 240 @media screen and (-webkit-min-device-pixel-ratio: 1.5) { | |
| 241 .favicon-box.document { | |
| 242 background-image: url(images/bookmark_bg_hdpi.png); | |
| 243 } | |
| 244 .bookmark-border { | |
| 245 background-image: url(images/bookmark_border_hdpi.png); | |
| 246 } | |
| 247 .favicon-box.folder { | |
| 248 background-image: url(images/bookmark_folder_hdpi.png); | |
| 249 } | |
| 250 .bookmark-separator { | |
| 251 background-image: url(images/breadcrumb_hdpi.png); | |
| 252 } | |
| 253 } | |
| 254 | |
| 255 @media screen and (-webkit-min-device-pixel-ratio: 2.0) { | |
| 256 .favicon-box.document { | |
| 257 background-image: url(images/bookmark_bg_xhdpi.png); | |
| 258 } | |
| 259 .bookmark-border { | |
| 260 background-image: url(images/bookmark_border_xhdpi.png); | |
| 261 } | |
| 262 .favicon-box.folder { | |
| 263 background-image: url(images/bookmark_folder_xhdpi.png); | |
| 264 } | |
| 265 .bookmark-separator { | |
| 266 background-image: url(images/breadcrumb_xhdpi.png); | |
| 267 } | |
| 268 } | |
| OLD | NEW |