@mantine/code-highlight
Version:
Code highlight with Mantine theme
321 lines (257 loc) • 7.95 kB
CSS
.m_5cb1b9c8 {
position: relative;
}
.m_e597c321 {
position: relative;
border-radius: var(--ch-radius, 0px);
overflow: hidden;
}
:where([data-mantine-color-scheme='light']) .m_e597c321:where([data-with-border]) {
border: 1px solid var(--mantine-color-gray-2);
}
:where([data-mantine-color-scheme='dark']) .m_e597c321:where([data-with-border]) {
border: 1px solid var(--mantine-color-dark-6);
}
.m_e597c321:where([data-with-border]):where([data-code-color-scheme='dark']) {
border: 1px solid var(--mantine-color-dark-6);
}
.m_e597c321:where([data-with-border]):where([data-code-color-scheme='light']) {
border: 1px solid var(--mantine-color-gray-2);
}
:where([data-mantine-color-scheme='light']) .m_e597c321 {
--ch-background: var(--mantine-color-gray-0);
}
:where([data-mantine-color-scheme='dark']) .m_e597c321 {
--ch-background: var(--mantine-color-dark-8);
}
.m_dfe9c588 {
border-radius: var(--ch-radius, var(--mantine-radius-sm));
overflow: hidden;
background-color: var(--ch-background);
font-size: calc(0.8125rem * var(--mantine-scale));
padding: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));
}
:where([data-mantine-color-scheme='light']) .m_dfe9c588:where([data-with-border]) {
border: 1px solid var(--mantine-color-gray-2);
}
:where([data-mantine-color-scheme='dark']) .m_dfe9c588:where([data-with-border]) {
border: 1px solid var(--mantine-color-dark-6);
}
.m_dfe9c588:where([data-with-border]):where([data-code-color-scheme='dark']) {
border: 1px solid var(--mantine-color-dark-6);
}
.m_dfe9c588:where([data-with-border]):where([data-code-color-scheme='light']) {
border: 1px solid var(--mantine-color-gray-2);
}
:where([data-mantine-color-scheme='light']) .m_dfe9c588 {
--ch-background: var(--mantine-color-gray-0);
}
:where([data-mantine-color-scheme='dark']) .m_dfe9c588 {
--ch-background: var(--mantine-color-dark-8);
}
.m_2c47c4fd {
--code-line-height: 1.7;
display: block;
margin: 0;
}
.m_2c47c4fd[data-with-offset] .m_5caae6d3 {
padding-top: calc(3.125rem * var(--mantine-scale));
}
.m_5caae6d3 {
display: block;
padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
background-color: var(--ch-background);
font-size: calc(0.8125rem * var(--mantine-scale));
line-height: var(--code-line-height, var(--mantine-line-height));
font-family: var(--mantine-font-family-monospace);
width: fit-content;
min-width: 100%;
}
.m_5caae6d3:where([data-inline]) {
display: inline-block;
padding: calc(0.1875rem * var(--mantine-scale)) calc(0.3125rem * var(--mantine-scale));
background-color: var(--ch-background);
}
.m_be7e9c9c {
position: absolute;
top: calc(0.5rem * var(--mantine-scale));
right: calc(0.5rem * var(--mantine-scale));
z-index: 1;
background-color: var(--ch-background);
border-bottom-left-radius: var(--mantine-radius-md);
}
.m_be7e9c9c:where([data-with-offset]) {
top: calc(0.75rem * var(--mantine-scale));
}
.m_d498bab7 {
color: var(--mantine-color-text);
opacity: 0.5;
}
@media (hover: hover) {
.m_d498bab7:hover {
color: var(--mantine-color-bright);
opacity: 1;
}
}
@media (hover: none) {
.m_d498bab7:active {
color: var(--mantine-color-bright);
opacity: 1;
}
}
.m_d498bab7:where([data-code-color-scheme='dark']) {
color: var(--mantine-color-dark-0);
}
@media (hover: hover) {
.m_d498bab7:where([data-code-color-scheme='dark']):hover {
color: var(--mantine-color-white);
}
}
@media (hover: none) {
.m_d498bab7:where([data-code-color-scheme='dark']):active {
color: var(--mantine-color-white);
}
}
.m_d498bab7:where([data-code-color-scheme='light']) {
color: var(--mantine-color-black);
}
@media (hover: hover) {
.m_d498bab7:where([data-code-color-scheme='light']):hover {
color: var(--mantine-color-black);
}
}
@media (hover: none) {
.m_d498bab7:where([data-code-color-scheme='light']):active {
color: var(--mantine-color-black);
}
}
.m_d498bab7 :where(svg) {
width: calc(1.125rem * var(--mantine-scale));
height: calc(1.125rem * var(--mantine-scale));
display: block;
}
.m_4c3d814c:where([data-code-color-scheme='light']) {
background-color: var(--mantine-color-gray-9);
color: var(--mantine-color-white);
}
.m_4c3d814c:where([data-code-color-scheme='dark']) {
background-color: var(--mantine-color-gray-2);
color: var(--mantine-color-black);
}
.m_f744fd40[data-collapsed] {
max-height: var(--ch-max-height, 180px);
}
.m_f744fd40[data-collapsed]::before {
content: '';
position: absolute;
inset-inline: 0;
bottom: 0;
height: calc(5rem * var(--mantine-scale));
pointer-events: none;
background-image: linear-gradient(0deg, var(--ch-background) 25%, rgba(0, 0, 0, 0) 100%);
}
.m_c9378bc2 {
position: absolute;
z-index: 2;
bottom: 0;
inset-inline-start: 50%;
transform: translateX(-50%);
font-size: var(--mantine-font-size-sm);
color: var(--mantine-color-anchor);
width: 100%;
text-align: center;
padding-top: var(--mantine-spacing-xs);
padding-bottom: var(--mantine-spacing-xs);
white-space: nowrap;
}
.m_c9378bc2[data-hidden] {
display: none;
}
.m_c9378bc2:where([data-code-color-scheme='dark']) {
color: var(--mantine-primary-color-5);
}
.m_c9378bc2:where([data-code-color-scheme='light']) {
color: var(--mantine-primary-color-6);
}
.m_5cac2e62 {
display: flex;
align-items: center;
justify-content: center;
font-size: var(--mantine-font-size-xs);
gap: calc(0.4375rem * var(--mantine-scale));
padding: calc(0.3125rem * var(--mantine-scale)) calc(0.5625rem * var(--mantine-scale));
font-family: var(--mantine-font-family-monospace);
font-weight: 700;
line-height: 1;
user-select: none;
cursor: pointer;
opacity: 0.8;
border: calc(0.0625rem * var(--mantine-scale)) solid transparent;
white-space: nowrap;
margin: 0;
border-radius: var(--mantine-radius-default);
}
.m_5cac2e62:where([data-active]) {
opacity: 1;
}
:where([data-mantine-color-scheme='light']) .m_5cac2e62 {
border-color: var(--mantine-color-gray-3);
color: var(--mantine-color-gray-8);
}
:where([data-mantine-color-scheme='light']) .m_5cac2e62:where([data-active]) {
background-color: var(--mantine-color-white);
color: var(--mantine-color-black);
}
:where([data-mantine-color-scheme='dark']) .m_5cac2e62 {
border-color: var(--mantine-color-dark-4);
color: var(--mantine-color-dark-0);
}
:where([data-mantine-color-scheme='dark']) .m_5cac2e62:where([data-active]) {
background-color: var(--mantine-color-dark-5);
color: var(--mantine-color-white);
}
.m_5cac2e62:where([data-color-scheme='light']) {
border-color: var(--mantine-color-gray-3);
color: var(--mantine-color-gray-8);
}
.m_5cac2e62:where([data-color-scheme='light']):where([data-active]) {
background-color: var(--mantine-color-white);
color: var(--mantine-color-black);
}
.m_5cac2e62:where([data-color-scheme='dark']) {
border-color: var(--mantine-color-dark-4);
color: var(--mantine-color-dark-0);
}
.m_5cac2e62:where([data-color-scheme='dark']):where([data-active]) {
background-color: var(--mantine-color-dark-5);
color: var(--mantine-color-white);
}
@media (hover: hover) {
.m_5cac2e62:hover {
opacity: 1;
}
}
@media (hover: none) {
.m_5cac2e62:active {
opacity: 1;
}
}
.m_5cac2e62:where(:only-child) {
cursor: default;
}
.m_b46cddfb :where(svg) {
display: block;
}
.m_7b14120b {
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: calc(4.375rem * var(--mantine-scale));
}
.m_38d99e51 {
display: flex;
padding: calc(0.75rem * var(--mantine-scale)) calc(0.625rem * var(--mantine-scale));
padding-bottom: 0;
gap: var(--mantine-spacing-xs);
}