5280392fc4
The code-block control panel (language selector + copy) took a full row above the code. Move both to an absolute overlay in the top-right corner and hide the language selector until the block is hovered/focused; the copy button stays always visible. In read-only the language selector isn't rendered at all. The <pre> (editable contentDOM) stays FIRST in the DOM so click hit-testing (#146) is not regressed; the panel leaves the flow via position:absolute. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
123 lines
2.9 KiB
CSS
123 lines
2.9 KiB
CSS
.ProseMirror {
|
|
.codeBlock {
|
|
/* #146: flex column keeps the editable <pre> (first in the DOM so click
|
|
hit-testing is correct) laid out above any Mermaid diagram. `position:
|
|
relative` anchors the control panel, which is floated into the top-right
|
|
corner as an absolute overlay (see `.menuGroup` in code-block.module.css). */
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
padding: 4px;
|
|
border-radius: var(--mantine-radius-default);
|
|
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
|
|
}
|
|
|
|
pre {
|
|
padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);
|
|
margin: 4px;
|
|
font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
|
|
border-radius: var(--mantine-radius-default);
|
|
tab-size: 4;
|
|
|
|
@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: var(--mantine-font-size-sm);
|
|
}
|
|
|
|
/* Code styling */
|
|
.hljs-comment,
|
|
.hljs-quote {
|
|
color: light-dark(
|
|
var(--mantine-color-gray-6),
|
|
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(--mantine-color-gray-1);
|
|
color: var(--mantine-color-text);
|
|
}
|
|
|
|
@mixin where-dark {
|
|
background-color: var(--mantine-color-dark-5) !important;
|
|
color: var(--mantine-color-text);
|
|
}
|
|
}
|
|
}
|