doc: refactor copy to clipboard button (#2894)

* doc: remove copy button background colour

the motivation for this commit is that I often get a feeling of having
marked the COPY buttons, but when I check, it turns out I haven't

that happens because the COPY buttons have a background colour that is
basically the same as when you mark text

* doc: use emoji for copy button

kind seems to be fond of emojis, it can maybe work here as well?

* doc: copy kubernetes.io code blocks design

as per feedback in PR

* doc: comply with copycode.svg license

* Revert "doc: comply with copycode.svg license"

This reverts commit c018fda4bc.

site/assets/css/inline.css

@@ -261,38 +261,33 @@ table.includecode {
   max-width: 100%;
   width: 100%;
   table-layout: fixed;
-  background: #f3f4f4;
-  border: .15em solid black;
+  border: 1px solid rgba(0,0,0,.125);
   border-spacing: 0;
 }
 
-table.includecode thead {
-  background: #333;
-  color: white;
-}
-
-table.includecode thead th a {
-  color: white;
-}
-
 table.includecode thead th {
-  border-bottom: .1em solid black;
+  border-bottom: 1px solid rgba(0,0,0,.125);
   font-weight: normal;
-  font-size: .9em;
+  font-size: 85%;
 }
 
 table.includecode thead th {
   text-align: right;
 }
 
+table.includecode thead th a {
+  font-family: monospace;
+}
+
 table.includecode thead th button {
-  background: #326be5;
-  border: .25em solid white;
-  color: white;
-  font-weight: bold;
-  margin: .25em;
+  vertical-align: middle;
+  background: transparent;
+  border: 0;
   cursor: pointer;
-  padding: .1em .5em;
+}
+
+table.includecode tbody {
+  background: #f3f4f4;
 }
 
 table.includecode pre {

site/layouts/shortcodes/codeFromFile.html

@@ -9,8 +9,12 @@
 <table class="includecode" id="code-{{ $virtualPath }}">
   <thead>
     <tr>
-      <th><a href="/{{ $virtualPath }}">{{ $virtualPath }}</a> <button
-          onclick='copyText("code-{{ $virtualPath }}-hidden-copy-text");'>COPY</button></th>
+      <th>
+        <a href="/{{ $virtualPath }}">{{ $virtualPath }}</a>
+        <button onclick='copyText("code-{{ $virtualPath }}-hidden-copy-text");' title="Copy to clipboard">
+          <img src="{{ "copycode.svg" | relURL }}" alt="Copy">
+        </button>
+      </th>
     </tr>
   </thead>
   <tbody>
@@ -19,4 +23,4 @@
     </tr>
   </tbody>
   <textarea class="hidden-copy-text" id="code-{{ $virtualPath }}-hidden-copy-text">{{ ($file | readFile) }}</textarea>
-</table>
+</table>

site/layouts/shortcodes/codeFromInline.html

@@ -5,8 +5,11 @@
 <table class="includecode" id="inline-code-{{ $hash }}">
   <thead>
   <tr>
-    <th> <button
-        onclick='copyText("inline-code-{{ $hash }}-hidden-copy-text");'>COPY</button></th>
+    <th>
+      <button onclick='copyText("inline-code-{{ $hash }}-hidden-copy-text");' title="Copy to clipboard">
+        <img src="{{ "copycode.svg" | relURL }}" alt="Copy">
+      </button>
+    </th>
   </tr>
   </thead>
   <tbody>

site/static/copycode.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#184eb1">
+<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+</svg>