chrome/browser/resources/side_panel/shared/sp_shared_style.css

/* Copyright 2023 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=./sp_shared_vars.css.js
 * #scheme=relative
 * #css_wrapper_metadata_end */

.sp-card {
  background: var(--color-side-panel-card-background);
  border-radius: 12px;
  display: block;
  margin: 0 var(--sp-body-padding);
  padding: var(--sp-card-block-padding) 0;
}

.sp-card sp-heading {
  margin: 0;
  padding: 0 var(--sp-card-inline-padding);
}

.sp-scroller {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.sp-scroller::-webkit-scrollbar {
  background: transparent;
  width: var(--sp-body-padding);
}

.sp-scroller::-webkit-scrollbar-thumb {
  background: var(--color-side-panel-scrollbar-thumb);
  background-clip: content-box;
  border: solid 1.5px transparent;
  border-radius: 100px;
}

.sp-scroller-top-of-page::-webkit-scrollbar-track {
  margin-block-start: var(--sp-body-padding);
}

.sp-scroller-bottom-of-page::-webkit-scrollbar-track {
  margin-block-end: var(--sp-body-padding);
}

.sp-scroller .sp-card,
:host-context(.sp-scroller) .sp-card {
  margin-inline-end: 0; /* sp-scroller's scrollbar takes the space instead. */
}

.sp-icon-buttons-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-auto-columns: 16px;
  grid-auto-flow: column;
  justify-items: center;
}

.sp-icon-buttons-row cr-icon-button {
  --cr-icon-button-icon-size: 16px;
  --cr-icon-button-size: 24px;
}

.sp-hr {
  background: var(--color-side-panel-divider);
  border: none;
  height: 1px;
  width: 100%;
}

.sp-cards-separator {
  border: 0;
  flex-shrink: 0;
  height: 8px;
  margin: 0;
  width: 100%;
}

cr-dialog {
  --cr-dialog-background-color: var(--color-side-panel-dialog-background);
  --cr-primary-text-color: var(--color-side-panel-dialog-primary-foreground);
  --cr-secondary-text-color: var(
      --color-side-panel-dialog-secondary-foreground);
  --cr-dialog-title-font-size: 16px;
  --cr-dialog-title-slot-padding-bottom: 8px;
  font-weight: 500;
}

cr-dialog::part(dialog) {
  --scroll-border-color: var(--color-side-panel-dialog-divider);
  border-radius: 12px;
  box-shadow: var(--cr-elevation-3);
}