Files
UI-examples/Facebook (Gemini 3.1)/src/components/Sidebar.css
2026-03-10 20:28:48 +01:00

73 lines
1.2 KiB
CSS

.sidebar {
width: 360px;
height: calc(100vh - 56px);
overflow-y: auto;
padding: 8px;
position: sticky;
top: 56px;
}
.sidebar-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s;
}
.sidebar-item:hover {
background-color: var(--fb-hover);
}
.sidebar-item span {
font-size: 15px;
font-weight: 500;
}
.avatar-placeholder-small {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--fb-divider);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.icon-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--fb-divider);
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-divider {
border: none;
border-top: 1px solid var(--fb-divider);
margin: 8px;
}
.sidebar-title {
margin: 16px 8px 8px;
color: var(--fb-text-secondary);
font-size: 17px;
}
.shortcut-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background-color: var(--fb-blue);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}