|
|
|
|
@ -82,7 +82,49 @@
|
|
|
|
|
[data-aos] {
|
|
|
|
|
transition-property: all !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
@layer base {
|
|
|
|
|
/* ==========================================
|
|
|
|
|
1. Firefox 浏览器的滚动条支持 (极简模式)
|
|
|
|
|
========================================== */
|
|
|
|
|
html {
|
|
|
|
|
scrollbar-width: thin; /* 细滚动条 */
|
|
|
|
|
/* 滑块颜色(半透明灰) | 轨道颜色(全透明) */
|
|
|
|
|
scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ==========================================
|
|
|
|
|
2. WebKit 浏览器 (Chrome, Edge, Safari) 悬浮感设计
|
|
|
|
|
========================================== */
|
|
|
|
|
/* 整体宽度缩小，显得更精致 */
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
|
width: 5px;
|
|
|
|
|
height: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 轨道 (Track) - 设置为全透明，彻底消除突兀的边界感 */
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 滑块 (Thumb) - 默认状态 */
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
|
background: rgba(148, 163, 184, 0.4); /* Slate-400 加 40% 透明度，低调且不刺眼 */
|
|
|
|
|
border-radius: 8px; /* 圆润的胶囊形 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 滑块悬停状态 (Hover) - 鼠标放上去时，平滑过渡到您的主题绿 */
|
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
background: rgba(16, 185, 129, 0.8); /* Primary Color (#10b981) 带有轻微透明度 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 滑块按下/拖动状态 (Active) - 颜色加深 */
|
|
|
|
|
::-webkit-scrollbar-thumb:active {
|
|
|
|
|
background: rgba(5, 150, 105, 1); /* Darker Green (#059669) 实色 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body <?php body_class('no-js'); ?>>
|
|
|
|
|
|
huyuanxiang
2 weeks ago