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: linear-gradient(
  77     to bottom,
  78     rgba(0, 0, 0, 0),
  79     rgba(0, 0, 0, 0.05));
  80   border: 1px solid rgba(255, 255, 255, 0.8);
  81   height: 158px;
  82   left: 0;
  83   position: absolute;
  84   top: 0;
  85   width: 228px;
  86 }
  87
  88 body[device='tablet'] #most_visited_list .title-spacer {
  89   height: 35px;
  90   width: 0;
  91 }
  92
  93 body[device='tablet'] #most_visited_list .title {
  94   left: -10px;
  95   overflow-x: hidden;
  96   overflow-y: visible;
  97   position: relative;
  98   text-overflow: ellipsis;
  99   top: -2px;
 100   white-space: nowrap;
 101   width: 250px;
 102 }
 103
 104 html[dir='rtl'] body[device='tablet'] #most_visited_list .title {
 105   right: -10px;
 106 }
 107
 108 body[device='tablet'] .recently-closed-title-container {
 109   color: rgba(0, 0, 0, 0.5);
 110   display: inline-block;
 111   margin-top: 25px;
 112   padding-bottom: 10px;
 113   padding-left: 6px; /* match recently closed border & margin */
 114   position: relative;
 115   width: 100%;
 116 }
 117
 118 html[dir='rtl'] body[device='tablet'] .recently-closed-title-container {
 119   padding-right: 6px;
 120 }
 121
 122 body[device='tablet'] .recently-closed-title-container .title {
 123   display: block;
 124   font-size: 16px;
 125 }
 126
 127 body[device='tablet'] #recently_closed_list .cell {
 128   border: 1px solid rgba(0, 0, 0, 0.25);
 129   border-width: 1px;
 130   float: left;
 131   height: 16px;
 132   margin: 5px;
 133   overflow: hidden;
 134   padding: 5px;
 135   width: 188px;
 136 }
 137
 138 html[dir='rtl'] body[device='tablet'] #recently_closed_list .cell {
 139   float: right;
 140 }
 141
 142 body[device='tablet'] #recently_closed_list .title {
 143   color: blue;
 144   font-size: 12pt;
 145   overflow: hidden;
 146   padding-left: 2px;
 147   text-align: left;
 148   text-overflow: ellipsis;
 149 }
 150
 151 html[dir='rtl'] body[device='tablet'] #recently_closed_list .title {
 152   padding-right: 2px;
 153   text-align: right;
 154 }
 155
 156 body[device='tablet'] #recently_closed_list .icon {
 157   background-position: bottom left;
 158   background-repeat: no-repeat;
 159   background-size: 16px 16px;
 160   float: left;
 161   height: 16px;
 162   margin: 2px;
 163   position: relative;
 164   top: -1px;
 165   width: 16px;
 166 }
 167
 168 html[dir='rtl'] body[device='tablet'] #recently_closed_list .icon {
 169   float: right;
 170 }
 171