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   /* we need a 16px margin and the tiles have 130px height. */
 187   height: calc(2*130px + 16px);
 188   line-height: calc(130px + 16px);
 189 }
 190
 191 .icon-ntp #mv-tiles {
 192   background: rgba(255,255,255,0.2);
 193   border-radius: 4px;
 194   height: calc(2 * 112px);
 195   padding: calc(36px - 18px) calc(36px - 18px - 12px);
 196 }
 197
 198 .icon-ntp.dark #mv-tiles {
 199   background: rgba(0,0,0,0.4);
 200 }
 201
 202 .default-theme.icon-ntp #mv-tiles {
 203   background: none;
 204 }
 205
 206 #mv-notice-x {
 207   -webkit-mask-image: -webkit-image-set(
 208       url(chrome-search://local-ntp/images/close_3_mask.png) 1x,
 209       url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x);
 210   -webkit-mask-position: 3px 3px;
 211   -webkit-mask-repeat: no-repeat;
 212   -webkit-mask-size: 10px 10px;
 213   background-color: rgba(90,90,90,0.7);
 214   cursor: pointer;
 215   display: inline-block;
 216   height: 16px;
 217   margin-left: 20px;
 218   outline: none;
 219   vertical-align: middle;
 220   width: 16px;
 221 }
 222
 223 html[dir=rtl] #mv-notice-x {
 224   margin-left: 0;
 225   margin-right: 20px;
 226 }
 227
 228 #mv-notice-x:hover {
 229   background-color: rgba(90,90,90,1.0);
 230 }
 231
 232 #mv-notice-x:active {
 233   background-color: rgb(66,133,244);
 234 }
 235
 236 /* The notification shown when a tile is blacklisted. */
 237 #mv-notice {
 238   font-size: 12px;
 239   font-weight: bold;
 240   opacity: 1;
 241   padding: 10px 0;
 242 }
 243
 244 .icon-ntp #mv-notice {
 245   margin-top: 30px;
 246 }
 247
 248 #mv-notice span {
 249   cursor: default;
 250   display: inline-block;
 251   height: 16px;
 252   line-height: 16px;
 253   vertical-align: top;
 254 }
 255
 256 /* Links in the notification. */
 257 #mv-notice-links span {
 258   -webkit-margin-start: 6px;
 259   color: rgb(17, 85, 204);
 260   cursor: pointer;
 261   outline: none;
 262   padding: 0 4px;
 263 }
 264
 265 #mv-notice-links span:hover,
 266 #mv-notice-links span:focus,
 267 #recent-tabs:hover {
 268   text-decoration: underline;
 269 }
 270
 271 .default-theme.dark #mv-msg {
 272   color: #fff;
 273 }
 274
 275 .default-theme.dark #mv-notice-links span {
 276   color: #fff;
 277 }
 278
 279 #mv-notice.mv-notice-delayed-hide {
 280   -webkit-transition-delay: 10s;
 281   -webkit-transition-property: opacity;
 282   opacity: 0;
 283 }
 284
 285 #mv-notice.mv-notice-hide {
 286   display: none;
 287 }
 288
 289 #attribution {
 290   -webkit-user-select: none;
 291   bottom: 0;
 292   color: #fff;
 293   cursor: default;
 294   display: inline-block;
 295   font-size: 13px;
 296   left: auto;
 297   position: fixed;
 298   right: 8px;
 299   text-align: left;
 300   z-index: -1;
 301 }
 302
 303 html[dir=rtl] #attribution,
 304 #attribution.left-align-attribution {
 305   left: 8px;
 306   right: auto;
 307   text-align: right;
 308 }
 309
 310 #recent-tabs {
 311   background: #fff;
 312   border: 1px solid #c0c0c0;
 313   border-radius: 2px;
 314   bottom: 0;
 315   color: rgb(17, 85, 204);
 316   cursor: pointer;
 317   font-family: Arial;
 318   font-size: 14px;
 319   opacity: 0.9;
 320   padding: 3px;
 321   position: fixed;
 322   right: 8px;
 323 }
 324
 325 html[dir=rtl] #recent-tabs {
 326   left: 8px;
 327   right: auto;
 328 }
 329
 330 #mv-single {
 331   border: none;
 332   height: 100%;
 333   width: 100%;
 334 }