frontend: Update Dock toolbar styling

Author: Warchamp7

frontend/data/themes/Yami.obt

@@ -113,6 +113,7 @@
     --font_heading: calc(2.5pt * var(--font_base_value));
 
     --icon_base: calc(calc(max(2, var(--obsPadding)) * 1px) + 12px);
+    --icon_small: calc(4px + var(--font_base_value));
 
     --spacing_base: min(max(1px, calc(0.4 * var(--spacing_base_value))), 2px);
     --spacing_large: min(max(2px, calc(1px * var(--spacing_base_value))), 4px);
@@ -137,7 +138,13 @@
     --volume_slider_label: calc(var(--volume_slider_box) * 2);
 
     --scrollbar_size: 12px;
-    --settings_scrollbar_size: calc(var(--scrollbar_size) + 9px);
+    --scrollbar_handle: var(--grey4);
+    
+    --scrollbar_bg: var(--grey6);
+    --scrollbar_hover: var(--grey3);
+    --scrollbar_down: var(--grey2);
+
+    --scrollbar_border: var(--grey2);
 
     /* Inputs / Controls */
     --border_color: var(--grey4);
@@ -187,11 +194,6 @@
     --tab_border_focus: var(--button_border_focus);
     --tab_border_selected: var(--primary);
 
-    --scrollbar: var(--grey4);
-    --scrollbar_hover: var(--grey3);
-    --scrollbar_down: var(--grey8);
-    --scrollbar_border: var(--grey2);
-
     --preview_scale_width: calc(calc(var(--input_text_padding) * 3.5) * calc(var(--font_base_value) / 10));
 
     --separator_hover: var(--white1);
@@ -604,13 +606,11 @@ QListWidget QLineEdit:focus {
 /* Settings QList */
 
 OBSBasicSettings QScrollBar:vertical {
-    width: var(--settings_scrollbar_size);
-    margin-left: 9px;
+    width: var(--scrollbar_size);
 }
 
 OBSBasicSettings QScrollBar:horizontal {
-    height: var(--settings_scrollbar_size);
-    margin-top: 9px;
+    height: var(--scrollbar_size);
 }
 
 /* Settings properties view */
@@ -627,6 +627,37 @@ OBSDock > QWidget {
     border-top: none;
 }
 
+OBSDock QToolBar {
+    padding: 1px;
+    margin: 0px;
+    border-top: 1px solid var(--border_color);
+    spacing: 0;
+}
+
+OBSDock QToolBar::separator {
+    background: transparent;
+    width: var(--spacing_large);
+    border: none;
+}
+
+OBSDock QToolBar QToolButton {
+    background: transparent;
+    border: 1px solid transparent;
+    margin: 1px;
+    margin-top: 2px;
+    padding: var(--padding_large);
+    max-width: var(--icon_small);
+    max-height: var(--icon_small);
+}
+
+OBSDock QToolBar QToolButton:hover {
+    border-color: var(--grey1);
+}
+
+OBSDock QToolBar QToolButton:disabled {
+    background: var(--grey7);
+}
+
 #transitionsFrame {
     padding: var(--padding_container);
 }
@@ -674,7 +705,7 @@ QDockWidget::float-button:pressed {
     padding: 1px -1px -1px 1px;
 }
 
-QScrollArea {
+QAbstractScrollArea {
     border-radius: var(--border_radius);
 }
 
@@ -714,9 +745,10 @@ QGroupBox::title {
 /* ScrollBars */
 
 QScrollBar {
-    background-color: var(--grey6);
+    background-color: var(--scrollbar_bg);
     margin: 0px;
     border-radius: var(--border_radius);
+    border: 1px solid var(--grey6);
 }
 
 ::corner {
@@ -765,10 +797,10 @@ QScrollBar::sub-page:horizontal {
 }
 
 QScrollBar::handle {
-    background-color: var(--scrollbar);
+    background-color: var(--scrollbar_handle);
     margin: 2px;
     border-radius: var(--border_radius_small);
-    border: 1px solid var(--scrollbar);
+    border: 1px solid var(--scrollbar_handle);
 }
 
 QScrollBar::handle:hover {
@@ -794,6 +826,32 @@ QScrollBar::handle:disabled {
     border-color: transparent;
 }
 
+OBSDock QListWidget {
+    padding: 0;
+}
+
+OBSDock QListWidget::item {
+    margin: 0 var(--spacing_base);
+}
+
+OBSDock QScrollBar {
+    border-radius: 0;
+}
+
+OBSDock QListWidget::corner {
+    background: transparent;
+    border-top: 1px solid var(--border_color);
+    border-left: 1px solid var(--border_color);
+}
+
+OBSDock QScrollBar:horizontal {
+    border-top: 1px solid var(--border_color);
+}
+
+OBSDock QScrollBar:vertical {
+    border-left: 1px solid var(--border_color);
+}
+
 /* Source Context Bar */
 
 #contextContainer {
@@ -1375,7 +1433,6 @@ QSlider::handle:disabled {
 #stackedMixerArea {
     border: none;
     padding: 0px;
-    border-bottom: 1px solid #3c404b;
 }
 
 VolControl {
@@ -1410,10 +1467,6 @@ VolControl #volLabel {
 }
 
 /* Vertical Mixer */
-#stackedMixerArea QScrollBar:vertical {
-    border-left: 1px solid var(--border_color);
-}
-
 #vMixerScrollArea VolControl {
     padding: var(--padding_container) 0px var(--padding_container);
     border-right: 1px solid var(--border_color);

frontend/data/themes/Yami_Light.ovt

@@ -34,7 +34,14 @@
     --input_bg_hover: var(--grey3);
     --input_bg_focus: var(--grey3);
 
+    --button_bg_disabled: var(--grey7);
+
     --separator_hover: var(--black1);
+
+    --scrollbar_handle: var(--grey7);
+    --scrollbar_hover: var(--grey6);
+    --scrollbar_down: var(--grey8);
+    --scrollbar_border: var(--grey7);
 }
 
 VolumeMeter {

frontend/forms/OBSBasic.ui

@@ -1041,6 +1041,12 @@
         </item>
         <item>
          <widget class="QToolBar" name="scenesToolbar">
+          <property name="sizePolicy">
+           <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+            <horstretch>0</horstretch>
+            <verstretch>0</verstretch>
+           </sizepolicy>
+          </property>
           <property name="iconSize">
            <size>
             <width>16</width>
@@ -1164,6 +1170,12 @@
         </item>
         <item>
          <widget class="QToolBar" name="sourcesToolbar">
+          <property name="sizePolicy">
+           <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+            <horstretch>0</horstretch>
+            <verstretch>0</verstretch>
+           </sizepolicy>
+          </property>
           <property name="iconSize">
            <size>
             <width>16</width>
@@ -1275,7 +1287,7 @@
              <rect>
               <x>0</x>
               <y>0</y>
-              <width>323</width>
+              <width>322</width>
               <height>16</height>
              </rect>
             </property>
@@ -1361,6 +1373,12 @@
         </item>
         <item>
          <widget class="QToolBar" name="mixerToolbar">
+          <property name="sizePolicy">
+           <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+            <horstretch>0</horstretch>
+            <verstretch>0</verstretch>
+           </sizepolicy>
+          </property>
           <property name="iconSize">
            <size>
             <width>16</width>