chrome/browser/resources/local_ntp/local_ntp.css

   1 /* Copyright 2015 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 /* TODO: Need to discuss with NTP folks before we remove font-family from the
   6  * body tag. */
   7 body {
   8   background-attachment: fixed !important;
   9   background-color: white;
  10   cursor: default;
  11   font-family: arial, sans-serif;
  12   font-size: small;
  13   margin: 0;
  14   overflow-x: hidden;
  15 }
  16
  17 #ntp-contents {
  18   text-align: -webkit-center;
  19 }
  20
  21 .non-google-page #ntp-contents {
  22   position: absolute;
  23   top: calc(50% - 155px);
  24   width: 100%;
  25 }
  26
  27 body.hide-fakebox-logo #logo,
  28 body.hide-fakebox-logo #fakebox {
  29   visibility: hidden;
  30 }
  31
  32 body.fakebox-disable #fakebox {
  33   border-color: rgb(238, 238, 238);
  34   cursor: default;
  35 }
  36
  37 body.fakebox-disable #fakebox > input {
  38   cursor: default;
  39 }
  40
  41 #logo {
  42   background-image: url(images/google_logo.png@2x);
  43   background-repeat: no-repeat;
  44   background-size: 269px 95px;
  45   height: 95px;
  46   margin-bottom: 24px;
  47   margin-top: 157px;
  48   width: 269px;
  49 }
  50
  51 body.alternate-logo #logo {
  52   -webkit-mask-image: url(images/google_logo.png@2x);
  53   -webkit-mask-repeat: no-repeat;
  54   -webkit-mask-size: 100%;
  55   background: #eee;
  56 }
  57
  58 #fakebox {
  59   -webkit-transform: translate3d(0, 0, 0);
  60   -webkit-transition: -webkit-transform 100ms linear, border-color 100ms linear;
  61   background-color: #fff;
  62   border: 1px solid rgb(185, 185, 185);
  63   border-radius: 1px;
  64   border-top-color: rgb(160, 160, 160);
  65   cursor: text;
  66   font-size: 18px;
  67   height: 36px;
  68   line-height: 36px;
  69   max-width: 672px;
  70   position: relative;
  71   /* #fakebox width (here and below) should be 2px less than #mv-tiles
  72      to account for its border. */
  73   width: 298px;
  74 }
  75
  76 #fakebox:hover {
  77   border: 1px solid rgb(169, 169, 169);
  78   border-top-color: rgb(144, 144, 144);
  79 }
  80
  81 body.fakebox-focused #fakebox {
  82   border: 1px solid rgb(77, 144, 254);
  83 }
  84
  85 #fakebox > input {
  86   bottom: 0;
  87   box-sizing: border-box;
  88   left: 0;
  89   margin: 0;
  90   opacity: 0;
  91   padding-left: 8px;
  92   position: absolute;
  93   top: 0;
  94   width: 100%;
  95 }
  96
  97 html[dir=rtl] #fakebox > input {
  98   padding-left: 0;
  99   padding-right: 8px;
 100   right: 0;
 101 }
 102
 103 #fakebox-text {
 104   bottom: 0;
 105   color: #bbb;
 106   font-family: arial, sans-serif;
 107   font-size: 16px;
 108   left: 9px;
 109   margin-top: 1px;
 110   overflow: hidden;
 111   position: absolute;
 112   right: 9px;
 113   text-align: initial;
 114   text-overflow: ellipsis;
 115   top: 0;
 116   vertical-align: middle;
 117   visibility: inherit;
 118   white-space: nowrap;
 119 }
 120
 121 html[dir=rtl] #fakebox-text {
 122   left: auto;
 123   right: 9px;
 124 }
 125
 126 #cursor {
 127   background: #333;
 128   bottom: 5px;
 129   left: 9px;
 130   position: absolute;
 131   top: 5px;
 132   visibility: hidden;
 133   width: 1px;
 134 }
 135
 136 html[dir=rtl] #cursor {
 137   left: auto;
 138   right: 9px;
 139 }
 140
 141 @-webkit-keyframes blink {
 142   0% {
 143     opacity: 1;
 144   }
 145   61.55% {
 146     opacity: 0;
 147   }
 148 }
 149
 150 body.fakebox-drag-focused #fakebox-text,
 151 body.fakebox-focused #fakebox-text {
 152   visibility: hidden;
 153 }
 154
 155 body.fakebox-drag-focused #cursor {
 156   visibility: inherit;
 157 }
 158
 159 body.fakebox-focused #cursor {
 160   -webkit-animation: blink 1.3s step-end infinite;
 161   visibility: inherit;
 162 }
 163
 164 #most-visited {
 165   -webkit-user-select: none;
 166   margin-top: 64px;
 167   text-align: -webkit-center;
 168 }
 169
 170 .icon-ntp #most-visited {
 171   margin-top: calc(100px - 36px);
 172 }
 173
 174 /* Non-Google pages have no Fakebox, so don't need top margin. */
 175 .non-google-page #most-visited {
 176   margin-top: 0;
 177 }
 178
 179 #mv-tiles {
 180   margin: 0;
 181   position: relative;
 182   text-align: -webkit-auto;
 183 }
 184
 185 .thumb-ntp #mv-tiles {
 186   height: calc(2 * 146px);
 187   line-height: 146px;
 188 }
 189
 190 .icon-ntp #mv-tiles {
 191   background: rgba(255,255,255,0.2);
 192   border-radius: 4px;
 193   height: calc(2 * 112px);
 194   padding: calc(36px - 18px) calc(36px - 18px - 12px);
 195 }
 196
 197 .icon-ntp.dark #mv-tiles {
 198   background: rgba(0,0,0,0.4);
 199 }
 200
 201 .default-theme.icon-ntp #mv-tiles {
 202   background: none;
 203 }
 204
 205 #mv-notice-x {
 206   -webkit-mask-image: -webkit-image-set(
 207       url(chrome-search://local-ntp/images/close_3_mask.png) 1x,
 208       url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x);
 209   -webkit-mask-position: 3px 3px;
 210   -webkit-mask-repeat: no-repeat;
 211   -webkit-mask-size: 10px 10px;
 212   background-color: rgba(90,90,90,0.7);
 213   cursor: pointer;
 214   display: inline-block;
 215   height: 16px;
 216   margin-left: 20px;
 217   outline: none;
 218   vertical-align: middle;
 219   width: 16px;
 220 }
 221
 222 html[dir=rtl] #mv-notice-x {
 223   margin-left: 0;
 224   margin-right: 20px;
 225 }
 226
 227 #mv-notice-x:hover {
 228   background-color: rgba(90,90,90,1.0);
 229 }
 230
 231 #mv-notice-x:active {
 232   background-color: rgb(66,133,244);
 233 }
 234
 235 /* The notification shown when a tile is blacklisted. */
 236 #mv-notice {
 237   font-size: 12px;
 238   font-weight: bold;
 239   opacity: 1;
 240   padding: 10px 0;
 241 }
 242
 243 .icon-ntp #mv-notice {
 244   margin-top: 30px;
 245 }
 246
 247 #mv-notice span {
 248   cursor: default;
 249   display: inline-block;
 250   height: 16px;
 251   line-height: 16px;
 252   vertical-align: top;
 253 }
 254
 255 /* Links in the notification. */
 256 #mv-notice-links span {
 257   -webkit-margin-start: 6px;
 258   color: rgb(17, 85, 204);
 259   cursor: pointer;
 260   outline: none;
 261   padding: 0 4px;
 262 }
 263
 264 #mv-notice-links span:hover,
 265 #mv-notice-links span:focus,
 266 #recent-tabs:hover {
 267   text-decoration: underline;
 268 }
 269
 270 .default-theme.dark #mv-msg {
 271   color: #fff;
 272 }
 273
 274 .default-theme.dark #mv-notice-links span {
 275   color: #fff;
 276 }
 277
 278 #mv-notice.mv-notice-delayed-hide {
 279   -webkit-transition-delay: 10s;
 280   -webkit-transition-property: opacity;
 281   opacity: 0;
 282 }
 283
 284 #mv-notice.mv-notice-hide {
 285   display: none;
 286 }
 287
 288 #attribution {
 289   -webkit-user-select: none;
 290   bottom: 0;
 291   color: #fff;
 292   cursor: default;
 293   display: inline-block;
 294   font-size: 13px;
 295   position: fixed;
 296   right: 8px;
 297   text-align: left;
 298   z-index: -1;
 299 }
 300
 301 html[dir=rtl] #attribution {
 302   text-align: right;
 303 }
 304
 305 #recent-tabs {
 306   background: #fff;
 307   border: 1px solid #c0c0c0;
 308   border-radius: 2px;
 309   bottom: 0;
 310   color: rgb(17, 85, 204);
 311   cursor: pointer;
 312   font-family: Arial;
 313   font-size: 14px;
 314   opacity: 0.9;
 315   padding: 3px;
 316   position: fixed;
 317   right: 8px;
 318 }
 319
 320 html[dir=rtl] #attribution,
 321 html[dir=rtl] #recent-tabs {
 322   left: 8px;
 323   right: auto;
 324 }
 325
 326 #mv-single {
 327   border: none;
 328   height: 100%;
 329   width: 100%;
 330 }