mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2025-02-24 04:20:15 +00:00
code: fixing negative margin on inline clipboard #1038
This commit is contained in:
parent
e985d6fcb4
commit
fd4478e535
5 changed files with 25 additions and 53 deletions
|
@ -17,11 +17,6 @@ html {
|
|||
body {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
code.copy-to-clipboard-code {
|
||||
border-start-end-radius: 2px;
|
||||
border-end-end-radius: 2px;
|
||||
border-inline-end-width: 1px;
|
||||
}
|
||||
pre:not(.mermaid) {
|
||||
border: 1px solid rgba(204, 204, 204, 1);
|
||||
}
|
||||
|
@ -43,20 +38,11 @@ pre:not(.mermaid) {
|
|||
visibility: visible;
|
||||
}
|
||||
}
|
||||
#R-body span.copy-to-clipboard-code {
|
||||
padding-inline-end: 2px;
|
||||
}
|
||||
#R-body .inline-copy-to-clipboard-button,
|
||||
#R-body .block-copy-to-clipboard-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#R-body .inline-copy-to-clipboard-button + code.copy-to-clipboard-code,
|
||||
#R-body code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button) {
|
||||
border-end-end-radius: 2px;
|
||||
border-start-end-radius: 2px;
|
||||
border-inline-end-width: 1px;
|
||||
margin-inline-end: 0;
|
||||
code.copy-to-clipboard-code:after,
|
||||
.inline-copy-to-clipboard-button,
|
||||
.block-copy-to-clipboard-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#R-body .svg-reset-button {
|
||||
|
|
|
@ -945,23 +945,6 @@ code {
|
|||
padding-right: 2px;
|
||||
}
|
||||
|
||||
span.copy-to-clipboard {
|
||||
display: inline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* #1022 FF has issues if we set span.copy-to-clipboard to display: block;
|
||||
so this is not an option; and we have to flip the elements ourself in the
|
||||
JS part of the code; this will fix FF for LTR but RTL is still broken;
|
||||
so at least it looks fine for most of the user base */
|
||||
.inline-copy-to-clipboard-button + code.copy-to-clipboard-code,
|
||||
code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button) {
|
||||
border-end-end-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
border-inline-end-width: 0;
|
||||
margin-inline-end: calc(22px + var(--bpx1) * 2px);
|
||||
}
|
||||
|
||||
pre:not(.mermaid) {
|
||||
background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
|
||||
border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
|
||||
|
@ -1435,14 +1418,19 @@ html[dir='rtl'] .topbar-button-next i {
|
|||
}
|
||||
}
|
||||
|
||||
span.copy-to-clipboard {
|
||||
display: inline;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button):after {
|
||||
display: inline-block;
|
||||
width: calc(22px + var(--bpx1) * 2px);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.inline-copy-to-clipboard-button,
|
||||
.block-copy-to-clipboard-button {
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: 2px;
|
||||
border-end-end-radius: 2px;
|
||||
border-end-start-radius: 0;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
font: initial;
|
||||
|
@ -1452,12 +1440,12 @@ html[dir='rtl'] .topbar-button-next i {
|
|||
.inline-copy-to-clipboard-button {
|
||||
background-color: var(--INTERNAL-CODE-INLINE-BG-color);
|
||||
border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: 2px;
|
||||
border-end-end-radius: 2px;
|
||||
border-end-start-radius: 0;
|
||||
border-inline-start-style: solid;
|
||||
border-inline-start-width: 1px;
|
||||
color: var(--INTERNAL-CODE-INLINE-color);
|
||||
margin-inline-start: calc(-1 * (22px + var(--bpx1) * 2px));
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.inline-copy-to-clipboard-button:hover {
|
||||
background-color: var(--INTERNAL-CODE-INLINE-color);
|
||||
|
|
|
@ -86,8 +86,9 @@
|
|||
{{- /* enrich attributes */}}
|
||||
{{- $attributes = merge $attributes (dict "class" (delimit (append (index $attributes "class" | default slice) "highlight" slice) " ")) }}
|
||||
{{- if and $wrap (not $hl_inline) }}
|
||||
{{- $attributes = merge $options (dict "class" (delimit (append (index $attributes "class" | default slice) "wrap-code" slice) " ")) }}
|
||||
{{- $attributes = merge $attributes (dict "class" (delimit (append (index $attributes "class" | default slice) "wrap-code" slice) " ")) }}
|
||||
{{- end }}
|
||||
{{- $attributes = merge $attributes (dict "dir" (delimit (append (index $attributes "dir" | default slice) "auto" slice) " ")) }}
|
||||
|
||||
{{- /* print da shtuff */}}
|
||||
{{- $div := slice }}
|
||||
|
|
|
@ -1 +1 @@
|
|||
7.4.1+1dfc98d640339f54e98e7b19af7d21d492f17155
|
||||
7.4.1+e985d6fcb4b74082c65c5f98e82051053233f3d7
|
|
@ -678,6 +678,7 @@ function initCodeClipboard() {
|
|||
var clone = code.cloneNode(true);
|
||||
var span = document.createElement('span');
|
||||
span.classList.add('copy-to-clipboard');
|
||||
span.setAttribute('dir', 'auto');
|
||||
span.appendChild(clone);
|
||||
code.parentNode.replaceChild(span, code);
|
||||
code = clone;
|
||||
|
@ -726,6 +727,7 @@ function initCodeClipboard() {
|
|||
var clone = pre.cloneNode(true);
|
||||
var div = document.createElement('div');
|
||||
div.classList.add('highlight');
|
||||
div.setAttribute('dir', 'auto');
|
||||
if (window.relearn.enableBlockCodeWrap) {
|
||||
div.classList.add('wrap-code');
|
||||
}
|
||||
|
@ -738,16 +740,11 @@ function initCodeClipboard() {
|
|||
code.classList.add('highlight');
|
||||
code.dataset.code = text;
|
||||
if (button) {
|
||||
// #1022 fix for FF; see CSS for explanation
|
||||
if (isRtl) {
|
||||
code.parentNode.insertBefore(button, code.parentNode.firstChild);
|
||||
} else {
|
||||
code.parentNode.insertBefore(button, code.nextSibling);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var clip = new ClipboardJS('.block-copy-to-clipboard-button, .inline-copy-to-clipboard-button', {
|
||||
text: function (trigger) {
|
||||
|
|
Loading…
Add table
Reference in a new issue