nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-01-18 19:00:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

theme: adjust copy-to-clipboard #29

Browse source 
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
This commit is contained in:
Sören Weber 2021-07-25 22:09:45 +02:00
parent 798ae66da8
commit 541a634f6e
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
2 changed files with 31 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
static/css/theme.css
View file

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

1
static/js/relearn.js
View file

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