Skip to content

Commit 1545581

Browse files
authored
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 c018fda.
1 parent 17d2276 commit 1545581

File tree

4 files changed

+29
-24
lines changed

4 files changed

+29
-24
lines changed

site/assets/css/inline.css

+14-19
Original file line numberDiff line numberDiff line change
@@ -261,38 +261,33 @@ table.includecode {
261261
max-width: 100%;
262262
width: 100%;
263263
table-layout: fixed;
264-
background: #f3f4f4;
265-
border: .15em solid black;
264+
border: 1px solid rgba(0,0,0,.125);
266265
border-spacing: 0;
267266
}
268267

269-
table.includecode thead {
270-
background: #333;
271-
color: white;
272-
}
273-
274-
table.includecode thead th a {
275-
color: white;
276-
}
277-
278268
table.includecode thead th {
279-
border-bottom: .1em solid black;
269+
border-bottom: 1px solid rgba(0,0,0,.125);
280270
font-weight: normal;
281-
font-size: .9em;
271+
font-size: 85%;
282272
}
283273

284274
table.includecode thead th {
285275
text-align: right;
286276
}
287277

278+
table.includecode thead th a {
279+
font-family: monospace;
280+
}
281+
288282
table.includecode thead th button {
289-
background: #326be5;
290-
border: .25em solid white;
291-
color: white;
292-
font-weight: bold;
293-
margin: .25em;
283+
vertical-align: middle;
284+
background: transparent;
285+
border: 0;
294286
cursor: pointer;
295-
padding: .1em .5em;
287+
}
288+
289+
table.includecode tbody {
290+
background: #f3f4f4;
296291
}
297292

298293
table.includecode pre {

site/layouts/shortcodes/codeFromFile.html

+7-3
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,12 @@
99
<table class="includecode" id="code-{{ $virtualPath }}">
1010
<thead>
1111
<tr>
12-
<th><a href="/{{ $virtualPath }}">{{ $virtualPath }}</a> <button
13-
onclick='copyText("code-{{ $virtualPath }}-hidden-copy-text");'>COPY</button></th>
12+
<th>
13+
<a href="/{{ $virtualPath }}">{{ $virtualPath }}</a>
14+
<button onclick='copyText("code-{{ $virtualPath }}-hidden-copy-text");' title="Copy to clipboard">
15+
<img src="{{ "copycode.svg" | relURL }}" alt="Copy">
16+
</button>
17+
</th>
1418
</tr>
1519
</thead>
1620
<tbody>
@@ -19,4 +23,4 @@
1923
</tr>
2024
</tbody>
2125
<textarea class="hidden-copy-text" id="code-{{ $virtualPath }}-hidden-copy-text">{{ ($file | readFile) }}</textarea>
22-
</table>
26+
</table>

site/layouts/shortcodes/codeFromInline.html

+5-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,11 @@
55
<table class="includecode" id="inline-code-{{ $hash }}">
66
<thead>
77
<tr>
8-
<th> <button
9-
onclick='copyText("inline-code-{{ $hash }}-hidden-copy-text");'>COPY</button></th>
8+
<th>
9+
<button onclick='copyText("inline-code-{{ $hash }}-hidden-copy-text");' title="Copy to clipboard">
10+
<img src="{{ "copycode.svg" | relURL }}" alt="Copy">
11+
</button>
12+
</th>
1013
</tr>
1114
</thead>
1215
<tbody>

site/static/copycode.svg

+3
Loading

0 commit comments

Comments
 (0)