@essential-js/ui/code/code.css

EssentialJS UI

.essential__copyable-code {
  background: var(--secondary-background);
  border-radius: var(--card-border-radius);
  display: flex;
  flex-direction: column;
  max-height: 350px;
  position: relative;
  padding: 1rem 0;
}
.essential__copyable-code .title {
  background: var(--secondary-background);
  display: flex;
  padding: 0.5rem 1rem;
  width: -moz-fit-content;
  width: fit-content;
}
.essential__copyable-code .title h4 {
  color: var(--accent-active);
  font-family: var(--secondary-font-family);
  font-size: 0.95rem;
  font-weight: 500;
}
.essential__copyable-code .content {
  background: var(--secondary-background);
  border-radius: var(--card-border-radius);
  white-space: pre;
  max-height: 350px;
  overflow-y: auto;
  font-size: 0.95rem;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: calc(100% - 24px) 24px;
}
.essential__copyable-code .content .icon {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  width: 20px;
  cursor: pointer;
  transition: transform 0.1s ease-out;
}
.essential__copyable-code .content .icon:hover {
  transform: scale(1.1);
}
.essential__copyable-code .content .icon:active {
  transform: scale(0.9);
}
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
.essential__code {
  border-radius: var(--card-border-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-x: auto;
  height: min-content;
}
.essential__code .prism-code.language-tsx {
  background: transparent !important;
}
.essential__code .prism-code.language-tsx .token-line,
.essential__code .prism-code.language-tsx * {
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
  font-style: normal !important;
}


/*# sourceMappingURL=code.css.map*/