| /* 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: 16px; |
| --md-favicon-size: 32px; |
| --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-margin: 16px; |
| --md-tile-padding-top: 16px; |
| --md-tile-size: 112px; |
| --md-title-font-size: 12px; |
| --md-title-height: 24px; |
| --md-title-max-height: 28px; |
| |
| /* May be overridden by themes (on the body element). */ |
| --icon-background-color: rgb(var(--GG100-rgb)); |
| --tile-title-color: rgb(var(--GG800-rgb)); |
| } |
| |
| 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 { |
| text-decoration: none; |
| } |
| |
| #most-visited { |
| margin-top: 10px; |
| 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 112px tiles per row. If you change this, also change the corresponding |
| * values in local_ntp.css. */ |
| max-width: calc(var(--md-tile-size) * 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; |
| } |
| |
| body.grid-layout #mv-tiles, |
| body.grid-layout .mv-tiles-old { |
| display: block; |
| flex-wrap: unset; |
| justify-content: unset; |
| max-width: unset; |
| position: relative; |
| text-align: unset; |
| } |
| |
| .mv-tiles-old { |
| left: 0; |
| margin: auto; |
| position: absolute; |
| right: 0; |
| } |
| |
| .mouse-navigation { |
| outline: none; |
| } |
| |
| .grid-tile-container { |
| position: absolute; |
| transition: transform 300ms ease-in-out; |
| } |
| |
| .grid-tile { |
| transition: transform 300ms ease-in-out; |
| } |
| |
| /* Prevent transitions on the held tile in order for it to smoothly follow the |
| * mouse. */ |
| .grid-reorder .grid-tile { |
| transition-duration: 0s; |
| } |
| |
| .grid-reorder { |
| z-index: 10; /* Ensure the held tile is visible. */ |
| } |
| |
| .md-tile { |
| border-radius: 4px; |
| box-sizing: border-box; |
| color: rgb(var(--tile-title-color)); |
| cursor: pointer; |
| height: var(--md-tile-size); |
| margin-bottom: var(--md-tile-margin); |
| opacity: 1; |
| padding-top: var(--md-tile-padding-top); |
| position: relative; |
| transition-property: |
| background, background-color, border-color, box-shadow, opacity, filter; |
| width: var(--md-tile-size); |
| } |
| |
| .reorder { |
| background-color: white; |
| border-radius: 4px; |
| box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), .3), |
| 0 4px 8px 3px rgba(var(--GG800-rgb), .15); |
| color: rgb(var(--GG800-rgb)); |
| transition-duration: 200ms; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .reorder { |
| background-color: rgb(var(--dark-mode-bg-rgb)); |
| box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4), |
| 0 4px 8px 3px rgba(0, 0, 0, .25); |
| color: rgb(var(--GG100-rgb)); |
| } |
| } |
| |
| .reorder .md-tile-inner { |
| z-index: unset; |
| } |
| |
| .md-empty-tile { |
| display: none; |
| } |
| |
| body:not(.reordering) .md-tile:hover, |
| .grid-reorder .md-tile { |
| background-color: rgba(var(--GG900-rgb), .06); |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| body:not(.reordering) .md-tile:hover, |
| .grid-reorder .md-tile { |
| background-color: rgba(255, 255, 255, .1); |
| } |
| } |
| |
| body.dark-theme:not(.reordering) .md-tile:hover, |
| body.dark-theme .grid-reorder .md-tile { |
| background-color: rgba(255, 255, 255, .1); |
| } |
| |
| body:not(.reordering) .md-tile:hover .md-menu { |
| opacity: 1; |
| transition-delay: 500ms; |
| } |
| |
| body.dark-theme:not(.reordering) .md-tile:active + .md-menu::after { |
| background-color: rgb(var(--GG400-rgb)); |
| transition-delay: 0ms; |
| } |
| |
| .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 { |
| align-items: center; |
| background-color: var(--icon-background-color); |
| border-radius: 50%; |
| display: flex; |
| height: var(--md-icon-size); |
| justify-content: center; |
| margin-bottom: var(--md-icon-margin-bottom); |
| width: var(--md-icon-size); |
| } |
| |
| .md-add-icon { |
| background-image: url(chrome-search://most-visited/add_link.svg); |
| background-position: center; |
| background-repeat: no-repeat; |
| } |
| |
| .use-white-add-icon .md-add-icon { |
| background-image: url(chrome-search://most-visited/add_link_white.svg); |
| } |
| |
| .md-fallback-letter { |
| background-color: rgb(var(--GG600-rgb)); |
| border-radius: 50%; |
| color: white; |
| font-size: var(--md-fallback-letter-size); |
| height: var(--md-favicon-size); |
| line-height: var(--md-favicon-size); |
| text-align: center; |
| width: var(--md-favicon-size); |
| } |
| |
| .win .md-fallback-letter { |
| font-weight: 600; |
| } |
| |
| .md-title { |
| font-size: var(--md-title-font-size); |
| font-weight: 500; |
| max-height: var(--md-title-max-height); |
| overflow: hidden; |
| text-align: center; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| width: 88px; |
| } |
| |
| .md-title span { |
| line-height: var(--md-title-height); |
| } |
| |
| /* 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.custom-background .md-tile:not(.reorder) .md-title { |
| filter: drop-shadow(0 0 6px rgba(0, 0, 0, .35)); |
| } |
| |
| /* Apply only when a theme with image is installed. */ |
| body.use-title-container .md-title { |
| background-color: white; |
| /* Necessary for a "pill" shape. Using 50% creates an oval. */ |
| border-radius: 500px; |
| padding: 0 8px; |
| } |
| |
| body.use-title-container .md-tile:not(.reorder) { |
| color: rgb(var(--GG800-rgb)); |
| 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); |
| /* TODO(crbug.com/1012065): Use SVG for the "X" icon. */ |
| -webkit-mask-image: -webkit-image-set( |
| url(chrome-search://most-visited/dont_show.png) 1x, |
| url(chrome-search://most-visited/dont_show_2x.png) 2x); |
| -webkit-mask-repeat: no-repeat; |
| -webkit-mask-size: var(--mask-width); |
| background-color: rgb(var(--GG600-rgb)); |
| content: ''; |
| display: block; |
| height: var(--md-menu-size); |
| left: 0; |
| position: absolute; |
| top: 0; |
| width: var(--md-menu-size); |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| .md-menu::after { |
| background-color: rgb(var(--GG200-rgb)); |
| } |
| } |
| |
| .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: rgb(var(--GG700-rgb)); |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| body:not(.reordering) .md-menu:hover::after, |
| body:not(.reordering) .md-menu:focus::after { |
| background-color: rgb(var(--GG400-rgb)); |
| } |
| } |
| |
| body.dark-theme .md-tile:not(.reorder) .md-menu::after, |
| body.dark-theme:not(.reordering) .md-menu:focus:not(.mouse-navigation)::after { |
| background-color: white; |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| body.dark-theme .md-tile:not(.reorder) .md-menu::after, |
| body.dark-theme:not(.reordering) |
| .md-menu:focus:not(.mouse-navigation)::after { |
| background-color: rgb(var(--GG200-rgb)); |
| } |
| } |
| |
| 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(var(--GG300-rgb)); |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| 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(var(--GG400-rgb)); |
| } |
| } |