chrome/browser/resources/ntp_android/opentabs.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 .list-item {
   6   -webkit-tap-highlight-color: transparent;
   7   -webkit-transition: 300ms linear;
   8   -webkit-transition-property: background;
   9   background: transparent;
  10   height: 50px;
  11   padding-bottom: auto;
  12   padding-top: auto;
  13   position: relative; /* So the fader can be positioned at the end */
  14 }
  15
  16 .list-item-active,
  17 .session-header .list-item.list-item-active {
  18   -webkit-tap-highlight-color: transparent;
  19   background: rgba(51, 181, 229, 0.4);
  20 }
  21
  22 .list-item-active.no-active-delay {
  23   -webkit-transition: none;
  24 }
  25
  26 .list-item.standard-divider {
  27   border-bottom: 1px solid #c1c1c1;
  28 }
  29
  30 .list-item .section-divider {
  31   background-color: #777;
  32   bottom: 0;
  33   height: 2px;
  34   position: absolute;
  35   width: 100%;
  36 }
  37
  38 .list-item .icon {
  39   background-position: center center;
  40   background-repeat: no-repeat;
  41   background-size: 24px;
  42   height: 48px;
  43   position: absolute;
  44   width: 48px;
  45 }
  46
  47 html[dir='ltr'] .list-item .icon {
  48   left: 0;
  49 }
  50
  51 html[dir='rtl'] .list-item .icon {
  52   right: 0;
  53 }
  54
  55 .list-item .title {
  56   -webkit-box-align: center;
  57   color: #4c4c4c;
  58   display: -webkit-box;
  59   font-size: 16px;
  60   height: 100%;
  61   overflow: hidden;
  62   position: absolute;
  63   top: 0;
  64   white-space: nowrap;
  65 }
  66
  67 html[dir='ltr'] .list-item .title {
  68   -webkit-mask-image: -webkit-gradient(
  69     linear,
  70     left center,
  71     right center,
  72     from(rgba(0,0,0,1)),
  73     color-stop(0.85, rgba(0,0,0,1)),
  74     color-stop(0.95, rgba(0,0,0,0)),
  75     to(rgba(0,0,0,0))
  76   );
  77   left: 50px;
  78   right: 0;
  79 }
  80
  81 html[dir='rtl'] .list-item .title {
  82   -webkit-mask-image: -webkit-gradient(
  83     linear,
  84     left center,
  85     right center,
  86     from(rgba(0,0,0,0)),
  87     color-stop(0.15, rgba(0,0,0,1)),
  88     color-stop(0.05, rgba(0,0,0,0)),
  89     to(rgba(0,0,0,1))
  90   );
  91   left: 0;
  92   right: 50px;
  93 }
  94
  95 .list-item .session_container {
  96   width: 100%;
  97 }
  98
  99 .list-item .session_title {
 100   display: inline-block;
 101   line-height: 50px;
 102 }
 103
 104 .session-header .list-item {
 105   background: #ebebeb;
 106 }
 107
 108 .title .session-name {
 109   color: #4c4c4c;
 110   font-weight: bold;
 111 }
 112
 113 .title .session-last-synced {
 114   color: #8f8f8f;
 115   font-weight: bold;
 116 }
 117
 118 .session-children-container {
 119   -webkit-transition: height 200ms ease-in-out;
 120   height: 100%; /* needed for collapse animation */
 121   overflow: hidden;
 122 }
 123
 124 .session-header {
 125   position: relative;
 126 }
 127
 128 .expando {
 129   background-size: 100%;
 130   height: 13px;
 131   margin-top: -6.5px;
 132   position: absolute;
 133   top: 50%;
 134   width: 14px;
 135 }
 136
 137 html[dir='ltr'] .expando {
 138   right: 18.5px;
 139 }
 140
 141 html[dir='rtl'] .expando {
 142   left: 18.5px;
 143 }
 144
 145 .expando.open {
 146   background-image: url(images/disclosure_open_mdpi.png);
 147 }
 148
 149 html[dir='rtl'] .expando.open {
 150   -webkit-transform: scaleX(-1);
 151 }
 152
 153 .expando.closed {
 154   background-image: url(images/disclosure_closed_mdpi.png);
 155 }
 156
 157 html[dir='rtl'] .expando.closed {
 158   -webkit-transform: scaleX(-1);
 159 }
 160
 161 .session-icon.laptop {
 162   background-image: url(../../../../ui/webui/resources/images/laptop.png);
 163 }
 164
 165 html[dir='rtl'] .session-icon.laptop {
 166   -webkit-transform: scaleX(-1);
 167 }
 168
 169 .session-icon.tablet {
 170   background-image: url(../../../../ui/webui/resources/images/tablet.png);
 171 }
 172
 173 html[dir='rtl'] .session-icon.tablet {
 174   -webkit-transform: scaleX(-1);
 175 }
 176
 177 .session-icon.phone {
 178   background-image: url(../../../../ui/webui/resources/images/phone.png);
 179 }
 180
 181 html[dir='rtl'] .session-icon.phone {
 182   -webkit-transform: scaleX(-1);
 183 }
 184
 185 .session-icon.documents {
 186   background-image: url(images/sent_mdpi.png);
 187 }
 188
 189 html[dir='rtl'] .session-icon.documents {
 190   -webkit-transform: scaleX(-1);
 191 }
 192
 193 @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
 194   .expando.open {
 195     background-image: url(images/disclosure_open_hdpi.png);
 196   }
 197   .expando.closed {
 198     background-image: url(images/disclosure_closed_hdpi.png);
 199   }
 200   .session-icon.laptop {
 201     background-image:
 202         url(../../../../ui/webui/resources/images/1.5x/laptop.png);
 203   }
 204   .session-icon.tablet {
 205     background-image:
 206         url(../../../../ui/webui/resources/images/1.5x/tablet.png);
 207   }
 208   .session-icon.phone {
 209     background-image: url(../../../../ui/webui/resources/images/1.5x/phone.png);
 210   }
 211   .session-icon.documents {
 212     background-image: url(images/sent_hdpi.png);
 213   }
 214 }
 215
 216 @media screen and (-webkit-min-device-pixel-ratio: 2.0) {
 217   .expando.open {
 218     background-image: url(images/disclosure_open_xhdpi.png);
 219   }
 220   .expando.closed {
 221     background-image: url(images/disclosure_closed_xhdpi.png);
 222   }
 223   .session-icon.laptop {
 224     background-image: url(../../../../ui/webui/resources/images/2x/laptop.png);
 225   }
 226   .session-icon.tablet {
 227     background-image: url(../../../../ui/webui/resources/images/2x/tablet.png);
 228   }
 229   .session-icon.phone {
 230     background-image: url(../../../../ui/webui/resources/images/2x/phone.png);
 231   }
 232   .session-icon.documents {
 233     background-image: url(images/sent_xhdpi.png);
 234   }
 235 }
 236
 237 .session-icon {
 238   background-position: center;
 239   background-repeat: no-repeat;
 240   background-size: 32px 32px;
 241   height: 48px;
 242   width: 48px;
 243 }