Sha256: 47a62a7798682160325a6a08440747df119ecb6da90d3f6f67482914374bc575
Contents?: true
Size: 1.86 KB
Versions: 9
Compression:
Stored size: 1.86 KB
Contents
// https://remarkablemark.org/blog/2021/06/01/add-copy-code-to-clipboard-button-to-jeyll-site/
//Codeblock
.copy-code {
display: inline-block;
margin: 0 0.5em;
padding: 0.5em 1em;
color: white;
background-color: black;
border: none;
cursor: pointer;
&:focus {
outline: none; // remove default focus outline
box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4); // add custom focus style
};
}
pre.highlight {
padding: 8px 12px;
// position: relative;
// override skeleton styles
> code {
border: 0;
overflow-x: auto;
padding-right: 0;
padding-left: 1rem;
}
&.highlight {
border-left: 15px solid #35383c;
color: #c1c2c3;
overflow: auto;
white-space: pre;
word-wrap: normal;
&,
code {
background-color: #222;
// font-size: 18px;
}
}
// copy code to clipboard
.copy {
color: #FFFFFF;
position: absolute;
right: 1.2rem;
top: 1.2rem;
// opacity: 0;
&:active,
&:focus,
&:hover {
background: rgba(0, 0, 0, 0.7);
opacity: 1;
}
}
&:active .copy,
&:focus .copy,
&:hover .copy {
background: rgba(0, 0, 0, 0.7);
// opacity: 1;
}
}
// pre.highlight > button {
// opacity: 0;
// }
// pre.highlight:hover > button {
// opacity: 1;
// }
pre.highlight > button:active,
pre.highlight > button:focus {
opacity: 1;
}
.button, button {
display: inline-block;
// height: 30px; // override skeleton
padding: 0 20px;
border-radius: 4px;
border: 1px solid #bbb;
font-size: 11px;
cursor: pointer;
};
pre>code {
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
// pre.has-copy-button .copy {
// display: none;
// }
// pre.has-copy-button:hover .copy {
// display: inline-block;
// }
Version data entries
9 entries across 9 versions & 1 rubygems