feat: 添加快捷导航按钮 🔗

- 右上角添加思源笔记/Gitea/NocoDB快捷入口
- 悬浮设计,支持暗黑模式
- 移动端自适应布局
This commit is contained in:
root
2026-03-11 22:58:42 +08:00
parent 6a13ac9943
commit 54c05ed026
2 changed files with 139 additions and 0 deletions

View File

@@ -188,6 +188,138 @@ h1 {
50% { opacity: 0.5; }
}
/* 快捷导航栏 */
.quick-nav {
position: fixed;
top: 15px;
right: 80px;
display: flex;
gap: 10px;
z-index: 99;
}
.nav-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
color: #333;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
white-space: nowrap;
}
[data-theme="dark"] .nav-btn {
background: rgba(40, 40, 60, 0.9);
color: #e0e0e0;
}
.nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .nav-btn:hover {
background: rgba(60, 60, 80, 0.95);
}
/* 移动端导航 */
@media (max-width: 600px) {
.quick-nav {
position: absolute;
top: auto;
bottom: -60px;
right: 50%;
transform: translateX(50%);
background: rgba(255, 255, 255, 0.95);
padding: 10px 15px;
border-radius: 25px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .quick-nav {
background: rgba(40, 40, 60, 0.95);
}
.nav-btn {
padding: 6px 10px;
font-size: 12px;
}
}
/* 快捷导航栏 */
.quick-nav {
position: fixed;
top: 15px;
right: 80px;
display: flex;
gap: 10px;
z-index: 99;
}
.nav-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
color: #333;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
white-space: nowrap;
}
[data-theme="dark"] .nav-btn {
background: rgba(40, 40, 60, 0.9);
color: #e0e0e0;
}
.nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .nav-btn:hover {
background: rgba(60, 60, 80, 0.95);
}
/* 移动端导航 */
@media (max-width: 600px) {
.quick-nav {
position: absolute;
top: auto;
bottom: -60px;
right: 50%;
transform: translateX(50%);
background: rgba(255, 255, 255, 0.95);
padding: 10px 15px;
border-radius: 25px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
[data-theme="dark"] .quick-nav {
background: rgba(40, 40, 60, 0.95);
}
.nav-btn {
padding: 6px 10px;
font-size: 12px;
}
}
/* 主题切换按钮 */
.theme-toggle {
position: absolute;