react.dev/beta/src/styles/index.css

/*
 * Copyright (c) Facebook, Inc. and its affiliates.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://beta.reactjs.org/fonts/Optimistic_Display_W_Lt.woff2')
      format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://beta.reactjs.org/fonts/Optimistic_Display_W_Md.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://beta.reactjs.org/fonts/Optimistic_Display_W_Bd.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  /* Write your own custom base styles here */
  html {
    color-scheme: light;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
  }

  html.dark {
    color-scheme: dark;
  }

  html .dark-image {
    display: none;
  }

  html .light-image {
    display: block;
  }

  html.dark .dark-image {
    display: block;
  }

  html.dark .light-image {
    display: none;
  }

  html,
  body {
    padding: 0;
    margin: 0;
  }

  @media screen and (max-width: 1023px) {
    body {
      overflow-x: hidden;
    }
  }

  /* Start purging... */
  /* Force GPU Accelerated scrolling, credit: Twitter Lite */
  .scrolling-gpu {
    transform: translateZ(0);
  }

  @layer utilities {
    .text-7xl {
      font-size: 5rem;
    }

    .text-8xl {
      font-size: 6rem;
    }
  }

  a > code {
    color: #087ea4 !important; /* blue-50 */
    text-decoration: none !important;
  }

  html.dark a > code {
    color: #149eca !important; /* blue-40 */
  }

  .text-code {
    font-size: calc(1em - 10%) !important;
  }

  .text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    box-decoration-break: clone;
    background-repeat: no-repeat;
    color: transparent;
  }

  .text-gradient-electric-blue {
    background-image: linear-gradient(45deg, #61dafb, #0072ff);
  }
  /* Stop purging. */
  /* Your own custom utilities */

  details {
    margin-bottom: 1rem;
  }

  table {
    width: 100%;
    margin-bottom: 1rem;
    display: block;
    overflow-x: auto;
  }

  table td,
  table th {
    padding: 0.75rem;
    vertical-align: top;
    border: 1px solid #dee2e6;
    overflow: auto;
  }

  img {
    max-width: calc(min(700px, 100%));
  }

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

  @keyframes nav-fadein {
    from {
      opacity: 0.5;
    }
    to {
      opacity: 1;
    }
  }

  /*
   * Hopefully when scrollbar-color lands everywhere,
   * (and not just in FF), we'll be able to keep just this.
   */
  html .no-bg-scrollbar {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }
  html.dark .no-bg-scrollbar {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }
  /*
   * Until then, we have ... this.
   * If you're changing this, make sure you've tested:
   * - Different browsers (Chrome, Safari, FF)
   * - Dark and light modes
   * - System scrollbar settings ("always on" vs "when scrolling")
   * - Switching between modes should never jump width
   * - When you interact with a sidebar, it should always be visible
   * - For each combination, test overflowing and non-overflowing sidebar
   * I've spent hours picking these so I expect no less diligence from you.
   */
  html .no-bg-scrollbar::-webkit-scrollbar,
  html .no-bg-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
  }
  html .no-bg-scrollbar:hover::-webkit-scrollbar-thumb,
  html .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
  html .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
  html .no-bg-scrollbar:active::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border: 4px solid transparent;
    background-clip: content-box;
    border-radius: 10px;
  }
  html .no-bg-scrollbar::-webkit-scrollbar-thumb:hover,
  html .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.35) !important;
  }
  html.dark .no-bg-scrollbar:hover::-webkit-scrollbar-thumb,
  html.dark .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
  html.dark .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
  html.dark .no-bg-scrollbar:active::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
  }
  html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:hover,
  html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, 0.35) !important;
  }
}

.code-step * {
  color: black !important;
}
.code-step code {
  background: none !important;
  padding: 2px !important;
}
html.dark .code-step * {
  color: white !important;
}

.mdx-heading {
  scroll-margin-top: 3.5em;
  /* Space for the anchor */
  padding-right: 1em;
}

@media (min-width: 1024px) {
  .mdx-heading {
    scroll-margin-top: 1em;
  }
}

.mdx-heading:before {
  height: 6rem;
  margin-top: -6rem;
  visibility: hidden;
  content: '';
}
.mdx-heading .mdx-header-anchor {
  /* Prevent the anchor from
     overflowing to its own line */
  height: 0px;
  width: 0px;
}
.mdx-heading .mdx-header-anchor svg {
  display: inline;
}
.mdx-heading .mdx-header-anchor svg {
  visibility: hidden;
}
.mdx-heading:hover .mdx-header-anchor svg {
  visibility: visible;
}
.mdx-heading .mdx-header-anchor:focus svg {
  visibility: visible;
}

.mdx-blockquote > span > p:first-of-type {
  margin-bottom: 0;
}
.mdx-blockquote > span > p:last-of-type {
  margin-bottom: 1rem;
}
.mdx-illustration-block {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: stretch;
  gap: 42px;
}
ol.mdx-illustration-block {
  gap: 60px;
}
.mdx-illustration-block li {
  display: flex;
  align-items: flex-start;
  align-content: stretch;
  justify-content: space-around;
  position: relative;
  padding: 1rem;
}
.mdx-illustration-block figure {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;

  justify-content: space-between;
  position: relative;
  height: 100%;
}
.mdx-illustration-block li:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 60px;
  height: 49px;
  background: center / contain no-repeat url('/images/g_arrow.png');
}
.mdx-illustration-block li:first-child:after {
  content: ' ';
  display: none;
}
.mdx-illustration-block img {
  max-height: 250px;
  width: 100%;
}
@media (max-width: 680px) {
  .mdx-illustration-block {
    flex-direction: column;
  }
  .mdx-illustration-block img {
    max-height: 200px;
    width: auto;
  }
  .mdx-illustration-block li:after {
    top: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-100%) rotate(90deg);
  }
}