main.scss

$color-mode-type: media-query;

@import "~bootstrap/scss/bootstrap";
@import "github-fork-ribbon-css/gh-fork-ribbon.css";

@import url('highlight.js/styles/github-dark.css') screen and (prefers-color-scheme: dark);
@import url('highlight.js/styles/github.css') screen and (prefers-color-scheme: light);

#language-navbar {
  border-bottom: none;
}

.nav-item > .nav-link {
  &.active, &:hover {
    background-color: #f6f8fa;
    border-bottom: none;
    transition: none;
  }
}
@media (prefers-color-scheme: dark) {
  .nav-item > .nav-link {
    &.active, &:hover {
      background-color: rgb(13, 17, 23);
    }
  }
}

.nav-link {
  // Don't briefly draw a blue bar under Node.js dropdown after hovering over it
  transition: none;
  // move tabs closer together so that all the languages fit on two rows
  padding: .5rem .7rem;

  &.nav-link-outbound {
    > svg {
      height: 14px;
      width: 14px;
      margin-bottom: 3px;
      stroke: #0d6efd;
      fill: #0d6efd;
    }

    &:focus > svg, &:hover > svg {
      stroke: #0a58ca;
      fill: #0a58ca;
    }
  }
}

.nav.error > .nav-item > .nav-link {
  &.active, &:hover {
    color: #1f2328 !important;
    background-color: #ffebe9;
    border-color: #ffebe9;
  }
}
@media (prefers-color-scheme: dark) {
  .nav.error > .nav-item > .nav-link {
    &.active, &:hover {
      color: #fff !important;
      border-color: var(--bs-danger);
      background-color: var(--bs-danger);
    }
  }
}

#curl-code, #generated-code, #warnings {
  font-family: var(--bs-font-monospace);
  line-height: 1.25;
}

#generated-code, #warnings  {
  /* same as the text area */
  padding: .375rem .75rem;
  border-radius: .3rem;
  border: 1px solid;
  font-size: 1rem;
  font-weight: 400;
  min-height: calc(1.25em + .375rem + .375rem + 2px);
}

#generated-code {
  border-color: #f6f8fa;
  background-color: #f6f8fa;
}
@media (prefers-color-scheme: dark) {
  #generated-code {
    border-color: rgb(13, 17, 23);
    background-color: rgb(13, 17, 23);
  }
}


#warnings {
  /* if the error is very long, without this the yellow stops when you scroll right */
  overflow-x: auto;
  min-width: 100%;
}
#warnings {
  color: #1f2328 !important;
  border-color: #fff8c5;
  background-color: #fff8c5;
}
@media (prefers-color-scheme: dark) {
  #warnings {
    color: #000 !important;
    border-color: var(--bs-warning);
    background-color: var(--bs-warning);
  }
}

/* At least Chrome on macOS adds a bottom margin */
pre {
  margin-bottom: 0;
}

code {
  color: var(--bs-body-color);
  font-size: 1rem;
}

#generated-code {
  display: block;
  overflow-x: auto;
}

#generated-code {
  /* The output should be marked as plaintext only when there's an error. */
  &.language-plaintext {
    color: #1f2328 !important;
    background-color: #ffebe9;
    border-color: #ffebe9;
  }
}
@media (prefers-color-scheme: dark) {
  #generated-code {
    /* The output should be marked as plaintext only when there's an error. */
    &.language-plaintext {
      color: #fff !important;
      border-color: var(--bs-danger);
      background-color: var(--bs-danger);
    }
  }
}


.github-fork-ribbon:before {
  background-color: #333;
}