Merge pull request #752 from mattico/icon-margin-padding

Icon button hit-test dead-space fix

Author: mattico

src/theme/book.js

@@ -381,7 +381,7 @@ function playpen_text(playpen) {
 
     themePopup.addEventListener('focusout', function(e) {
         // e.relatedTarget is null in Safari and Firefox on macOS (see workaround below)
-        if (!!e.relatedTarget && !themePopup.contains(e.relatedTarget)) {
+        if (!!e.relatedTarget && !themeToggleButton.contains(e.relatedTarget) && !themePopup.contains(e.relatedTarget)) {
             hideThemes();
         }
     });

src/theme/css/chrome.css

@@ -41,15 +41,15 @@ a > .hljs {
 }
 #menu-bar i, #menu-bar .icon-button {
     position: relative;
-    margin: 0 8px;
+    padding: 0 8px;
     z-index: 10;
     line-height: 50px;
     cursor: pointer;
     transition: color 0.5s;
 }
 @media only screen and (max-width: 420px) {
     #menu-bar i, #menu-bar .icon-button {
-        margin: 0 5px;
+        padding: 0 5px;
     }
 }
 
@@ -71,8 +71,13 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
     transform: translateY(-60px);
 }
 
-.left-buttons { margin: 0 5px; }
-.no-js .left-buttons { display: none; }
+.left-buttons {
+    display: flex;
+    margin: 0 5px;
+}
+.no-js .left-buttons { 
+    display: none;
+}
 
 .menu-title {
     display: inline-block;
@@ -374,6 +379,7 @@ a:hover {
 .theme-popup {
     position: absolute;
     left: 10px;
+    top: 50px;
     z-index: 1000;
     border-radius: 4px;
     font-size: 0.7em;