97 lines
1.9 KiB
CSS
97 lines
1.9 KiB
CSS
.sidebar-left {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar-tabs {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--color-border);
|
||
background-color: var(--color-bg-tertiary);
|
||
padding: 0 var(--spacing-sm);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tab-button {
|
||
flex: 1;
|
||
padding: var(--spacing-md) var(--spacing-sm);
|
||
background: none;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
cursor: pointer;
|
||
transition: all var(--transition-normal);
|
||
font-size: 13px;
|
||
color: var(--color-text-secondary);
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--spacing-xs);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.tab-button:hover {
|
||
background-color: var(--color-bg-elevated);
|
||
color: var(--color-text-primary);
|
||
}
|
||
|
||
.tab-button.active {
|
||
color: var(--color-accent);
|
||
font-weight: 600;
|
||
border-bottom-color: var(--color-accent);
|
||
background: var(--color-accent-ultra-light);
|
||
}
|
||
|
||
.sidebar-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0; /* ✅ 移除padding，滚动条作为间隔 */
|
||
min-height: 0;
|
||
}
|
||
|
||
/* ✅ 美化滚动条 - 符合主题 */
|
||
.sidebar-content::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
.sidebar-content::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.sidebar-content::-webkit-scrollbar-thumb {
|
||
background: var(--color-scrollbar);
|
||
border-radius: 4px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.sidebar-content::-webkit-scrollbar-thumb:hover {
|
||
background: var(--color-scrollbar-hover);
|
||
}
|
||
|
||
/* Tab placeholder for empty states */
|
||
.tab-placeholder {
|
||
padding: var(--spacing-lg);
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.tab-placeholder h3 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.tab-placeholder p {
|
||
font-size: 0.85rem;
|
||
line-height: 1.5;
|
||
}
|