anchor: use button implementation #1162

Author: McShelby

assets/css/theme.css

@@ -1804,7 +1804,7 @@ i.cstyle {
   background-color: var(--VARIABLE-BOX-color);
   border-radius: 4px;
   display: inline-block;
-  font-size: 0.9rem;
+  font-size: 0.9em;
   font-weight: 500;
   line-height: 1.1;
   margin-bottom: 0;
@@ -1904,14 +1904,9 @@ button.btn.noborder,
 
 /* anchors */
 .anchor {
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: transparent;
-  color: var(--VARIABLE-LINK-color);
-  cursor: pointer;
   font-size: 0.5em;
-  margin-inline-start: 0.66em;
-  margin-top: 0.9em;
+  margin-inline-start: 0.3em;
+  margin-top: 0.5em;
   position: absolute;
   visibility: hidden;
 }
@@ -1921,12 +1916,6 @@ button.btn.noborder,
     visibility: visible;
   }
 }
-.anchor:hover,
-.anchor:active,
-.anchor:focus {
-  color: var(--VARIABLE-LINK-HOVER-color);
-}
-
 h2:hover .anchor,
 h3:hover .anchor,
 h4:hover .anchor,
@@ -1935,6 +1924,13 @@ h6:hover .anchor {
   visibility: visible;
 }
 
+.anchor.btn > * {
+  height: calc(2em + 4px);
+  width: calc(2em + 4px);
+  box-sizing: border-box;
+  padding: 2px;
+}
+
 /* Redfines headers style */
 
 h1 a,

assets/js/theme.js

@@ -583,14 +583,16 @@ function initAnchorClipboard() {
     var origin = document.location.origin == 'null' ? `${document.location.protocol}//${document.location.host}` : document.location.origin;
     var id = encodeURIComponent(element.id);
     var link = `${origin}${document.location.pathname}#${id}`;
-    var new_element = document.createElement('button');
-    new_element.classList.add('anchor');
+    var span = document.createElement('span');
+    span.classList.add('anchor', 'btn', 'cstyle', 'link', 'noborder', 'notitle', 'interactive');
+    span.setAttribute('data-clipboard-text', link);
+    var button = document.createElement('button');
     if (!window.relearn.disableAnchorCopy) {
-      new_element.setAttribute('title', window.T_Copy_link_to_clipboard);
+      button.setAttribute('title', window.T_Copy_link_to_clipboard);
     }
-    new_element.setAttribute('data-clipboard-text', link);
-    new_element.innerHTML = '<i class="fas fa-link fa-lg"></i>';
-    element.appendChild(new_element);
+    button.innerHTML = '<i class="fas fa-link fa-lg"></i>';
+    span.appendChild(button);
+    element.appendChild(span);
   });
 
   var anchors = document.querySelectorAll('.anchor');
@@ -617,7 +619,7 @@ function initAnchorClipboard() {
   } else if (!window.relearn.disableAnchorScrolling) {
     for (var i = 0; i < anchors.length; i++) {
       anchors[i].addEventListener('click', function (e) {
-        e.target.parentElement.parentElement.scrollIntoView({ behavior: 'smooth' });
+        e.currentTarget.parentElement.scrollIntoView({ behavior: 'smooth' });
         var state = window.history.state || {};
         state = Object.assign({}, typeof state === 'object' ? state : {});
         history.replaceState({}, '', e.text);

layouts/partials/version.txt

@@ -1 +1 @@
-8.2.0+00a98acfe8fd40126ee740ffc8d1a31513e0933c
+8.2.0+72651f5c35b8fee9ba269d1afb36ebf963036474