chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.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_hidden_style_lit.css.js
 * #import=../cr_icons_lit.css.js
 * #scheme=relative
 * #include=cr-hidden-style-lit cr-icons-lit
 * #css_wrapper_metadata_end */

dialog {
  --scroll-border-color: var(--google-grey-300);
  --scroll-border: 1px solid var(--scroll-border-color);
  background-color: var(--cr-dialog-background-color, white);
  border: 0;
  border-radius: var(--cr-dialog-border-radius, 8px);
  bottom: 50%;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.12),
              0 16px 16px rgba(0, 0, 0, 0.24);
  color: inherit;
  max-height: initial;
  max-width: initial;
  overflow-y: hidden;
  padding: 0;
  position: absolute;
  top: 50%;
  width: var(--cr-dialog-width, 512px);
}

@media (prefers-color-scheme: dark) {
  dialog {
    --scroll-border-color: var(--google-grey-700);
    background-color: var(--cr-dialog-background-color,
        var(--google-grey-900));
    /* Note: the colors in linear-gradient() are intentionally the same to
     * add a 4% white layer on top of the fully opaque background-color. */
    background-image: linear-gradient(rgba(255, 255, 255, .04),
                                      rgba(255, 255, 255, .04));
  }
}

@media (forced-colors: active) {
  dialog {
    /* Use border instead of box-shadow (which does not work) in Windows
       HCM. */
    border: var(--cr-border-hcm);
  }
}

dialog[open] #content-wrapper {
  /* Keep max-height within viewport, and flex content accordingly. */
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: auto;
}

/* When needing to flex, force .body-container alone to shrink. */
.top-container,
:host ::slotted([slot=button-container]),
:host ::slotted([slot=footer]) {
  flex-shrink: 0;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

:host ::slotted([slot=body]) {
  color: var(--cr-secondary-text-color);
  padding: 0 var(--cr-dialog-body-padding-horizontal, 20px);
}

:host ::slotted([slot=title]) {
  color: var(--cr-primary-text-color);
  flex: 1;
  font-family: var(--cr-dialog-font-family, inherit);
  font-size: var(--cr-dialog-title-font-size, calc(15 / 13 * 100%));
  line-height: 1;
  padding-bottom: var(--cr-dialog-title-slot-padding-bottom, 16px);
  padding-inline-end:  var(--cr-dialog-title-slot-padding-end, 20px);
  padding-inline-start: var(--cr-dialog-title-slot-padding-start, 20px);
  padding-top: var(--cr-dialog-title-slot-padding-top, 20px);
}

/* Note that if the padding is non-uniform and the button-container
 * border is visible, then the buttons will appear off-center. */
:host ::slotted([slot=button-container]) {
  display: flex;
  justify-content: flex-end;
  padding-bottom: var(--cr-dialog-button-container-padding-bottom, 16px);
  padding-inline-end: var(--cr-dialog-button-container-padding-horizontal, 16px);
  padding-inline-start: var(--cr-dialog-button-container-padding-horizontal, 16px);
  padding-top: var(--cr-dialog-button-container-padding-top, 16px);
}

:host ::slotted([slot=footer]) {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  border-top: 1px solid #dbdbdb;
  margin: 0;
  padding: 16px 20px;
}

:host([hide-backdrop]) dialog::backdrop {
  opacity: 0;
}

@media (prefers-color-scheme: dark) {
  :host ::slotted([slot=footer]) {
    border-top-color: var(--cr-separator-color);
  }
}

.body-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 1.375rem; /* Minimum reasonably usable height. */
  overflow: auto;
}

:host {
  --transparent-border: 1px solid transparent;
}

/* Cr Dialog uses borders instead of box-shadows. */
#cr-container-shadow-top {
  border-bottom: var(--cr-dialog-body-border-top,
      var(--transparent-border));
}

#cr-container-shadow-bottom {
  border-bottom: var(--cr-dialog-body-border-bottom,
      var(--transparent-border));
}

#cr-container-shadow-top:has(+ #container.can-scroll:not(.scrolled-to-top)),
#container.can-scroll:not(.scrolled-to-bottom) +
    #cr-container-shadow-bottom {
  border-bottom: var(--scroll-border);
}

.top-container {
  align-items: flex-start;
  display: flex;
  min-height: var(--cr-dialog-top-container-min-height, 31px);
}

.title-container {
  display: flex;
  flex: 1;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  outline: none;
}

#close {
  align-self: flex-start;
  margin-inline-end: 4px;
  margin-top: 4px;
}