chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.css

/* 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=../cr_shared_vars.css.js
 * #import=../cr_shared_style_lit.css.js
 * #scheme=relative
 * #include=cr-shared-style-lit
 * #css_wrapper_metadata_end */

:host {
  --avatar-size: 96px;
  --avatar-spacing: 24px;
  /* Size of the outline for the selected avatar. This variable can be
   * modified when using the component with different sizes.
   */
  --selected-border: 4px;
  display: inline-flex;
}

#avatar-grid {
  --cr-column-width: var(--avatar-size);
  --cr-grid-gap: var(--avatar-spacing);
}

#avatar-grid .avatar-container {
  position: relative;
}

#avatar-grid .avatar {
  --avatar-focus-color: var(--google-grey-700);
  --avatar-gap-color: white;
  --avatar-gap-width: 2px;
  --avatar-selected-color: rgba(var(--google-blue-600-rgb), 0.4);

  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--google-grey-300);
  border-radius: 100%;
  display: flex;
  height: var(--avatar-size);
  min-width: 0;
  padding: 0;
  transition: none !important;  /* Polymer's :host([animated]) rule. */
  width: var(--avatar-size);
}

#avatar-grid .iron-selected .avatar {
  --avatar-outline-color: var(--avatar-selected-color);
  --avatar-outline-width: var(--selected-border);
  outline: var(--avatar-outline-width) solid var(--avatar-outline-color);
}

.checkmark {
  --checkmark-size: 21px;
  --iron-icon-fill-color: white;
  background-color: var(--google-blue-600);
  border-radius: 100%;
  height: var(--checkmark-size);
  inset-inline-end: 0;
  padding: 1px;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: var(--checkmark-size);
}

.iron-selected .checkmark {
  visibility: visible;
}

@media (prefers-color-scheme: dark) {
  #avatar-grid .avatar {
    --avatar-focus-color: var(--google-grey-500);
    --avatar-gap-color: var(--google-grey-800);
  }

  .checkmark {
    --iron-icon-fill-color: var(--google-grey-900);
    background-color: var(--google-blue-300);
  }
}

:host-context(.focus-outline-visible) #avatar-grid
    .avatar-container:not(.iron-selected) .avatar:focus {
  --avatar-outline-color: var(--avatar-focus-color);
  --avatar-outline-width: 1px;
}

cr-button {
  background-size: var(--avatar-size);
}

cr-tooltip {
  --paper-tooltip-delay-in: 100ms;
  --paper-tooltip-duration-in: 100ms;
  --paper-tooltip-duration-out: 100ms;
  --paper-tooltip-min-width: none;
}