index.scss

@use "../ui/vars" as *;
@use "../ui/base/themes" as *;
@use "../ui/base/mdn";
@use "../ui/molecules/grids/grids.scss" as *;
@use "../ui/base/typography" as *;

:root {
  --sticky-header-height: var(--main-document-header-height);
}

.main-document-header-container {
  position: sticky;
  top: 0;
  z-index: var(--z-index-top);
}

.main-page-content {
  overflow-wrap: break-word;
  padding: 3rem 1rem 1rem;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    a:link,
    a:visited {
      color: var(--text-primary);
      text-decoration: none;
    }

    a:hover,
    a:focus {
      text-decoration: underline;
    }

    a:active {
      background-color: transparent;
    }

    a[href^="#"]:hover {
      &:after {
        color: var(--text-inactive);
        content: "#";
        display: inline-flex;
        font-size: 0.7em;
        line-height: 1;
        margin-left: 4px;
        text-decoration: none;
      }
    }
  }

  h1 {
    &::after {
      text-decoration-color: var(--category-color);
    }
  }

  /* reduce the top margin of the interactive example heading */
  h2:first-of-type {
    margin-top: 2rem;
  }

  a:not(.button) {
    color: var(--text-link);
    width: fit-content;

    &:active {
      background-color: var(--text-link);
      color: #fff;

      code {
        background-color: transparent;
        color: #fff;
      }
    }

    &[id^="attr-"] {
      &:link,
      &:visited {
        color: var(--text-link);
        text-decoration: none;
      }

      &:hover,
      &:focus {
        text-decoration: underline;
      }

      &:active {
        color: #fff;
      }
    }

    &[aria-current] {
      color: var(--text-link);
      font-weight: var(--font-body-strong-weight);
      text-decoration: none;
    }
  }

  img {
    background: #fff;
    border: 1px solid var(--border-primary) !important;
    border-radius: var(--elem-radius);
    display: inline-block;
    display: flex;
    height: auto;
    margin: 2rem auto;
  }

  ul,
  ol {
    margin: 1rem 0 2rem;
    padding-left: 2rem;

    li {
      margin: 0.5rem 0;
    }
  }

  ul {
    list-style: disc;

    ul {
      list-style-type: circle;
      margin: 0;
      padding-left: 1rem;
    }
  }

  ol {
    list-style: decimal;

    ol {
      list-style: lower-roman;
      margin: 0;
    }
  }

  dd ol,
  dd ul {
    margin-bottom: 1rem;
    padding-left: 3rem;
  }

  td ul,
  td ol {
    padding-left: 1rem;
  }

  dd li {
    margin-bottom: 1rem;
  }

  td li {
    margin-bottom: 0.5rem;
  }

  dl {
    dt {
      margin-bottom: 0.5rem;
      margin-top: 2rem;
    }

    dd {
      margin-bottom: 1rem;
      margin-left: 1rem;

      .notecard {
        p {
          padding-left: 0;
        }
      }
    }

    p {
      margin: 0 0 1rem;
    }
  }

  // specific styles to override base styles. The Markdown compiler
  // adds extra divs, so this is a way for these styles to not
  // stomp out component styles.
  .section-content {
    p {
      font: var(--type-article-p);

      &:last-child {
        margin-bottom: 2rem;
      }
    }

    figure {
      margin-bottom: 1rem;
    }

    .prev-next {
      display: flex;
      gap: 0.5rem;
      justify-content: space-between;
      list-style: none;
      margin: 1rem 0;
      padding: 0;
      text-align: center;

      li {
        display: flex;
        margin: 0;
      }

      .button {
        margin: 0;
        max-width: inherit;
      }

      .button-wrap {
        color: inherit;
      }
    }
  }

  @media screen and (min-width: $screen-sm) {
    padding: 3rem;
  }

  @media screen and (min-width: $screen-md) {
    margin-bottom: 0.5rem;
    padding: 0;
  }
}

// Base typography styles. Trying to remove as much as possible from
// the .main-page-content override.
b,
strong {
  font-weight: var(--font-body-strong-weight);
  letter-spacing: 0.02rem;
}

table {
  border: 1px solid var(--border-primary);
  border-collapse: collapse;
  width: 100%;

  th {
    background: var(--background-tertiary);
    font-weight: var(--font-body-strong-weight);
    line-height: 1.5;
    text-align: left;
  }

  td,
  th {
    border: 1px solid var(--border-primary);
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
  }

  td {
    .code-example pre {
      margin: 0;
    }

    ul {
      margin: 0;
    }
  }

  caption {
    font-weight: var(--font-body-strong-weight);
    margin: 1rem 0 0.5rem;
  }

  &.properties {
    border: none;
    font-size: var(--type-base-font-size);

    th,
    td {
      border: none;
    }

    th {
      background: none;
    }

    tr {
      border-bottom: 1px solid var(--border-secondary);

      &:first-child {
        border-top: 1px solid var(--border-primary);
      }

      &:last-child {
        border-bottom: 1px solid var(--border-primary);
      }
    }
  }

  &.properties,
  &.standard-table {
    tr {
      &:nth-child(odd) th,
      &:nth-child(odd) td {
        background-color: var(--background-secondary);
      }
    }
  }
}

iframe {
  border: 1px solid var(--border-primary);
  max-width: 100%;
  width: 100%;

  /* "Live Samples" discussion here:
  https://github.com/mdn/yari-private/issues/370,
  These src attributes taken from unsafe-html.js */
  &[src*="https://mdn.github.io"],
  &[src*="https://www.youtube-nocookie.com"],
  &[src*="https://jsfiddle.net"],
  &[src*="https://test262.report"],
  &.nobutton,
  &.sample-code-frame {
    background: #fff;
    border: 1px solid var(--border-primary);
    border-radius: var(--elem-radius);
    box-sizing: content-box;
    padding: 1rem;
    width: calc(100% - 2rem - 2px);
  }
}

h1,
h2,
h3 {
  letter-spacing: var(--heading-letter-spacing);
}

h1 {
  font: var(--type-heading-h1);
  margin-bottom: 2rem;
  word-break: break-word;

  @media screen and (min-width: $screen-md) {
    font: var(--type-heading-h1);
  }
}

h2 {
  font: var(--type-heading-h2);
  margin: 4rem 0 0.5rem;
}

h3 {
  font: var(--type-heading-h3);
  margin: 2rem 0 0.5rem;
}

/* When an h3 immediately follows an h2 we want to use
 * a smaller top margin. We also make accommodation
  for situations where there is an empty div
  between the two elements */
h2 ~ div ~ h3,
h2 ~ h3 {
  margin-top: 1rem;
}

h4 {
  font: var(--type-heading-h4);
  letter-spacing: 0.5px;
  margin: 2rem 0 1rem;
}

h5 {
  font: var(--type-heading-h5);
  letter-spacing: 1.5px;
  margin: 2rem 0 1rem;
  text-transform: uppercase;
}

h6 {
  font: var(--type-heading-h6);
  letter-spacing: 1.5px;
  margin: 2rem 0 1rem;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  code {
    font-size: inherit;
  }
}

p {
  margin: 1rem 0 2rem;
}

blockquote {
  border-left: 4px solid var(--border-secondary);
  color: var(--text-secondary);
  margin-bottom: 2rem;
  padding: 1rem 2rem;

  p {
    margin: 0;
  }
}

pre,
code,
.code-example {
  border-radius: var(--elem-radius);
  font-family: var(--font-code);
  font-size: var(--type-smaller-font-size);
}

code {
  background: var(--code-background-inline);
  padding: 0.125rem 0.25rem;
  width: fit-content;
}

pre {
  background-color: var(--code-background-block);
  border: 1px solid transparent;
  margin: 1rem 0 2rem;
  padding: 1rem 2.5rem 1rem 1rem;

  code {
    background: none;
    color: var(--text-primary);
    padding: 0;
  }
}

.example-good,
.example-bad {
  padding: 0 1rem;
  position: relative;

  &::after {
    background-size: 24px;
    content: "";
    display: block;
    height: 16px;
    position: absolute;
    right: 16px;
    top: 18px;
    width: 16px;
  }
}

.example-bad + .copy-icon,
.example-good + .copy-icon {
  display: none;
}

.example-bad {
  background-color: var(--background-critical);

  &::after {
    background-color: var(--icon-critical);
    mask-image: url("../assets/icons/no.svg");
  }
}

.example-good {
  background-color: var(--background-success);

  &::after {
    background-color: var(--icon-success);
    mask-image: url("../assets/icons/checkmark.svg");
  }
}

/*
 * multi-column layout on pages with an index such as
 * https://developer.mozilla.org/en-US/docs/Web/API#Specifications
*/
.index {
  margin-bottom: 1rem;

  ul {
    margin: 0.5rem 0 2rem;

    @media screen and (min-width: $screen-xl) {
      columns: 3;
    }

    li {
      margin: 0 0 0.5rem;
    }
  }

  .icon-experimental,
  .icon-nonstandard {
    color: var(--icon-information);
  }

  .icon-deprecated {
    color: var(--icon-critical);
  }
}

.callout {
  background: var(--background-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--elem-radius);
  box-shadow: var(--shadow-01);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
  padding: 1rem;
  text-align: left;

  h4 {
    margin: 0;
  }

  p {
    font: var(--type-smaller-font-size);
    margin: 0;
  }
}

.code-example {
  color: var(--code-default);
  position: relative;

  .copy-icon {
    border-radius: var(--elem-radius);
    cursor: pointer;
    height: 1.25rem;
    margin: 0;
    mask-image: url("../assets/clippy.svg");
    mask-size: cover;
    opacity: 0.4;
    padding: 0.25rem;
    position: absolute;
    right: 0.5rem;
    top: 0.75rem;
    width: 1.25rem;

    &:hover,
    &:focus {
      opacity: 1;
    }
  }

  .copy-icon-message {
    background: var(--text-primary);
    border-radius: var(--elem-radius);
    color: var(--text-invert);
    font-size: 0.8125rem;
    opacity: 1;
    padding: 0.125rem;
    position: absolute;
    right: 0.25rem;
    top: 15px;
  }

  .example-good,
  .example-bad {
    padding: 1rem;
  }
}

.only-in-en-us {
  span {
    font-size: 0.8125rem;
  }
}

a.page-not-created {
  cursor: not-allowed;

  &:link,
  &:hover,
  &:not([href]),
  &:focus {
    color: var(--icon-critical);
    text-decoration: underline wavy;
  }
}

.badge {
  border: 1px solid var(--border-primary);
  border-radius: 4rem;
  color: var(--text-secondary);
  font-size: var(--type-tiny-font-size);
  padding: 0.125rem 0.375rem;
  white-space: nowrap;
}

kbd {
  border: 2px solid var(--border-secondary);
  border-radius: var(--elem-radius);
  box-shadow: var(--border-secondary);
  box-shadow: inset 0 -1px 0 0 var(--border-secondary);
  color: var(--text-secondary);
  font-size: 0.825rem;
  padding: 0.25rem;
}

.loading-error pre {
  overflow-y: scroll;
  white-space: pre;
}