@ou-imdt/css/src/native/details-dialog.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

:root,
:host {
  /* Dialog */
  --dialog-padding: var(--spacing);
  --dialog-radius: var(--radius);
  --dialog-bg: var(--bg1);
  --dialog-fg: var(--fg1);
  --dialog-border: var(--border);
  --dialog-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  /* See 'dialog backdrop workaround' below :root for ::backdrop bg color */

  /* Detail & Summary */
  --details-padding: var(--spacing);
  --details-radius: none;
  --details-border-color: #D8D6E6;
  --details-border: 2px solid;
  --details-margin: 0.5rem 0;
  --details-border-radius: 0;
  --summary-bg: #D8D6E6;
  --summary-fg: var(--core1);
  --summary-padding: var(--spacing);
  --summary-margin: calc(var(--spacing) * -1);
  --summary-open-margin-bottom: calc(var(--spacing) * 2);
  --summary-icon-closed: "▼";
  --summary-icon-open: "▲";
  --summary-font-weight: bold;
  --summary-hover-decoration: underline;
  --summary-open-bg: #B0ADCD;
  --summary-open-fg: #29245A;
  --summary-hover-bg: #B0ADCD;
  --summary-hover-fg: #29245A;
  --summary-focus-bg: #FDF289;
  --summary-focus-fg: var(--core1);
  --summary-focus-visible-bg: #FDF289;
  --summary-focus-visible-fg: var(--core1);
  --summary-active-boxshadow: var(--btn-active-boxshadow);

  /* Compact variant class */
  --details-compact-border: 0;
  --details-compact-padding: 0 0.2rem;
  --details-compact-margin: 1px 0 0.5rem 0;
  --details-compact-bg: transparent;
  --details-compact-fg: var(--core1);
}

/* Dialog */
:has(dialog[open]) {
  overflow: hidden;
}


dialog {
  background: var(--dialog-bg);
  padding: var(--dialog-padding);
  border: var(--dialog-border);
  border-radius: var(--dialog-radius);
  box-shadow: var(--dialog-shadow);
}


/* Details */

details {
  --icon-font: var(--icon-font, var(--font), Arial);
  border: var(--details-border);
  border-radius: var(--details-radius);
  border-color: var(--details-border-color);
  padding: var(--details-padding);
  margin: var(--details-margin);
  overflow: hidden;
  border-radius: var(--details-border-radius);
}

details[open] {
  padding: var(--details-padding);
}

details[open]>summary {
  list-style-type: none;
  border-bottom: var(--detail-border);
  margin-bottom: var(--summary-open-margin-bottom);
  background: var(--summary-open-bg);
  color: var(--summary-open-fg);
}

details>summary {
  display: grid;
  position: relative;
  grid-template-columns: auto 1fr;
  gap: var(--summary-padding);
  background: var(--summary-bg);
  color: var(--summary-fg);
  list-style-type: none;
  margin: var(--summary-margin);
  padding: var(--summary-padding) var(--summary-padding) var(--summary-padding) calc(var(--summary-padding) * 4);
  font-weight: var(--summary-font-weight);
}

details>summary::-webkit-details-marker {
  display: none;
}


details.compact>summary {
  display: inline-block;
}

summary:hover {
  text-decoration: var(--summary-hover-decoration);
  cursor: pointer;
  background: var(--summary-hover-bg);
  color: var(--summary-hover-fg);
}

/* .icon-end variaint */
summary:before,
summary:after {
  text-decoration: none;
  position: absolute;
  text-decoration: none !important;
  font-family: var(--icon-font);
}

summary:before {
  top: 50%;
  transform: translateY(-50%);
  padding-left: var(--summary-padding);
}


details.icon-end {
  >summary {
    padding: var(--summary-padding) calc(var(--summary-padding)* 4) var(--summary-padding) var(--summary-padding);
  }

  >summary:after {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding-right: var(--summary-padding);
  }
}



/* Focus & Focus Visible State */
details:focus>summary {
  background: var(--summary-focus-bg);
  color: var(--summary-focus-fg);
  text-decoration: var(--summary-hover-decoration);
}

details>summary:focus-visible,
details.compact>summary:focus-visible {
  background: var(--summary-focus-visible-bg);
  color: var(--summary-focus-visible-fg);
  text-decoration: var(--summary-hover-decoration);
}



details.icon-end summary {
  grid-template-columns: 1fr auto;
}

details:not(.compact):not([open]):not(.icon-end)>summary:before {
  content: var(--summary-icon-closed) / "";
}

details.icon-end:not(.compact) summary:after {
  content: var(--summary-icon-closed) / " ";
}

details[open]:not(.icon-end, .compact)>summary:before {
  content: var(--summary-icon-open) / " ";
}

details[open].icon-end>summary:after {
  content: var(--summary-icon-open) / " ";
}

/* .compact variant */
details.compact,
details.compact>summary {
  all: revert;
  cursor: pointer;
  border: var(--details-compact-border);
  padding: var(--details-compact-padding);
  margin: var(--details-compact-margin);
  background: var(--details-compact-bg);
  color: var(--details-compact-fg);
}