Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 18:12:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next)/code blocks/copy button: use a better layout

Browse Source
This commit is contained in:
Adorian Doran 2025-05-27 20:36:07 +03:00
parent 541897b1d0
commit 8121dbed74
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/client/src/stylesheets/theme-next/notes/text.css
View File

@ -405,10 +405,30 @@
margin-top: 2px !important; margin-top: 2px !important;
} }
.ck-content pre { :root .ck-content pre {
--icon-button-size: 1.8em;
--copy-button-width: var(--icon-button-size);
/* The margin of the copy button is computed so the button will appear vertically centered
* for single-line code blocks */
--copy-button-margin-size: calc((1em * 1.5 + var(--padding-size) * 2 - var(--icon-button-size)) / 2);
/* Where: │ └ Line height
* └───────── Font size
*/
overflow: unset; overflow: unset;
} }
pre button.copy-button.icon-action {
font-size: 1em; /* Workaround: --icon-button-size does not work properly with em units */
}
:root pre:has(> button.copy-button) {
padding-right: calc(var(--icon-button-size) + (var(--copy-button-margin-size) * 2)) !important;
}
html .note-detail-editable-text :not(figure, .include-note, hr):first-child { html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
/* Create some space for the top-side shadow */ /* Create some space for the top-side shadow */
margin-top: 1px !important; margin-top: 1px !important;
@ -427,7 +447,7 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
.ck-content pre code, .ck-content pre code,
.ck-mermaid__editing-view { .ck-mermaid__editing-view {
display: block; display: block;
padding: 1em !important; padding: var(--padding-size, 1em) !important;
overflow: auto; overflow: auto;
} }
@ -499,7 +519,6 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
.note-detail-printable:not(.word-wrap) pre code { .note-detail-printable:not(.word-wrap) pre code {
white-space: pre; white-space: pre;
margin-right: 1em;
} }
.code-sample-wrapper .hljs { .code-sample-wrapper .hljs {