82 lines
2.6 KiB
CSS
82 lines
2.6 KiB
CSS
:root {
|
|
--code-copy-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2' /%3e%3c/svg%3e");
|
|
--code-copied-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4' /%3e%3c/svg%3e");
|
|
--copy-code-color: var(--code-c-line-number, #9e9e9e);
|
|
--copy-code-hover: var(--code-highlight-bg-color, rgb(0 0 0 / 50%));
|
|
}
|
|
|
|
.vp-copy-code-button {
|
|
position: absolute;
|
|
top: 0.5em;
|
|
right: 0.5em;
|
|
z-index: 5;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
padding: 0;
|
|
border-width: 0;
|
|
border-radius: 0.5rem;
|
|
background: transparent;
|
|
outline: none;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
transition: opacity 0.4s;
|
|
}
|
|
@media print {
|
|
.vp-copy-code-button {
|
|
display: none;
|
|
}
|
|
}
|
|
.vp-copy-code-button::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
padding: 0.625rem;
|
|
background: currentcolor;
|
|
color: var(--copy-code-color);
|
|
font-size: 1.25rem;
|
|
-webkit-mask-image: var(--code-copy-icon);
|
|
mask-image: var(--code-copy-icon);
|
|
-webkit-mask-position: 50%;
|
|
mask-position: 50%;
|
|
-webkit-mask-size: 1em;
|
|
mask-size: 1em;
|
|
-webkit-mask-repeat: no-repeat;
|
|
mask-repeat: no-repeat;
|
|
}
|
|
.vp-copy-code-button:focus, .vp-copy-code-button.copied {
|
|
opacity: 1;
|
|
}
|
|
.vp-copy-code-button:hover, .vp-copy-code-button.copied {
|
|
background: var(--copy-code-hover);
|
|
}
|
|
.vp-copy-code-button.copied::before {
|
|
-webkit-mask-image: var(--code-copied-icon);
|
|
mask-image: var(--code-copied-icon);
|
|
}
|
|
.vp-copy-code-button.copied::after {
|
|
content: attr(data-copied);
|
|
position: absolute;
|
|
top: 0;
|
|
right: calc(100% + 0.25rem);
|
|
display: block;
|
|
height: 1.25rem;
|
|
padding: 0.625rem;
|
|
border-radius: 0.5rem;
|
|
background: var(--copy-code-hover);
|
|
color: var(--copy-code-color);
|
|
font-weight: 500;
|
|
line-height: 1.25rem;
|
|
white-space: nowrap;
|
|
}
|
|
.copy-code-disabled .vp-copy-code-button {
|
|
display: none;
|
|
}
|
|
|
|
body:not(.copy-code-disabled) div[class*=language-]:hover::before {
|
|
display: none;
|
|
}
|
|
body:not(.copy-code-disabled) div[class*=language-]:hover .vp-copy-code-button {
|
|
opacity: 1;
|
|
}
|