//文章预览图渐变
.article-image {
    img {
    mask: linear-gradient(to bottom, black 0%, black 25%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);  }
}

/* Menu style */
#main-menu {
    list-style: none;
    overflow-y: auto;
    flex-grow: 1;
    font-size: 1.4rem;
    background-color: var(--card-background);

    box-shadow: var(--shadow-l1);
    display: none;
    margin: 0 calc(var(--container-padding) * -1);

    padding: 30px 30px;

    @include respond(xl) {
        padding: 15px 0;
    }

    &, .menu-bottom-section ol {
        flex-direction: column;
        gap: 30px;

        @include respond(xl) {
            gap: 25px;
        }
    }

    &.show {
        display: flex;
    }

    @include respond(md) {
        align-items: flex-end;
        display: flex;
        background-color: transparent;
        padding: 0;
        box-shadow: none;
        margin: 0;
    }

    li {
        position: relative;
        vertical-align: middle;
        padding: 0;

        @include respond(md) {
            width: 100%;
        }

        svg {
            stroke: currentColor;
            stroke-width: 1.33;
            width: 20px;
            height: 20px;
        }

        a {
            height: 100%;
            display: inline-flex;
            align-items: center;
            color: var(--body-text-color);
            gap: var(--menu-icon-separation);
        }

        span {
            flex: 1;
        }

        &.current {
            a {
                color: var(--accent-color);
                font-weight: bold;
            }
        }

        &.menu-bottom-section {
            margin-top: auto;

            ol {
                display: flex;
                padding-left: 0;
            }
        }
    }
}

#main-menu { //左边菜单
    li {
        &:hover a{
            transition: all 0.2s ease-in-out;
            color: var(--light-red);
            transform: scale(1.05);
            font-weight: bold;
            filter: drop-shadow(var(--dropshadow-light));
        }

        [data-scheme="dark"] & {
            &:hover {
                filter: drop-shadow(var(--dropshadow-dark));
            }
        }
    }
}

.page-link { //页面页码栏（需要添加JavaScript代码实现当前页高亮）
    transition: all 0.2s ease-in-out;

    &.current.reset-style {
        font-weight: normal;
        background-color: var(--card-background);
        color: var(--card-text-color-secondary);
    }
    &:not(.current):hover { // 其他页面的悬停效果
        color: var(--light-red);
        background-color: var(--card-background-selected);
        transform: scale(1.05);
        font-weight: bold;
    }
}

<script>
/* 页码栏分页悬停效果 */
document.addEventListener('DOMContentLoaded', function() {
    const pagination = document.querySelector('.pagination');
    const pageLinks = document.querySelectorAll('.page-link');
    let currentPage = document.querySelector('.page-link.current');

    pageLinks.forEach(link => {
        link.addEventListener('mouseenter', function() {
            // 如果悬停的不是当前页面
            if (!this.classList.contains('current') && currentPage) {
                currentPage.classList.add('reset-style');
            }
        });

        link.addEventListener('mouseleave', function() {
            // 恢复当前页面样式
            if (currentPage) {
                currentPage.classList.remove('reset-style');
            }
        });
    });
});
</script>

<!-- 扩大主页文章卡片可点击区域 -->
<script>
document.addEventListener('click', function(e) {
    const articleDetails = e.target.closest('.article-details');
    if (articleDetails && !e.target.closest('.article-category a')) {
        const titleLink = articleDetails.querySelector('.article-title a');
        if (titleLink) {
            window.location.href = titleLink.href;
        }
    }
});
</script>

//扩大主页文章卡片可点击区域(java)，同步更改鼠标光标样式
.article-details {
  cursor: url('/mouse/pointer.png'), pointer;
}

params:
    comments: # 默认在第39行
        enabled: true
        provider: waline

        waline: #默认在第75行
            serverURL: # 填写你的评论区网址，如：serverURL: https://xxxx.vercel.app/
            lang: zh-cn # 语言设置为中文
            emoji: # 为你的评论区引入表情
                - https://gcore.jsdelivr.net/gh/Saidosi/azuki-emoji-for-waline@1.0/azukisan/ # 小豆泥
            locale:
                admin: 博主 # 设置评论区管理员标签
                placeholder: |- # 评论框提示词，如果需要换行则输入换行符："|-"，不需要换行的话可以删掉
                    您无需登录即可发表评论。如果需要收到回复通知，请留下您的邮箱地址。
                    非登录状态下，如果您留下邮箱，您的头像将自动获取并设置为您的邮箱账户头像。
                    由于vercle.app域名受到DNS污染，大陆ip地址无法参与评论。
                nick: 昵称（选填） #昵称栏显示的标题文字，以下同理
                mail: 邮箱（选填） 
                link: 网址（选填）

    /* 评论区整体样式-by 失迹的博客 */
    .waline-container {
        background-color: var(--card-background);
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        padding: var(--card-padding);
        --waline-font-size: var(--article-font-size);
    }
    .waline-container .wl-count {
        color: var(--card-text-color-main);
    }
    /* 暗色模式下输入框背景 */
    [data-scheme="dark"] .wl-panel {
        background: #212121;
    }
    /* 提交按钮基础样式 */
    .wl-btn.primary {
        background: var(--body-text-color);
        border: none;
    }
    /* 提交按钮悬停&激活状态 */
    .wl-btn.primary:hover, .wl-btn.primary:active {
        border: none;
        background: var(--light-red);
    }
    /* 按正序、……悬停&激活状态 */
    .wl-sort li {
        transition: color 0.2s ease-in-out;
        &:hover {
            color: var(--body-text-color);
        }
        &.active {
            color: var(--light-red);
        }
    }
    /* markdown按钮与悬停状态 */
    [data-waline] a {
        color: var(--body-text-color);
        transition: color 0.2s ease-in-out;
        &:hover {
            color: var(--light-red)
        }
    }
    /* 删除、点赞、回复、编辑按钮悬停&激活状态 */
    .wl-card .wl-delete, .wl-card .wl-like, .wl-card .wl-reply, .wl-card .wl-edit {
        transition: color 0.2s ease-in-out;
        &:hover, &.active {
            color: var(--light-red);
        }
    }
    /* 登录按钮悬停&激活 */
    .wl-btn:hover, .wl-btn:active {
        border-color: var(--light-red);
        color: var(--light-red);
    }
    /* 表情、gif、图片、预览，悬停&激活状态 */
    .wl-action {
        transition: color 0.2s ease-in-out;
        &:hover, &.active{
            color: var(--light-red);
        }
    }
    /* 昵称等标签栏（= =艰难对齐） */
    .wl-header label {
        font-size: 1.4rem;
        padding-top: 1.8rem;
        padding-left: 2rem;
        padding-right: 0;
    }
    /* 主输入框间距 */
    .wl-editor {
        padding-left: 1.6rem;
        padding-top: 0.5rem;
    }
    /* 昵称等栏输入框：间距、圆角、字体大小 */
    .wl-header input {
        margin: 1rem;
        border-radius: 4px;
        font-size: 1.4rem;
    }
    /* 预览两个字的颜色 */
    .wl-preview h4 {
        color: var(--body-text-color);
    }
    /* 去掉认证符号背景 */
    .wl-cards .wl-user .verified-icon {
        background: none;
    }
    /* gif栏搜索框背景色、间距、圆角、输入符 */
    .wl-gif-popup input {
        background-color: var(--card-background);
        padding-left: 1.6rem;
        border-radius: 8px;
        &:focus-visible {
            color: var(--body-text-color);
        }
    }
    /* gif栏图片悬停效果与样式调整 */
    .wl-gif-popup img {
        border-radius: 8px;
        border: none;
        transition: all 0.2s ease-in-out;
        &:hover {
            border-radius: 8px;
            mask: linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.75) 100%);
        }
    }
    /* 去掉表情悬停时背景 */
    .wl-emoji-popup button:hover {
        background: none;
    }
    /* 表情悬停效果：放大+旋转 */
    .wl-emoji-popup .wl-emoji {
        transition: transform 0.3s ease-in-out;
        &:hover {
            transform: scale(1.5) rotate(-15deg);
        }
    }
    /* 不显示评论ip和设备环境等 */
    .wl-card .wl-meta>span {
        display: none;
    }
    /* 设置上一条的同时调整评论文字位置弥补空缺 */
    .wl-card .wl-content {
        padding-top: 0;
    }

// .wl 和.waline 开头的是waline评论区的选择器
// default光标图片
body,
html,
.article-content img,
.waline-container,
.wl-header label {
    cursor: url(../mouse/default.png),
    auto !important;
}

// pointer光标图片
a:hover,
button:hover,
.copyCodeButton:hover,
#dark-mode-toggle,
.wl-actions label,
.wl-actions a,
.wl-emoji-popup .wl-tab-wrapper button,
.wl-gif-popup img,
.wl-sort li {
    cursor: url(../mouse/pointer.png),
    auto !important;
}

// text光标图片
input:hover,
.site-description,
.article-subtitle,
.article-content span,
.article-content li,
.article-content p,
.wl-editor, .wl-input, 
.wl-header input,
[data-waline] p {
    cursor: url(../mouse/text.png),
    auto;
}

// 隐藏一大堆滚动条
#TableOfContents, //导航栏
#main-menu, //左侧菜单
.wl-emoji-popup .wl-tab-wrapper,//评论区表情
.wl-gallery, //评论区gif
.wl-editor { //评论区主输入框
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

#TableOfContents::-webkit-scrollbar,
#main-menu::-webkit-scrollbar,
.wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar,
.wl-gallery::-webkit-scrollbar,
.wl-editor::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}