#refactor: cleaner organisation

Added a better structure, comments, and a variable

src/styles/annotator/bucket-bar.scss

@@ -4,15 +4,9 @@
 
 // Bucket-bar styles are nested inside `.annotator-frame` to ensure they take
 // precedence over the CSS reset applied to `.annotator-frame`.
-.annotator-frame.annotator-collapsed {
-  .annotator-bucket-bar {
-    background: rgba(0, 0, 0, 0.08);
-  }
-}
-
 .annotator-frame {
   .annotator-bucket-bar {
-    background: rgb(235, 235, 235);
+    background: var.$grey-2; // When sidebar is unfolded, remove the background transparency
     pointer-events: none;
     position: absolute;
     height: 100%;
@@ -20,6 +14,11 @@
     left: -(var.$bucket-bar-width);
   }
 
+  // When the sidebar is collapsed, make the background semi-transparent so the text is visible throughout (useful for pages with tight margins)
+  &.annotator-collapsed .annotator-bucket-bar {
+    background: rgba(0, 0, 0, 0.08);
+  }
+
   .annotator-bucket-indicator {
     box-sizing: border-box;
     background: var.$white;