reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 19:51:07 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add code copy cutton

Browse source
This commit is contained in:
radishzzz 2025-05-27 01:37:19 +01:00
parent 9c87c1bf03
commit 3312b30dbf
7 changed files with 132 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/styles/extend.css
View file

@ -139,6 +139,25 @@
--at-apply: 'mb-4';
}
/* Code Copy Button */
.code-copy-button {
--at-apply: 'z-99 absolute top-2.3 right-2.3 w-8 aspect-square uno-round-border border-secondary/15 c-secondary/80 cursor-pointer';
--at-apply: 'transition-opacity duration-300 ease-out op-100 bg-background lg:(op-0 bg-background)';
}
.code-block-wrapper:hover .code-copy-button {
--at-apply: 'op-100';
}
.code-copy-button:hover {
--at-apply: 'c-primary/80';
}
.code-copy-button svg {
--at-apply: 'w-4 h-4 block mx-auto';
}
.code-copy-button svg,
.code-copy-button svg path {
pointer-events: none;
}
/* :where(details) {
--at-apply: 'my-4 px-4 py-3 border border-solid border-secondary/25 rounded cursor-pointer';
}

1
src/styles/global.css
View file

@ -2,6 +2,7 @@ html {
--at-apply: 'bg-background c-secondary antialiased';
scrollbar-width: thin;
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.25) transparent;
scrollbar-gutter: stable both-edges;
}
/* Fix Flash Issue On iOS */

9
src/styles/markdown.css
View file

@ -77,7 +77,7 @@
/* Code Blocks */
.heti :where(pre) {
--at-apply: 'my-6 overflow-auto uno-round-border px-4 py-3 bg-secondary/5!';
--at-apply: 'overflow-auto uno-round-border px-4 py-3 bg-secondary/5!';
scrollbar-width: thin;
scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent;
transition: scrollbar-color 0.3s ease-out;
@ -91,10 +91,13 @@
html.dark .heti pre span {
--at-apply: 'text-[var(--shiki-dark)]!';
}
.heti :is(h1, h2, h3, h4, h5, h6, pre) + pre {
.heti .code-block-wrapper {
--at-apply: 'my-6 relative';
}
.heti :is(h1, h2, h3, h4, h5, h6, .code-block-wrapper) + .code-block-wrapper {
--at-apply: 'mt-4';
}
.heti pre:has(+ pre) {
.heti .code-block-wrapper:has(+ .code-block-wrapper) {
--at-apply: 'mb-4';
}