/* source/css/custom_ui.css */
/* ==================================================
全局样式覆盖 v3.0：冰蓝(Light) vs 深灰(Dark) 自动切换
================================================== */
/* 1. 定义滚动条颜色变量 */
:root {
/* ☀️ 明亮模式 (绫波丽配色) */
--scrollbar-thumb: #b3e5fc; /* 很淡的天蓝色 */
--scrollbar-thumb-hover: #81d4fa; /* 悬停时深一点的天蓝 */
--right-btn-bg: rgba(255, 255, 255, 0.85); /* 按钮背景：半透明白 */
--right-btn-color: #29b6f6; /* 按钮图标：天蓝色 */
--right-btn-hover-bg: #29b6f6; /* 悬停背景：天蓝色 */
--right-btn-hover-color: #fff; /* 悬停图标：白 */
}
[data-theme="dark"] {
/* 🌙 暗黑模式 (Ask配色) */
--scrollbar-thumb: #666;
--scrollbar-thumb-hover: #999;
--right-btn-bg: rgba(30, 30, 30, 0.85);
--right-btn-color: #eee;
--right-btn-hover-bg: rgba(255, 255, 255, 0.9);
--right-btn-hover-color: #000;
}
/* 2. 滚动条样式应用 (WebKit) */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
background: transparent !important;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
background: transparent !important;
border-radius: 0 !important;
}
/* 滑块：应用变量 */
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb) !important;
border-radius: 4px !important;
border: 2px solid transparent !important;
background-clip: content-box !important;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover) !important;
}
/* Firefox 适配 */
html {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) transparent;
}
/* =================================================================
🎥 首页全屏视频样式 (修复版)
================================================================= */
/* 1. 扒掉 Header 的底裤：去色、去图、去伪元素 */
#page-header.full_page {
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
}
/* 这一条很重要：Butterfly 默认有一层灰色的遮罩 (::before)，必须隐形 */
#page-header.full_page::before {
background-color: transparent !important;
background-image: none !important;
opacity: 0 !important;
}
/* 2. 视频容器：撑满全屏，放在最底层 */
#home-video-container {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
z-index: -1; /* 关键：放在文字后面 */
overflow: hidden;
}
/* 3. 视频本体 */
.home-video-layer {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* 铺满不拉伸 */
transition: opacity 0.6s ease;
}
/* 4. 明暗模式切换 */
#home_video_light { opacity: 1; }
#home_video_dark { opacity: 0; }
[data-theme="dark"] #home_video_light { opacity: 0; }
[data-theme="dark"] #home_video_dark { opacity: 1; }
/* 5. 遮罩层 (可选)：加一点点黑让白字更明显 */
.home-video-mask {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.2); /* 20% 黑色遮罩 */
pointer-events: none;
}
/* =================================================================
🎥 首页全屏视频 - 永久固定版 (Fixed)
================================================================= */
/* 1. 视频容器：改为 fixed 定位，永远固定在窗口背面 */
#home-video-container {
position: fixed; /* 关键：固定定位，不随滚动条移动 */
top: 0; left: 0;
width: 100vw;
height: 100vh;
z-index: -9999; /* 放在最最底层 */
overflow: hidden;
}
/* 2. 视频本体 */
.home-video-layer {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: opacity 0.6s ease;
}
/* 3. 明暗模式切换 */
#home_video_light { opacity: 1; }
#home_video_dark { opacity: 0; }
[data-theme="dark"] #home_video_light { opacity: 0; }
[data-theme="dark"] #home_video_dark { opacity: 1; }
/* 4. 遮罩层 (可选) */
.home-video-mask {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.2);
pointer-events: none;
}
/* =================================================================
🧹 首页大扫除：清除所有白色背景块
================================================================= */
/* 1. 强制 Header 透明 */
#page-header.full_page {
background: transparent !important;
background-image: none !important;
}
#page-header.full_page::before {
display: none !important;
}
/* 2. 【核心】强制主页面的各大容器透明 */
/* 只有这样，往下滑动时才不会出现白色或蓝色的大色块 */
#web_bg, /* 网页背景 */
#page, /* 页面容器 */
#body-wrap, /* 整体包裹 */
#content-inner, /* 内容内胆 */
.layout, /* 布局层 */
#footer, /* 页脚 */
.layout > div:first-child /* 首页文章列表的直接父级 */
{
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
/* 3. 统一 Footer 渐变 (复用你之前页面的风格) */
/* 这样滑到底部时，不会很难看，而是有一个漂亮的渐变 */
#footer {
/* 浅色模式：浅蓝渐变 */
background: linear-gradient(to top, rgba(41, 182, 246, 0.4) 0%, transparent 100%) !important;
}
[data-theme="dark"] #footer {
/* 深色模式：黑色渐变 */
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%) !important;
}
/* =================================================================
💎 首页文章列表修复版 (无侧边栏 + 磨砂玻璃)
================================================================= */
/* 1. 布局调整：因为没有侧边栏，我们要限制宽度并居中 */
.layout {
display: flex;
justify-content: center; /* 居中 */
}
#recent-posts {
width: 100% !important;
max-width: 900px !important; /* 限制最大宽度，防止卡片太宽难看 */
padding: 0 20px;
margin: 0 auto; /* 确保水平居中 */
}
/* 2. 卡片容器：强制去除白底，应用磨砂玻璃 */
#recent-posts > .recent-post-item {
/* 强制背景为 15% 透明度的白 */
background: rgba(255, 255, 255, 0.15) !important;
background-color: rgba(255, 255, 255, 0.15) !important;
/* 核心磨砂效果 */
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-radius: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
/* 强制布局：左图右文 */
display: flex !important;
flex-direction: row !important;
align-items: center !important;
height: 240px !important; /* 固定高度 */
margin-bottom: 25px !important;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 3. 鼠标悬停效果 */
#recent-posts > .recent-post-item:hover {
background: rgba(255, 255, 255, 0.25) !important;
border-color: #fff !important;
transform: translateY(-5px); /* 上浮 */
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}
/* 4. 左侧封面图 */
#recent-posts > .recent-post-item .post_cover {
width: 45% !important; /* 图片宽度 */
height: 100% !important;
margin: 0 !important;
overflow: hidden;
clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); /* 斜切角设计 */
}
#recent-posts > .recent-post-item .post_cover img.post_bg {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
#recent-posts > .recent-post-item:hover .post_cover img.post_bg {
transform: scale(1.1);
}
/* 5. 右侧文字区域：强制白色 */
#recent-posts > .recent-post-item > .recent-post-info {
width: 55% !important;
padding: 0 40px !important; /* 增加内边距 */
color: #fff !important;
text-align: left !important;
}
/* 标题 */
#recent-posts > .recent-post-item .article-title {
color: #fff !important;
font-size: 1.8em !important; /* 标题大一点 */
font-weight: bold;
text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 文字阴影 */
margin-bottom: 15px;
display: block;
}
/* 摘要内容 */
#recent-posts > .recent-post-item .content {
color: rgba(255, 255, 255, 0.9) !important;
font-size: 15px;
line-height: 1.6;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 限制2行 */
overflow: hidden;
}
/* 日期标签等 */
#recent-posts > .recent-post-item .article-meta-wrap {
color: rgba(255, 255, 255, 0.8) !important;
margin-bottom: 10px;
}
#recent-posts > .recent-post-item .article-meta-wrap a,
#recent-posts > .recent-post-item .article-meta-wrap i {
color: rgba(255, 255, 255, 0.9) !important;
}
/* ====================================
🌑 深色模式适配 (Dark Mode)
==================================== */
[data-theme="dark"] #recent-posts > .recent-post-item {
background: rgba(0, 0, 0, 0.6) !important; /* 深色半透明 */
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] #recent-posts > .recent-post-item:hover {
background: rgba(0, 0, 0, 0.75) !important;
}
/* ====================================
📱 手机端适配
==================================== */
@media screen and (max-width: 768px) {
#recent-posts > .recent-post-item {
flex-direction: column !important; /* 手机上改回上下结构 */
height: auto !important;
}
#recent-posts > .recent-post-item .post_cover {
width: 100% !important;
height: 200px !important;
clip-path: none !important;
}
#recent-posts > .recent-post-item > .recent-post-info {
width: 100% !important;
padding: 20px !important;
}
}
/* =================================================================
⬇️ 首页向下箭头美化 (统一风格)
================================================================= */
/* 1. 定位与容器调整 */
#scroll-down {
bottom: 50px !important; /* 离底部稍微高一点，避免贴底 */
width: 100% !important; /* 居中确立 */
cursor: pointer !important;
z-index: 100 !important; /* 确保在视频上方 */
}
/* 2. 箭头图标样式 (核心) */
#scroll-down i {
font-size: 40px !important; /* 放大！默认可能只有 20px */
font-weight: bold !important;
color: #fff !important; /* 纯白 */
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important; /* 加阴影，防背景太亮 */
/* 覆盖默认动画，使用我们更平滑的弹跳动画 */
animation: scroll-down-bounce 1.5s infinite ease-in-out !important;
}
/* 3. 如果你想换图标形状 (可选) */
/* Butterfly 默认是 angle-down (细箭头)，这里可以改成 chevron-down (粗V型) */
#scroll-down i::before {
content: "\f078" !important; /* FontAwesome 的 Chevron Down 图标代码 */
font-family: "Font Awesome 6 Free" !important; /* 确保字体正确 */
}
/* 4. 定义弹跳动画 (呼吸感) */
@keyframes scroll-down-bounce {
0% {
transform: translateY(0);
opacity: 0.8;
}
50% {
transform: translateY(15px); /* 向下移动 15px */
opacity: 1; /* 最亮 */
}
100% {
transform: translateY(0);
opacity: 0.8;
}
}
/* =================================================================
📖 文章详情页封面美化
================================================================= */
/* 1. 调整顶部大图的高度 */
/* 默认比较矮，我们把它加高，更有沉浸感 (建议 60vh 到 100vh) */
#page-header.post-bg {
height: 60vh !important; /* 占据屏幕高度的 60% */
/* 如果你希望像首页一样全屏，就改成 100vh */
}
/* 2. 文章标题区域的美化 (磨砂玻璃岛) */
/* 把标题包裹在一个半透明的磨砂框里，防止背景太花看不清字 */
#page-header.post-bg #post-info {
bottom: 30px !important; /* 距离底部的距离 */
padding: 30px 50px !important;
width: auto !important;
max-width: 90%;
margin: 0 auto;
/* 磨砂玻璃特效 */
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
/* 3. 标题文字优化 */
#page-header.post-bg #post-info .post-title {
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
font-size: 2.5em; /* 标题加大 */
line-height: 1.2;
}
#page-header.post-bg #post-info #post-meta {
color: #eee;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
margin-top: 10px;
}
/* =================================================================
🔗 首页中央社交图标美化
================================================================= */
/* 1. 图标容器 */
#central-social-group {
margin-top: 20px; /* 与上面打字机的距离 */
display: flex;
justify-content: center;
gap: 20px; /* 图标之间的间距 */
z-index: 2; /* 确保能点击 */
position: relative;
}
/* 2. 单个图标按钮 */
.central-social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 45px; height: 45px; /* 按钮大小 */
border-radius: 50%; /* 圆形 */
background: rgba(255, 255, 255, 0.15); /* 默认半透明白底 */
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
text-decoration: none !important; /* 去掉下划线 */
}
/* 3. 图标本身 (FontAwesome) */
.central-social-icon i {
font-size: 22px;
color: #fff; /* 默认白色图标 */
transition: all 0.3s ease;
}
/* 4. 鼠标悬停特效 */
.central-social-icon:hover {
background: #fff; /* 悬停变成白底 */
transform: translateY(-5px) scale(1.1); /* 上浮变大 */
box-shadow: 0 0 15px var(--hover-color); /* 发光，颜色由 JS 传入 */
border-color: #fff;
}
/* 悬停时，图标变成品牌色 (比如B站变粉/蓝，Steam变黑) */
.central-social-icon:hover i {
color: var(--hover-color);
}
/* 5. 手机端适配：稍微调小一点 */
@media screen and (max-width: 768px) {
.central-social-icon {
width: 38px; height: 38px;
}
.central-social-icon i {
font-size: 18px;
}
}
/* =================================================================
🧑 首页头像与布局修正 (强制居中版)
================================================================= */
/* 1. 修正父容器：强制使用 Flex 列布局，让内部所有元素垂直居中 */
#site-info {
display: flex !important;
flex-direction: column !important; /* 从上到下排列 */
align-items: center !important; /* 水平居中 */
justify-content: center !important;
width: 100% !important; /* 确保容器占满宽度 */
}
/* 2. 头像样式 */
#center-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
/* 核心：即使父容器失效，这行也能保证图片居中 */
display: block !important;
margin: 0 auto 15px auto !important; /* 上 右 下(15px) 左 */
/* 装饰 */
border: 3px solid rgba(255, 255, 255, 0.5);
padding: 3px;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
transition: transform 0.8s ease-in-out, box-shadow 0.3s ease;
cursor: pointer;
}
/* 3. 悬停旋转特效 */
#center-avatar:hover {
transform: rotate(360deg) scale(1.1);
box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
border-color: #fff;
}
/* 4. 手机端适配 */
@media screen and (max-width: 768px) {
#center-avatar {
width: 100px;
height: 100px;
}
}