chromium/ash/webui/common/resources/personalization/common.css

/* Copyright 2022 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
 * #scheme=relative
 * #import=//resources/ash/common/cr_elements/cros_color_overrides.css.js
 * #import=//resources/ash/common/cr_elements/cr_shared_vars.css.js
 * #include=cros-color-overrides
 * #css_wrapper_metadata_end */

[hidden] {
  /* The |hidden| attribute does not hide an element with an explicitly
   * specified |display| property. Handle this by forcing display to |none|
   * when the |hidden| attribute is present. */
  display: none !important;
}

:host {
  --personalization-app-breadcrumb-height: 56px;
  --personalization-app-subpage-container-min-height:
      calc(100vh - var(--personalization-app-breadcrumb-height));
  --personalization-app-grid-item-background-color:
      var(--cros-sys-secondary_container);
  --personalization-app-grid-item-border-radius: 16px;
  --personalization-app-grid-item-height: 120px;
  --personalization-app-grid-item-spacing: 20px;

  --personalization-app-text-shadow-elevation-1: 0 1px 3px
      rgba(0, 0, 0, 15%), 0 1px 2px rgba(0, 0, 0, 30%);

  /* copied from |AshColorProvider| |kSecondToneOpacity| constant. */
  --personalization-app-second-tone-opacity: 0.3;

  --personalization-app-label-font: var(--cros-button-2-font);
}

@keyframes ripple {
  /* 0 ms */
  from {
    opacity: 1;
  }
  /* 200 ms */
  9% {
    opacity: 0.15;
  }
  /* 350 ms */
  15.8% {
    opacity: 0.15;
  }
  /* 550 ms, hold for 83ms * 20 and then restart */
  24.9% {
    opacity: 1;
  }
  /* 2210 ms */
  to {
    opacity: 1;
  }
}

.placeholder {
  animation: 2210ms linear var(--animation-delay, 1s) infinite ripple;
}

.preview-container {
  background-color: var(--cros-bg-color);
  border: none;
  border-radius: 16px;
}

.preview-text-container,
.preview-text-placeholder {
  align-items: flex-start;
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
}

.preview-text-container {
  justify-content: flex-end;
}

.preview-text-placeholder {
  justify-content: center;
}

.placeholder {
  background-color: var(--personalization-app-grid-item-background-color);
  border-radius: 16px;
}

.preview-image-container {
  border-radius: 16px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

/**
 * Hover a border over the image container to avoid sub pixel rounding issues
 * with chrome scaling images.
 */
.preview-image-border,
.photo-images-border,
.wallpaper-grid-item-border {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  bottom: 0;
  box-sizing: border-box;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

.preview-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.preview-text-container > *,
.preview-text-placeholder > * {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-text-container > * + * {
  margin-top: 4px;
}

.preview-text-placeholder > * + * {
  margin-top: 8px;
}

.preview-text-container > span:first-child {
  color: var(--cros-text-color-secondary);
  font: var(--cros-body-2-font);
}

.preview-text-placeholder > .placeholder:first-child {
  /* Each row is 83 ms after the prior element. */
  --animation-delay: calc(1s + 83ms);
  height: 20px;
  width: 20%;
}

.preview-text-container > span:nth-child(2) {
  color: var(--cros-text-color-primary);
  font: var(--cros-display-6-font);
}

.preview-text-placeholder > .placeholder:nth-child(2) {
  --animation-delay: calc(1s + 83ms * 2);
  height: 24px;
  width: 75%;
}

.preview-text-container > span:nth-child(n+3) {
  color: var(--cros-text-color-secondary);
  font: var(--cros-body-1-font);
}

.preview-text-placeholder > .placeholder:nth-child(n+3) {
  --animation-delay: calc(1s + 83ms * 3);
  height: 20px;
  width: 33%;
}

.ambient-subpage-element-title {
  color: var(--cros-text-color-primary);
  font: var(--personalization-app-label-font);
  margin: 20px 10px 16px 10px;
}

.ambient-toggle-row-container {
  border: none;
  border-radius: 8px;
  display: flex;
  flex-flow: column nowrap;
  height: 48px;
  width: 100%;
}

.ambient-toggle-row {
  align-items: center;
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 0;
}

.ambient-toggle-row + .ambient-toggle-row {
  border-top: 1px solid var(--cros-separator-color);
}

.ambient-toggle-row > p {
  color: var(--cros-text-color-secondary);
  font: var(--cros-body-2-font);
  height: 20px;
  margin: 0;
}

.clickable {
  cursor: pointer;
}

.leftspacertop {
  grid-area: leftspacertop;
}

.leftspacerbottom {
  border-radius: 12px 0 0 12px;
  grid-area: leftspacerbottom;
}

.rightspacertop {
  grid-area: rightspacertop;
}

.rightspacerbottom {
  border-radius: 0 12px 12px 0;
  grid-area: rightspacerbottom;
}

div[class$='spacertop'] {
  background-color: var(--cros-sys-app_base_shaded);
}

div[class$='spacerbottom'] {
  background-color: var(--cros-bg-color);
}

:host-context([dir=rtl]) iron-icon[icon='cr:chevron-right'] {
  transform: scaleX(-1);
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disabled {
  opacity: var(--cros-disabled-opacity);
}

img.disabled {
  /**
   * Use 50% for image instead of default cros-disabled-opacity.
   * TODO(b/236415314) get this into design system as a semantic value.
   */
  opacity: 50%;
}

cr-action-menu::part(dialog) {
  /* Prevent jank due to overscrolling from the dialog */
  overscroll-behavior: contain;
}

a[href] {
  color: var(--cros-sys-primary);
}