.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 } } }