Skip to content

Commit 5aa2115

Browse files
McShelbyMcShelby
committed
button: let mermaid and block-code use button implementation #863 
1 parent ec44382 commit 5aa2115

File tree

4 files changed

+35
-61
lines changed

4 files changed

+35
-61
lines changed

‎assets/css/theme.css‎

Lines changed: 23 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1461,19 +1461,15 @@ code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button):after {
14611461
content: '';
14621462
}
14631463

1464-
.inline-copy-to-clipboard-button,
1465-
.block-copy-to-clipboard-button {
1466-
cursor: pointer;
1467-
display: inline;
1468-
font: initial;
1469-
}
1470-
14711464
.inline-copy-to-clipboard-button {
14721465
background-color: var(--INTERNAL-CODE-INLINE-BG-color);
14731466
border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
14741467
border-inline-start-style: solid;
14751468
border-inline-start-width: 1px;
14761469
color: var(--INTERNAL-CODE-INLINE-color);
1470+
cursor: pointer;
1471+
display: inline;
1472+
font: initial;
14771473
font-size: 0.934375em;
14781474
margin-inline-start: calc(-1 * (1.333em + var(--bpx1) * 0.125em));
14791475
position: relative;
@@ -1485,53 +1481,40 @@ code.copy-to-clipboard-code:has(+ .inline-copy-to-clipboard-button):after {
14851481
}
14861482

14871483
.block-copy-to-clipboard-button {
1488-
background-color: rgba(160, 160, 160, 0.2);
1489-
border-color: transparent;
1490-
border-radius: 2px;
1491-
border-style: solid;
1492-
border-width: 1px;
1493-
color: var(--INTERNAL-MAIN-LINK-color);
1494-
/* only show copy to clipboard on hover for code blocks if configured */
1495-
display: none;
1496-
font-size: 0.934375rem;
1497-
padding: 5px 3px;
1498-
position: absolute;
14991484
inset-inline-end: 4px;
1485+
position: absolute;
15001486
top: 4px;
15011487
}
1488+
1489+
.block-copy-to-clipboard-button.btn {
1490+
/* only show copy to clipboard on hover for code blocks if configured */
1491+
display: none;
1492+
}
15021493
@media (any-hover: none) {
15031494
/* if there is at least one input device that does not support hover, we want to force the copy button */
1504-
.block-copy-to-clipboard-button {
1495+
.block-copy-to-clipboard-button.btn {
15051496
display: block;
15061497
}
15071498
}
1508-
div.highlight:focus-within .block-copy-to-clipboard-button,
1509-
div.highlight .block-copy-to-clipboard-button:active,
1510-
div.highlight:hover .block-copy-to-clipboard-button {
1499+
div.highlight:focus-within .block-copy-to-clipboard-button.btn,
1500+
div.highlight .block-copy-to-clipboard-button.btn:active,
1501+
div.highlight:hover .block-copy-to-clipboard-button.btn {
15111502
display: block;
15121503
}
1513-
.disableHoverBlockCopyToClipBoard div.highlight .block-copy-to-clipboard-button {
1504+
.disableHoverBlockCopyToClipBoard div.highlight .block-copy-to-clipboard-button.btn {
15141505
display: block;
15151506
}
15161507
.force-display {
15171508
display: block !important;
15181509
}
1519-
.block-copy-to-clipboard-button:hover {
1520-
background-color: var(--INTERNAL-MAIN-LINK-color);
1521-
border-color: var(--INTERNAL-MAIN-LINK-color);
1522-
color: var(--INTERNAL-CODE-BLOCK-BG-color);
1523-
}
1524-
15251510
.inline-copy-to-clipboard-button > i {
15261511
font-size: 0.859625em;
15271512
padding-left: 0.333em;
15281513
padding-right: 0.333em;
15291514
}
15301515

15311516
.block-copy-to-clipboard-button > i {
1532-
font-size: 0.859625rem;
1533-
padding-left: 5px;
1534-
padding-right: 5px;
1517+
width: 2em;
15351518
}
15361519

15371520
option {
@@ -1612,40 +1595,26 @@ html[dir='rtl'] .expand[open] > .box-label > i.expander-icon {
16121595
}
16131596

16141597
.svg-reset-button {
1615-
background-color: rgba(160, 160, 160, 0.2);
1616-
border-color: transparent;
1617-
border-radius: 2px;
1618-
border-style: solid;
1619-
border-width: 1px;
1620-
color: var(--INTERNAL-MAIN-LINK-color);
1621-
cursor: pointer;
1622-
display: none;
1623-
font-size: 0.934375rem;
1624-
line-height: 1.15;
1625-
padding: 5px 3px;
1626-
position: absolute;
16271598
inset-inline-end: 4px;
1599+
position: absolute;
16281600
top: 4px;
16291601
}
1630-
.svg-reset-button:hover {
1631-
background-color: var(--INTERNAL-MAIN-LINK-color);
1632-
border-color: var(--INTERNAL-MAIN-LINK-color);
1633-
color: var(--INTERNAL-MAIN-BG-color);
1602+
1603+
.svg-reset-button.btn {
1604+
display: none;
16341605
}
1635-
.mermaid:hover .svg-reset-button.zoomed {
1606+
.mermaid:hover .svg-reset-button.btn.zoomed {
16361607
display: block;
16371608
}
16381609
@media (any-hover: some) {
16391610
/* if there is at least one input device that does not support hover, we want to force the reset button if zoomed */
1640-
.svg-reset-button.zoomed {
1611+
.svg-reset-button.btn.zoomed {
16411612
display: block;
16421613
}
16431614
}
16441615

16451616
.svg-reset-button > i {
1646-
font-size: 0.859625rem;
1647-
padding-left: 5px;
1648-
padding-right: 5px;
1617+
width: 2em;
16491618
}
16501619

16511620
.mermaid-code {
@@ -1862,6 +1831,7 @@ i.cstyle {
18621831
user-select: none;
18631832
white-space: nowrap;
18641833
}
1834+
button.btn.noborder,
18651835
.btn.noborder > * {
18661836
border-color: transparent !important;
18671837
}
@@ -1878,10 +1848,6 @@ i.cstyle {
18781848
background-color: transparent;
18791849
}
18801850

1881-
.btn.interactive > .btn-interactive:focus {
1882-
outline: none;
1883-
}
1884-
18851851
.btn.interactive > *:hover,
18861852
.btn.interactive > *:active,
18871853
.btn.interactive > *:focus {

‎assets/js/theme.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,7 @@ function initMermaid(update, attrs) {
347347
var svg = d3.select(this);
348348
svg.html('<g>' + svg.html() + '</g>');
349349
var inner = svg.select('*:scope > g');
350-
parent.insertAdjacentHTML('beforeend', '<button class="svg-reset-button" title="' + window.T_Reset_view + '"><i class="fas fa-undo-alt"></i></button>');
350+
parent.insertAdjacentHTML('beforeend', '<button class="svg-reset-button btn cstyle action noborder notitle interactive" title="' + window.T_Reset_view + '"><i class="fa-fw fas fa-undo-alt"></i></button>');
351351
var button = parent.querySelector('.svg-reset-button');
352352
var zoom = d3.zoom().on('zoom', function (e) {
353353
inner.attr('transform', e.transform);
@@ -742,8 +742,16 @@ function initCodeClipboard() {
742742
button = document.createElement('button');
743743
var buttonPrefix = isBlock ? 'block' : 'inline';
744744
button.classList.add(buttonPrefix + '-copy-to-clipboard-button');
745+
if (isBlock) {
746+
button.classList.add('btn');
747+
button.classList.add('cstyle');
748+
button.classList.add('action');
749+
button.classList.add('noborder');
750+
button.classList.add('notitle');
751+
button.classList.add('interactive');
752+
}
745753
button.setAttribute('title', window.T_Copy_to_clipboard);
746-
button.innerHTML = '<i class="far fa-copy"></i>';
754+
button.innerHTML = '<i class="fa-fw far fa-copy"></i>';
747755
button.addEventListener('mouseleave', function () {
748756
this.removeAttribute('aria-label');
749757
this.classList.remove('tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw');

‎layouts/partials/shortcodes/button.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555

5656
{{- $iconposition := .iconposition | default "left" }}
5757
{{- with $page -}}
58-
<span class="btn{{ if or $isButton $isLink }} interactive{{ end }} cstyle{{ if $style }} {{ $style }}{{ end }}{{ if $borderless }} noborder{{ end }}{{ if not $title }} notitle{{ end }}"{{ with $color }} style="--VARIABLE-BOX-color: {{ . }};"{{ end }}>
58+
<span class="btn cstyle{{ if $style }} {{ $style }}{{ end }}{{ if $borderless }} noborder{{ end }}{{ if not $title }} notitle{{ end }}{{ if or $isButton $isLink }} interactive{{ end }}"{{ with $color }} style="--VARIABLE-BOX-color: {{ . }};"{{ end }}>
5959
{{- if $isButton -}}
6060
<button onclick="{{ $href | safeJS }}"{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }}{{ if $hint }}title="{{ $hint }}"{{ end }}>
6161
{{- else if $isLink -}}

‎layouts/partials/version.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
8.1.1+c7719785de498461644ae517c0bcdc44f5ebd324
1+
8.1.1+ec44382f9dcb06d15b5616da22cb506b7d1ae4a6

0 commit comments

Comments
 (0)