theme: adjust copy-to-clipboard #29

Copy to clipboard has a lot of smaller issues:

- contrast for inline code is bad in notice boxes
- bordering the icon does not work well with bordering of inline code
- hover color on inline code icon is blurred
- hover color on block code is statically set to link color of standard theme

And related to that:

- tooltip misses outline border, especially when displayed over dark background (like block code)
- inline code font size is sized by factor of parent font size, which is a hassle if you want to replicate the size for other elements

static/css/theme.css

@@ -623,23 +623,22 @@ section.attachments.neutral > div.label {
 
 code, kbd, pre, samp {
     font-family: "Consolas", menlo, monospace;
-    font-size: 92%;
+    font-size: 14.75px;
+    vertical-align: baseline;
 }
 code {
+    background-color: #FFFAE9;
+    border: 1px solid #F8E8C8;
     border-radius: 2px;
+    color: #5E5E5E;
+    padding-left: 2px;
+    padding-right: 2px;
     white-space: nowrap;
-    color: #5e5e5e;
-    background: #FFF7DD;
-    border: 1px solid #fbf0cb;
-    padding: 0px 2px;
 }
-code + .copy-to-clipboard {
-    margin-left: -1px;
-    border-left: 0 !important;
-    font-size: inherit !important;
-    vertical-align: middle;
-    height: 21px;
-    top: 0;
+code.copy-to-clipboard-inline {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    border-right-width: 0;
 }
 pre {
     padding: 1rem;
@@ -796,6 +795,7 @@ td {
     position: relative;
 }
 .tooltipped:after {
+    border: 1px solid #777;
     position: absolute;
     z-index: 1000000;
     display: none;
@@ -1052,37 +1052,37 @@ td {
     }
 }
 .copy-to-clipboard {
+    background-color: #FFFAE9;
     background-image: url(../images/clippy.svg);
     background-position: 50% 50%;
-    background-size: 16px 16px;
     background-repeat: no-repeat;
-    width: 27px;
-    height: 1.45rem;
-    top: -1px;
-    display: inline-block;
-    vertical-align: middle;
-    position: relative;
-    color: #5e5e5e;
-    background-color: #FFF7DD;
-    margin-left: -.2rem;
+    background-size: 16px 16px;
+    border: 1px solid #F8E8C8;
+    border-radius: 2px;
+    color: #5E5E5E;
     cursor: pointer;
-    border-radius: 0 2px 2px 0;
-    margin-bottom: 1px;
+    font-size: 14.75px;
+    display: inline-block;
+    padding: 11px 13px;
+    position: relative;
+    top: 1.75px;
+    vertical-align: top;
 }
 .copy-to-clipboard:hover {
-    background-color: #E8E2CD;
+    background-color: #FCEBB4;
+    border-color: #B19F7A;
 }
 pre .copy-to-clipboard {
+    background-color: #C1C4C6;
+    border-color: #000;
+    padding: 10.5px 13.5px;
     position: absolute;
     right: 4px;
     top: 4px;
-    background-color: #C1C4C6;
-    color: #ccc;
-    border-radius: 2px;
 }
 pre .copy-to-clipboard:hover {
-    background-color: #00bdf3;
-    color: #fff;
+    border-color: #505050;
+    background-color: #E6E9EB;
 }
 .parent-element {
     -webkit-transform-style: preserve-3d;

static/js/relearn.js

@@ -337,6 +337,7 @@ jQuery(function() {
                 clipInit = true;
             }
 
+            code.addClass('copy-to-clipboard-inline');
             code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
             code.next('.copy-to-clipboard').on('mouseleave', function() {
                 $(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');