<style>
:host {
--personalization-app-grid-item-height: 120px;
--personalization-app-grid-item-spacing: 20px;
/* copied from |AshColorProvider| |kSecondToneOpacity| constant. */
--personalization-app-second-tone-opacity: 0.3;
--personalization-app-grid-item-outline-offset: 2px;
--personalization-app-grid-item-outline-width: 2px;
box-sizing: border-box;
display: block;
height: calc(var(--personalization-app-grid-item-height) + var(--personalization-app-grid-item-spacing));
overflow: hidden;
padding: calc(var(--personalization-app-grid-item-spacing) / 2);
/* Subtract 0.34px to fix subpixel rounding issues with iron-list. This
* ensures all grid items in a row add up to at least 1px smaller than the
* parent width. */
width: var(--wallpaper-grid-item-width, calc(100% / 3 - 0.34px));
}
:host([data-is-promoted-tile]) {
padding: calc(var(--personalization-app-grid-item-outline-width) + var(--personalization-app-grid-item-outline-offset))
calc(var(--personalization-app-grid-item-spacing) / 2);
}
@media(min-width: 720px) {
:host {
/* Subtract 0.25px to fix subpixel rounding issues with iron-list. This
* ensures all grid items in a row add up to at least 1px smaller than the
* parent width. */
width: var(--wallpaper-grid-item-width, calc(100% / 4 - 0.25px)) !important;
}
}
:host(:focus-visible) {
outline: none;
}
/* TODO(b/258686035): Clean up style once jelly is on by default. */
:host([aria-selected='true']:not([placeholder])) .item {
background-color: var(--cros-sys-highlight_shape, rgba(
var(--cros-color-prominent-rgb),
var(--personalization-app-second-tone-opacity)));
border-radius:
calc(var(--personalization-app-grid-item-border-radius) + 4px);
}
:host(:not([aria-selected='true'])) iron-icon,
:host([placeholder]) iron-icon {
display: none;
}
.item {
align-items: center;
background-color: var(--personalization-app-grid-item-background-color);
border-radius: var(--personalization-app-grid-item-border-radius);
box-sizing: border-box;
cursor: pointer;
display: flex;
flex-flow: row wrap;
height: 100%;
justify-content: center;
overflow: hidden;
position: relative;
width: 100%;
}
:host([aria-disabled='true']) .item {
cursor: default;
}
:host([aria-disabled='true']) .secondary-text {
color: var(--cros-text-color-secondary);
text-shadow: none;
}
:host(:focus-visible) .item {
outline: var(--personalization-app-grid-item-outline-width) solid var(--cros-focus-ring-color);
outline-offset: var(--personalization-app-grid-item-outline-offset);
}
:host([placeholder]) .item {
animation: 2210ms linear var(--animation-delay, 1s) infinite ripple;
}
img {
object-fit: cover;
user-select: none;
}
:host(:not([collage])) img {
border-radius: var(--personalization-app-grid-item-border-radius);
height: 100%;
position: absolute;
width: 100%;
}
:host(:not([collage])) img:has(+ img) {
clip-path: inset(0 50% 0 0);
}
:host(:not([collage])) img+img {
clip-path: inset(0 0 0 50%);
}
:host([collage]) img {
flex: 1 1 0;
height: 100%;
min-width: 50%;
}
:host([collage]) img:first-of-type:nth-last-of-type(n+3),
:host([collage]) img:first-of-type:nth-last-of-type(n+3) ~ img {
height: 50%;
}
:host([aria-selected='true']) img {
animation-duration: 200ms;
animation-fill-mode: forwards;
animation-name: img-resize;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1.0);
}
@keyframes img-resize {
100% {
height: calc(100% - 8px);
width: calc(100% - 8px);
}
}
#textShadow {
background: linear-gradient(rgba(var(--google-grey-900-rgb), 0),
rgba(var(--google-grey-900-rgb), 55%));
bottom: 0;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: 1;
}
:host([data-is-promoted-tile]) #text,
:host([data-sea-pen-image]) #text {
position: relative;
top: 8px;
}
#text {
bottom: 0;
box-sizing: border-box;
left: 0;
overflow: hidden;
padding: 8px 16px;
position: absolute;
right: 0;
white-space: nowrap;
width: 100%;
z-index: 2;
}
.primary-text,
.secondary-text,
::slotted(.primary-text) {
color: white;
margin: 0;
overflow: hidden;
padding: 0;
text-align: center;
text-overflow: ellipsis;
text-shadow: var(--personalization-app-text-shadow-elevation-1);
}
.primary-text,
::slotted(.primary-text) {
font: var(--cros-title-2-font);
}
:host([data-is-promoted-tile]) .primary-text,
:host([data-is-promoted-tile]) ::slotted(.primary-text),
:host([data-sea-pen-image]) .primary-text,
:host([data-sea-pen-image]) ::slotted(.primary-text) {
font: var(--cros-display-6_regular-font);
}
:host([data-sea-pen-image]) .wallpaper-grid-item-border {
visibility: hidden;
}
:host([data-google-photos]) p.primary-text:last-of-type {
margin-bottom: var(--cros-annotation-2-line-height);
}
.secondary-text,
::slotted(.secondary-text) {
font: var(--cros-annotation-2-font);
}
#infoIcon {
filter: drop-shadow(0 0 2px var(--cros-sys-shadow));
position: absolute;
right: 8px;
top: 8px;
}
.check-mark-icon-container {
left: 8px;
position: absolute;
top: 8px;
z-index: 2;
}
iron-icon {
--iron-icon-height: 20px;
--iron-icon-width: 20px;
animation-duration: 200ms;
animation-name: iron-icon-scale;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1.0);
margin-inline: 0;
}
path {
fill: white;
}
#infoIcon {
height: 16px;
width: 16px;
}
@keyframes iron-icon-scale {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
</style>
<div class="item" part="item"
style$="[[getItemPlaceholderAnimationDelay_(index)]]">
<template is="dom-repeat" items="[[getSrcArray_(src, collage)]]">
<img aria-hidden="true"
auto-src="[[item.url]]"
clear-src
data-index$="[[itemsIndex]]"
hidden$="[[isImageHidden_(imageStatus_)]]"
is-google-photos="[[isGooglePhotos]]"
is="cr-auto-img"
on-error="onImgError_"
on-load="onImgLoad_"
part="image">
</template>
<div part="border" class="wallpaper-grid-item-border"></div>
<template is="dom-if"
if="[[isTextVisible_(imageStatus_, primaryText, secondaryText)]]"
restamp>
<div id="textShadow" part="textShadow"></div>
<div part="text" id="text">
<slot name="text">
<template is="dom-if" if="[[isPrimaryTextVisible_(primaryText)]]" restamp>
<p class="primary-text" title$="[[primaryText]]">[[primaryText]]</p>
</template>
</slot>
<slot name="secondaryText">
<template is="dom-if"
if="[[isSecondaryTextVisible_(secondaryText)]]"
restamp>
<p class="secondary-text" title$="[[secondaryText]]">
[[secondaryText]]
</p>
</template>
</slot>
</div>
</template>
<template is="dom-if" if="[[shouldShowInfoText_(imageStatus_, infoText)]]"
restamp>
<div id="infoIcon" title$="[[infoText]]" part="info-icon">
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path part="path"
d="M7 12H9V8H7V12ZM8 0C3.584 0 0 3.584 0 8C0 12.416 3.584 16 8 16C12.416 16 16 12.416 16 8C16 3.584 12.416 0 8 0ZM8 14C4.6925 14 2 11.3075 2 8C2 4.6925 4.6925 2 8 2C11.3075 2 14 4.6925 14 8C14 11.3075 11.3075 14 8 14ZM7 6H9V4H7V6Z">
</path>
</svg>
</div>
</template>
<div class="check-mark-icon-container" part="iconContainer">
<iron-icon part="ironIcon" icon="[[getCheckMarkIcon_(dataSeaPenImage)]]"></iron-icon>
</div>
</div>
Codebase Browser
chromium