.sidebar-header {
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px auto 0 auto;
width: fit-content;
min-width: 350px;
}
.sidebar-actions {
display: flex;
gap: 10px;
background: var(--primary);
}
.sidebar {
width: 100vw;
background: var(--primary);
height: auto;
position: fixed;
top: calc(2vh + var(--topbar-height));
bottom: 0;
transform: none;
max-height: none;
transition: transform var(--transition-speed);
will-change: transform;
}
.sidebar {
z-index: 10;
overflow-y: scroll;
display: block;
transform: translateX(-100%);
}
.sidebar.open {
transform: translateX(0);
}
.action-button {
background: var(--matte);
border: none;
color: var(--color);
cursor: pointer;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(5px);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1),
-3px -3px 6px rgba(255, 255, 255, 0.05);
}
.note-list {
list-style: none;
padding: 10px 0;
margin-top: 0;
}
.note-item {
padding: 15px 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background: var(--matte);
margin: 10px auto;
border-radius: 50px;
width: fit-content;
height: fit-content;
min-width: 350px;
}
.note-item:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.note-item.selected {
background-color: rgba(0, 0, 0, 0.1);
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1),
inset -2px -2px 5px rgba(255, 255, 255, 0.05);
}
.note-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 180px;
}
.note-badge {
background: var(--accent);
color: white;
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 10px;
margin-left: auto;
}
@media (max-width: 600px) {
.sidebar {
overflow-x: hidden;
}
.note-list {
flex-wrap: wrap;
}
.note-item {
width: 100%;
min-width: 200px;
padding: 18px 24px;
}
.note-list {
display: flex;
overflow-x: auto;
padding: 10px;
}
.action-button {
width: 40px;
height: 40px;
}
}