Skip to content

Commit dc19539

Browse files
committed
update copy button style
1 parent e85b62f commit dc19539

File tree

3 files changed

+10
-3
lines changed

3 files changed

+10
-3
lines changed

src/app/(article)/posts/[id]/shiki.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,3 +140,8 @@
140140
.mdx-components pre {
141141
@apply my-0;
142142
}
143+
144+
/* mdx component */
145+
.mdx-components .copy-button {
146+
@apply right-3;
147+
}

src/markdown/components/copy-button.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,10 @@ export const CopyButton = (props: CopyButtonProps) => {
2424
return (
2525
<button
2626
className={clsx(
27-
'absolute right-3 top-3 hidden rounded p-2 hover:bg-color-1/10 group-hover:block',
28-
copied ? '!block bg-color-1/10 text-green-500' : 'text-gray-500',
27+
'copy-button absolute right-1 top-6 hidden -translate-y-1/2 rounded p-2 hover:bg-gray-100 group-hover:block dark:hover:bg-gray-700 md:-right-4',
28+
copied
29+
? '!block bg-gray-100 text-green-500 dark:bg-gray-700'
30+
: 'text-gray-500',
2931
)}
3032
onClick={handleClick}
3133
>

src/markdown/components/pre.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const Pre = (props: PreProps) => {
1414
const { className, content, children, ...rest } = props
1515
return (
1616
<div className='relative'>
17-
<pre {...rest} className={clsx('group relative', className)}>
17+
<pre {...rest} className={clsx('group', className)}>
1818
{children}
1919
{content && <CopyButton content={content} />}
2020
</pre>

0 commit comments

Comments
 (0)