src/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: linear-gradient(
  69     to right,
  70     rgba(0,0,0,1),
  71     rgba(0,0,0,1) 85%,
  72     rgba(0,0,0,0) 95%,
  73     rgba(0,0,0,0))
  74   );
  75   left: 50px;
  76   right: 0;
  77 }
  78
  79 html[dir='rtl'] .list-item .title {
  80   -webkit-mask-image: linear-gradient(
  81     to right,
  82     rgba(0,0,0,0)),
  83     rgba(0,0,0,0) 5%,
  84     rgba(0,0,0,1) 15%,
  85     rgba(0,0,0,1))
  86   );
  87   left: 0;
  88   right: 50px;
  89 }
  90
  91 .list-item .session_container {
  92   width: 100%;
  93 }
  94
  95 .list-item .session_title {
  96   display: inline-block;
  97   line-height: 50px;
  98 }
  99
 100 .session-header .list-item {
 101   background: #ebebeb;
 102 }
 103
 104 .title .session-name {
 105   color: #4c4c4c;
 106   font-weight: bold;
 107 }
 108
 109 .title .session-last-synced {
 110   color: #8f8f8f;
 111   font-weight: bold;
 112 }
 113
 114 .session-children-container {
 115   -webkit-transition: height 200ms ease-in-out;
 116   height: 100%; /* needed for collapse animation */
 117   overflow: hidden;
 118 }
 119
 120 .session-header {
 121   position: relative;
 122 }
 123
 124 .expando {
 125   background-size: 100%;
 126   height: 13px;
 127   margin-top: -6.5px;
 128   position: absolute;
 129   top: 50%;
 130   width: 14px;
 131 }
 132
 133 html[dir='ltr'] .expando {
 134   right: 18.5px;
 135 }
 136
 137 html[dir='rtl'] .expando {
 138   left: 18.5px;
 139 }
 140
 141 .expando.open {
 142   background-image: url(images/disclosure_open_mdpi.png);
 143 }
 144
 145 html[dir='rtl'] .expando.open {
 146   -webkit-transform: scaleX(-1);
 147 }
 148
 149 .expando.closed {
 150   background-image: url(images/disclosure_closed_mdpi.png);
 151 }
 152
 153 html[dir='rtl'] .expando.closed {
 154   -webkit-transform: scaleX(-1);
 155 }
 156
 157 .session-icon.laptop {
 158   background-image: url(../../../../ui/webui/resources/images/laptop.png);
 159 }
 160
 161 html[dir='rtl'] .session-icon.laptop {
 162   -webkit-transform: scaleX(-1);
 163 }
 164
 165 .session-icon.tablet {
 166   background-image: url(../../../../ui/webui/resources/images/tablet.png);
 167 }
 168
 169 html[dir='rtl'] .session-icon.tablet {
 170   -webkit-transform: scaleX(-1);
 171 }
 172
 173 .session-icon.phone {
 174   background-image: url(../../../../ui/webui/resources/images/phone.png);
 175 }
 176
 177 html[dir='rtl'] .session-icon.phone {
 178   -webkit-transform: scaleX(-1);
 179 }
 180
 181 .session-icon.documents {
 182   background-image: url(images/sent_mdpi.png);
 183 }
 184
 185 html[dir='rtl'] .session-icon.documents {
 186   -webkit-transform: scaleX(-1);
 187 }
 188
 189 @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
 190   .expando.open {
 191     background-image: url(images/disclosure_open_hdpi.png);
 192   }
 193   .expando.closed {
 194     background-image: url(images/disclosure_closed_hdpi.png);
 195   }
 196   .session-icon.laptop {
 197     background-image:
 198         url(../../../../ui/webui/resources/images/1.5x/laptop.png);
 199   }
 200   .session-icon.tablet {
 201     background-image:
 202         url(../../../../ui/webui/resources/images/1.5x/tablet.png);
 203   }
 204   .session-icon.phone {
 205     background-image: url(../../../../ui/webui/resources/images/1.5x/phone.png);
 206   }
 207   .session-icon.documents {
 208     background-image: url(images/sent_hdpi.png);
 209   }
 210 }
 211
 212 @media screen and (-webkit-min-device-pixel-ratio: 2.0) {
 213   .expando.open {
 214     background-image: url(images/disclosure_open_xhdpi.png);
 215   }
 216   .expando.closed {
 217     background-image: url(images/disclosure_closed_xhdpi.png);
 218   }
 219   .session-icon.laptop {
 220     background-image: url(../../../../ui/webui/resources/images/2x/laptop.png);
 221   }
 222   .session-icon.tablet {
 223     background-image: url(../../../../ui/webui/resources/images/2x/tablet.png);
 224   }
 225   .session-icon.phone {
 226     background-image: url(../../../../ui/webui/resources/images/2x/phone.png);
 227   }
 228   .session-icon.documents {
 229     background-image: url(images/sent_xhdpi.png);
 230   }
 231 }
 232
 233 .session-icon {
 234   background-position: center;
 235   background-repeat: no-repeat;
 236   background-size: 32px 32px;
 237   height: 48px;
 238   width: 48px;
 239 }