src/chrome/browser/resources/ntp_android/bookmarks.css

   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 }