src/chrome/browser/resources/ntp_android/mostvisited_tablet.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: show/hide selected ntp section */
   6 body[device='tablet'] .main-section {
   7   display: none;
   8 }
   9
  10 body[device='tablet'] .main-section.selected {
  11   display: block;
  12 }
  13 /* end: show/hide selected ntp section */
  14
  15 /* begin: rules to make most visited container stay at bottom */
  16 body[device='tablet'] .main-section.selected#most_visited_container {
  17   display: -webkit-box;
  18 }
  19
  20 body[device='tablet'] #most_visited_container {
  21   -webkit-box-orient: vertical;
  22 }
  23
  24 body[device='tablet'] #recently_closed_container {
  25   -webkit-box-flex: 0;
  26   margin-bottom: 10px;
  27 }
  28
  29 body[device='tablet'] .box-spacer {
  30   -webkit-box-flex: 1.0;
  31 }
  32
  33 body[device='tablet'] #most_visited_list {
  34   -webkit-box-flex: 0;
  35 }
  36 /* end: rules to make most visited container stay at bottom */
  37
  38 body[device='tablet'] #most_visited_container {
  39   overflow: hidden;
  40 }
  41
  42 body[device='tablet'] #most_visited_list {
  43   margin-top: 15px;
  44 }
  45
  46 body[device='tablet'] .thumbnail-cell {
  47   float: left;
  48   height: 210px;
  49   padding: 20px;
  50   text-align: center;
  51   width: 230px;
  52 }
  53
  54 html[dir='rtl'] body[device='tablet'] .thumbnail-cell {
  55   float: right;
  56 }
  57
  58 body[device='tablet'] #most_visited_list .thumbnail-container {
  59   border: 1px solid #999;
  60   height: 160px;
  61   position: relative;
  62   width: 100%;
  63 }
  64
  65 body[device='tablet'] #most_visited_list .thumbnail {
  66   background-image: url(images/default_thumbnail.png);
  67   background-position: center center;
  68   background-repeat: no-repeat;
  69   background-size: cover;
  70   cursor: pointer;
  71   height: 100%;
  72   width: 100%;
  73 }
  74
  75 body[device='tablet'] #most_visited_list .inner-border {
  76   background: -webkit-gradient(
  77     linear,
  78     left top,
  79     left bottom,
  80     from(rgba(0, 0, 0, 0)),
  81     to(rgba(0, 0, 0, 0.05)));
  82   border: 1px solid rgba(255, 255, 255, 0.8);
  83   height: 158px;
  84   left: 0;
  85   position: absolute;
  86   top: 0;
  87   width: 228px;
  88 }
  89
  90 body[device='tablet'] #most_visited_list .title-spacer {
  91   height: 35px;
  92   width: 0;
  93 }
  94
  95 body[device='tablet'] #most_visited_list .title {
  96   left: -10px;
  97   overflow-x: hidden;
  98   overflow-y: visible;
  99   position: relative;
 100   text-overflow: ellipsis;
 101   top: -2px;
 102   white-space: nowrap;
 103   width: 250px;
 104 }
 105
 106 html[dir='rtl'] body[device='tablet'] #most_visited_list .title {
 107   right: -10px;
 108 }
 109
 110 body[device='tablet'] .recently-closed-title-container {
 111   color: rgba(0, 0, 0, 0.5);
 112   display: inline-block;
 113   margin-top: 25px;
 114   padding-bottom: 10px;
 115   padding-left: 6px; /* match recently closed border & margin */
 116   position: relative;
 117   width: 100%;
 118 }
 119
 120 html[dir='rtl'] body[device='tablet'] .recently-closed-title-container {
 121   padding-right: 6px;
 122 }
 123
 124 body[device='tablet'] .recently-closed-title-container .title {
 125   display: block;
 126   font-size: 16px;
 127 }
 128
 129 body[device='tablet'] #recently_closed_list .cell {
 130   border: 1px solid rgba(0, 0, 0, 0.25);
 131   border-width: 1px;
 132   float: left;
 133   height: 16px;
 134   margin: 5px;
 135   overflow: hidden;
 136   padding: 5px;
 137   width: 188px;
 138 }
 139
 140 html[dir='rtl'] body[device='tablet'] #recently_closed_list .cell {
 141   float: right;
 142 }
 143
 144 body[device='tablet'] #recently_closed_list .title {
 145   color: blue;
 146   font-size: 12pt;
 147   overflow: hidden;
 148   padding-left: 2px;
 149   text-align: left;
 150   text-overflow: ellipsis;
 151 }
 152
 153 html[dir='rtl'] body[device='tablet'] #recently_closed_list .title {
 154   padding-right: 2px;
 155   text-align: right;
 156 }
 157
 158 body[device='tablet'] #recently_closed_list .icon {
 159   background-position: bottom left;
 160   background-repeat: no-repeat;
 161   background-size: 16px 16px;
 162   float: left;
 163   height: 16px;
 164   margin: 2px;
 165   position: relative;
 166   top: -1px;
 167   width: 16px;
 168 }
 169
 170 html[dir='rtl'] body[device='tablet'] #recently_closed_list .icon {
 171   float: right;
 172 }
 173