diff --git a/_sass/_base.scss b/_sass/_base.scss index b65b11c..fac1378 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -826,31 +826,23 @@ progress::-moz-progress-bar { height: inherit; } -pre { - padding: 8px 12px; +/* Copy button */ +.code-display-wrapper { position: relative; - /* Copy code to clipboard button */ .copy { background: var(--global-card-bg-color); border-color: var(--global-bg-color); border-radius: .3rem; - border-style: solid; + border-style: none; color: var(--global-text-color); font-size: medium; opacity: 0; position: absolute; - right: .25rem; - top: .25rem; - - &:active, - &:focus, - &:hover { - color: var(--global-hover-color); - opacity: 1; - } + right: .15rem; + top: .15rem; } - + &:active .copy, &:focus .copy, &:hover .copy { diff --git a/assets/js/copy_code.js b/assets/js/copy_code.js index b12af53..4018916 100644 --- a/assets/js/copy_code.js +++ b/assets/js/copy_code.js @@ -2,13 +2,13 @@ var codeBlocks = document.querySelectorAll('pre'); codeBlocks.forEach(function (codeBlock) { if (codeBlock.querySelector('pre:not(.lineno)') || codeBlock.querySelector('code')) { + // create copy button var copyButton = document.createElement('button'); copyButton.className = 'copy'; copyButton.type = 'button'; copyButton.ariaLabel = 'Copy code to clipboard'; copyButton.innerText = 'Copy'; copyButton.innerHTML = ''; - codeBlock.append(copyButton); // get code from code block and copy to clipboard copyButton.addEventListener('click', function () { @@ -32,5 +32,15 @@ codeBlocks.forEach(function (codeBlock) { copyButton.innerHTML = ''; }, waitFor); }); + + // create wrapper div + var wrapper = document.createElement('div'); + wrapper.className = 'code-display-wrapper'; + + // add copy button and code block to wrapper div + const parent = codeBlock.parentElement; + parent.insertBefore(wrapper, codeBlock); + wrapper.append(codeBlock); + wrapper.append(copyButton); } });