chrome/browser/resources/local_ntp/local_ntp_fast.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 /* Non-Google pages have no Fakebox, so don't need top margin. */
 171 .non-google-page #most-visited {
 172   margin-top: 0;
 173 }
 174
 175 #mv-tiles {
 176   height: calc(2 * 146px);
 177   line-height: 146px;
 178   margin: 0;
 179   position: relative;
 180   text-align: -webkit-auto;
 181 }
 182
 183 #mv-notice-x {
 184   -webkit-mask-image: -webkit-image-set(
 185       url(chrome-search://local-ntp/images/close_3_mask.png) 1x,
 186       url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x);
 187   -webkit-mask-position: 3px 3px;
 188   -webkit-mask-repeat: no-repeat;
 189   -webkit-mask-size: 10px 10px;
 190   background-color: rgba(90,90,90,0.7);
 191   cursor: pointer;
 192   display: inline-block;
 193   height: 16px;
 194   margin-left: 20px;
 195   outline: none;
 196   vertical-align: middle;
 197   width: 16px;
 198 }
 199
 200 html[dir=rtl] #mv-notice-x {
 201   margin-left: 0;
 202   margin-right: 20px;
 203 }
 204
 205 #mv-notice-x:hover {
 206   background-color: rgba(90,90,90,1.0);
 207 }
 208
 209 #mv-notice-x:active {
 210   background-color: rgb(66,133,244);
 211 }
 212
 213 /* The notification shown when a tile is blacklisted. */
 214 #mv-notice {
 215   font-size: 12px;
 216   font-weight: bold;
 217   opacity: 1;
 218   padding: 10px 0;
 219 }
 220
 221 #mv-notice span {
 222   cursor: default;
 223   display: inline-block;
 224   height: 16px;
 225   line-height: 16px;
 226   vertical-align: top;
 227 }
 228
 229 /* Links in the notification. */
 230 #mv-notice-links span {
 231   -webkit-margin-start: 6px;
 232   color: rgb(17, 85, 204);
 233   cursor: pointer;
 234   outline: none;
 235   padding: 0 4px;
 236 }
 237
 238 #mv-notice-links span:hover,
 239 #mv-notice-links span:focus,
 240 #recent-tabs:hover {
 241   text-decoration: underline;
 242 }
 243
 244 .default-theme.dark #mv-msg {
 245   color: #fff;
 246 }
 247
 248 .default-theme.dark #mv-notice-links span {
 249   color: #fff;
 250 }
 251
 252 #mv-notice.mv-notice-delayed-hide {
 253   -webkit-transition-delay: 10s;
 254   -webkit-transition-property: opacity;
 255   opacity: 0;
 256 }
 257
 258 #mv-notice.mv-notice-hide {
 259   display: none;
 260 }
 261
 262 #attribution {
 263   -webkit-user-select: none;
 264   bottom: 0;
 265   color: #fff;
 266   cursor: default;
 267   display: inline-block;
 268   font-size: 13px;
 269   position: fixed;
 270   right: 8px;
 271   text-align: left;
 272   z-index: -1;
 273 }
 274
 275 html[dir=rtl] #attribution {
 276   text-align: right;
 277 }
 278
 279 #recent-tabs {
 280   background: #fff;
 281   border: 1px solid #c0c0c0;
 282   border-radius: 2px;
 283   bottom: 0;
 284   color: rgb(17, 85, 204);
 285   cursor: pointer;
 286   font-family: Arial;
 287   font-size: 14px;
 288   opacity: 0.9;
 289   padding: 3px;
 290   position: fixed;
 291   right: 8px;
 292 }
 293
 294 html[dir=rtl] #attribution,
 295 html[dir=rtl] #recent-tabs {
 296   left: 8px;
 297   right: auto;
 298 }
 299
 300 #mv-single {
 301   border: none;
 302   height: 100%;
 303   width: 100%;
 304 }