@@ -59,3 +59,7 @@ counter: | |||
comments: | |||
no_js: Please enable JavaScript to view the comments. | |||
tooltip: | |||
copy_tip: Copy to clipboard! | |||
copied: Copied! |
@@ -40,3 +40,7 @@ pagination: | |||
comments: | |||
no_js: 加载评论需要在浏览器启用 JavaScript 脚本支持。 | |||
tooltip: | |||
copy_tip: 复制到粘贴板! | |||
copied: 复制成功! |
@@ -5,22 +5,26 @@ | |||
<% if (is_post()){ %> | |||
<%- js('lib/clipboard/clipboard.min') %> | |||
<script type="text/javascript"> | |||
$(function(){ | |||
var btn = '<i class="btn-copy far fa-clone"></i>'; | |||
$(function() { | |||
// copy-btn HTML | |||
var btn = "<span class=\"btn-copy tooltipped tooltipped-sw\" aria-label=\"<%= __('tooltip.copy_tip') %>\">"; | |||
btn += '<i class="far fa-clone"></i>'; | |||
btn += '</span>'; | |||
// mount it! | |||
$(".highlight .code pre").before(btn); | |||
var clip = new ClipboardJS('.btn-copy', { | |||
target: function(trigger) { | |||
return trigger.nextElementSibling; | |||
} | |||
target: function(trigger) { | |||
return trigger.nextElementSibling; | |||
} | |||
}); | |||
clip.on('success', function(e) { | |||
e.trigger.setAttribute('aria-label', "<%= __('tooltip.copied') %>"); | |||
e.clearSelection(); | |||
}) | |||
}) | |||
</script> | |||
<% } %> | |||
<%- js('js/main') %> | |||
<!-- search --> | |||
<% if (config.search && (page.search || page.type === "search")){ %> | |||
<%- js('js/search.js') %> |
@@ -0,0 +1,78 @@ | |||
// ref: https://github.com/primer/primer/blob/master/modules/primer-tooltips/lib/tooltips.scss | |||
.tooltipped | |||
position: relative | |||
// This is the tooltip bubble | |||
.tooltipped::after | |||
position: absolute | |||
z-index: 1000000 | |||
display: none | |||
padding: .2em .5em | |||
-webkit-font-smoothing: subpixel-antialiased | |||
color: $color-background | |||
font-display: swap // @stylint ignore | |||
font-weight: 400 | |||
font-size: $font-size * 0.8 | |||
font-family: $font-family-body | |||
line-height: $line-height | |||
text-rendering: geometricPrecision | |||
text-align: center | |||
word-wrap: break-word | |||
white-space: pre | |||
content: attr(aria-label) | |||
background: $color-text | |||
border-radius: 3px | |||
opacity: 0 | |||
// This is the tooltip arrow | |||
.tooltipped::before | |||
position: absolute | |||
z-index: 1000001 | |||
display: none | |||
width: 0 | |||
height: 0 | |||
color: $color-text | |||
pointer-events: none | |||
content: '' | |||
border: 6px solid transparent | |||
opacity: 0 | |||
// delay animation for tooltip | |||
@keyframes tooltip-appear | |||
from | |||
opacity: 0 | |||
to | |||
opacity: 1 | |||
// This will indicate when we'll activate the tooltip | |||
.tooltipped:hover, | |||
.tooltipped:active, | |||
.tooltipped:focus | |||
&::before, | |||
&::after | |||
display: inline-block | |||
text-decoration: none | |||
animation-name: tooltip-appear | |||
animation-duration: 0.1s | |||
animation-fill-mode: forwards | |||
animation-timing-function: ease-in | |||
// Tooltipped south | |||
.tooltipped-s, | |||
.tooltipped-sw | |||
&::after | |||
top: 100% | |||
right: 50% | |||
margin-top: 6px | |||
&::before | |||
top: auto | |||
right: 50% | |||
bottom: -7px | |||
margin-right: -6px | |||
border-bottom-color: $color-text | |||
.tooltipped-sw::after | |||
margin-right: -16px | |||
// Move the tooltip body to the center of the object. | |||
.tooltipped-s::after | |||
transform: translateX(50%) |
@@ -121,6 +121,7 @@ body | |||
@import "_partial/pagination" | |||
@import "_partial/search" | |||
@import "_partial/tags" | |||
@import "_partial/tooltip" | |||
@import "_partial/categories" | |||
// Code | |||
@import "_highlight/" + $highlight | |||
@@ -180,14 +181,18 @@ code | |||
&:after | |||
clear: both | |||
:hover .btn-copy | |||
opacity: 1 | |||
&:hover | |||
.btn-copy | |||
opacity: 1 | |||
.btn-copy | |||
font-size: 1.2rem; | |||
font-size: 1.2rem | |||
position: absolute | |||
right: 20px | |||
opacity: 0 | |||
transition: opacity 0.2s ease-in | |||
&:hover | |||
color: $color-accent-1 | |||
pre | |||
padding: 0 |