chromium/chrome/browser/resources/settings/site_settings_page/site_review_shared.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
 * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #css_wrapper_metadata_end */

cr-tooltip {
  --paper-tooltip-min-width: max-content;
}

site-favicon {
  /** Pad the difference between --cr-link-row-icon-width and
      site-favicon width to align with link rows */
  padding-inline-end: 24px;
}

.bulk-action-button {
  margin-inline-start: auto;
}

.display-name {
  flex: 1;
  max-width: 100%;
}

.header-group-wrapper {
  flex: 1;
  margin-inline-start: 15px;
}

.header-with-icon {
  align-items: center;
  display: flex;
  padding-top: 15px;
}

.header-with-icon h2 {
  padding-bottom: 5px;
  padding-top: 0;
}

.header-with-icon iron-icon {
  border-radius: 50%;
  height: var(--cr-icon-size);
  padding: 6px;
  width: var(--cr-icon-size);
}

.site-list {
  margin-inline-start: 48px;
}

.site-list .list-item {
  --cr-icon-button-margin-end: initial;
}

iron-icon[icon='cr:check'] {
  background-color: var(--google-green-50);
  fill: var(--google-green-700);
}

@media (prefers-color-scheme: dark) {
  iron-icon[icon='cr:check'] {
    background-color: var(--google-green-300);
    fill: var(--grey-900-white-4-percent);
  }
}

.header-icon {
  background-color: var(--google-blue-50);
  fill: var(--google-blue-600);
}

@media (prefers-color-scheme: dark) {
  .header-icon {
    background-color: var(--google-blue-300);
    fill: var(--grey-900-white-4-percent);
  }
}

/**
  * |cr-link-row| defines a line height of 154%. Our rows contains two
  * lines (2em) plus a vertical padding on both sides. We slightly increase
  * the coefficient to 160% to avoid that the height immediately contracts
  * at the beginning of the animation in case of rounding error. Note that
  * erring on the side of a slightly larger height is not a problem since
  * this animation uses |max-height| and not |height| directly.
  */
@keyframes removed-animation {
  0% {
    max-height: calc(1.6 * 2em + 2 * var(--cr-section-vertical-padding));
    opacity: 1;
  }

  20% {
    max-height: calc(1.6 * 2em + 2 * var(--cr-section-vertical-padding));
    opacity: 0;
  }

  100% {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
  }
}

.removed {
  /**
    * Consumers of this animation should ensure the timing of the model update
    * matches the |animation-duration|.
    */
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-name: removed-animation;
  min-height: 0;
}