Better maybe
This commit is contained in:
parent
418766dca5
commit
c8c021b527
|
@ -12,17 +12,33 @@ a
|
|||
a > svg
|
||||
margin-right: 0.5em
|
||||
|
||||
button.copy-code-button
|
||||
display none
|
||||
.copy-code-button-container
|
||||
position absolute
|
||||
top 0.5em
|
||||
// top 1em
|
||||
right 0.5em
|
||||
overflow visible
|
||||
padding 0
|
||||
margin 0
|
||||
max-width 100%
|
||||
width 100%
|
||||
display flex
|
||||
|
||||
button.copy-code-button
|
||||
color var(--link-fg)
|
||||
text-decoration underline
|
||||
z-index 10
|
||||
position relative
|
||||
margin-left auto
|
||||
|
||||
pre.chroma:hover > button.copy-code-button
|
||||
display block
|
||||
@media (max-width: 600px)
|
||||
opacity 0.75
|
||||
|
||||
&:hover
|
||||
opacity 1.0
|
||||
|
||||
@media (max-width: 600px)
|
||||
pre.chroma:hover > button.copy-code-button
|
||||
opacity 0.9
|
||||
|
||||
img, embed, frame, iframe { max-width: 100vw }
|
||||
|
||||
|
@ -204,6 +220,7 @@ form
|
|||
text-align left
|
||||
|
||||
h1, h2, h3, h4, h5, h6, form, ul, ol, p
|
||||
position relative
|
||||
max-width 600px
|
||||
margin-left auto
|
||||
margin-right auto
|
||||
|
@ -212,9 +229,9 @@ form
|
|||
border-left 0
|
||||
|
||||
pre.chroma
|
||||
position relative
|
||||
padding 0
|
||||
display flex
|
||||
flex-direction column
|
||||
width auto
|
||||
flex 1
|
||||
justify-content center
|
||||
|
|
|
@ -1,14 +1,17 @@
|
|||
main > .highlight .chroma-highlight,
|
||||
main > .highlight pre.chroma
|
||||
main > .highlight > pre.chroma
|
||||
border 0
|
||||
padding 0.25em 0.5em
|
||||
border-left solid 0.25em var(--syntax-left-edge)
|
||||
overflow-y visible
|
||||
overflow-x auto
|
||||
background-color var(--syntax-bg)
|
||||
-moz-tab-size 2
|
||||
tab-size 2
|
||||
color var(--fg)
|
||||
|
||||
main > .highlight > pre.chroma > code > .line
|
||||
margin-right 5em
|
||||
|
||||
.chroma
|
||||
.err
|
||||
color var(--syntax-err)
|
||||
|
|
|
@ -77,15 +77,30 @@ function initCodeCopyButtons() {
|
|||
const codeBlocks = document.querySelectorAll("pre.chroma");
|
||||
codeBlocks.forEach((block) => {
|
||||
const code = block.querySelectorAll("code")[0];
|
||||
const buttonContainer = document.createElement("p");
|
||||
buttonContainer.classList.add("copy-code-button-container");
|
||||
const button = document.createElement("button");
|
||||
buttonContainer.appendChild(button);
|
||||
button.classList.add("copy-code-button");
|
||||
block.appendChild(button);
|
||||
block.parentNode.parentNode.insertBefore(buttonContainer, block.parentNode);
|
||||
button.textContent = "Copy";
|
||||
button.addEventListener("click", (_ev) => {
|
||||
navigator.clipboard.writeText(code.textContent);
|
||||
const lastText = button.textContent;
|
||||
button.textContent = "Copied to clipbooard!";
|
||||
setTimeout(() => button.textContent = lastText, 3000);
|
||||
button.disabled = true;
|
||||
navigator.clipboard.writeText(code.textContent).catch(() => {
|
||||
const lastText = button.textContent;
|
||||
button.textContent = "Error Copying";
|
||||
setTimeout(() => {
|
||||
button.disabled = false;
|
||||
button.textContent = lastText;
|
||||
}, 500);
|
||||
}).then(() => {
|
||||
const lastText = button.textContent;
|
||||
button.textContent = "Copied to clipbooard!";
|
||||
setTimeout(() => {
|
||||
button.disabled = false;
|
||||
button.textContent = lastText;
|
||||
}, 3000);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue