Merge pull request 'fix(ui): Modernize configuration dialog button styling' (#118) from fix/change-buttons into main

Reviewed-on: https://git.citron-emu.org/Citron/Emulator/pulls/118

src/citron/configuration/configure.ui

@@ -69,8 +69,6 @@
     border-left: 2px solid %%ACCENT_COLOR%%;
     }
 
-    /* All other styles remain the same... just paste this block at the top */
-
     QWidget {
     background-color: %%BACKGROUND_COLOR%%;
     color: %%TEXT_COLOR%%;
@@ -217,18 +215,31 @@
     selection-background-color: %%ACCENT_COLOR%%;
     }
 
-    QPushButton {
-    background-color: %%ACCENT_COLOR%%;
-    color: #ffffff;
-    border: none;
-    padding: 10px 20px;
+    QPushButton, QToolButton {
+    background-color: transparent;
+    color: %%TEXT_COLOR%%;
+    border: 2px solid %%ACCENT_COLOR%%;
+    padding: 5px 15px;
     border-radius: 6px;
     font-weight: bold;
     min-height: 20px;
     }
 
-    QPushButton:hover {
-    background-color: %%ACCENT_COLOR_HOVER%%;
+    QPushButton:hover, QToolButton:hover {
+    color: %%ACCENT_COLOR_HOVER%%;
+    border-color: %%ACCENT_COLOR_HOVER%%;
+    }
+
+    QPushButton:pressed, QToolButton:pressed {
+    color: #ffffff;
+    background-color: %%ACCENT_COLOR_PRESSED%%;
+    border-color: %%ACCENT_COLOR_PRESSED%%;
+    }
+
+    QPushButton:disabled, QToolButton:disabled {
+    background-color: %%TERTIARY_BG_COLOR%%;
+    border-color: %%TERTIARY_BG_COLOR%%;
+    color: %%DISABLED_TEXT_COLOR%%;
     }
    </string>
   </property>

src/citron/configuration/configure_dialog.cpp

@@ -247,11 +247,24 @@ void ConfigureDialog::UpdateTheme() {
     cpu_tab->SetTemplateStyleSheet(style_sheet);
     graphics_advanced_tab->SetTemplateStyleSheet(style_sheet);
 
+    QString sidebar_css = QStringLiteral(
+        "QPushButton.tabButton { background-color: %1; color: %2; border: 2px solid transparent; }"
+        "QPushButton.tabButton:checked { color: %3; border: 2px solid %3; }"
+        "QPushButton.tabButton:hover { border: 2px solid %3; }"
+        "QPushButton.tabButton:pressed { background-color: %3; color: #ffffff; }"
+    ).arg(b_bg).arg(d_txt).arg(accent);
+
+    if (ui->topButtonWidget) ui->topButtonWidget->setStyleSheet(sidebar_css);
+    if (ui->horizontalNavWidget) ui->horizontalNavWidget->setStyleSheet(sidebar_css);
+
     if (is_rainbow) {
         if (!rainbow_timer) {
             rainbow_timer = new QTimer(this);
-            connect(rainbow_timer, &QTimer::timeout, this, [this] {
-                if (m_is_tab_animating || !this->isVisible() || !this->isActiveWindow()) return;
+            connect(rainbow_timer, &QTimer::timeout, this, [this, b_bg, d_txt, txt] {
+                // Don't update during animation to prevent lag
+                if (ui->buttonBox->underMouse() || m_is_tab_animating || !this->isVisible() || !this->isActiveWindow()) {
+                    return;
+                }
 
                 const int current_index = ui->stackedWidget->currentIndex();
                 const int input_tab_index = 7;
@@ -261,84 +274,45 @@ void ConfigureDialog::UpdateTheme() {
                 const QString hue_light = current_color.lighter(125).name();
                 const QString hue_dark = current_color.darker(150).name();
 
-                // 1. Sidebar Tabs
-                QString sidebar_css = QStringLiteral(
-                    "QPushButton.tabButton { border: 2px solid transparent; }"
-                    "QPushButton.tabButton:checked { color: %1; border: 2px solid %1; }"
-                    "QPushButton.tabButton:hover { border: 2px solid %1; }"
-                    "QPushButton.tabButton:pressed { background-color: %1; color: #ffffff; }"
-                ).arg(hue_hex);
-                if (ui->topButtonWidget) ui->topButtonWidget->setStyleSheet(sidebar_css);
-                if (ui->horizontalNavWidget) ui->horizontalNavWidget->setStyleSheet(sidebar_css);
+                // Update sidebar with rainbow colors
+                QString rainbow_sidebar_css = QStringLiteral(
+                    "QPushButton.tabButton { background-color: %1; color: %2; border: 2px solid transparent; }"
+                    "QPushButton.tabButton:checked { color: %3; border: 2px solid %3; }"
+                    "QPushButton.tabButton:hover { border: 2px solid %3; }"
+                    "QPushButton.tabButton:pressed { background-color: %3; color: #ffffff; }"
+                ).arg(b_bg).arg(d_txt).arg(hue_hex);
+                if (ui->topButtonWidget) ui->topButtonWidget->setStyleSheet(rainbow_sidebar_css);
+                if (ui->horizontalNavWidget) ui->horizontalNavWidget->setStyleSheet(rainbow_sidebar_css);
 
-                // 2. Action Buttons (OK/Apply/Cancel)
-                if (ui->buttonBox) {
-                    const QString button_css = QStringLiteral(
-                        "QPushButton { background-color: %1; color: #ffffff; border-radius: 4px; font-weight: bold; padding: 5px 15px; }"
-                        "QPushButton:hover { background-color: %2; }"
-                        "QPushButton:pressed { background-color: %3; }"
-                    ).arg(hue_hex).arg(hue_light).arg(hue_dark);
-
-                    for (auto* button : ui->buttonBox->findChildren<QPushButton*>()) {
-                        if (!button->isDown()) {
-                            button->setStyleSheet(button_css);
-                        }
-                    }
-                }
-
-                // 3. Tab Content Area
+                // Tab Content Area
                 if (current_index == input_tab_index) return;
 
                 QWidget* currentContainer = ui->stackedWidget->currentWidget();
                 if (currentContainer) {
-                    QWidget* actualTab = currentContainer;
-                    if (auto* scroll = qobject_cast<QScrollArea*>(currentContainer)) {
-                        actualTab = scroll->widget();
-                    }
-
-                    if (actualTab) {
-                        QString tab_css = QStringLiteral(
-                            "QCheckBox::indicator:checked, QRadioButton::indicator:checked { background-color: %1; border: 1px solid %1; }"
-                            "QSlider::handle:horizontal { background-color: %1; border: 1px solid %1; border-radius: 7px; }"
-                            "QScrollBar::handle:vertical, QScrollBar::handle:horizontal { background-color: %1; border-radius: 4px; min-height: 20px; }"
-                            "QScrollBar:vertical, QScrollBar:horizontal { background: transparent; }"
-                            "QComboBox { border: 1px solid %1; selection-background-color: %1; }"
-                            "QComboBox QAbstractItemView { border: 2px solid %1; selection-background-color: %1; background-color: #2b2b2b; }"
-                            "QComboBox QAbstractItemView::item:selected { background-color: %1; color: #ffffff; }"
-                            "QPushButton, QToolButton { background-color: %1; color: #ffffff; border: none; border-radius: 4px; padding: 5px; }"
-                            "QPushButton:hover, QToolButton:hover { background-color: %2; }"
-                            "QPushButton:pressed, QToolButton:pressed { background-color: %3; }"
-                            "QPushButton#aestheticTabButton { background-color: transparent; border: 2px solid %1; }"
-                            "QPushButton#aestheticTabButton:checked { background-color: %1; }"
-                        ).arg(hue_hex).arg(hue_light).arg(hue_dark);
-
-                        currentContainer->setStyleSheet(tab_css);
-                        actualTab->setStyleSheet(tab_css);
-                    }
+                    QString tab_css = QStringLiteral(
+                        "QCheckBox::indicator:checked, QRadioButton::indicator:checked { background-color: %1; border: 1px solid %1; }"
+                        "QSlider::sub-page:horizontal { background: %1; border-radius: 4px; }"
+                        "QSlider::handle:horizontal { background-color: %1; border: 1px solid %1; width: 18px; height: 18px; margin: -5px 0; border-radius: 9px; }"
+                        "QPushButton, QToolButton { background-color: transparent; color: %4; border: 2px solid %1; border-radius: 4px; padding: 5px; }"
+                        "QPushButton:hover, QToolButton:hover { border-color: %2; color: %2; }"
+                        "QPushButton:pressed, QToolButton:pressed { background-color: %3; color: #ffffff; border-color: %3; }"
+                    ).arg(hue_hex).arg(hue_light).arg(hue_dark).arg(txt);
+                    currentContainer->setStyleSheet(tab_css);
+                    if (ui->buttonBox) ui->buttonBox->setStyleSheet(tab_css);
                 }
             });
         }
         rainbow_timer->start(33);
     }
 
-    if (ui->buttonBox) {
-        ui->buttonBox->setStyleSheet(QStringLiteral(
-            "QPushButton { background-color: %1; color: #ffffff; border-radius: 4px; font-weight: bold; padding: 5px 15px; }"
-            "QPushButton:hover { background-color: %2; }"
-            "QPushButton:pressed { background-color: %3; }"
-        ).arg(accent).arg(Theme::GetAccentColorHover()).arg(Theme::GetAccentColorPressed()));
-    }
-
     if (UISettings::values.enable_rainbow_mode.GetValue() == false && rainbow_timer) {
         rainbow_timer->stop();
-        if (ui->topButtonWidget) ui->topButtonWidget->setStyleSheet({});
-        if (ui->horizontalNavWidget) ui->horizontalNavWidget->setStyleSheet({});
+
+        // Just reset the content areas
         if (ui->buttonBox) ui->buttonBox->setStyleSheet({});
         for (int i = 0; i < ui->stackedWidget->count(); ++i) {
-            QWidget* w = ui->stackedWidget->widget(i);
-            if (w) w->setStyleSheet({});
-            if (auto* s = qobject_cast<QScrollArea*>(w)) {
-                if (s->widget()) s->widget()->setStyleSheet({});
+            if (auto* w = ui->stackedWidget->widget(i)) {
+                w->setStyleSheet({});
             }
         }
     }

src/citron/configuration/configure_input.ui

@@ -196,21 +196,6 @@
          </property>
          <item>
           <widget class="QPushButton" name="vibrationButton">
-           <property name="minimumSize">
-            <size>
-             <width>68</width>
-             <height>0</height>
-            </size>
-           </property>
-           <property name="maximumSize">
-            <size>
-             <width>68</width>
-             <height>16777215</height>
-            </size>
-           </property>
-           <property name="styleSheet">
-            <string notr="true">min-width: 68px;</string>
-           </property>
            <property name="text">
             <string>Configure</string>
            </property>
@@ -242,21 +227,6 @@
          </property>
          <item>
           <widget class="QPushButton" name="motionButton">
-           <property name="minimumSize">
-            <size>
-             <width>68</width>
-             <height>0</height>
-            </size>
-           </property>
-           <property name="maximumSize">
-            <size>
-             <width>68</width>
-             <height>16777215</height>
-            </size>
-           </property>
-           <property name="styleSheet">
-            <string notr="true">min-width: 68px;</string>
-           </property>
            <property name="text">
             <string>Configure</string>
            </property>
@@ -460,36 +430,6 @@
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
-        <property name="minimumSize">
-         <size>
-          <width>68</width>
-          <height>0</height>
-         </size>
-        </property>
-        <property name="maximumSize">
-         <size>
-          <width>68</width>
-          <height>16777215</height>
-         </size>
-        </property>
-        <property name="sizeIncrement">
-         <size>
-          <width>0</width>
-          <height>0</height>
-         </size>
-        </property>
-        <property name="baseSize">
-         <size>
-          <width>0</width>
-          <height>0</height>
-         </size>
-        </property>
-        <property name="layoutDirection">
-         <enum>Qt::LeftToRight</enum>
-        </property>
-        <property name="styleSheet">
-         <string notr="true">min-width: 68px;</string>
-        </property>
         <property name="text">
          <string>Defaults</string>
         </property>
@@ -503,36 +443,6 @@
           <verstretch>0</verstretch>
          </sizepolicy>
         </property>
-        <property name="minimumSize">
-         <size>
-          <width>68</width>
-          <height>0</height>
-         </size>
-        </property>
-        <property name="maximumSize">
-         <size>
-          <width>68</width>
-          <height>16777215</height>
-         </size>
-        </property>
-        <property name="sizeIncrement">
-         <size>
-          <width>0</width>
-          <height>0</height>
-         </size>
-        </property>
-        <property name="baseSize">
-         <size>
-          <width>0</width>
-          <height>0</height>
-         </size>
-        </property>
-        <property name="layoutDirection">
-         <enum>Qt::LeftToRight</enum>
-        </property>
-        <property name="styleSheet">
-         <string notr="true">min-width: 68px;</string>
-        </property>
         <property name="text">
          <string>Clear</string>
         </property>

src/citron/configuration/configure_per_game.cpp

@@ -332,7 +332,7 @@ void ConfigurePerGame::UpdateTheme() {
     if (is_rainbow) {
         if (!rainbow_timer) {
             rainbow_timer = new QTimer(this);
-            connect(rainbow_timer, &QTimer::timeout, this, [this] {
+            connect(rainbow_timer, &QTimer::timeout, this, [this, txt] {
                 if (m_is_tab_animating || !this->isVisible() || !this->isActiveWindow()) return;
 
                 const QColor current_color = RainbowStyle::GetCurrentHighlightColor();
@@ -360,9 +360,9 @@ void ConfigurePerGame::UpdateTheme() {
 
                 // 3. Action Buttons
                 const QString button_css = QStringLiteral(
-                    "QPushButton { background-color: %1; color: #ffffff; border-radius: 4px; font-weight: bold; padding: 5px 15px; }"
-                    "QPushButton:hover { background-color: %2; }"
-                    "QPushButton:pressed { background-color: %3; }"
+                    "QPushButton { background-color: transparent; color: #ffffff; border: 2px solid %1; border-radius: 4px; font-weight: bold; padding: 4px 12px; }"
+                    "QPushButton:hover { border-color: %2; color: %2; }"
+                    "QPushButton:pressed { background-color: %3; color: #ffffff; border-color: %3; }"
                 ).arg(hue_hex).arg(hue_light).arg(hue_dark);
 
                 if (ui->buttonBox) {
@@ -373,6 +373,12 @@ void ConfigurePerGame::UpdateTheme() {
                 if (ui->trim_xci_button && !ui->trim_xci_button->isDown()) {
                     ui->trim_xci_button->setStyleSheet(button_css);
                 }
+                if (auto* share_btn = findChild<QPushButton*>(QStringLiteral("share_settings_button"))) {
+                    if (!share_btn->isDown()) share_btn->setStyleSheet(button_css);
+                }
+                if (auto* use_btn = findChild<QPushButton*>(QStringLiteral("use_settings_button"))) {
+                    if (!use_btn->isDown()) use_btn->setStyleSheet(button_css);
+                }
 
                 // 4. Tab Content Area
                 QWidget* currentContainer = ui->stackedWidget->currentWidget();
@@ -392,9 +398,9 @@ void ConfigurePerGame::UpdateTheme() {
                             "QComboBox QAbstractItemView::item:selected { background-color: %1; color: #ffffff; }"
                             "QScrollBar::handle:vertical, QScrollBar::handle:horizontal { background-color: %1; border-radius: 7px; }"
                             "QScrollBar:vertical, QScrollBar:horizontal { background: transparent; }"
-                            "QPushButton, QToolButton { background-color: %1; color: #ffffff; border: none; border-radius: 4px; padding: 5px; }"
-                            "QPushButton:hover, QToolButton:hover { background-color: %2; }"
-                            "QPushButton:pressed, QToolButton:pressed { background-color: %3; }"
+                            "QPushButton, QToolButton { background-color: transparent; color: #ffffff; border: 2px solid %1; border-radius: 4px; padding: 5px; }"
+                            "QPushButton:hover, QToolButton:hover { border-color: %2; color: %2; }"
+                            "QPushButton:pressed, QToolButton:pressed { background-color: %3; color: #ffffff; border-color: %3; }"
                         ).arg(hue_hex).arg(hue_light).arg(hue_dark);
 
                         currentContainer->setStyleSheet(content_css);
@@ -404,21 +410,21 @@ void ConfigurePerGame::UpdateTheme() {
             });
         }
         rainbow_timer->start(33);
-    } 
+    }
 
     // Fix for Gamescope: Style buttons once outside the timer loop
     if (ui->buttonBox) {
         ui->buttonBox->setStyleSheet(QStringLiteral(
-            "QPushButton { background-color: %1; color: #ffffff; border-radius: 4px; font-weight: bold; padding: 5px 15px; }"
-            "QPushButton:hover { background-color: %2; }"
-            "QPushButton:pressed { background-color: %3; }"
+            "QPushButton { background-color: transparent; color: #ffffff; border: 2px solid %1; border-radius: 4px; font-weight: bold; padding: 4px 12px; }"
+            "QPushButton:hover { border-color: %2; color: %2; }"
+            "QPushButton:pressed { background-color: %3; color: #ffffff; border-color: %3; }"
         ).arg(accent).arg(Theme::GetAccentColorHover()).arg(Theme::GetAccentColorPressed()));
     }
     if (ui->trim_xci_button) {
         ui->trim_xci_button->setStyleSheet(QStringLiteral(
-            "QPushButton { background-color: %1; color: #ffffff; border: none; border-radius: 4px; padding: 10px; }"
-            "QPushButton:hover { background-color: %2; }"
-            "QPushButton:pressed { background-color: %3; }"
+            "QPushButton { background-color: transparent; color: #ffffff; border: 2px solid %1; border-radius: 4px; font-weight: bold; padding: 4px 12px; }"
+            "QPushButton:hover { border-color: %2; color: %2; }"
+            "QPushButton:pressed { background-color: %3; color: #ffffff; border-color: %3; }"
         ).arg(accent).arg(Theme::GetAccentColorHover()).arg(Theme::GetAccentColorPressed()));
     }
 

src/citron/configuration/configure_per_game.ui

@@ -235,46 +235,31 @@
     background-color: %%FOCUS_BG_COLOR%%;
     }
 
-    QPushButton {
-    background-color: %%ACCENT_COLOR%%;
-    color: #ffffff;
-    border: none;
-    padding: 10px 20px;
+    QPushButton, QToolButton {
+    background-color: transparent;
+    color: %%TEXT_COLOR%%;
+    border: 2px solid %%ACCENT_COLOR%%;
+    padding: 5px 15px;
     border-radius: 6px;
     font-weight: bold;
     min-height: 20px;
     }
 
-    QPushButton:hover {
-    background-color: %%ACCENT_COLOR_HOVER%%;
+    QPushButton:hover, QToolButton:hover {
+    color: %%ACCENT_COLOR_HOVER%%;
+    border-color: %%ACCENT_COLOR_HOVER%%;
     }
 
-    QPushButton:pressed {
-    background-color: %%ACCENT_COLOR_PRESSED%%;
-    }
-
-    QPushButton:disabled {
-    background-color: %%TERTIARY_BG_COLOR%%;
-    color: %%DISABLED_TEXT_COLOR%%;
-    }
-
-    QToolButton {
-    background-color: %%ACCENT_COLOR%%;
+    QPushButton:pressed, QToolButton:pressed {
     color: #ffffff;
-    border: none;
-    padding: 8px 12px;
-    border-radius: 6px;
-    font-weight: bold;
-    min-width: 32px;
-    min-height: 24px;
-    }
-
-    QToolButton:hover {
-    background-color: %%ACCENT_COLOR_HOVER%%;
-    }
-
-    QToolButton:pressed {
     background-color: %%ACCENT_COLOR_PRESSED%%;
+    border-color: %%ACCENT_COLOR_PRESSED%%;
+    }
+
+    QPushButton:disabled, QToolButton:disabled {
+    background-color: %%TERTIARY_BG_COLOR%%;
+    border-color: %%TERTIARY_BG_COLOR%%;
+    color: %%DISABLED_TEXT_COLOR%%;
     }
 
     QLabel {
@@ -399,13 +384,13 @@
           <x>0</x>
           <y>0</y>
           <width>318</width>
-          <height>836</height>
+          <height>786</height>
          </rect>
         </property>
         <property name="minimumSize">
          <size>
           <width>0</width>
-          <height>836</height>
+          <height>786</height>
          </size>
         </property>
         <property name="maximumSize">