feat(ui): implement sidebar toggle and improve styling

- Add toggle functionality for sidebar with smooth animation
- Update color scheme and scrollbar styling
- Center search results and improve avatar icon display
- Remove duplicate video entry from data
This commit is contained in:
2026-02-02 01:11:09 +08:00
parent caca52ef6a
commit 62d3b28f2d
2 changed files with 52 additions and 27 deletions

View File

@@ -3,6 +3,8 @@
margin: 0;
padding: 0;
box-sizing: border-box;
scrollbar-color: #000000 #000000;
scrollbar-width: auto;
}
body {
@@ -26,7 +28,7 @@ body {
justify-content: space-between;
padding: 0 16px;
height: 56px;
background-color: #202020;
background-color: #000000;
border-bottom: 1px solid #303030;
position: sticky;
top: 0;
@@ -165,10 +167,18 @@ body {
/* 侧边栏样式 */
.sidebar {
width: 240px;
background-color: #202020;
background-color: #000000;
border-right: 1px solid #303030;
overflow-y: auto;
flex-shrink: 0;
transition: width 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.sidebar.collapsed {
width: 0;
transform: translateX(-100%);
opacity: 0;
overflow: hidden;
}
.sidebar-nav {
@@ -371,6 +381,14 @@ body {
border-radius: 50%;
margin-right: 16px;
background-color: #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-img {
font-size: 20px;
color: #666;
}
.video-details {
@@ -545,8 +563,10 @@ body {
.search-results {
position: fixed;
top: 56px;
left: 0;
right: 0;
left: 50%;
transform: translateX(-55%);
width: 100%;
max-width: 640px;
background-color: #202020;
border-bottom: 1px solid #303030;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
@@ -691,4 +711,23 @@ body {
.shorts-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* 滚动条样式 - Webkit浏览器 */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background-color: #000000;
}
::-webkit-scrollbar-thumb {
background-color: #000000;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #000000;
}