chromium/ash/webui/sanitize_ui/resources/sanitize_shared.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
 * #import=chrome://resources/ash/common/navigation_shared_vars.css.js
 * #import=chrome://resources/ash/common/cr_elements/cros_color_overrides.css.js
 * #import=chrome://resources/ash/common/cr_elements/cr_shared_style.css.js
 * #import=chrome://resources/ash/common/cr_elements/cr_shared_vars.css.js
 * #include=cr-shared-style cros-color-overrides
 * #css_wrapper_metadata_end */

:host-context(body.jelly-enabled) {
  --chart-system-line-color: var(--cros-sys-tertiary);
  --chart-system-gradient-color: var(--cros-sys-tertiary_container);
  --chart-user-line-color: var(--cros-sys-primary);
  --chart-user-gradient-color: var(--cros-sys-primary_container);
}

a[href] {
  color: var(--cr-link-color);
}

a[href]:focus {
  outline-color: var(--cros-sys-focus_ring);
}

.link-wrapper {
  align-items: center;
  display: flex;
  flex-grow: 1;
}

h2.first {
  padding-top: 0;
}

::-webkit-scrollbar {
  width: 6px;
  border-radius: 3px;
  border: 1px solid var(--cros-sys-scrollbar_border);
  background-color: var(--cros-sys-scrollbar);
}

::-webkit-scrollbar-thumb {
  width: 8px;
  border-radius: 8px;
  border: 1px solid var(--cros-sys-scrollbar_border);
  background-color: var(--cros-sys-scrollbar_hover);
}

@media (min-width:600px) {
  :host {
    --container-padding: 24px;
    --content-container-width: 552px;
    --chart-width: 452px;
    --chart-width-nav: 452px;
    --data-point-container-padding: 44px;
    --card-container-max-width: 650px;
  }
}

@media (min-width: 650px) {
  :host {
    --chart-width-nav: 502px;
  }
}

@media (min-width:769px) {
  :host {
    --chart-width-nav: 420px;
  }
}

@media (min-width: 789px) {
  :host {
    --chart-width-nav: 440px;
  }
}

@media (min-width: 809px) {
  :host {
    --chart-width-nav: 460px;
  }
}

@media (min-width: 829px) {
  :host {
    --chart-width-nav: 480px;
  }
}

@media (min-width: 849px) {
  :host {
    --chart-width-nav: 500px;
  }
}

@media (min-width: 869px) {
  :host {
    --chart-width-nav: 520px;
  }
}

@media (min-width: 900px) {
  :host {
    --chart-width-nav: 540px;
  }
}

@media (min-width: 925px) {
  :host {
    --chart-width-nav: 560px;
  }
}

@media (min-width:768px) {
  :host {
    --container-padding: 64px;
    --content-container-width: 640px;
    --chart-width: 540px;
    --data-point-container-padding: 64px;
  }
}

@media (min-width:960px) {
  :host {
    --container-padding: 160px;
    --content-container-width: 640px;
    --chart-width: 540px;
    --chart-width-nav: 540px;
    --data-point-container-padding: 64px;
  }
}

@media (min-width:1280px) {
  :host {
    --container-padding: 160px;
    --content-container-width: 680px;
    --chart-width: 580px;
    --chart-width-nav: 620px;
    --data-point-container-padding: 64px;
    --card-container-max-width: 720px;
  }
}

@media (min-width:1440px) {
  :host {
    --container-padding: 360px;
    --content-container-width: 720px;
    --chart-width: 620px;
    --data-point-container-padding: 64px;
  }
}

:host {
  padding: 12px;
  position: absolute;
  background-color: var(--cros-sys-base_elevated);
  height: 640px;
  width: 680px;
}
div[slot="body"] {
  border-radius: 20px;
  padding: 32px;
}
.title {
  margin-top: 16px;
  margin-bottom: 16px;
  font-family: var(--cros-display-5-font-family);
  font-size: var(--cros-display-5-font-size);
  font: var(--cros-display-5-font);
  font-weight: var(--cros-display-5-font-weight);
  line-height: var(--cros-display-5-line-height);
  color: var(--cros-sys-on_surface);
}

.sanitize-description {
  margin-bottom: 24px;
  font-family: var(--cros-body-2-font-family);
  font-size: var(--cros-body-2-font-size);
  font: var(--cros-body-2-font);
  font-weight: var(--cros-body-2-font-weight);
  line-height: var(--cros-body-2-line-height);
  color: var(--cros-sys-on_surface_variant);
}
.done-button-container {
  text-align: right;
  margin-top: 24px;
}