sidebar: add volume mixer

.config/ags/scss/_common.scss

@@ -1,7 +1,3 @@
-// * {
-//     border: 1px solid $onSurfaceVariant; // Debugging
-// }
-
 * {
     selection {
         background-color: $secondary;
@@ -197,8 +193,7 @@ popover {
     color: $onSecondaryContainer;
 }
 
-.multipleselection-container {
-}
+.multipleselection-container {}
 
 .multipleselection-btn {
     @include small-rounding;
@@ -277,8 +272,8 @@ popover {
 .tab-icon {
     @include element_decel;
     @include full-rounding;
-    min-width: 2.182rem;
-    min-height: 2.182rem;
+    min-width: 2.25rem;
+    min-height: 2.25rem;
     font-size: 1.406rem;
     color: $onSurface;
 }
@@ -288,6 +283,23 @@ popover {
     color: $onSecondaryContainer;
 }
 
+.tab-icon-expandable {
+    transition: 0ms;
+    @include full-rounding;
+    min-width: 2.25rem;
+    min-height: 2.25rem;
+    font-size: 1.406rem;
+    color: $onSurface;
+    padding: 0rem;
+}
+
+.tab-icon-expandable-active {
+    background-color: $secondaryContainer;
+    color: $onSecondaryContainer;
+    padding: 0rem 0.545rem;
+    min-width: 9.545rem;
+}
+
 widget {
     @include small-rounding;
-}
+}

.config/ags/scss/_lib_mixins.scss

@@ -1,6 +1,7 @@
 // Common colors
 $hovercolor: $surfaceContainerHigh;
 $activecolor: $surfaceContainerHighest;
+$rounding_verysmall: 0.477rem;
 $rounding_small: 0.818rem;
 $rounding_mediumsmall: 0.955rem;
 $rounding_medium: 1.159rem;

.config/ags/scss/_sidebars.scss

@@ -260,7 +260,7 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
     @include full-rounding;
     @include element_decel;
     padding: 0rem 0.682rem;
-    background-color: $surfaceContainerHigh;
+    background-color: $layer2;
     color: $onSurface;
 }
 
@@ -278,7 +278,7 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
     @include element_decel;
     min-width: 2.045rem;
     min-height: 2.045rem;
-    background-color: $surfaceContainerHigh;
+    background-color: $layer2;
     color: $outline;
 }
 
@@ -326,7 +326,7 @@ $sidebar_chat_textboxareaColor: mix($onSurfaceVariant, $surfaceVariant, 40%);
 .sidebar-todo-new {
     @include full-rounding;
     @include element_decel;
-    background-color: $surfaceContainerHigh;
+    background-color: $layer2;
     color: $onSurfaceVariant;
     margin: 0.341rem;
     padding: 0.205rem 0.545rem;
@@ -492,7 +492,7 @@ $colorpicker_rounding: 0.341rem;
     padding: 0.341rem;
 }
 
-.sidebar-chat-apiswitcher {
+.sidebar-icontabswitcher {
     @include full-rounding;
     @include group-padding;
     background-color: $layer1;
@@ -517,7 +517,7 @@ $colorpicker_rounding: 0.341rem;
 
 .sidebar-chat-textarea {
     @include normal-rounding;
-    background-color: $surfaceContainerHigh;
+    background-color: $layer1;
     color: $onSurfaceVariant;
     padding: 0.682rem;
 }
@@ -709,7 +709,7 @@ $colorpicker_rounding: 0.341rem;
 
 .sidebar-chat-chip-action {
     @include element_decel;
-    background-color: $surfaceContainerHigh;
+    background-color: $layer2;
     color: $onSurfaceVariant;
 }
 
@@ -731,7 +731,7 @@ $colorpicker_rounding: 0.341rem;
     @include element_decel;
     @include small-rounding;
     padding: 0.341rem 0.477rem;
-    background-color: $surfaceContainerHigh;
+    background-color: $layer3;
     color: $onSurfaceVariant;
 }
 
@@ -845,3 +845,37 @@ $waifu_image_overlay_transparency: 0.7;
     @include element_decel;
     margin: 0.545rem;
 }
+
+.sidebar-volmixer-stream {
+    // @include normal-rounding;
+    // background-color: $layer2;
+    // color: $onLayer2;
+    border-bottom: 0.068rem solid $outlineVariant;
+    padding: 0.682rem;
+}
+
+.sidebar-volmixer-stream-appicon {
+    font-size: 3.273rem;
+}
+
+.sidebar-volmixer-stream-slider {
+    trough {
+        border-radius: $rounding_verysmall;
+        min-height: 1.364rem;
+        min-width: 1.364rem;
+        background-color: $secondaryContainer;
+    }
+
+    highlight {
+        border-radius: $rounding_verysmall;
+        min-height: 1.364rem;
+        min-width: 1.364rem;
+        background-color: $primary;
+    }
+
+    slider {
+        border-radius: $rounding_verysmall;
+        min-height: 1.364rem;
+        min-width: 1.364rem;
+    }
+}

.config/ags/scss/main.scss

@@ -38,4 +38,4 @@
     border-radius: 0rem;
     border-bottom-right-radius: $rounding_large;
     border: 0rem solid;
-}
+}