128 lines
2.0 KiB
Stylus
128 lines
2.0 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
|
|
}
|
|
|
|
|
|
.tool {
|
|
disable-user-select()
|
|
cursor pointer
|
|
|
|
i {
|
|
font-size 0.8rem
|
|
}
|
|
}
|
|
|
|
|
|
.fold {
|
|
padding 0 0.4rem 0 0.2rem
|
|
}
|
|
}
|
|
|
|
|
|
figure.highlight {
|
|
margin 0
|
|
|
|
&.folded {
|
|
height 0
|
|
}
|
|
}
|
|
}
|