Add transparency/opacity for queue sidebar (#231)

* add opacity

* add background for song metadata

* Add padding and border radius to opacity elements

* Remove font-weight transition on active lyrics (#233)

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>

src/renderer/features/player/components/full-screen-player-queue.tsx

@@ -41,14 +41,21 @@ const HeaderItemWrapper = styled.div`
     z-index: 2;
 `;
 
-const GridContainer = styled.div`
+interface TransparendGridContainerProps {
+    opacity: number;
+}
+
+const GridContainer = styled.div<TransparendGridContainerProps>`
+    padding: 1rem;
+    background: rgba(var(--main-bg-transparent), ${({ opacity }) => opacity}%);
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);
     grid-template-columns: 1fr;
+    border-radius: 5px;
 `;
 
 export const FullScreenPlayerQueue = () => {
-    const { activeTab } = useFullScreenPlayerStore();
+    const { activeTab, opacity } = useFullScreenPlayerStore();
     const { setStore } = useFullScreenPlayerStoreActions();
 
     const headerItems = [
@@ -73,7 +80,10 @@ export const FullScreenPlayerQueue = () => {
     ];
 
     return (
-        <GridContainer className="full-screen-player-queue-container">
+        <GridContainer
+            className="full-screen-player-queue-container"
+            opacity={opacity}
+        >
             <Group
                 grow
                 align="center"