💄 🐛 Fixed the copy code button display style.
This commit is contained in:
凡梦星尘
parent
9a83558e01
commit
e6fccb0b4e
@ -2,6 +2,19 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
|
||||
background: var(--highlight-background);
|
||||
|
||||
.table-container, pre {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-container table tbody tr {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
color: $black-dim;
|
||||
cursor: pointer;
|
||||
@ -9,32 +22,32 @@
|
||||
opacity: 0;
|
||||
padding: 2px 6px;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 4px;
|
||||
transition: opacity $transition-ease;
|
||||
background: var(--highlight-background);
|
||||
|
||||
@if $codeblock_copy_btn_style == 'flat' {
|
||||
background: white;
|
||||
border: 0;
|
||||
font-size: $font-size-smaller;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
} @else if $codeblock_copy_btn_style == 'mac' {
|
||||
color: var(--highlight-foreground);
|
||||
font-size: 14px;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
border-radius: 3px;
|
||||
} @else {
|
||||
background-color: $gainsboro;
|
||||
background-image: linear-gradient(#fcfcfc, $gainsboro);
|
||||
border: 1px solid #d5d5d5;
|
||||
border-radius: 3px;
|
||||
font-size: $font-size-smaller;
|
||||
right: 4px;
|
||||
top: 8px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@if $codeblock_copy_btn_style == 'mac' {
|
||||
figure.highlight {
|
||||
.highlight {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
|
||||
padding-top: 30px;
|
||||
@ -46,8 +59,8 @@
|
||||
&::before {
|
||||
background: #fc625d;
|
||||
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
|
||||
left: 12px;
|
||||
margin-top: -20px;
|
||||
margin-left: 10px;
|
||||
position: absolute;
|
||||
@include round-icon(12px);
|
||||
}
|
||||
|
||||
@ -1,17 +1,5 @@
|
||||
// Use `@use` to fix issue #67
|
||||
// TODO find way to import file by dynmatic
|
||||
// @import '(theme.highlight.enable && theme.highlight.light.file) ? theme.highlight.light.file : null';
|
||||
// @import '(theme.prism.enable && theme.prism.light) ? theme.prism.light : null';
|
||||
// @import '(theme.prism.enable && theme.prism.number) ? theme.prism.number : null';
|
||||
@import 'copy-code';
|
||||
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
@import '(theme.darkmode && theme.highlight.enable && theme.highlight.dark.file) ? theme.highlight.dark.file : null';
|
||||
@import '(theme.darkmode && theme.prism.enable && theme.prism.dark) ? theme.prism.dark : null';
|
||||
} */
|
||||
|
||||
// @import 'theme.codeblock.copy_button.enable ? "copy-code" : null';
|
||||
|
||||
// Placeholder: %code-inline %code-block
|
||||
%code-inline {
|
||||
background: var(--highlight-background);
|
||||
color: var(--highlight-foreground);
|
||||
@ -23,36 +11,14 @@
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
%figcaption {
|
||||
background: var(--highlight-gutter-background);
|
||||
color: var(--highlight-foreground);
|
||||
display: flow-root;
|
||||
font-size: $table-font-size;
|
||||
line-height: 1.2;
|
||||
padding: .5em;
|
||||
|
||||
a {
|
||||
color: var(--highlight-foreground);
|
||||
float: right;
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: var(--highlight-foreground);
|
||||
pre {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre, code {
|
||||
font-family: $code-font-family;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
code {
|
||||
@extend %code-inline;
|
||||
border-radius: 3px;
|
||||
font-size: $table-font-size;
|
||||
padding: 2px 4px;
|
||||
@include word-wrap();
|
||||
}
|
||||
|
||||
kbd {
|
||||
@extend %code-inline;
|
||||
@ -62,82 +28,4 @@ kbd {
|
||||
font-family: inherit;
|
||||
padding: .1em .3em;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// `highlight.line_number: false` and `highlight.wrap: false`
|
||||
// in Hexo config generates code.highlight elements
|
||||
figure.highlight {
|
||||
@extend %code-block;
|
||||
position: relative;
|
||||
|
||||
pre {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
@extend %figcaption;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
@include disable-user-select();
|
||||
|
||||
pre {
|
||||
background: var(--highlight-gutter-background);
|
||||
color: var(--highlight-gutter-foreground);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.code pre {
|
||||
padding-left: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// See https://github.com/next-theme/hexo-theme-next/discussions/410
|
||||
.marked {
|
||||
background: rgba(0, 0, 0, .3);
|
||||
}
|
||||
}
|
||||
|
||||
// See https://github.com/hexojs/hexo-util/pull/229
|
||||
pre .caption, pre figcaption {
|
||||
@extend %figcaption;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.gist table {
|
||||
width: auto;
|
||||
|
||||
td {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
@extend %code-block;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
@ -47,10 +47,10 @@ $font_title_size : {{ default $P.font.title.size 1.375 }};
|
||||
|
||||
// Code & Code blocks
|
||||
// TODO find the configure variable
|
||||
$highlight_dark_background : #000;
|
||||
$highlight_dark_foreground : #222;
|
||||
$highlight_light_background : #000;
|
||||
$highlight_light_foreground : #222;
|
||||
$highlight_dark_background : #1c1b1b;
|
||||
$highlight_dark_foreground : #fff;
|
||||
$highlight_light_background : #fff;
|
||||
$highlight_light_foreground : #555;
|
||||
|
||||
$codeblock_copy_btn_style : {{ $P.codeblock.copyBtn.style }};
|
||||
|
||||
|
||||
@ -40,15 +40,12 @@ NexT.utils = {
|
||||
* One-click copy code support.
|
||||
*/
|
||||
registerCopyCode: function() {
|
||||
let figure = document.querySelectorAll('figure.highlight');
|
||||
if (figure.length === 0) figure = document.querySelectorAll('pre:not(.mermaid)');
|
||||
let figure = document.querySelectorAll('.highlight pre');
|
||||
if (figure.length === 0 || !CONFIG.copycode) return;
|
||||
figure.forEach(element => {
|
||||
element.querySelectorAll('.code .line span').forEach(span => {
|
||||
span.classList.forEach(name => {
|
||||
span.classList.replace(name, `hljs-${name}`);
|
||||
});
|
||||
});
|
||||
if (!CONFIG.copycode) return;
|
||||
let cn = element.querySelector('code').className;
|
||||
// TODO seems hard code need find other ways fixed it.
|
||||
if (cn == '') return;
|
||||
element.insertAdjacentHTML('beforeend', '<div class="copy-btn"><i class="fa fa-copy fa-fw"></i></div>');
|
||||
const button = element.querySelector('.copy-btn');
|
||||
button.addEventListener('click', () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user