runtimeterror/assets/css/code-copy-button.css

73 lines
1.5 KiB
CSS
Raw Normal View History

2023-10-21 21:13:44 +00:00
/* adapted from https://aaronluna.dev/blog/add-copy-button-to-code-blocks-hugo-chroma/ */
.highlight {
position: relative;
z-index: 0;
padding: 0;
margin:40px 0 10px 0;
border-radius: 4px;
}
.copy-code-button {
position: absolute;
2023-11-09 21:41:42 +00:00
z-index: -1;
right: 0px;
top: -26px;
2023-10-21 21:13:44 +00:00
font-size: 13px;
font-weight: 700;
line-height: 14px;
letter-spacing: 0.5px;
width: 65px;
2023-11-09 21:41:42 +00:00
color: var(--fg);
background-color: var(--bg);
border: 1.25px solid var(--off-bg);
2023-10-21 21:13:44 +00:00
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
white-space: nowrap;
padding: 6px 6px 7px 6px;
margin: 0 0 0 1px;
cursor: pointer;
opacity: 0.6;
}
.copy-code-button:hover,
.copy-code-button:focus,
.copy-code-button:active,
.copy-code-button:active:hover {
2023-11-09 21:41:42 +00:00
color: var(--off-bg);
background-color: var(--off-fg);
2023-10-21 21:13:44 +00:00
opacity: 0.8;
}
.copyable-text-area {
position: absolute;
height: 0;
z-index: -1;
opacity: .01;
}
2023-11-09 04:40:17 +00:00
2023-11-05 01:57:04 +00:00
.torchlight [data-lang]:before {
2023-10-21 21:13:44 +00:00
position: absolute;
2023-11-09 21:41:42 +00:00
z-index: -1;
top: -26px;
left: 0px;
2023-10-21 21:13:44 +00:00
content: attr(data-lang);
font-size: 13px;
font-weight: 700;
2023-11-09 21:41:42 +00:00
color: var(--fg);
background-color: var(--bg);
2023-10-21 21:13:44 +00:00
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 6px 6px 7px 6px;
line-height: 14px;
opacity: 0.6;
position: absolute;
letter-spacing: 0.5px;
2023-11-09 21:41:42 +00:00
border: 1.25px solid var(--off-bg);
2023-10-21 21:13:44 +00:00
margin: 0 0 0 1px;
}