diff --git a/assets/css/format-print.css b/assets/css/format-print.css index 8cbc52dc1b..dc8ba5c708 100644 --- a/assets/css/format-print.css +++ b/assets/css/format-print.css @@ -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 { diff --git a/assets/css/theme.css b/assets/css/theme.css index a66503b088..1f7b1f4248 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -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); diff --git a/layouts/partials/shortcodes/highlight.html b/layouts/partials/shortcodes/highlight.html index cc6122ec21..c52e4b4fca 100644 --- a/layouts/partials/shortcodes/highlight.html +++ b/layouts/partials/shortcodes/highlight.html @@ -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 }} diff --git a/layouts/partials/version.txt b/layouts/partials/version.txt index da0bf48c88..24ba1ec9c9 100644 --- a/layouts/partials/version.txt +++ b/layouts/partials/version.txt @@ -1 +1 @@ -7.4.1+1dfc98d640339f54e98e7b19af7d21d492f17155 \ No newline at end of file +7.4.1+e985d6fcb4b74082c65c5f98e82051053233f3d7 \ No newline at end of file diff --git a/static/js/theme.js b/static/js/theme.js index 722ba81b63..1476ab8b8a 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -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,12 +740,7 @@ 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); - } + code.parentNode.insertBefore(button, code.nextSibling); } } }