pixelpeeping

frontend/src/styles/sidebar/sidebar.css

@@ -13,7 +13,7 @@
   align-items: center;
   gap: 0.22rem;
   padding: 0.32rem 0.48rem;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   cursor: pointer;
   color: inherit;
   transition: background 0.12s ease, color 0.12s ease;
@@ -83,12 +83,12 @@
   transform: translateY(-50%);
   display: flex;
   gap: 0;
+  margin-right: 0.3rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.12s ease;
   background-color: var(--surface-overlay);
-  border-radius: 8px;
-  padding: 0 0.18rem;
+  border-radius: 0.2rem;
 }
 
 .folder-row__actions .icon-button {
@@ -99,6 +99,7 @@
 .folder-row:focus-within .folder-row__actions {
   opacity: 1;
   pointer-events: auto;
+  background-color: var(--surface-overlay);
 }
 
 .folder-children {
@@ -304,6 +305,7 @@
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
+  text-align: left;
 }
 
 .menu__check-slot {
@@ -326,15 +328,18 @@
   font-size: 0.85rem;
 }
 
-.menu__footer {
-  border-top: 1px solid var(--border-muted, var(--border));
+.menu__wrapper {
   padding: 0.35rem 0.5rem;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 }
 
-.menu--simple .menu__footer {
+.menu__section {
+  border-top: 1px solid var(--border-muted, var(--border));
+}
+
+.menu__section:first-of-type {
   border-top: none;
 }
 
@@ -396,6 +401,20 @@
   transition: background 0.15s ease, color 0.15s ease;
 }
 
+.menu__button .menu__check-slot {
+  width: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+}
+
+.menu__button.active {
+  font-weight: 600;
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+
 .menu__button:hover,
 .menu__button:focus-visible {
   background: var(--sidebar-hover-bg);