custom.css

@font-face {
    font-family: 'Dank Mono';
    src: url('../assets/fonts/DankMono-Regular.woff2') format('woff2');
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Dank Mono';
    src: url('../assets/fonts/DankMono-Italic.woff2') format('woff2');
    font-display: swap;
    font-style: italic;
}

@font-face {
    font-family: 'JinBuTi';
    src: url('../assets/fonts/DingTalk-JinBuTi.woff2') format('woff2');
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'JinBuTi', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 代码块容器样式 */
.language-javascript, [class*="language-"] {
    background: #282c34 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4) !important;
    position: relative;
    margin: 1.2em 0;
}

/* 代码块顶部栏 */
.sticky.top-8 {
    background: #21252b !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    border-radius: 10px 10px 0 0;
    padding: 0 15px !important;
    margin-bottom: -60px !important;
}

/* 语言标识 */
.text-text-300 {
    position: absolute;
    left: 60px;
    /* top: 7px; */
    color: #abb2bf !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    z-index: 11;
}

/* 顶部按钮样式优化 */
.save-code-button, .copy-code-button, .run-code-button {
    background: #323842 !important;
    color: #abb2bf !important;
    border: 1px solid #3e4451 !important;
    font-size: 12px !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease-in-out !important;
}

.save-code-button:hover, .copy-code-button:hover {
    background: #3e4451 !important;
    color: #fff !important;
}

/* 代码块顶部装饰圆点 */
.language-javascript::before, [class*="language-"]::before {
    content: " ";
    position: absolute;
    border-radius: 50%;
    background: #fc625d;
    width: 12px;
    height: 12px;
    left: 15px;
    top: 14px;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    z-index: 10;
}

/* 代码内容区域 */
.cm-content {
    font-family: 'Dank Mono', -apple-system, BlinkMacSystemFont, Inter, ui-sans-serif, system-ui, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-size: 15px !important;
    line-height: 1.6em !important;
    padding: 20px 1.4em 1em 30px !important;
    color: #abb2bf !important;
}

/* 代码语法高亮 */
.cm-line .ͼb {
    /* 关键字 */
    color: #c678dd !important;
}

.cm-line .ͼd {
    /* 数字 */
    color: #e5c07b !important;
}

.cm-line .ͼe {
    /* 字符串 */
    color: #98c379 !important;
}

.cm-line .ͼg {
    /* 变量 */
    color: #e06c75 !important;
    font-style: italic;
}

/* 代码语法高亮 - 扩展 */
.cm-comment {
    /* 注释 */
    color: #7f848e !important;
    font-style: italic;
}

.cm-property {
    color: #61afef !important;
}

.cm-tag {
    color: #e06c75 !important;
}

.cm-attribute {
    color: #d19a66 !important;
}

.cm-string {
    color: #98c379 !important;
}

.cm-operator {
    color: #56b6c2 !important;
}

span.ͼc {
    color: #dd6b7b !important;
}

span.ͼl {
    color: #6bddcd !important;
}

span.ͼt {
    color: #ddb078 !important;
    ;
    font-style: italic;
}

span.ͼr {
    font-style: italic;
}

span.ͼf {
    color: #80a492;
}

span.ͼm {
    color: #3d8e86;
    font-style: italic;
}

span.ͼw {
    font-style: italic;
}

/* 滚动条样式 */
.cm-scroller::-webkit-scrollbar {
    height: 10px !important;
    width: 10px !important;
    background-color: #282c34 !important;
}

.cm-scroller::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3) !important;
    border-radius: 10px !important;
    background-color: #282c34 !important;
}

.cm-scroller::-webkit-scrollbar-thumb {
    border-radius: 10px !important;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .5) !important;
    background-color: #3e4451 !important;
}

/* 行号栏样式 */
.cm-gutters {
    background: #282c34 !important;
    border-right: 1px solid #3e4451 !important;
    color: #495162 !important;
    padding-right: 10px !important;
}

/* 当前行高亮 */
.cm-activeLine {
    background: #6699ff0b !important;
}

.cm-gutterElement.cm-activeLineGutter {
    background-color: #dd7694;
}

/* 添加代码选中样式 */
.cm-selectionBackground, .cm-content ::selection {
    background-color: rgba(122, 129, 255, 0.2) !important;
}

.cm-line.cm-selected {
    background-color: rgba(122, 129, 255, 0.2) !important;
}

/* 选中时的文本颜色保持原样，确保可读性 */
.cm-content ::selection {
    color: rgba(245, 177, 255, 0.9) !important;
}

/* 当有多行选中时的样式 */
.cm-selectionLayer>.cm-selectionBackground {
    background-color: rgba(122, 129, 255, 0.2) !important;
}

/* 代码块折叠/展开样式添加与修改 */
.cm-scroller {
    padding-bottom: 40px;
    background-color: #282c34;
}

.cm-scroller {
    overflow: auto !important;
}

.cm-editor {
    transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden !important;
}

/* 只给超高的代码块添加最大高度和内边距 */
.cm-editor#collapsed {
    height: 400px;
}

/* .cm-editor#expanded { padding-bottom: 40px; } */
.code-expand-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 15px;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
    border: none;
    color: #666;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(8px);
    z-index: 11;
    transition: all 0.3s ease;
}

.dark .code-expand-btn {
    background: rgba(45, 45, 45, 0.6);
    color: #fff;
}

.code-expand-btn:hover {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.dark .code-expand-btn:hover {
    background: rgba(45, 45, 45, 0.8);
}

.code-expand-btn:active {
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.code-expand-btn::before {
    content: "⌄";
    display: inline-block;
    margin-right: 4px;
    font-size: 14px;
    transition: transform 0.3s ease;
}

.code-expand-btn#expanded::before {
    transform: rotate(180deg);
}

.code-expand-btn::after {
    content: "展开代码";
}

.code-expand-btn#expanded::after {
    content: "收起代码";
}

/* 渐变遮罩 */
.cm-editor#collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(transparent 0%, rgba(45, 45, 45, 0.3) 40%, rgba(45, 45, 45, 0.6) 80%, rgba(45, 45, 45, 0.8) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    /* 确保遮罩层覆盖到滚动条 */
    width: calc(100% + 17px);
    /* 17px是标准滚动条宽度 */
}

.dark .cm-editor#collapsed::after {
    background: linear-gradient(transparent 0%, rgba(45, 45, 45, 0.3) 40%, rgba(45, 45, 45, 0.6) 80%, rgba(45, 45, 45, 0.8) 100%);
}

/* 只在折叠状态显示渐变遮罩 */
.cm-editor#collapsed::after {
    opacity: 1;
}