starlight-apk/NebulaShell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

对网页CSS进行重构

Browse Source
This commit is contained in:
Falck
2026-04-06 17:03:11 +08:00
parent a615b2af0f
commit 4eaf10e753
20 changed files with 951 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

275
website/css/docs.css
View File

@@ -8,7 +8,7 @@
overflow: hidden;
}
/* 顶部栏 */
/* 顶部栏 - 苹果液态玻璃 */
.docs-header {
height: 56px;
flex-shrink: 0;
@@ -16,12 +16,86 @@
align-items: center;
gap: 16px;
padding: 0 24px;
background: rgba(3, 7, 18, 0.95);
border-bottom: 1px solid var(--border);
backdrop-filter: blur(12px);
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(3, 7, 18, 0.75) 0%,
rgba(3, 7, 18, 0.6) 100%
);
backdrop-filter: blur(50px) saturate(200%);
-webkit-backdrop-filter: blur(50px) saturate(200%);
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
z-index: 100;
}
/* 汉堡菜单按钮 - 苹果风格 */
.docs-hamburger {
display: none;
width: 40px;
height: 40px;
border: none;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 100%
);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
position: relative;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.docs-hamburger:hover {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.12) 0%,
rgba(255, 255, 255, 0.06) 100%
);
border-color: rgba(255, 255, 255, 0.2);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.docs-hamburger-line {
position: absolute;
left: 50%;
width: 20px;
height: 2px;
background: var(--text-secondary);
border-radius: 1px;
transform: translateX(-50%);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.docs-hamburger-line:nth-child(1) { top: 14px; }
.docs-hamburger-line:nth-child(2) { top: 19px; }
.docs-hamburger-line:nth-child(3) { top: 24px; }
/* 汉堡菜单激活状态 - 变为 X */
.docs-hamburger.is-active .docs-hamburger-line:nth-child(1) {
top: 19px;
transform: translateX(-50%) rotate(45deg);
}
.docs-hamburger.is-active .docs-hamburger-line:nth-child(2) {
opacity: 0;
transform: translateX(-50%) scaleX(0);
}
.docs-hamburger.is-active .docs-hamburger-line:nth-child(3) {
top: 19px;
transform: translateX(-50%) rotate(-45deg);
}
.docs-header-title {
display: flex;
align-items: center;
@@ -74,14 +148,42 @@
overflow: hidden;
}
/* 左侧导航 */
/* 左侧导航 - 苹果液态玻璃 */
.docs-sidebar {
width: 260px;
flex-shrink: 0;
background: rgba(2, 5, 16, 0.6);
border-right: 1px solid var(--border);
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(2, 5, 16, 0.65) 0%,
rgba(2, 5, 16, 0.5) 100%
);
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
padding: 20px 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 移动端遮罩层 */
.docs-sidebar-overlay {
display: none;
}
/* 液态玻璃效果 - 通用类 */
.liquid-glass {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.liquid-glass-strong {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.docs-nav-section {
@@ -126,7 +228,7 @@
font-family: 'JetBrains Mono', monospace;
}
/* 左下角固定按钮 */
/* 左下角固定按钮 - 苹果液态玻璃 */
.docs-wiki-btn {
position: fixed;
bottom: 24px;
@@ -135,21 +237,39 @@
align-items: center;
gap: 8px;
padding: 12px 20px;
background: linear-gradient(135deg, var(--cyan), var(--blue));
border: none;
border-radius: 12px;
/* 苹果液态玻璃按钮 */
background: linear-gradient(
135deg,
rgba(6, 182, 212, 0.8) 0%,
rgba(59, 130, 246, 0.7) 100%
);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
z-index: 200;
box-shadow: 0 4px 20px rgba(6, 182, 212, 0.3);
transition: all 0.2s;
box-shadow:
0 8px 24px rgba(6, 182, 212, 0.3),
0 2px 8px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.docs-wiki-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(6, 182, 212, 0.4);
transform: translateY(-2px) scale(1.05);
background: linear-gradient(
135deg,
rgba(6, 182, 212, 0.9) 0%,
rgba(59, 130, 246, 0.8) 100%
);
box-shadow:
0 12px 32px rgba(6, 182, 212, 0.4),
0 4px 12px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.docs-wiki-btn svg {
@@ -282,7 +402,130 @@
}
@media (max-width: 768px) {
.docs-sidebar { display: none; }
/* 显示汉堡菜单按钮 */
.docs-hamburger {
display: block;
}
/* 隐藏桌面端面包屑 */
.docs-header-breadcrumb {
display: none;
}
/* 侧边栏变为滑出式 - 苹果液态玻璃 */
.docs-sidebar {
position: fixed;
top: 56px;
left: 0;
bottom: 0;
width: 280px;
z-index: 200;
transform: translateX(-100%);
/* 苹果液态玻璃 */
background: linear-gradient(
135deg,
rgba(2, 5, 16, 0.85) 0%,
rgba(2, 5, 16, 0.75) 100%
);
backdrop-filter: blur(60px) saturate(220%);
-webkit-backdrop-filter: blur(60px) saturate(220%);
border-right: 1px solid rgba(255, 255, 255, 0.15);
box-shadow:
10px 0 40px rgba(0, 0, 0, 0.3),
0 0 1px rgba(255, 255, 255, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* 侧边栏激活状态 */
.docs-sidebar.is-open {
transform: translateX(0);
}
/* 遮罩层 */
.docs-sidebar-overlay {
display: block;
position: fixed;
inset: 0;
top: 56px;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 150;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.docs-sidebar-overlay.is-visible {
opacity: 1;
pointer-events: auto;
}
.docs-content { padding: 24px 20px 100px; }
.docs-wiki-btn span { display: none; }
/* 移动端顶部栏 */
.docs-header {
padding: 0 16px;
height: 56px;
}
.docs-header-title {
font-size: 14px;
}
.docs-header-breadcrumb {
font-size: 12px;
}
/* 移动端内容区 */
.docs-content h1 {
font-size: 24px;
}
.docs-content h2 {
font-size: 18px;
}
.docs-content h3 {
font-size: 16px;
}
.docs-content p,
.docs-content li {
font-size: 14px;
}
.docs-content pre {
padding: 12px 16px;
font-size: 12px;
}
.docs-content table {
font-size: 13px;
overflow-x: auto;
display: block;
}
/* 底部固定按钮只显示图标 */
.docs-wiki-btn {
bottom: 16px;
left: 16px;
padding: 12px;
border-radius: 50%;
width: 48px;
height: 48px;
justify-content: center;
}
}
@media (max-width: 480px) {
.docs-content {
padding: 20px 16px 100px;
}
.docs-content h1 {
font-size: 22px;
}
.docs-content h2 {
font-size: 17px;
}
.docs-content pre {
font-size: 11px;
}
}