You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
231 lines
4.7 KiB
231 lines
4.7 KiB
$highlight_theme = hexo-config('highlight_theme') |
|
wordWrap = $highlight_enable && !$highlight_line_number && hexo-config('code_word_wrap') |
|
|
|
@require 'theme' |
|
|
|
:root |
|
--hl-color: $highlight-foreground |
|
--hl-bg: $highlight-background |
|
--hltools-bg: $highlight-tools.bg-color |
|
--hltools-color: $highlight-tools.color |
|
--hlnumber-bg: $highlight-gutter.bg-color |
|
--hlnumber-color: $highlight-gutter.color |
|
--hlscrollbar-bg: $highlight-scrollbar |
|
--hlexpand-bg: linear-gradient(180deg, rgba($highlight-background, .6), rgba($highlight-background, .9)) |
|
|
|
[data-theme='dark'] |
|
--hl-color: alpha(#FFFFFF, .7) |
|
--hl-bg: lighten(#121212, 2) |
|
--hltools-bg: lighten(#121212, 3) |
|
--hltools-color: #90a4ae |
|
--hlnumber-bg: lighten(#121212, 2) |
|
--hlnumber-color: alpha(#FFFFFF, .4) |
|
--hlscrollbar-bg: lighten(#121212, 5) |
|
--hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9)) |
|
|
|
if $highlight_enable |
|
@require 'highlight/index' |
|
|
|
if $prismjs_enable |
|
@require 'prismjs/index' |
|
|
|
$code-block |
|
overflow: auto |
|
margin: 0 0 20px |
|
padding: 0 |
|
background: var(--hl-bg) |
|
color: var(--hl-color) |
|
line-height: $line-height-code-block |
|
|
|
if wordWrap |
|
counter-reset: line |
|
white-space: pre-wrap |
|
|
|
#article-container |
|
pre, |
|
code |
|
font-size: $code-font-size |
|
font-family: $code-font-family !important |
|
|
|
code |
|
padding: 2px 4px |
|
background: $code-background |
|
color: $code-foreground |
|
|
|
pre |
|
@extend $code-block |
|
padding: 10px 20px |
|
|
|
code |
|
padding: 0 |
|
background: none |
|
color: var(--hl-color) |
|
text-shadow: none |
|
|
|
figure.highlight |
|
@extend $code-block |
|
position: relative |
|
|
|
pre |
|
margin: 0 |
|
padding: 8px 0 |
|
border: none |
|
|
|
figcaption, |
|
.caption |
|
padding: 6px 0 2px 14px |
|
font-size: $code-font-size |
|
line-height: 1em |
|
|
|
a |
|
float: right |
|
padding-right: 10px |
|
color: var(--hl-color) |
|
|
|
&:hover |
|
border-bottom-color: var(--hl-color) |
|
|
|
&.copy-true |
|
user-select: all |
|
-webkit-user-select: all |
|
|
|
& > table, |
|
& > pre |
|
display: block !important |
|
opacity: 0 |
|
|
|
.highlight-tools |
|
position: relative |
|
display: flex |
|
align-items: center |
|
overflow: hidden |
|
min-height: 24px |
|
height: 2.15em |
|
background: var(--hltools-bg) |
|
color: var(--hltools-color) |
|
font-size: $code-font-size |
|
|
|
&.closed |
|
& ~ * |
|
display: none |
|
|
|
.expand |
|
transition: all .3s |
|
transform: rotate(-90deg) !important |
|
|
|
.expand |
|
position: absolute |
|
padding: .57em .7em |
|
cursor: pointer |
|
transition: transform .3s |
|
|
|
& + .code-lang |
|
left: 1.7em |
|
|
|
.code-lang |
|
position: absolute |
|
left: 14px |
|
text-transform: uppercase |
|
font-weight: bold |
|
font-size: 1.15em |
|
user-select: none |
|
-webkit-user-select: none |
|
|
|
.copy-notice |
|
position: absolute |
|
right: 2.4em |
|
opacity: 0 |
|
transition: opacity .4s |
|
|
|
.copy-button |
|
position: absolute |
|
right: 14px |
|
cursor: pointer |
|
transition: color .2s |
|
|
|
&:hover |
|
color: $theme-color |
|
|
|
.gutter |
|
user-select: none |
|
-webkit-user-select: none |
|
|
|
.gist table |
|
width: auto |
|
|
|
td |
|
border: none |
|
|
|
if $highlight_theme == 'mac' || ($highlight_theme == 'mac light') |
|
figure.highlight |
|
margin: 0 0 24px |
|
border-radius: 7px |
|
box-shadow: 0 5px 10px 0 $highlight-mac-border |
|
-webkit-transform: translateZ(0) |
|
|
|
.highlight-tools |
|
&:after |
|
position: absolute |
|
left: 14px |
|
width: 12px |
|
height: 12px |
|
border-radius: 50% |
|
background: #fc625d |
|
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b |
|
content: ' ' |
|
|
|
.expand |
|
right: 0 |
|
|
|
&.closed |
|
transition: all .3s |
|
transform: rotate(90deg) !important |
|
|
|
& ~ .copy-notice |
|
right: 3.45em |
|
|
|
& ~ .copy-button |
|
right: 2.1em |
|
|
|
.code-lang |
|
left: 75px |
|
|
|
if hexo-config('highlight_height_limit') |
|
.code-expand-btn |
|
position: absolute |
|
bottom: 0 |
|
z-index: 10 |
|
width: 100% |
|
background: var(--hlexpand-bg) |
|
text-align: center |
|
font-size: $code-font-size |
|
cursor: pointer |
|
|
|
i |
|
padding: 6px 0 |
|
color: var(--hlnumber-color) |
|
animation: code-expand-key 1.2s infinite |
|
|
|
&.expand-done |
|
& > i |
|
transform: rotate(180deg) |
|
|
|
& + table, |
|
& + pre |
|
margin-bottom: 1.8em |
|
|
|
&:not(.expand-done) |
|
& ~ table, |
|
& ~ pre |
|
overflow: hidden |
|
height: unit(hexo-config('highlight_height_limit'), px) |
|
|
|
@keyframes code-expand-key |
|
0% |
|
opacity: .6 |
|
|
|
50% |
|
opacity: .1 |
|
|
|
100% |
|
opacity: .6 |