src/styles/navbar.css

/**
 * 统一导航栏样式
 * 
 * 模式说明：
 * ============================================
 * 1. 壁纸模式 (backgroundWallpaper.mode):
 *    - "banner": 横幅壁纸模式 (有 #banner-wrapper)
 *    - "overlay": 全屏壁纸模式 (body.wallpaper-transparent)
 *    - "none": 纯色背景无壁纸
 * 
 * 2. 导航栏配置 (banner.navbar):
 *    - transparentMode: "semi" | "full" | "semifull" (仅在 Banner 模式下生效)
 *    - enableBlur: true/false (仅在 Banner 模式下生效)
 * 
 * 注意：Overlay 模式下的导航栏始终跟随卡片样式 (var(--card-bg-transparent) + blur)，
 * 不受 Banner 配置 (transparentMode, enableBlur) 的影响。
 * ============================================
 */

/* ============================================
 * 基础导航栏样式
 * 适用: 所有模式，所有设备
 * ============================================ */
#navbar>div {
    background: var(--card-bg);
    border: 1px solid transparent;
    border-radius: 0 0 0.75rem 0.75rem;
    transition: all var(--duration-medium) var(--ease-standard);
}

/* ============================================
 * 桌面端 - 亮色主题 - Banner模式
 * 适用: 桌面端(≥1024px) + Banner模式 + 亮色主题
 * 遵循: transparentMode, enableBlur 配置
 * ============================================ */
@media (min-width: 1024px) {

    /* "semi" */
    #banner-wrapper~* #navbar[data-transparent-mode="semi"]>div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"]>div {
        backdrop-filter: blur(var(--navbar-glass-blur, 20px)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* "full" */
    #banner-wrapper~* #navbar[data-transparent-mode="full"]>div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="full"]>div {
        backdrop-filter: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* "semifull" (static) */
    #banner-wrapper~* #navbar[data-transparent-mode="semifull"]>div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"]>div {
        backdrop-filter: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* "semifull" (scrolled) */
    #banner-wrapper~* #navbar[data-transparent-mode="semifull"].scrolled>div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"].scrolled>div {
        backdrop-filter: blur(var(--navbar-glass-blur, 20px)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ============================================
 * 移动端 - 亮色主题 - Banner模式
 * 适用: 移动端(≤1023px) + Banner模式 + 亮色主题 + 仅首页生效
 * ============================================ */
@media (max-width: 1023px) {

    /* "semi" */
    #banner-wrapper~* #navbar[data-transparent-mode="semi"][data-is-home="true"]>div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"][data-is-home="true"]>div {
        backdrop-filter: blur(var(--navbar-glass-blur, 20px)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* "full" */
    #banner-wrapper~* #navbar[data-transparent-mode="full"][data-is-home="true"]>div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="full"][data-is-home="true"]>div {
        backdrop-filter: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* "semifull" (static) */
    #banner-wrapper~* #navbar[data-transparent-mode="semifull"][data-is-home="true"]>div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-is-home="true"]>div {
        backdrop-filter: none !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* "semifull" (scrolled) */
    #banner-wrapper~* #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled>div,
    body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled>div {
        backdrop-filter: blur(var(--navbar-glass-blur, 20px)) !important;
        background: rgba(255, 255, 255, var(--opacity-55)) !important;
        border: 1px solid rgba(255, 255, 255, var(--opacity-55)) !important;
        border-radius: 0 0 0.75rem 0.75rem !important;
        box-shadow: var(--shadow-navbar) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ============================================
 * 桌面端 - 暗色主题 - Banner模式
 * ============================================ */
@media (min-width: 1024px) {

    /* "semi" */
    :root.dark #banner-wrapper~* #navbar[data-transparent-mode="semi"]>div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"]>div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }

    /* "full" */
    :root.dark #banner-wrapper~* #navbar[data-transparent-mode="full"]>div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="full"]>div {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* "semifull" (static) */
    :root.dark #banner-wrapper~* #navbar[data-transparent-mode="semifull"]>div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"]>div {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* "semifull" (scrolled) */
    :root.dark #banner-wrapper~* #navbar[data-transparent-mode="semifull"].scrolled>div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"].scrolled>div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
}

/* ============================================
 * 移动端 - 暗色主题 - Banner模式
 * ============================================ */
@media (max-width: 1023px) {

    /* "semi" */
    :root.dark #banner-wrapper~* #navbar[data-transparent-mode="semi"][data-is-home="true"]>div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"][data-is-home="true"]>div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }

    /* "full" */
    :root.dark #banner-wrapper~* #navbar[data-transparent-mode="full"][data-is-home="true"]>div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="full"][data-is-home="true"]>div {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* "semifull" (static) */
    :root.dark #banner-wrapper~* #navbar[data-transparent-mode="semifull"][data-is-home="true"]>div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-is-home="true"]>div {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* "semifull" (scrolled) */
    :root.dark #banner-wrapper~* #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled>div,
    :root.dark body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-is-home="true"].scrolled>div {
        background: rgba(0, 0, 0, var(--opacity-55)) !important;
        border: 1px solid rgba(0, 0, 0, var(--opacity-55)) !important;
        box-shadow: var(--shadow-navbar-dark) !important;
    }
}


/* ============================================
 * 关闭毛玻璃模糊效果 - Banner模式
 * ============================================ */
body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"][data-enable-blur="false"]>div,
body:has(#banner-wrapper) #navbar[data-transparent-mode="semi"][data-enable-blur="false"].scrolled>div {
    backdrop-filter: none !important;
}

body:has(#banner-wrapper) #navbar[data-transparent-mode="full"][data-enable-blur="false"]>div,
body:has(#banner-wrapper) #navbar[data-transparent-mode="full"][data-enable-blur="false"].scrolled>div {
    backdrop-filter: none !important;
}

body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-enable-blur="false"]>div,
body:has(#banner-wrapper) #navbar[data-transparent-mode="semifull"][data-enable-blur="false"].scrolled>div {
    backdrop-filter: none !important;
}


/* 调整下拉菜单和浮动面板的背景透明度 */
/* 亮色主题 */
#banner-wrapper~* .dropdown-content,
#banner-wrapper~* .float-panel,
body:has(#banner-wrapper) .dropdown-content,
body:has(#banner-wrapper) .float-panel,
body.wallpaper-transparent .dropdown-content,
body.wallpaper-transparent .float-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* 暗色主题 */
:root.dark #banner-wrapper~* .dropdown-content,
:root.dark #banner-wrapper~* .float-panel,
:root.dark body:has(#banner-wrapper) .dropdown-content,
:root.dark body:has(#banner-wrapper) .float-panel,
:root.dark body.wallpaper-transparent .dropdown-content,
:root.dark body.wallpaper-transparent .float-panel {
    background: rgba(23, 23, 23, 0.95) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
 * 全宽导航栏适配 (Full Width Navbar)
 * 确保在开启全宽模式时覆盖所有圆角和宽度限制
 * 针对所有模式（Banner模式、壁纸模式、透明模式）统一去除圆角
 * 使用高优先级选择器确保覆盖原主题样式
 * 仅在桌面端 (min-width: 1024px) 生效，移动端保留圆角
 * ============================================ */
@media (min-width: 1024px) {
    #navbar-wrapper #navbar[data-full-width="true"] > div,
    body:has(#banner-wrapper) #navbar-wrapper #navbar[data-full-width="true"] > div,
    body.wallpaper-transparent #navbar-wrapper #navbar[data-full-width="true"] > div,
    #navbar-wrapper #navbar[data-full-width="true"].scrolled > div {
        border-radius: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

/* ============================================
 * 小于1200px时隐藏导航栏菜单图标
 * ============================================ */
@media (max-width: 1199px) {
    .navbar-icon {
        display: none !important;
    }
}