@mantine/code-highlight/esm/CodeHighlight.module.mjs.map

Code highlight with Mantine theme

{"version":3,"file":"CodeHighlight.module.mjs","names":[],"sources":["../src/CodeHighlight.module.css"],"sourcesContent":[".root {\n  position: relative;\n}\n\n.codeHighlight {\n  position: relative;\n  border-radius: var(--ch-radius, 0px);\n  overflow: hidden;\n\n  &:where([data-with-border]) {\n    @mixin where-light {\n      border: 1px solid var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      border: 1px solid var(--mantine-color-dark-6);\n    }\n\n    &:where([data-code-color-scheme='dark']) {\n      border: 1px solid var(--mantine-color-dark-6);\n    }\n\n    &:where([data-code-color-scheme='light']) {\n      border: 1px solid var(--mantine-color-gray-2);\n    }\n  }\n\n  @mixin where-light {\n    --ch-background: var(--mantine-color-gray-0);\n  }\n\n  @mixin where-dark {\n    --ch-background: var(--mantine-color-dark-8);\n  }\n}\n\n.inlineCodeHighlight {\n  border-radius: var(--ch-radius, var(--mantine-radius-sm));\n  overflow: hidden;\n  background-color: var(--ch-background);\n  font-size: 13px;\n  padding: 3px 5px;\n\n  &:where([data-with-border]) {\n    @mixin where-light {\n      border: 1px solid var(--mantine-color-gray-2);\n    }\n\n    @mixin where-dark {\n      border: 1px solid var(--mantine-color-dark-6);\n    }\n\n    &:where([data-code-color-scheme='dark']) {\n      border: 1px solid var(--mantine-color-dark-6);\n    }\n\n    &:where([data-code-color-scheme='light']) {\n      border: 1px solid var(--mantine-color-gray-2);\n    }\n  }\n\n  @mixin where-light {\n    --ch-background: var(--mantine-color-gray-0);\n  }\n\n  @mixin where-dark {\n    --ch-background: var(--mantine-color-dark-8);\n  }\n}\n\n.pre {\n  --code-line-height: 1.7;\n\n  display: block;\n  margin: 0;\n  flex: 1;\n  min-width: 0;\n\n  &[data-with-offset] .code {\n    padding-top: 50px;\n  }\n}\n\n.code {\n  display: block;\n  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);\n  background-color: var(--ch-background);\n  font-size: 13px;\n  line-height: var(--code-line-height, var(--mantine-line-height));\n  font-family: var(--mantine-font-family-monospace);\n  width: fit-content;\n  min-width: 100%;\n\n  &:where([data-inline]) {\n    display: inline-block;\n    padding: 3px 5px;\n    background-color: var(--ch-background);\n  }\n}\n\n.controls {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  z-index: 1;\n  background-color: var(--ch-background);\n  border-bottom-left-radius: var(--mantine-radius-md);\n\n  &:where([data-with-offset]) {\n    top: 12px;\n  }\n}\n\n.control {\n  color: var(--mantine-color-text);\n  opacity: 0.5;\n\n  @mixin hover {\n    color: var(--mantine-color-bright);\n    opacity: 1;\n  }\n\n  &:where([data-code-color-scheme='dark']) {\n    color: var(--mantine-color-dark-0);\n\n    @mixin hover {\n      color: var(--mantine-color-white);\n    }\n  }\n\n  &:where([data-code-color-scheme='light']) {\n    color: var(--mantine-color-black);\n\n    @mixin hover {\n      color: var(--mantine-color-black);\n    }\n  }\n\n  & :where(svg) {\n    width: 18px;\n    height: 18px;\n    display: block;\n  }\n}\n\n.controlTooltip {\n  &:where([data-code-color-scheme='light']) {\n    background-color: var(--mantine-color-gray-9);\n    color: var(--mantine-color-white);\n  }\n\n  &:where([data-code-color-scheme='dark']) {\n    background-color: var(--mantine-color-gray-2);\n    color: var(--mantine-color-black);\n  }\n}\n\n.codeWrapper {\n  --code-line-height: 1.7;\n\n  display: flex;\n  flex-direction: row;\n}\n\n.lineNumbers {\n  user-select: none;\n  text-align: right;\n  padding: var(--mantine-spacing-xs) var(--mantine-spacing-xs);\n  padding-left: var(--mantine-spacing-md);\n  font-family: var(--mantine-font-family-monospace);\n  font-size: 13px;\n  line-height: var(--code-line-height, var(--mantine-line-height));\n  color: var(--mantine-color-dimmed);\n  background-color: var(--ch-background);\n  flex-shrink: 0;\n\n  &[data-with-offset] {\n    padding-top: 50px;\n  }\n}\n\n.scrollarea {\n  &[data-collapsed] {\n    max-height: var(--ch-max-height, 180px);\n    overflow: hidden;\n    position: relative;\n\n    &::after {\n      content: '';\n      position: absolute;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      height: 80px;\n      pointer-events: none;\n      background: linear-gradient(\n        0deg,\n        var(--ch-background) 0%,\n        var(--ch-background) 25%,\n        transparent 100%\n      );\n      z-index: 1;\n    }\n  }\n}\n\n.showCodeButton {\n  position: absolute;\n  z-index: 2;\n  bottom: 0;\n  inset-inline-start: 50%;\n  transform: translateX(-50%);\n  font-size: var(--mantine-font-size-sm);\n  color: var(--mantine-color-anchor);\n  width: 100%;\n  text-align: center;\n  padding-top: var(--mantine-spacing-xs);\n  padding-bottom: var(--mantine-spacing-xs);\n  white-space: nowrap;\n\n  &[data-hidden] {\n    display: none;\n  }\n\n  &:where([data-code-color-scheme='dark']) {\n    color: var(--mantine-primary-color-5);\n  }\n\n  &:where([data-code-color-scheme='light']) {\n    color: var(--mantine-primary-color-6);\n  }\n}\n\n.file {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mantine-font-size-xs);\n  gap: 7px;\n  padding: 5px 9px;\n  font-family: var(--mantine-font-family-monospace);\n  font-weight: var(--mantine-font-weight-bold);\n  line-height: 1;\n  user-select: none;\n  cursor: pointer;\n  opacity: 0.8;\n  border: 1px solid transparent;\n  white-space: nowrap;\n  margin: 0;\n  border-radius: var(--mantine-radius-default);\n\n  &:where([data-active]) {\n    opacity: 1;\n  }\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-3);\n    color: var(--mantine-color-gray-8);\n\n    &:where([data-active]) {\n      background-color: var(--mantine-color-white);\n      color: var(--mantine-color-black);\n    }\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n    color: var(--mantine-color-dark-0);\n\n    &:where([data-active]) {\n      background-color: var(--mantine-color-dark-5);\n      color: var(--mantine-color-white);\n    }\n  }\n\n  &:where([data-color-scheme='light']) {\n    border-color: var(--mantine-color-gray-3);\n    color: var(--mantine-color-gray-8);\n\n    &:where([data-active]) {\n      background-color: var(--mantine-color-white);\n      color: var(--mantine-color-black);\n    }\n  }\n\n  &:where([data-color-scheme='dark']) {\n    border-color: var(--mantine-color-dark-4);\n    color: var(--mantine-color-dark-0);\n\n    &:where([data-active]) {\n      background-color: var(--mantine-color-dark-5);\n      color: var(--mantine-color-white);\n    }\n  }\n\n  @mixin hover {\n    opacity: 1;\n  }\n\n  &:where(:only-child) {\n    cursor: default;\n  }\n}\n\n.fileIcon {\n  & :where(svg) {\n    display: block;\n  }\n}\n\n.filesScrollarea {\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  left: 0;\n  right: 70px;\n}\n\n.files {\n  display: flex;\n  padding: 12px 10px;\n  padding-bottom: 0;\n  gap: var(--mantine-spacing-xs);\n}\n"],"mappings":""}