hexo-theme-keep/source/css/common/code-block/code-block.styl

134 lines
2.2 KiB
Stylus

.highlight-container {
position relative
box-sizing border-box
margin 1.4rem 0
&.mac {
margin 1.4rem 0 1.8rem 0
box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4)
&:hover {
.code-tools-box .copy {
opacity 1
}
}
.code-tools-box {
justify-content flex-end
padding 0.4rem 0.6rem 0.7rem 0.4rem
background #21252b
&::before {
position absolute
left 0.8rem
width 0.76rem
height 0.76rem
background #fc625d
border-radius 50%
box-shadow 1.3rem 0 #fdbc40, 2.6rem 0 #35cd4b
content ''
}
&.folded {
border-bottom-right-radius 0
border-bottom-left-radius 0
.copy {
display none
}
}
.code-lang {
order 1
color #bbb
}
.fold {
order 2
padding 0 0.1rem 0 0.6rem
i {
color #ccc
}
}
.copy {
position absolute
top 3rem
right 0.5rem
padding 0 0.1rem
opacity 0
transition-t("opacity", "0", "0.2", "ease-in-out")
i {
font-size 1rem
}
}
}
}
.code-tools-box {
display flex
align-items center
justify-content space-between
box-sizing border-box
width 100%
padding 0.3rem 0.4rem
color var(--toolbar-foreground)
background var(--toolbar-background)
border-top-left-radius 0.3rem
border-top-right-radius 0.3rem
&.folded {
border-bottom-right-radius 0.3rem
border-bottom-left-radius 0.3rem
}
.code-lang {
justify-content flex-start
margin-left 0.2rem
font-weight 600
font-size 0.9rem
font-family "Source Code Pro", consolas, Menlo
if (hexo-config('code_block.highlight_theme') == 'default') {
color var(--text-color-3)
}
}
.tool {
disable-user-select()
cursor pointer
i {
font-size 0.8rem
if (hexo-config('code_block.highlight_theme') == 'default') {
color var(--text-color-3)
}
}
}
.fold {
padding 0 0.4rem 0 0.2rem
}
}
figure.highlight {
margin 0
&.folded {
height 0
}
}
}