🏗️ First time sync the css & js files from hexo theme NexT
This commit is contained in:
55
assets/css/_common/scaffolding/highlight/copy-code.scss
Normal file
55
assets/css/_common/scaffolding/highlight/copy-code.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
.highlight:hover .copy-btn, pre:hover .copy-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
color: $black-dim;
|
||||
cursor: pointer;
|
||||
line-height: 1.6;
|
||||
opacity: 0;
|
||||
padding: 2px 6px;
|
||||
position: absolute;
|
||||
transition: opacity $transition-ease;
|
||||
|
||||
@if hexo-config('codeblock.copy_button.style') == 'flat' {
|
||||
background: white;
|
||||
border: 0;
|
||||
font-size: $font-size-smaller;
|
||||
right: 0;
|
||||
top: 0;
|
||||
} @else if hexo-config('codeblock.copy_button.style') == 'mac' {
|
||||
color: var(--highlight-foreground);
|
||||
font-size: 14px;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
} @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 hexo-config('codeblock.copy_button.style') == 'mac' {
|
||||
figure.highlight {
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4);
|
||||
padding-top: 30px;
|
||||
|
||||
.table-container {
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: #fc625d;
|
||||
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
|
||||
left: 12px;
|
||||
margin-top: -20px;
|
||||
position: absolute;
|
||||
@include round-icon(12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
140
assets/css/_common/scaffolding/highlight/index.scss
Normal file
140
assets/css/_common/scaffolding/highlight/index.scss
Normal file
@@ -0,0 +1,140 @@
|
||||
// Use `@use` to fix issue #67
|
||||
@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';
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
%code-block {
|
||||
@extend %code-inline;
|
||||
line-height: $line-height-code-block;
|
||||
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, code {
|
||||
font-family: $code-font-family;
|
||||
}
|
||||
|
||||
code {
|
||||
@extend %code-inline;
|
||||
border-radius: 3px;
|
||||
font-size: $table-font-size;
|
||||
padding: 2px 4px;
|
||||
@include word-wrap();
|
||||
}
|
||||
|
||||
kbd {
|
||||
@extend %code-inline;
|
||||
border: 2px solid $grey-light;
|
||||
border-radius: .2em;
|
||||
box-shadow: .1em .1em .2em rgba(0, 0, 0, .1);
|
||||
font-family: inherit;
|
||||
padding: .1em .3em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// `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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user