chromium/chrome/browser/resources/pdf/elements/viewer_side_panel.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=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #import=./pdf_shared.css.js
 * #include=pdf-shared
 * #css_wrapper_metadata_end */

:host {
  --cr-icon-button-margin-end: 0;
  --cr-icon-button-margin-start: 0;
  background-color: var(--viewer-side-background-color);
  padding-top: 8px;
  width: 288px;
}

:host > div {
  padding-inline: 16px;
}

h2 {
  font: normal 400 13px Roboto, sans-serif;
  color: var(--google-grey-100);
  margin: 0;
  margin-inline-start: 14px;
}

#brush-options {
  padding-top: 27px;
}

#brush-selector {
  border-bottom: 1px solid var(--viewer-border-color);
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

#brush-selector cr-icon-button {
  --cr-icon-button-size: 48px;
  margin: 4px 8px;
}

#colors,
#sizes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content: center;
  margin: 16px 0 32px;
  padding: 0 8px;
}

#sizes cr-icon-button {
  --cr-icon-button-icon-size: 24px;
  --cr-icon-button-size: 48px;
}

.color-chip {
  -webkit-appearance: none;
  background: var(--item-color, magenta);
  cursor: pointer;
  border: 1px solid rgba(32, 33, 36, 0.5);
  border-radius: 12px;
  margin: 0;
  height: 24px;
  width: 24px;
}

.color-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.color-item input[checked] {
  border-radius: 18px;
  height: 36px;
  width: 36px;
}