more modules

bar/bar.css

@@ -181,3 +181,45 @@ tooltip {
 tooltip>* {
     padding: 2px 4px
 }
+
+/* Vinyl button styling */
+#vinyl-button {
+    padding: 0px 8px;
+    transition: padding 0.05s steps(8);
+    background-color: rgba(180, 180, 180, 0.2);
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+/* Active state styling */
+.active #vinyl-button {
+    background-color: rgba(108, 158, 175, 0.7);
+    padding: 0px 32px;
+}
+
+/* Icon styling */
+#vinyl-icon {
+    color: #555555;
+    min-width: 36px;
+}
+
+/* Label styling */
+#vinyl-label {
+    color: #333333;
+}
+
+/* Active state changes for icon and label */
+.active #vinyl-icon,
+.active #vinyl-label {
+    color: var(--pink);
+    padding: 0px 32px;
+}
+
+/* Hover effect */
+#vinyl-button:hover {
+    background-color: rgba(180, 180, 180, 0.4);
+}
+
+.active #vinyl-button:hover {
+    background-color: rgba(108, 158, 175, 0.9);
+}