| /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| /* Begin top bar */ |
| |
| #bookmarks_title_wrapper { |
| border-bottom: 1px solid #d0d0d0; |
| display: -webkit-box; |
| font-size: 17px; |
| height: 44px; |
| line-height: 44px; |
| overflow: hidden; |
| white-space: nowrap; |
| } |
| |
| .section-title { |
| -webkit-box-flex: 1; |
| -webkit-box-orient: horizontal; |
| display: -webkit-box; |
| overflow: hidden; |
| position: absolute; |
| } |
| |
| .section-title-mask { |
| -webkit-box-flex: 1; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| .overflow-left-mask { |
| background: -webkit-gradient( |
| linear, |
| left center, |
| right center, |
| from(rgba(50,50,50,0.3)), |
| to(rgba(0,0,0,0)) |
| ); |
| height: 100%; |
| left: 0; |
| position: absolute; |
| top: 0; |
| width: 10px; |
| } |
| |
| .overflow-right-mask { |
| background: -webkit-gradient( |
| linear, |
| left center, |
| right center, |
| from(rgba(0,0,0,0)), |
| to(rgba(50,50,50,0.2)) |
| ); |
| height: 100%; |
| position: absolute; |
| right: 0; |
| top: 0; |
| width: 10px; |
| } |
| |
| .bookmark-separator { |
| background-image: url(images/breadcrumb_mdpi.png); |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: 8px 20px; /* this matches the background image size */ |
| height: 44px; |
| width: 10px; |
| } |
| |
| html[dir='rtl'] .bookmark-separator { |
| -webkit-transform: scaleX(-1); |
| } |
| |
| #bookmarks_title_wrapper .title-crumb { |
| color: #555; |
| margin: 0 10px; |
| } |
| |
| #bookmarks_title_wrapper .title-crumb-active { |
| font-weight: bold; |
| margin-right: 0; |
| padding-right: 10px; |
| } |
| |
| /* Begin Bookmark Cell Items */ |
| |
| .favicon-cell { |
| -webkit-tap-highlight-color: transparent; |
| display: inline-block; |
| height: 105px; |
| padding: 11px; |
| text-align: center; |
| vertical-align: top; |
| width: 80px; |
| } |
| |
| .favicon-cell-active { |
| -webkit-tap-highlight-color: transparent; |
| background: rgba(51, 181, 229, .4); |
| } |
| |
| .favicon-box { |
| -webkit-border-radius: 10px; |
| -webkit-box-orient: vertical; |
| -webkit-box-pack: center; |
| background-repeat: no-repeat; |
| background-size: 100% 100%; |
| display: -webkit-box; |
| height: 64px; /* icon container size */ |
| margin: auto; /* horizontally center */ |
| position: relative; |
| text-align: center; |
| width: 64px; /* icon container size */ |
| } |
| |
| .favicon-box.folder { |
| background-image: url(images/bookmark_folder_mdpi.png); |
| } |
| |
| .favicon-cell .title { |
| -webkit-box-orient: vertical; |
| -webkit-line-clamp: 2; |
| display: -webkit-box; |
| height: 30px; |
| line-height: 18px; |
| overflow: hidden; |
| padding-bottom: 8px; |
| padding-top: 10px; |
| text-overflow: ellipsis; |
| word-wrap: break-word; |
| } |
| |
| .favicon-icon { |
| background-position: center; |
| background-repeat: no-repeat; |
| height: 100%; |
| width: 100%; |
| } |
| |
| .favicon-icon.document { |
| left: 0; |
| position: absolute; |
| top: 0; |
| } |
| |
| .bookmark-border { |
| background-image: url(images/bookmark_border_mdpi.png); |
| background-size: 100%; |
| height: 64px; |
| left: 0; |
| position: absolute; |
| top: 0; |
| width: 64px; |
| } |
| |
| .favicon-box.document { |
| /* a 'document' favicon looks like a little web page with the favicon |
| in top left corner */ |
| background-image: url(images/bookmark_bg_mdpi.png); |
| margin: auto; /* horizontally center */ |
| margin-bottom: 0; |
| margin-top: 0; |
| } |
| |
| .favicon-box.document .fold-container { |
| position: absolute; |
| right: 7px; |
| top: 3px; |
| } |
| |
| .favicon-box.document .fold { |
| box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2); |
| height: 12px; |
| width: 12px; |
| } |
| |
| .favicon-box.document .active-shade { |
| /* Shade overlay for favicon's when pressed */ |
| background-color: #000; |
| height: 100%; |
| left: 0; |
| opacity: 0; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| .favicon-box.document .active-shade:active { |
| opacity: 0.15; |
| } |
| |
| .favicon-box.document .color-strip { |
| /* the color strip is an overlay across the bottom of the icon */ |
| border-bottom-left-radius: 2px; |
| border-bottom-right-radius: 2px; |
| bottom: 3px; |
| height: 4px; |
| left: 7px; |
| position: absolute; |
| width: 50px; |
| } |
| |
| .favicon-box.document .favicon-icon { |
| background-size: 16px 16px; |
| } |
| |
| .favicon-icon.touch-icon { |
| background-size: 100%; |
| border-radius: 16px; /* remove any junk in the corners of the favicon */ |
| height: 57px; /* touch-icon size */ |
| margin: auto; /* horizontally center */ |
| margin-bottom: 4px; |
| margin-top: 3px; /* (64 - 57) / 2 = 3.5 */ |
| width: 57px; /* touch-icon size */ |
| } |
| |
| @media screen and (-webkit-min-device-pixel-ratio: 1.32) { |
| .favicon-box.document { |
| background-image: url(images/bookmark_bg_tvdpi.png); |
| } |
| .bookmark-border { |
| background-image: url(images/bookmark_border_tvdpi.png); |
| } |
| .favicon-box.folder { |
| background-image: url(images/bookmark_folder_tvdpi.png); |
| } |
| .bookmark-separator { |
| background-image: url(images/breadcrumb_tvdpi.png); |
| } |
| |
| /* tweaked spacing, presumably because of rounding error */ |
| .favicon-box { |
| width: 65px; |
| } |
| .favicon-box.document .fold-container { |
| right: 8px; |
| } |
| .favicon-box.document .color-strip { |
| left: 8px; |
| width: 48px; |
| } |
| } |
| |
| @media screen and (-webkit-min-device-pixel-ratio: 1.5) { |
| .favicon-box.document { |
| background-image: url(images/bookmark_bg_hdpi.png); |
| } |
| .bookmark-border { |
| background-image: url(images/bookmark_border_hdpi.png); |
| } |
| .favicon-box.folder { |
| background-image: url(images/bookmark_folder_hdpi.png); |
| } |
| .bookmark-separator { |
| background-image: url(images/breadcrumb_hdpi.png); |
| } |
| } |
| |
| @media screen and (-webkit-min-device-pixel-ratio: 2.0) { |
| .favicon-box.document { |
| background-image: url(images/bookmark_bg_xhdpi.png); |
| } |
| .bookmark-border { |
| background-image: url(images/bookmark_border_xhdpi.png); |
| } |
| .favicon-box.folder { |
| background-image: url(images/bookmark_folder_xhdpi.png); |
| } |
| .bookmark-separator { |
| background-image: url(images/breadcrumb_xhdpi.png); |
| } |
| } |