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:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user