Add css var for idle visualizer bar color (#985)

lukasIO · web-flow · commit 6609b09290b2 · 2024-09-26T15:14:38.000+02:00
diff --git a/.changeset/sixty-tips-shout.md b/.changeset/sixty-tips-shout.md
@@ -0,0 +1,5 @@
+---
+"@livekit/components-styles": patch
+---
+
+Add css var for idle visualizer bar color
diff --git a/packages/styles/scss/components/participant/_audio-visualizer.scss b/packages/styles/scss/components/participant/_audio-visualizer.scss
@@ -43,7 +43,7 @@ deprecated
     height: 100%;
     width: var(--va-bar-width, 12px);
     border-radius: var(--va-bar-border-radius, 32px);
-    background-color: rgba(255, 255, 255, 0.05);
+    background-color: var(--va-bar-bg, rgba(255, 255, 255, 0.05));
     transition: background-color 0.25s ease-out;
     // transition: all 0.0s ease-out   // commented out as the transition duration is 0
   }

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@livekit/components-styles": patch
 +---
++
 +Add css var for idle visualizer bar color
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ deprecated`
`43`	`43`	`height: 100%;`
`44`	`44`	`width: var(--va-bar-width, 12px);`
`45`	`45`	`border-radius: var(--va-bar-border-radius, 32px);`
`46`		`- background-color: rgba(255, 255, 255, 0.05);`
	`46`	`+ background-color: var(--va-bar-bg, rgba(255, 255, 255, 0.05));`
`47`	`47`	`transition: background-color 0.25s ease-out;`
`48`	`48`	`// transition: all 0.0s ease-out // commented out as the transition duration is 0`
`49`	`49`	`}`