Files
docmost-ryan/apps/client/src/features/editor/styles/code.css
Philip Okugbe e0d74fcb0e Fix: editor formatting (#137)
* reduce space between list items

* reduce spacing

* Make inline code readable in dark mode
* Disable spellcheck in code

* fix numbered list in toggle block
2024-08-04 10:06:22 +02:00

108 lines
2.3 KiB
CSS

.ProseMirror {
pre {
padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
border-radius: var(--mantine-radius-default);
@mixin light {
background-color: var(--mantine-color-gray-0);
color: var(--mantine-color-gray-9);
}
@mixin dark {
background-color: var(--mantine-color-dark-8);
color: var(--mantine-color-dark-1);
}
code {
color: inherit;
padding: 0;
background: none;
font-size: inherit;
}
/* Code styling */
.hljs-comment,
.hljs-quote {
color: light-dark(
var(--mantine-color-gray-5),
var(--mantine-color-dark-2)
);
}
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-tag,
.hljs-name,
.hljs-regexp,
.hljs-link,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-5));
}
.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
color: light-dark(
var(--mantine-color-blue-7),
var(--mantine-color-cyan-5)
);
}
.hljs-string,
.hljs-symbol,
.hljs-bullet {
color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-5));
}
.hljs-title,
.hljs-section {
color: light-dark(
var(--mantine-color-pink-7),
var(--mantine-color-yellow-5)
);
}
.hljs-keyword,
.hljs-selector-tag {
color: light-dark(
var(--mantine-color-violet-7),
var(--mantine-color-violet-3)
);
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 700;
}
}
:not(pre) > code {
font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
line-height: var(--mantine-line-height);
padding: 2px calc(var(--mantine-spacing-xs) / 2);
border-radius: var(--mantine-radius-sm);
margin: 0;
@mixin where-light {
background-color: var(--code-bg, var(--mantine-color-gray-1));
color: var(--mantine-color-black);
}
@mixin where-dark {
background-color: var(--mantine-color-dark-8);
color: var(--mantine-color-gray-4);
}
}
}