@require "../common/magic-theme.styl" .sidebar-category { position relative background: var(--background-color); magic-container(1.02, 30px); .category-label { margin-bottom: 10px; padding-left: 10px; font-size: 16px; font-weight: 600; &::after { content: ''; position: absolute; top: 20px; left: 20px; width: 4px; height: 20px; background: #333; } } .category-list { li.category-list-item { padding: 6px; margin-bottom: 10px; border: 1px solid var(--border-color); border-radius: 4px; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s ease; &:last-child { margin-bottom: 0; } &:hover { box-shadow: 0 0 5px var(--border-color); transform: scale(1.02); } .number { font-size: 12px; background: skyblue; border-radius: 2px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--background-color); } } } }