/* Copyright 2024 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/* #css_wrapper_metadata_start
* #type=style-lit
* #import=chrome://resources/cr_elements/cr_shared_vars.css.js
* #scheme=relative
* #css_wrapper_metadata_end */
:host {
--image-background-color: var(
--color-side-panel-customize-chrome-theme-snapshot-background);
}
.snapshot-container {
box-sizing: border-box;
padding: 0 16px 8px;
text-align: center;
width: 100%;
}
.image-background img {
object-fit: cover;
}
.image {
border: 1px solid rgba(0, 0, 0, .14);
border-radius: 20px;
margin-bottom: 4px;
width: 100%;
}
#classicChromeBackground {
align-items: center;
background-color: var(--image-background-color);
display: flex;
height: fit-content;
justify-content: center;
}
#miniNewTabPage {
height: auto;
width: 100%;
}
.image-background {
align-items: center;
background-color: var(--image-background-color);
border: 0;
border-radius: 12px;
cursor: pointer;
display: flex;
justify-content: center;
margin-bottom: 12px;
position: relative;
width: unset;
padding: 16px;
}
img,
svg {
border: 0;
border-radius: 8px;
box-shadow: var(--cr-elevation-2);
z-index: 1;
}
.overlay,
cr-ripple {
border-radius: inherit;
display: inherit;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.image-background:hover .overlay {
background-color: var(--cr-hover-on-subtle-background-color);
}
cr-ripple {
color: var(--cr-active-neutral-on-subtle-background-color);
z-index: 1;
}
.theme-title {
color: var(--cr-secondary-text-color);
font-size: 11px;
font-weight: 400;
line-height: 20px;
}