Files
handsomezhuzhu.github.io/docs/.vitepress/theme/style.scss

110 lines
2.6 KiB
SCSS

/* 引入 LXGW WenKai 字体 */
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@latest/style.css');
/* 全局字体覆盖 */
:root {
--vp-font-family-base: 'LXGW WenKai', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.VPHome {
// 定义遮罩样式
background: radial-gradient(ellipse,
rgba(var(--bg-gradient-home), 0.53) 0%,
rgba(var(--bg-gradient-home), 0) 2000%);
// 自定义首页背景图
&::before {
display: none;
// background-size: cover;
// // 默认是暗色模式的背景
// background-image: url(/bg.webp);
}
}
// 亮色模式下切换背景
// html:not(.dark) .VPHome::before {
// background-image: url(/bgw.webp);
// }
.blog-item .pin.pin::before {
// 修改颜色
background-image: linear-gradient(#1E90FF, #1E90FF);
}
/* 友链描述支持多行 */
.friend-list li .des {
white-space: pre-wrap !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
text-overflow: ellipsis !important;
line-height: 1.4 !important;
height: auto !important;
overflow: hidden !important;
font-size: 13px !important;
}
/* 增加间距,让文字靠右一点 */
.friend-list li .info-wrapper {
padding-left: 16px !important;
}
.friend-list li {
padding: 0 4px !important;
}
/* 首页主标题放大 */
.VPHome h1 .name {
font-size: 4.2rem !important;
@media (max-width: 768px) {
font-size: 2.2rem !important;
}
}
/* 美化文章底部的 TIP 提示块和标题图标 */
.vp-doc .custom-block.tip {
border: 1px solid rgba(25, 118, 210, 0.16);
background:
linear-gradient(135deg, rgba(25, 118, 210, 0.08), rgba(255, 255, 255, 0.92));
border-radius: 16px;
box-shadow: 0 10px 24px rgba(25, 118, 210, 0.08);
}
.dark .vp-doc .custom-block.tip {
background:
linear-gradient(135deg, rgba(77, 171, 247, 0.12), rgba(17, 24, 39, 0.9));
border-color: rgba(77, 171, 247, 0.22);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.vp-doc .custom-block.tip .custom-block-title {
display: flex;
align-items: center;
gap: 10px;
color: #1565c0;
font-weight: 700;
letter-spacing: 0.02em;
}
.dark .vp-doc .custom-block.tip .custom-block-title {
color: #74c0fc;
}
.vp-doc .custom-block.tip .custom-block-title::before {
content: "i";
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
background: linear-gradient(135deg, #1e88e5, #42a5f5);
color: #fff;
font-size: 13px;
font-weight: 700;
box-shadow: 0 6px 14px rgba(30, 136, 229, 0.28);
}