chromium/ui/webui/resources/cr_components/history_clusters/cluster.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=./history_clusters_shared_style.css.js
 * #import=./shared_vars.css.js
 * #import=//resources/cr_elements/cr_icons_lit.css.js
 * #scheme=relative
 * #include=history-clusters-shared-style cr-icons-lit
 * #css_wrapper_metadata_end */

  :host {
    --indentation: 52px;
    --search-query-margin: 10px;
    display: block;
    /* Implements the spacing between containers. */
    padding-bottom: var(--cluster-padding-vertical);
  }

  :host([in-side-panel]) {
    --cr-icon-button-margin-start: 18px;
    --search-query-margin: 4px;
    padding-bottom: 0;
    padding-top: 8px;
  }

  :host([in-side-panel]) #container {
    background: var(--color-side-panel-card-background);
    border-radius: 12px;
    overflow: hidden;
  }

  :host([in-side-panel][is-first]) {
    padding-top: 0;
  }

  :host-context(.focus-outline-visible):host(:focus) #container {
    box-shadow: inset 0 0 0 2px var(--cr-focus-outline-color);
  }

  :host([has-hidden-visits_]) #container {
    /* For containers with a "Show More" button, add some additional spacing for
       the pill button by adding a margin on the container. */
    margin-bottom: var(--cluster-padding-vertical);
  }

  :host([in-side-panel]) #container url-visit:last-of-type {
    margin-bottom: 8px;
  }

  /* We need an inner container div to apply spacing between clusters. This is
     because iron-list ignores the margin on the host element. */
  :host(:not([in-side-panel])) #container {
    background-color: var(--cr-card-background-color);
    border-radius: var(--cr-card-border-radius);
    box-shadow: var(--cr-card-shadow);
    padding: var(--cluster-padding-vertical) 0;
  }

  .label-row {
    align-items: center;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    min-height: 24px;
    min-width: 0;
    padding-block-end: 13px;
    padding-inline-start: var(--cluster-padding-horizontal);
  }

  :host([in-side-panel]) .label-row {
    min-height: 44px;
    padding-block-end: 0;
    padding-inline-start: 16px;
  }

  #label {
    color: var(--cr-primary-text-color);
    font-size: 16px;
    font-weight: 500;
  }

  :host([in-side-panel]) #label {
    font-size: .875rem;  /* 14px */
    line-height: calc(10/7); /* 20px */
    margin-inline-end: 16px;
  }

  .timestamp {
    font-size: 11px;
  }

  :host([in-side-panel]) .timestamp {
    font-size: .6875rem; /* 11px */
    line-height: calc(5/3); /* 20px */
  }

  .debug-info {
    color: var(--cr-secondary-text-color);
  }

  #related-searches-divider {
    display: none;
  }

  :host([in-side-panel]) #related-searches-divider {
    display: block;
    background-color: var(--color-history-clusters-side-panel-divider);
    height: 1px;
    margin: 8px 16px;
  }

  #related-searches {
    margin: 16px var(--cluster-padding-horizontal) 0px;
  }

  :host([in-side-panel]) #related-searches {
    /* 2px left and right margin so related searches don't overlap container
     * focus indicator. */
    margin: 16px 2px;
  }

  /*TODO(mfacey): Figure out appropriate non side panel color to show carousel
      buttons. */
  :host([in-side-panel]) search-query {
    flex-shrink: 0;
    margin-top: 0;
  }

  search-query:not(:last-of-type) {
    margin-inline-end: var(--search-query-margin);
  }

  :host([in-side-panel]) search-query:first-of-type {
    margin-inline-start: 16px;
  }