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