| /* 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-edit-menu-size: 20px; |
| --md-fallback-letter-size: 21px; |
| --md-favicon-size: 24px; |
| --md-icon-margin-bottom: 16px; |
| --md-icon-size: 48px; |
| --md-max-tiles-row: 5; |
| --md-menu-margin-side: 2px; |
| --md-menu-margin-top: 4px; |
| --md-menu-size: 12px; |
| --md-tile-height: 112px; |
| --md-tile-margin: 16px; |
| --md-tile-padding-bottom: 10px; |
| --md-tile-padding-horizontal: 4px; |
| --md-tile-padding-top: 16px; |
| --md-tile-width: 112px; |
| --md-title-font-size: 12px; |
| --md-title-height: 24px; |
| |
| |
| /* May be overridden by themes (on the body element). */ |
| --tile-title-color: #323232; |
| } |
| |
| body { |
| background: none transparent; |
| color: var(--tile-title-color); |
| margin: 0; |
| overflow: hidden; |
| padding: 0; |
| user-select: none; |
| } |
| |
| a { |
| display: block; |
| } |
| |
| a, |
| a:active, |
| a:hover, |
| a:visited { |
| color: inherit; |
| text-decoration: none; |
| } |
| |
| #most-visited { |
| margin: 10px 0; |
| text-align: -webkit-center; |
| user-select: none; |
| width: 100% |
| } |
| |
| #mv-tiles, |
| .mv-tiles-old { |
| display: flex; |
| flex-wrap: wrap; |
| font-size: 0; |
| justify-content: center; |
| /* 5 88px tiles per row. If you change this, also change the corresponding |
| * values in local_ntp.css. */ |
| max-width: calc(var(--md-tile-width) * var(--md-max-tiles-row)); |
| opacity: 0; |
| position: static; |
| /* This align correctly for both LTR and RTL */ |
| text-align: -webkit-auto; |
| transition: opacity 300ms; |
| user-select: none; |
| } |
| |
| .mv-tiles-old { |
| left: 0; |
| margin: auto; |
| position: absolute; |
| right: 0; |
| } |
| |
| .mouse-navigation { |
| outline: none; |
| } |
| |
| .md-tile-container { |
| border-radius: 4px; |
| box-sizing: border-box; |
| height: var(--md-tile-height); |
| margin-bottom: var(--md-tile-margin); |
| opacity: 1; |
| position: relative; |
| transition-property: |
| background, background-color, border-color, box-shadow, opacity, filter; |
| width: var(--md-tile-width); |
| } |
| |
| .md-tile-container.reorder .md-tile { |
| background-color: white; |
| border-radius: 4px; |
| box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), |
| 0 4px 8px 3px rgba(60, 64, 67, 0.15); |
| transition-duration: 200ms; |
| } |
| |
| .md-tile-container.reorder .md-tile .md-tile-inner { |
| z-index: unset; |
| } |
| |
| .md-tile { |
| cursor: pointer; |
| padding: var(--md-tile-padding-top) var(--md-tile-padding-horizontal) |
| var(--md-tile-padding-bottom); |
| } |
| |
| .md-empty-tile { |
| display: none; |
| } |
| |
| body:not(.reordering) .md-tile-container:hover { |
| background-color: rgba(33, 32, 36, 0.06); |
| } |
| |
| body.dark-theme:not(.reordering) .md-tile-container:hover { |
| background-color: rgba(255, 255, 255, 0.1); |
| } |
| |
| body:not(.reordering) .md-tile-container:hover .md-menu { |
| opacity: 1; |
| transition-delay: 500ms; |
| } |
| |
| body.dark-theme:not(.reordering) .md-tile-container:active + .md-menu::after { |
| background-color: rgb(189, 193, 198); |
| transition-delay: 0ms; |
| } |
| |
| .md-tile-container.blacklisted { |
| margin: 0; |
| padding: 0; |
| transform: scale(0, 0); |
| transition-duration: 200ms; |
| transition-property: transform, box-shadow, margin, opacity, padding, width; |
| width: 0; |
| } |
| |
| .md-tile-inner { |
| align-items: center; |
| display: flex; |
| flex-flow: column nowrap; |
| height: 100%; |
| position: relative; |
| width: 100%; |
| z-index: -1; |
| } |
| |
| .md-icon { |
| margin-bottom: var(--md-icon-margin-bottom); |
| } |
| |
| .md-favicon { |
| pointer-events: none; |
| } |
| |
| .md-favicon img { |
| /* Icons returned by the NTP Icon Source are always of this size. */ |
| height: var(--md-icon-size); |
| width: var(--md-icon-size); |
| } |
| |
| .md-fallback-background, |
| .md-add-background { |
| align-items: center; |
| background-color: rgb(136, 136, 136); |
| border-radius: 50%; |
| display: flex; |
| height: var(--md-icon-size); |
| justify-content: center; |
| width: var(--md-icon-size); |
| } |
| |
| .md-fallback-letter { |
| color: white; |
| font-family: 'Segoe UI', 'Roboto', arial, sans-serif; |
| font-size: var(--md-fallback-letter-size); |
| height: var(--md-fallback-letter-size); |
| line-height: var(--md-fallback-letter-size); |
| text-align: center; |
| width: var(--md-fallback-letter-size); |
| } |
| |
| .md-add-background { |
| background-color: rgb(241, 243, 244); |
| } |
| |
| .md-add-icon { |
| background: url(chrome-search://most-visited/add_link.svg) no-repeat center; |
| height: var(--md-favicon-size); |
| width: var(--md-favicon-size); |
| } |
| |
| .md-title { |
| color: rgba(33, 32, 36, 0.86); |
| font-family: 'Roboto', arial, sans-serif; |
| font-size: var(--md-title-font-size); |
| font-weight: 500; |
| height: var(--md-title-height); |
| line-height: var(--md-title-height); |
| overflow: hidden; |
| text-align: center; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| width: 96px; |
| } |
| |
| /* Font weight on Mac and ChromeOS looks heavier on default background and |
| * needs to be reduced. */ |
| body.mac-chromeos .md-title { |
| font-weight: 400; |
| } |
| |
| /* Apply when a custom background is set */ |
| body.dark-theme .md-tile-container:not(.reorder) .md-title { |
| color: rgb(248, 249, 250); |
| filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.35)); |
| } |
| |
| /* Apply only when a theme is installed */ |
| body.using-theme .md-title-container { |
| background-color: white; |
| /* Necessary for a "pill" shape. Using 50% creates an oval. */ |
| border-radius: 500px; |
| padding: 0 4px; |
| } |
| |
| body.using-theme .md-tile-container:not(.reorder) .md-title { |
| color: rgba(33, 32, 36, 0.86); |
| filter: unset; |
| } |
| |
| .md-menu { |
| background-color: transparent; |
| border: none; |
| cursor: pointer; |
| height: var(--md-menu-size); |
| margin: var(--md-menu-margin-top) var(--md-menu-margin-side); |
| opacity: 0; |
| position: absolute; |
| right: 0; |
| top: 0; |
| width: var(--md-menu-size); |
| } |
| |
| html[dir=rtl] .md-menu { |
| left: 0; |
| right: auto; |
| } |
| |
| body:not(.reordering) .md-menu:active, |
| body:not(.reordering) .md-menu:focus:not(.mouse-navigation) { |
| opacity: 1; |
| } |
| |
| /* We use ::after without content to provide the masked X element. */ |
| .md-menu::after { |
| --mask-width: calc(var(--md-menu-size) - 2); |
| -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-repeat: no-repeat; |
| -webkit-mask-size: var(--mask-width); |
| background-color: rgba(33, 32, 36, 0.55); |
| content: ''; |
| display: block; |
| height: var(--md-menu-size); |
| left: 0; |
| position: absolute; |
| top: 0; |
| width: var(--md-menu-size); |
| } |
| |
| .md-edit-menu { |
| height: var(--md-edit-menu-size); |
| width: var(--md-edit-menu-size); |
| } |
| |
| .md-edit-menu::after { |
| --mask-width: var(--md-edit-menu-size); |
| -webkit-mask-image: url(chrome-search://most-visited/edit_menu.svg); |
| height: var(--md-edit-menu-size); |
| width: var(--md-edit-menu-size); |
| } |
| |
| body:not(.reordering) .md-menu:hover::after, |
| body:not(.reordering) .md-menu:focus::after { |
| background-color: rgba(33, 32, 36, 0.71); |
| } |
| |
| body.dark-theme .md-tile-container:not(.reorder) .md-menu::after, |
| body.dark-theme:not(.reordering) .md-menu:focus:not(.mouse-navigation)::after { |
| background-color: white; |
| } |
| |
| body.dark-theme:not(.reordering) .md-menu:active::after, |
| body.dark-theme:not(.reordering) .md-menu:hover::after, |
| body.dark-theme:not(.reordering) .md-menu.mouse-navigation:focus::after { |
| background-color: rgb(218, 220, 224); |
| } |