/* Import local iconfont glyph classes (from source/icons/) */ @import url('/icons/iconfont.css'); /* ================== 核心样式 ================== */ /* 使用 CSS 变量管理字体 */ :root { --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-heading: Georgia, "Times New Roman", serif; } /* 菜单字体 */ div#menus { font-family: var(--font-main); } /* 站点标题 */ h1#site-title { font-family: var(--font-heading); font-size: 2.5em !important; /* 适当减小大小 */ margin-bottom: 0.5rem; } /* 内容标题 */ a.article-title, a.blog-slider__title, a.categoryBar-list-link, h1.post-title { font-family: var(--font-heading); font-weight: 600; } /* 图标字体 */ .iconfont { font-family: "iconfont" !important; font-size: 1em; /* 调整为合理大小 */ font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Ensure iconfont icons are visible even if the theme's fonts-loaded class isn't on */ body:not(.fonts-loaded) .iconfont { visibility: visible !important; } /* Ensure pseudo-elements use the icon font */ .iconfont:before, .iconfont::before { font-family: "iconfont" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; } /* ================== 布局样式 ================== */ /* 卡片透明效果 */ #recent-posts>.recent-post-item, #aside-content .card-widget, div#post, div#page, div#archive, div#tag, div#category { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); /* 添加毛玻璃效果 */ border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } /* ================== 夜间模式 ================== */ [data-theme="dark"] { /* 文章卡片 */ #recent-posts>.recent-post-item, .card-widget, div#post, div#tag, div#archive, div#page, div#category { background: rgba(18, 18, 18, 0.85) !important; } /* 滚动条 */ ::-webkit-scrollbar-thumb { background-color: #5a7aff; } } /* ================== 全局样式 ================== */ /* 页脚透明 */ #footer { background: transparent !important; } /* 头图透明 */ #page-header { background: transparent !important; } /* 滚动条优化 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background-color: #3b70fc; border-radius: 4px; } /* 右侧按钮 */ #rightside>div>button { border-radius: 8px; transition: transform 0.2s ease; } #rightside>div>button:hover { transform: scale(1.05); } /* ================== 精简移除部分 ================== */ /* 以下内容已移除： 1. 番剧相关样式 (.bangumi-*) 2. Artitalk 图标样式 3. 错误页面样式 (#error-wrap, #body-wrap.error) 4. 音乐播放器特殊样式 5. 重复的夜间模式设置 */ /* ================== 分类网格布局（从 custom.styl 转为 CSS，确保编译后可用） ================== */ .category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .category-card { background: rgba(255, 255, 255, 0.85); border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); padding: 1.2rem; text-align: center; transition: transform 0.3s ease; } .category-card:hover { transform: translateY(-6px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); } .category-link { color: #333; text-decoration: none; } .card-icon { font-size: 2.4rem; margin-bottom: 0.5rem; color: #0078e7; } .card-name { font-weight: bold; font-size: 1.2rem; margin-bottom: 0.3rem; } .card-count { font-size: 0.95rem; color: #666; } /* ============ 导航栏布局与间距调整 ============ */ /* 让导航整体使用 flex，便于控制左右占比 */ #nav { display: flex; align-items: center; } /* 左侧站点信息占比 40% */ #nav>#blog-info { flex: 0 0 40%; max-width: 40%; padding-right: 12px; } /* 右侧菜单占比 60% */ #nav>#menus { display: flex !important; align-items: center !important; flex: 0 0 60% !important; max-width: 60% !important; justify-content: flex-start !important; } /* ============ 导航外观（不透明）与菜单项背景 ============ */ /* 导航栏整体不透明，带轻微阴影，使内容更清晰 */ #nav { background: rgba(255, 255, 255, 0.98) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important; backdrop-filter: none !important; } /* 菜单项统一背景与圆角，视觉更和谐 */ #nav .menus_items .menus_item>a.site-page, #nav .menus_items .menus_item>span.site-page { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 6px 12px !important; border-radius: 8px !important; background: rgba(0, 0, 0, 0.03) !important; color: var(--font-color) !important; transition: background .18s ease, color .18s ease, transform .12s ease; } /* 鼠标悬停与激活态 */ #nav .menus_items .menus_item>a.site-page:hover, #nav .menus_items .menus_item>span.site-page:hover, #nav .menus_items .menus_item.active>a.site-page { background: rgba(0, 0, 0, 0.06); transform: translateY(-1px); } /* 子菜单保持原有样式，但稍微微调颜色以跟主菜单协调 */ #nav .menus_items .menus_item .menus_item_child a.site-page.child { background: transparent !important; padding: 6px 12px !important; } /* 暗色主题覆盖：导航变深色，菜单项颜色与 hover 调整 */ [data-theme="dark"] #nav { background: rgba(18, 18, 18, 0.96) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); } [data-theme="dark"] #nav .menus_items .menus_item>a.site-page, [data-theme="dark"] #nav .menus_items .menus_item>span.site-page { background: rgba(255, 255, 255, 0.02); color: var(--font-color) !important; } [data-theme="dark"] #nav .menus_items .menus_item>a.site-page:hover, [data-theme="dark"] #nav .menus_items .menus_item>span.site-page:hover { background: rgba(255, 255, 255, 0.04); } /* 在较窄屏幕保持可用性，去掉圆角/缩小内边距 */ @media (max-width: 768px) { #nav .menus_items .menus_item>a.site-page, #nav .menus_items .menus_item>span.site-page { padding: 6px 8px; border-radius: 6px; } } /* 让菜单项等分右侧宽度，并居中其内容 */ #nav .menus_items { display: flex; width: 100%; gap: 0; /* 使用 flex 等分所以不需要 gap */ } #nav .menus_items .menus_item { flex: 1 1 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; padding-left: 0 !important; /* 覆盖主题默认 padding */ } /* 子菜单（dropdown）保持绝对定位，不影响父项等分布局 */ #nav .menus_items .menus_item .menus_item_child { left: auto; right: 0; } /* 修复：确保下拉菜单不会被父容器裁切或盖住 */ /* 允许 header 和 nav 溢出显示下拉 */ #page-header, #nav { overflow: visible !important; } /* 提升子菜单层级，避免被侧栏或其他固定元素覆盖 */ #nav .menus_items .menus_item .menus_item_child { z-index: 99999 !important; position: absolute !important; top: 100% !important; /* 以父元素底部为基准 */ right: 0 !important; left: auto !important; display: block; /* 当 JS/hover 触发时保持显示 */ white-space: nowrap !important; } /* 当折叠或在移动端回退时仍保证不裁切 */ @media (max-width: 768px) { #page-header, #nav { overflow: visible !important; } #nav .menus_items .menus_item .menus_item_child { position: static !important; display: none !important; z-index: 9999 !important; } } /* 小屏或折叠时可回退到原始展示 */ @media (max-width: 768px) { #nav>#blog-info, #nav>#menus { flex: 0 0 auto; max-width: none; } #nav .menus_items .menus_item { flex: 0 0 auto; } } /* Iconfont helpers: make sure icons in menu have spacing and vertical alignment */ #nav .menus_item>a .iconfont { margin-right: 8px; /* spacing between icon and text */ vertical-align: middle; font-size: 1.1em; display: inline-block; } /* If you add icons as pseudo-elements (from iconfont.css), ensure their container doesn't collapse */ .iconfont-inline { display: inline-block; line-height: 1; vertical-align: middle; } /* High-specificity visibility and font rules for nav icons */ #nav .menus_items .menus_item i.iconfont:before, #nav .menus_items .menus_item i.iconfont::before { font-family: "iconfont" !important; visibility: visible !important; opacity: 1 !important; speak: none !important; font-style: normal !important; font-weight: normal !important; line-height: 1 !important; } /* Prevent duplicate icons: hide ::after for iconfont in nav menus (only use ::before) */ #nav .menus_items .menus_item i.iconfont::after, #nav .menus_items .menus_item i.iconfont:after { content: none !important; display: none !important; visibility: hidden !important; } /* Also ensure Font Awesome pseudo-elements don't override our icon slots */ #nav .menus_items .menus_item i.iconfont.fas:before, #nav .menus_items .menus_item i.iconfont.fas::before { /* prefer iconfont for our icon classes */ font-family: "iconfont" !important; } /* Fix: dropdowns should be hidden by default and shown on hover/click */ #nav .menus_items .menus_item .menus_item_child { display: none !important; /* hide dropdown by default */ opacity: 0 !important; visibility: hidden !important; } /* Show dropdown when parent menu item is hovered or has .open class (JS may toggle .open on click) */ #nav .menus_items .menus_item:hover>.menus_item_child, #nav .menus_items .menus_item.open>.menus_item_child { display: block !important; opacity: 1 !important; visibility: visible !important; } /* Keep mobile behaviour: when viewport is small the menu child remains static/hidden until toggled by JS */ @media (max-width: 768px) { #nav .menus_items .menus_item .menus_item_child { position: static !important; display: none !important; z-index: 9999 !important; } #nav .menus_items .menus_item.open>.menus_item_child { display: block !important; } }