| /* Copyright 2015 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| /* TODO: Need to discuss with NTP folks before we remove font-family from the |
| * body tag. */ |
| body { |
| background-attachment: fixed !important; |
| cursor: default; |
| font-family: arial, sans-serif; |
| font-size: small; |
| margin: 0; |
| overflow-x: hidden; |
| } |
| |
| #ntp-contents { |
| text-align: -webkit-center; |
| } |
| |
| .non-google-page #ntp-contents { |
| position: absolute; |
| top: calc(50% - 155px); |
| width: 100%; |
| } |
| |
| body.hide-fakebox-logo #logo, |
| body.hide-fakebox-logo #fakebox { |
| visibility: hidden; |
| } |
| |
| #logo { |
| background-image: url(../../../../ui/webui/resources/images/google_logo.svg); |
| background-repeat: no-repeat; |
| height: 92px; |
| margin-bottom: 24px; |
| margin-top: 157px; |
| width: 272px; |
| } |
| |
| .non-google-page #logo { |
| display: none; |
| } |
| |
| body.alternate-logo #logo { |
| -webkit-mask-image: |
| url(../../../../ui/webui/resources/images/google_logo.svg); |
| -webkit-mask-repeat: no-repeat; |
| -webkit-mask-size: 100%; |
| background: #eee; |
| } |
| |
| #fakebox { |
| background-color: #fff; |
| border: 1px solid rgb(185, 185, 185); |
| border-radius: 1px; |
| border-top-color: rgb(160, 160, 160); |
| cursor: text; |
| font-size: 18px; |
| height: 36px; |
| line-height: 36px; |
| max-width: 672px; |
| position: relative; |
| transform: translate3d(0, 0, 0); |
| transition: transform 100ms linear, border-color 100ms linear; |
| /* #fakebox width (here and below) should be 2px less than #mv-tiles |
| to account for its border. */ |
| width: 298px; |
| } |
| |
| .non-google-page #fakebox { |
| display: none; |
| } |
| |
| #fakebox:hover { |
| border: 1px solid rgb(169, 169, 169); |
| border-top-color: rgb(144, 144, 144); |
| } |
| |
| body.fakebox-focused #fakebox { |
| border: 1px solid rgb(77, 144, 254); |
| } |
| |
| #fakebox > input { |
| bottom: 0; |
| box-sizing: border-box; |
| left: 0; |
| margin: 0; |
| opacity: 0; |
| padding-left: 8px; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| html[dir=rtl] #fakebox > input { |
| padding-left: 0; |
| padding-right: 8px; |
| right: 0; |
| } |
| |
| #fakebox-text { |
| bottom: 0; |
| color: #bbb; |
| font-family: arial, sans-serif; |
| font-size: 16px; |
| left: 9px; |
| margin-top: 1px; |
| overflow: hidden; |
| position: absolute; |
| right: 9px; |
| text-align: initial; |
| text-overflow: ellipsis; |
| top: 0; |
| vertical-align: middle; |
| visibility: inherit; |
| white-space: nowrap; |
| } |
| |
| html[dir=rtl] #fakebox-text { |
| left: auto; |
| right: 9px; |
| } |
| |
| #cursor { |
| background: #333; |
| bottom: 5px; |
| left: 9px; |
| position: absolute; |
| top: 5px; |
| visibility: hidden; |
| width: 1px; |
| } |
| |
| html[dir=rtl] #cursor { |
| left: auto; |
| right: 9px; |
| } |
| |
| @keyframes blink { |
| 0% { |
| opacity: 1; |
| } |
| 61.55% { |
| opacity: 0; |
| } |
| } |
| |
| body.fakebox-drag-focused #fakebox-text, |
| body.fakebox-focused #fakebox-text { |
| visibility: hidden; |
| } |
| |
| body.fakebox-drag-focused #cursor { |
| visibility: inherit; |
| } |
| |
| body.fakebox-focused #cursor { |
| animation: blink 1.3s step-end infinite; |
| visibility: inherit; |
| } |
| |
| #most-visited { |
| -webkit-user-select: none; |
| margin-top: 64px; |
| text-align: -webkit-center; |
| } |
| |
| /* Non-Google pages have no Fakebox, so don't need top margin. */ |
| .non-google-page #most-visited { |
| margin-top: 0; |
| } |
| |
| #mv-tiles { |
| /* We need a 16px margin and the tiles have 130px height. */ |
| height: calc(2*130px + 16px); |
| line-height: calc(130px + 16px); |
| margin: 0; |
| position: relative; |
| text-align: -webkit-auto; |
| } |
| |
| #mv-notice-x { |
| -webkit-mask-image: -webkit-image-set( |
| url(chrome-search://local-ntp/images/close_3_mask.png) 1x, |
| url(chrome-search://local-ntp/images/close_3_mask.png@2x) 2x); |
| -webkit-mask-position: 3px 3px; |
| -webkit-mask-repeat: no-repeat; |
| -webkit-mask-size: 10px 10px; |
| background-color: rgba(90,90,90,0.7); |
| cursor: pointer; |
| display: inline-block; |
| height: 16px; |
| margin-left: 20px; |
| outline: none; |
| vertical-align: middle; |
| width: 16px; |
| } |
| |
| html[dir=rtl] #mv-notice-x { |
| margin-left: 0; |
| margin-right: 20px; |
| } |
| |
| #mv-notice-x:hover { |
| background-color: rgba(90,90,90,1.0); |
| } |
| |
| #mv-notice-x:active { |
| background-color: rgb(66,133,244); |
| } |
| |
| /* The notification shown when a tile is blacklisted. */ |
| #mv-notice { |
| font-size: 12px; |
| font-weight: bold; |
| opacity: 1; |
| padding: 10px 0; |
| } |
| |
| #mv-notice span { |
| cursor: default; |
| display: inline-block; |
| height: 16px; |
| line-height: 16px; |
| vertical-align: top; |
| } |
| |
| /* Links in the notification. */ |
| #mv-notice-links span { |
| -webkit-margin-start: 6px; |
| color: rgb(17, 85, 204); |
| cursor: pointer; |
| outline: none; |
| padding: 0 4px; |
| } |
| |
| #mv-notice-links span:hover, |
| #mv-notice-links span:focus { |
| text-decoration: underline; |
| } |
| |
| .default-theme.dark #mv-msg { |
| color: #fff; |
| } |
| |
| .default-theme.dark #mv-notice-links span { |
| color: #fff; |
| } |
| |
| #mv-notice.mv-notice-delayed-hide { |
| opacity: 0; |
| transition-delay: 10s; |
| transition-property: opacity; |
| } |
| |
| #mv-notice.mv-notice-hide { |
| display: none; |
| } |
| |
| #attribution { |
| -webkit-user-select: none; |
| bottom: 0; |
| color: #fff; |
| cursor: default; |
| display: inline-block; |
| font-size: 13px; |
| left: auto; |
| position: fixed; |
| right: 8px; |
| text-align: left; |
| z-index: -1; |
| } |
| |
| html[dir=rtl] #attribution, |
| #attribution.left-align-attribution { |
| left: 8px; |
| right: auto; |
| text-align: right; |
| } |
| |
| #mv-single { |
| border: none; |
| height: 100%; |
| width: 100%; |
| } |
| |
| #one-google { |
| position: fixed; |
| z-index: 1; |
| } |