| /* 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. */ |
| |
| html { |
| /* Material Design constants */ |
| --md-tile-height: 112px; |
| --md-tile-margin: 16px; |
| |
| /* This will be overridden based on the viewport width, see below. */ |
| --column-count: 2; |
| |
| --content-width: calc( |
| (var(--column-count) * (var(--tile-width) + var(--tile-margin))) |
| /* We add an extra pixel because rounding errors on different zooms can |
| * make the width shorter than it should be. */ |
| + 1px); |
| |
| --logo-height: 200px; /* Normal height of a doodle. */ |
| --logo-margin-top: 56px; /* Expected OGB height, so logo doesn't overlap. */ |
| --logo-margin-bottom: 29px; /* Between logo and fakebox. */ |
| |
| /* Initial height determines the margin between the logo and the fakebox. If |
| * the iframe height exceeds the normal --logo-height, the difference is |
| * subtracted from the margin. The actual --logo-iframe-{width,height} can be |
| * changed later, but the initial height, and therefore the margin, remains |
| * the same. |
| */ |
| --logo-iframe-initial-height: var(--logo-height); |
| --logo-iframe-height: var(--logo-height); |
| --logo-iframe-resize-duration: 150ms; |
| --logo-iframe-width: 500px; |
| --tile-height: 128px; |
| --tile-margin: 16px; |
| --tile-width: 154px; |
| |
| --mv-notice-time: 10s; |
| |
| /* These can be overridden by themes. */ |
| --text-color: #000; |
| --text-color-light: #fff; |
| --text-color-link: rgb(17, 85, 204); |
| |
| height: 100%; |
| } |
| |
| html[darkmode=true] { |
| /* These can be overridden by themes. */ |
| --text-color: rgb(var(--GG200-rgb)); |
| --text-color-light: rgb(var(--GG200-rgb)); |
| --text-color-link: rgb(var(--GB400-dark-rgb)); |
| } |
| |
| |
| /* width >= (3 cols * (16px + 154px) - 16px + 200px) */ |
| @media (min-width: 694px) { |
| html { |
| --column-count: 3; |
| } |
| } |
| |
| /* width >= (4 cols * (16px + 154px) - 16px + 200px) */ |
| @media (min-width: 864px) { |
| html { |
| --column-count: 4; |
| } |
| } |
| |
| /* TODO: Need to discuss with NTP folks before we remove font-family from the |
| * body tag. */ |
| body { |
| background-attachment: fixed !important; |
| cursor: default; |
| display: none; |
| font-family: arial, sans-serif; |
| font-size: small; |
| margin: 0; |
| min-height: 100%; |
| } |
| |
| body.inited { |
| display: block; |
| } |
| |
| /* Button defaults vary by platform. Reset CSS so that the NTP can use buttons |
| * as a kind of clickable div. */ |
| button { |
| background: transparent; |
| border: 0; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .mouse-navigation { |
| outline: none; |
| } |
| |
| #ntp-contents { |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| position: relative; |
| z-index: 1; |
| } |
| |
| #logo, |
| #fakebox-container { |
| flex-shrink: 0; |
| } |
| |
| .non-google-page #ntp-contents { |
| /* The inherited height from #ntp-contents applies from the "top" location, |
| * but uses the size of the overall NTP content area, resulting in an |
| * unnecessary scrollbar. This height corresponds to MV tile height for a |
| * single row, but also works for a row of icons, and works well on small |
| * screens (like Pixelbook), as well as high-res screens. */ |
| height: 155px; |
| left: calc(50% - var(--content-width)/2); |
| position: absolute; |
| top: calc(50% - 155px); |
| } |
| |
| body.hide-fakebox #fakebox { |
| opacity: 0; |
| visibility: hidden; |
| } |
| |
| #fakebox-container { |
| margin: 0 auto 0 auto; |
| width: var(--content-width); |
| } |
| |
| #fakebox { |
| background-color: rgb(var(--GG100-rgb)); |
| border-radius: 22px; |
| cursor: text; |
| font-size: 18px; |
| height: 44px; |
| line-height: 36px; |
| margin: 0 auto; |
| max-width: 560px; |
| opacity: 1; |
| position: relative; |
| /* Transition should be similar to .mv-tile/.md-tile opacity transition. */ |
| transition: background-color 300ms ease-in-out, opacity 200ms |
| } |
| |
| html[darkmode=true] #fakebox { |
| background-color: rgb(var(--GG900-rgb)); |
| } |
| |
| #fakebox:hover { |
| background-color: rgb(var(--GG200-rgb)); |
| } |
| |
| html[darkmode=true] #fakebox:hover { |
| background-color: rgb(42, 43, 46); |
| } |
| |
| .non-google-page #fakebox-container { |
| display: none; |
| } |
| |
| #fakebox > input { |
| bottom: 0; |
| box-sizing: border-box; |
| left: 0; |
| margin: 0; |
| opacity: 0; |
| padding-inline-start: 20px; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| html[dir=rtl] #fakebox > input { |
| right: 0; |
| } |
| |
| #fakebox-text { |
| bottom: 4px; |
| color: rgb(var(--GG600-rgb)); |
| font-family: 'Roboto', arial, sans-serif; |
| font-size: 14px; |
| left: 0; |
| margin-top: 1px; |
| overflow: hidden; |
| padding-inline-start: 20px; |
| position: absolute; |
| right: 13px; |
| text-align: initial; |
| text-overflow: ellipsis; |
| top: 4px; |
| vertical-align: middle; |
| visibility: inherit; |
| white-space: nowrap; |
| } |
| |
| html[darkmode=true] #fakebox-text { |
| color: rgb(var(--GG200-rgb)); |
| } |
| |
| html[dir=rtl] #fakebox-text { |
| left: auto; |
| right: 0; |
| } |
| |
| #fakebox-cursor { |
| background: #333; |
| bottom: 12px; |
| left: 20px; |
| position: absolute; |
| top: 12px; |
| visibility: hidden; |
| width: 1px; |
| } |
| |
| html[dir=rtl] #fakebox-cursor { |
| left: auto; |
| right: 20px; |
| } |
| |
| html[darkmode=true] #fakebox-cursor { |
| background: rgb(var(--GB300-rgb)); |
| } |
| |
| #fakebox-microphone { |
| background: url(icons/googlemic_clr_24px.svg) no-repeat center; |
| background-size: 24px 24px; |
| bottom: 0; |
| cursor: pointer; |
| margin-inline-end: 12px; |
| padding: 22px 12px 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| width: 28px; |
| } |
| |
| html[dir=rtl] #fakebox-microphone { |
| left: 0; |
| right: auto; |
| } |
| |
| @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 #fakebox-cursor { |
| visibility: inherit; |
| } |
| |
| body.fakebox-focused #fakebox-cursor { |
| animation: blink 1.3s step-end infinite; |
| visibility: inherit; |
| } |
| |
| #most-visited { |
| margin-top: 56px; |
| text-align: -webkit-center; |
| user-select: none; |
| } |
| |
| #most-visited.md-icons { |
| /* Total of 40px margin between fakebox and MV tiles: 8px fakebox |
| * margin-bottom + 22px here margin-top + 10px MV margin-top */ |
| margin-top: 22px; |
| } |
| |
| /* Non-Google pages have no Fakebox, so don't need top margin. */ |
| .non-google-page #most-visited { |
| margin-top: 0; |
| } |
| |
| #mv-tiles { |
| /* Two rows of tiles of 128px each, 16px of spacing between the rows, and |
| * 4px/8px of margin on top and bottom respectively. If you change this, also |
| * change the corresponding values in most_visited_single.css. */ |
| height: calc(2*var(--tile-height) + var(--tile-margin) + 4px + 8px); |
| margin: 0; |
| position: relative; |
| text-align: -webkit-auto; |
| width: var(--content-width); |
| } |
| |
| .md-icons #mv-tiles { |
| /* Two rows of tiles of 112px each, 16px of spacing after each row, and 10px |
| * of margin on top. If you change this, also change the corresponding values |
| * in most_visited_single.css. */ |
| height: calc(2*(var(--md-tile-height) + var(--md-tile-margin)) + 10px); |
| /* Add 2*5px to account for drop shadow on the tiles. If you change this, also |
| * change the corresponding values in most_visited_single.css. */ |
| width: calc(var(--content-width) + 2*5px); |
| } |
| |
| #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; |
| filter: var(--theme-filter, 'none'); |
| height: 16px; |
| margin-inline-start: 20px; |
| outline: none; |
| vertical-align: middle; |
| width: 16px; |
| } |
| |
| html[darkmode=true] #mv-notice-x { |
| background-color: rgb(var(--GG200-rgb)); |
| } |
| |
| #mv-notice-x:hover { |
| background-color: rgba(90, 90, 90, 1.0); |
| } |
| |
| #mv-notice-x:active { |
| background-color: rgb(var(--GB500-rgb)); |
| } |
| |
| html[darkmode=true] #mv-notice-x:hover, |
| html[darkmode=true] #mv-notice-x:active { |
| background-color: rgb(var(--GG400-rgb)); |
| } |
| |
| .md-icons #mv-notice-x { |
| display: none; |
| } |
| |
| #mv-notice-container { |
| width: 100%; |
| } |
| |
| .md-icons #mv-notice-container { |
| bottom: -50px; |
| margin-bottom: 16px; |
| position: fixed; |
| transition: bottom 400ms; |
| } |
| |
| /* Required to allow click events through the wrapping div of the toast |
| * notification container. */ |
| .md-icons #mv-notice-container, |
| #error-notice-container { |
| pointer-events: none; |
| } |
| .md-icons #mv-notice-container > div, |
| #error-notice-container > div { |
| pointer-events: all; |
| } |
| |
| |
| .md-icons #mv-notice-container.float-up { |
| bottom: 0; |
| } |
| |
| .md-icons #mv-notice-container.notice-hide { |
| display: none; |
| } |
| |
| /* The notification shown when a tile is blacklisted. */ |
| #mv-notice { |
| font-size: 12px; |
| font-weight: bold; |
| opacity: 1; |
| padding: 10px 0; |
| } |
| |
| .md-icons #mv-notice { |
| background-color: white; |
| border: 1px solid rgb(var(--GG300-rgb)); |
| /* Necessary for a "pill" shape. Using 50% creates an oval. */ |
| border-radius: 16px; |
| font-family: 'Roboto', arial, sans-serif; |
| font-weight: normal; |
| height: fit-content; |
| margin: 0 auto; |
| padding: 0; |
| width: fit-content; |
| } |
| |
| html[darkmode=true] .md-icons #mv-notice { |
| background-color: rgb(var(--GG900-rgb)); |
| border-color: rgba(0, 0, 0, 0.1); |
| } |
| |
| #mv-notice span { |
| cursor: default; |
| display: inline-block; |
| height: 16px; |
| line-height: 16px; |
| vertical-align: top; |
| } |
| |
| .md-icons #mv-notice span { |
| color: rgb(var(--GG700-rgb)); |
| height: auto; |
| line-height: 32px; |
| vertical-align: unset; |
| } |
| |
| html[darkmode=true] .md-icons #mv-notice span { |
| color: rgb(var(--GG200-rgb)); |
| } |
| |
| /* Links in the notification. */ |
| #mv-notice-links span { |
| color: var(--text-color-link); |
| cursor: pointer; |
| margin-inline-start: 6px; |
| outline: none; |
| padding: 0 4px; |
| } |
| |
| .md-icons #mv-notice-links span { |
| /* Necessary for a "pill" shape. Using 50% creates an oval. */ |
| border-radius: 16px; |
| color: rgb(var(--GB600-rgb)); |
| margin-inline-start: 0; |
| padding: 0 16px; |
| position: relative; |
| } |
| |
| html[darkmode=true] .md-icons #mv-notice-links span { |
| color: rgb(var(--GB400-dark-rgb)); |
| } |
| |
| #mv-notice-links span:hover, |
| #mv-notice-links span:focus { |
| text-decoration: underline; |
| } |
| |
| .md-icons #mv-notice-links span:hover, |
| .md-icons #mv-notice-links span:active { |
| background-color: rgba(var(--GB600-rgb), 0.1); |
| text-decoration: none; |
| transition: background-color 200ms; |
| } |
| |
| html[darkmode=true] .md-icons #mv-notice-links span:hover, |
| html[darkmode=true] .md-icons #mv-notice-links span:active { |
| background-color: rgba(var(--GB400-dark-rgb), 0.1); |
| } |
| |
| #mv-msg { |
| color: var(--text-color); |
| } |
| |
| .md-icons #mv-msg { |
| padding: 0 16px; |
| } |
| |
| .default-theme.dark #mv-msg :not(.md-icons) { |
| color: #fff; |
| } |
| |
| .default-theme.dark #mv-notice-links :not(.md-icons) span { |
| color: #fff; |
| } |
| |
| html[darkmode=true] .default-theme.dark #mv-msg :not(.md-icons), |
| html[darkmode=true] .default-theme.dark #mv-notice-links :not(.md-icons) span { |
| color: rgb(var(--GG200-rgb)); |
| } |
| |
| #mv-notice.mv-notice-delayed-hide:not(:focus-within) { |
| opacity: 0; |
| transition-delay: var(--mv-notice-time); |
| transition-property: opacity; |
| } |
| |
| #mv-notice.notice-hide { |
| display: none; |
| } |
| |
| #attribution { |
| bottom: 0; |
| color: var(--text-color-light); |
| cursor: default; |
| display: inline-block; |
| font-size: 13px; |
| left: auto; |
| position: fixed; |
| right: 8px; |
| text-align: start; |
| user-select: none; |
| z-index: -1; |
| } |
| |
| html[dir=rtl] #attribution, |
| #attribution.left-align-attribution { |
| left: 8px; |
| right: auto; |
| text-align: end; |
| } |
| |
| #mv-single { |
| border: none; |
| display: block; |
| height: 100%; |
| width: 100%; |
| } |
| |
| .customize-dialog::backdrop { |
| background-color: rgba(255, 255, 255, .75); |
| } |
| |
| html[darkmode=true] .customize-dialog::backdrop { |
| background-color: rgba(0, 0, 0, 0.4); |
| } |
| |
| #custom-links-edit-dialog { |
| background: transparent; |
| border: none; |
| height: 100%; |
| padding: 0; |
| position: fixed; |
| top: 0; |
| width: 100%; |
| } |
| |
| #custom-links-edit { |
| border: none; |
| height: 100%; |
| position: absolute; |
| top: 0; |
| width: 100%; |
| } |
| |
| #custom-links-edit.show { |
| display: block; |
| } |
| |
| #one-google { |
| position: absolute; |
| top: 0; |
| transition: opacity 130ms; |
| /* One Google Bar can automatically align to left and right |
| based on the profile language preference */ |
| width: 100%; |
| } |
| |
| #one-google.hidden { |
| opacity: 0; |
| } |
| |
| /* The box containing the slider */ |
| .switch { |
| background-color: #fff; |
| border-radius: 8px; |
| display: inline-block; |
| height: 12px; |
| left: 3px; |
| position: absolute; |
| top: 2px; |
| transition: background-color linear 80ms; |
| width: 28px; |
| z-index: 0; |
| } |
| |
| /* Hide default checkbox */ |
| .switch input { |
| display: none; |
| } |
| |
| /* Rounded background element for the toggle */ |
| .toggle { |
| background-color: #ccc; |
| border-radius: 34px; |
| bottom: 0; |
| cursor: pointer; |
| display: block; |
| left: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| transition: transform linear 80ms, background-color linear 80ms; |
| } |
| |
| .toggle::before { |
| background-color: #fff; |
| border-radius: 50%; |
| bottom: -2px; |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); |
| content: ''; |
| display: block; |
| height: 16px; |
| left: -6px; |
| position: absolute; |
| transition: transform linear 80ms, background-color linear 80ms; |
| width: 16px; |
| } |
| |
| input:checked + .toggle { |
| background-color: rgba(var(--GB600-rgb), .5); |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); |
| } |
| |
| input:focus + .toggle { |
| box-shadow: 0 0 1px rgb(33, 150, 243); |
| } |
| |
| input:checked + .toggle::before { |
| -webkit-transform: translateX(26px); |
| background-color: rgb(var(--GB600-rgb)); |
| transform: translateX(26px); |
| } |
| |
| #error-notice-container { |
| bottom: -50px; |
| margin-bottom: 16px; |
| position: fixed; |
| transition: bottom 400ms; |
| user-select: none; |
| width: 100%; |
| } |
| |
| #error-notice-container.float-up { |
| bottom: 0; |
| } |
| |
| #error-notice { |
| background-color: white; |
| border: 1px solid rgb(var(--GG300-rgb)); |
| /* Necessary for a "pill" shape. Using 50% creates an oval. */ |
| border-radius: 16px; |
| color: rgb(var(--GR600-rgb)); |
| display: flex; |
| font-family: 'Roboto', arial, sans-serif; |
| font-size: 12px; |
| font-weight: normal; |
| height: fit-content; |
| margin: 0 auto; |
| opacity: 1; |
| padding: 0; |
| position: relative; |
| width: fit-content; |
| } |
| |
| html[darkmode=true] #error-notice { |
| background-color: rgb(var(--GG900-rgb)); |
| border-color: rgba(0, 0, 0, 0.1); |
| color: rgb(var(--GR500-dark-rgb)); |
| } |
| |
| #error-notice.notice-hide { |
| display: none; |
| } |
| |
| #error-notice span { |
| align-self: center; |
| display: inline-block; |
| line-height: 32px; |
| } |
| |
| #error-notice-icon { |
| background: url(../../../../ui/webui/resources/images/error.svg) no-repeat center; |
| background-size: 18px 18px; |
| height: 32px; |
| padding: 0 8px; |
| width: 18px; |
| } |
| |
| #error-notice-msg { |
| cursor: default; |
| padding-inline-end: 16px; |
| } |
| |
| #error-notice.has-link #error-notice-msg { |
| padding-inline-end: 0; |
| } |
| |
| html[dir=rtl] #error-notice.has-link #error-notice-msg { |
| padding: 0; |
| } |
| |
| #error-notice-link { |
| /* Necessary for a "pill" shape. Using 50% creates an oval. */ |
| border-radius: 16px; |
| color: rgb(var(--GB600-rgb)); |
| cursor: pointer; |
| display: none; |
| outline: none; |
| padding: 0 16px; |
| position: relative; |
| } |
| |
| html[darkmode=true] #error-notice-link { |
| color: rgb(var(--GB400-dark-rgb)); |
| } |
| |
| #error-notice:not(.has-link) #error-notice-link { |
| display: none; |
| } |
| |
| #error-notice-link:hover, |
| #error-notice-link:focus { |
| text-decoration: underline; |
| } |
| |
| #error-notice-link:hover, |
| #error-notice-link:active { |
| background-color: rgba(var(--GB600-rgb), 0.1); |
| text-decoration: none; |
| transition: background-color 200ms; |
| } |
| |
| html[darkmode=true] #error-notice-link:hover, |
| html[darkmode=true] #error-notice-link:active { |
| background-color: rgba(var(--GB400-dark-rgb), 0.1); |
| } |
| |
| #promo { |
| bottom: 16px; |
| left: 0; |
| pointer-events: none; |
| position: fixed; |
| right: 0; |
| text-align: center; |
| transition: bottom 400ms; |
| } |
| |
| #promo.float-down { |
| bottom: -50px; |
| } |
| |
| #promo > div { |
| background-color: #FFF; |
| border: 1px solid rgb(var(--GG300-rgb)); |
| border-radius: 16px; |
| box-sizing: border-box; |
| color: rgb(var(--GG700-rgb)); |
| display: inline-block; |
| font-family: 'Roboto', arial, sans-serif; |
| font-size: 12px; |
| line-height: 32px; |
| margin-bottom: 0; |
| max-width: 505px; |
| overflow: hidden; |
| padding: 0 16px; |
| pointer-events: all; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| html[darkmode=true] #promo > div { |
| background-color: rgb(var(--GG900-rgb)); |
| border-color: rgba(0, 0, 0, 0.1); |
| color: rgb(var(--GG200-rgb)); |
| } |
| |
| /** |
| * Hide the promo if the window is too small: |
| * max-width = promo.max-width (505px) + 2 * edit gear icon (16px + 28px + 8px) |
| * max-height = ntp-contents.max-height (628px) + promo div height (16px + 22px) |
| */ |
| @media only screen and (max-width: 609px), |
| screen and (max-height: 666px) { |
| #promo > div { |
| display: none; |
| } |
| } |
| |
| #promo > div > a { |
| color: rgb(51, 103, 214) !important; |
| text-decoration: none; |
| } |
| |
| #promo > div > a:visited { |
| color: rgb(51, 103, 214) !important; |
| } |
| |
| html[darkmode=true] #promo > div > a, |
| html[darkmode=true] #promo > div > a:visited { |
| color: rgb(var(--GB400-dark-rgb)) !important; |
| } |
| |
| #promo > div > img { |
| border-radius: 50%; |
| height: 24px; |
| margin: 0 8px 0 -12px; |
| object-fit: cover; |
| vertical-align: middle; |
| width: 24px; |
| } |
| |
| #promo.notice-hide { |
| display: none; |
| } |