From 468e1e90c8967119288b9584f913d00243745f2f Mon Sep 17 00:00:00 2001
From: drysalter <49168108+drysalter@users.noreply.github.com>
Date: Mon, 29 Apr 2019 22:02:50 +0300
Subject: [PATCH] Touch-ups to Skyline and Envy (#5884)

* Touch-ups to Skyline and Envy

* Match disabled colors on sliders, checkboxes and comboboxes

* Align header titles with section contents

* Make slider grooves clickable, add opacity to tooltips

* Adjust opacity, clean some code

* Correct slider margins, add hover effect to game table on Nightfall
---
 bin/GuiConfigs/Envy.qss                | 118 ++++++++++++-------------
 bin/GuiConfigs/Skyline (Nightfall).qss | 114 +++++++++++++++---------
 bin/GuiConfigs/Skyline.qss             | 110 +++++++++++++++--------
 3 files changed, 206 insertions(+), 136 deletions(-)

diff --git a/bin/GuiConfigs/Envy.qss b/bin/GuiConfigs/Envy.qss
index 60bc570f7e..7f275a3c98 100644
--- a/bin/GuiConfigs/Envy.qss
+++ b/bin/GuiConfigs/Envy.qss
@@ -39,19 +39,25 @@ QToolTip {
 }
 
 /* Table Headers */
+QHeaderView {
+	border: none;
+	border-bottom: 1px solid #8cf944;
+}
+
 QHeaderView::section {
 	background-color: #23262d;
 	color: #f8f8f8;
-	padding-left: 0.25em;
-	padding-top: 0.25em;
-	padding-bottom: 0.25em;
-	border: 1px solid #8cf944;
-	border-top: none;
-	border-left: none;
-	border-right: none;
+	padding-top: 3px;
+	padding-left: 3px;
+	height: 20px;
+	border: none;
 }
 
-/* Settings Dialog: Tabs */
+QHeaderView::section:first {
+	padding-left: 5px;
+}
+
+/* Tabs */
 QTabBar::tab {
 	color: #8cf944;
 	padding-left: 1.25em;
@@ -63,6 +69,14 @@ QTabBar::tab {
 	border-bottom: 1px solid #8cf944;
 }
 
+QTabWidget::pane {
+	border: none;
+}
+
+QTabWidget::tab-bar {
+	alignment: center;
+}
+
 QTabBar::tab:!selected {
 	color: #f8f8f8;
 	border-bottom: 1px solid transparent;
@@ -96,6 +110,11 @@ QTabBar#tab_bar_settings::tab:hover {
 	border-bottom: 1px solid #8cf944;
 }
 
+/* Log Tabs */
+QTabWidget#tab_widget_log::tab-bar {
+	alignment: left;
+}
+
 QTabBar#tab_bar_log::tab:!selected {
 	color: #FFF;
 	border: none;
@@ -134,7 +153,7 @@ QCheckBox::indicator:unchecked {
 	background-color: #000;
 }
 
-QCheckBox::indicator::disabled {
+QCheckBox::indicator:disabled {
 	background-color: #4d5058;
 }
 
@@ -189,7 +208,7 @@ QRadioButton::indicator:unchecked {
 	background-color: #000;
 }
 
-QRadioButton::indicator::disabled {
+QRadioButton::indicator:disabled {
 	background-color: #4d5058; 
 }
 
@@ -204,7 +223,7 @@ QComboBox {
 	min-height: 14px;
 }
 
-QComboBox::hover {
+QComboBox:hover {
 	color: #8cf944;
 	background-color: #2d3038;
 	border: 0.0625em solid #8cf944;
@@ -230,40 +249,40 @@ QComboBox::!selected {
 	padding-left: 0.25em;
 }
 
-QComboBox::disabled {
+QComboBox:disabled {
 	background-color: #4d5058;
 	color: #fff;
 }
 
 /* Sliders */
 QSlider::groove:horizontal {
-	border: -5px solid #8cf944;
+	border: -3px solid transparent;
 	border-radius: 0.45em;
 	height: 8px;
 	background: #8cf944;
 	margin: 1px;
 }
 
+QSlider::groove:horizontal:disabled {
+	background: #4d5058;
+}
+
 QSlider::handle:horizontal {
 	background: #23262d;
 	border: 1px solid #5c5c5c;
 	border-radius: 0.1em;
 	width: 18px;
-	margin: -2px 4; 
+	margin: -2px 2; 
 }
 
 QSlider::handle:horizontal:hover {
 	background: #23262d;
 	border: 1px solid #8cf944;
-	width: 18px;
-	margin: -2px 4; 
 }
 
 QSlider::handle:horizontal:pressed {
 	background: #30333a;
 	border: 1px solid #8cf944;
-	width: 18px;
-	margin: -2px 4; 
 }
 
 /* Progress Bar */
@@ -311,7 +330,7 @@ QPushButton:hover {
 	color: #8cf944;
 }
 
-QPushButton::disabled {
+QPushButton:disabled {
 	color: #999999;
 }
 
@@ -323,7 +342,7 @@ QPushButton::pressed {
 QSpinBox, QDoubleSpinBox {
 	border: 1px solid #999999;
 	padding: 2px;
-	color: #999999;
+	color: #FFFFFF;
 	border-radius: 2px;
 	background-color: transparent;
 }
@@ -370,11 +389,6 @@ QDockWidget::close-button, QDockWidget::float-button {
 	width: auto;
 }
 
-/* Disable Borders */
-QTabWidget::pane {
-	border: none;
-}
-
 /* Top Menu Bar */
 QMenuBar::item:selected {
 	margin-bottom: 0.125em;
@@ -417,6 +431,15 @@ QMenu::item:disabled {
 }
 
 /* Libraries List */
+QListWidget {
+	border: 1px solid #bdc3c7;
+	border-radius: 0.1em;
+}
+
+QListWidget:disabled {
+	border: 1px solid #4d5058;
+}
+
 QListWidget::item:selected {
 	background-color: #30333a;
 	color: #b1f184;
@@ -500,6 +523,10 @@ QToolBar {
 }
 
 /* Toolbar Buttons */
+QLabel#toolbar_icon_color {
+	color: #FFFFFF;
+}
+
 QToolButton {
 	background: transparent;
 	border-radius: 0em;
@@ -512,12 +539,12 @@ QToolButton {
 	border-bottom: 1px solid transparent;
 }
 
-QToolButton::disabled {
+QToolButton:disabled {
 	background-color: #30333a;
 	color: #f8f8f8;
 }
 
-QToolButton::hover {
+QToolButton:hover {
 	background-color: #2d3038;
 	color: #8cf944;
 	border-bottom: 1px solid #8cf944;
@@ -574,7 +601,7 @@ QLabel#log_level_warning {
 }
 
 QLabel#log_level_notice {
-	color: #ffffff;
+	color: #FFFFFF;
 }
 
 QLabel#log_level_trace {
@@ -585,43 +612,12 @@ QLabel#log_stack {
 	color: #3498d8;
 }
 
-/* Set TTY colors */
+/* TTY colors */
 QTextEdit#tty_frame {
 	background-color: #23262d;
 }
 
 QLabel#tty_text {
-	color: #FFFFFF;
-}
-
-/* RSX Debugger */
-QLabel#rsx_debugger_display_buffer {
-	background-color: #131313;
-}
-
-/* Kernel Explorer */
-QDialog#kernel_explorer {
-	background-color: #131313;
-}
-
-/* Memory Viewer */
-QDialog#memory_viewer {
-	background-color: #131313;
-	color: #FFF;
-}
-
-QLabel#memory_viewer_address_panel {
-	color: #8cf944;
-	background-color: #131313;
-}
-
-QLabel#memory_viewer_hex_panel {
-	color: #FFF;
-	background-color: #131313;
-}
-
-QLabel#memory_viewer_ascii_panel {
-	color: #FFF;
-	background-color: #131313;
+	color: #f8f8f8;
 }
 
diff --git a/bin/GuiConfigs/Skyline (Nightfall).qss b/bin/GuiConfigs/Skyline (Nightfall).qss
index 24229ea8cd..a245e18353 100644
--- a/bin/GuiConfigs/Skyline (Nightfall).qss	
+++ b/bin/GuiConfigs/Skyline (Nightfall).qss	
@@ -96,11 +96,11 @@ QToolButton {
 	border-bottom: 2px solid transparent;
 }
 
-QToolButton::disabled {
+QToolButton:disabled {
 	color: #999999;
 }
 
-QToolButton::hover {
+QToolButton:hover {
 	border-bottom: 2px solid #FFFFFF;
 }
 
@@ -132,33 +132,33 @@ QSlider {
 }
 
 QSlider::groove:horizontal {
-	border: -5px solid #8cf944;
+	border: -3px solid transparent;
 	border-radius: 0.45em;
 	height: 8px;
 	background: #0074e7;
 	margin: 1px;
 }
 
+QSlider::groove:horizontal:disabled {
+	background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #51657e, stop:1 #455971);
+}
+
 QSlider::handle:horizontal {
 	background: #111525;
 	border: 1px solid #5c5c5c;
 	border-radius: 0.1em;
 	width: 18px;
-	margin: -2px 4; 
+	margin: -2px 2; 
 }
 
 QSlider::handle:horizontal:hover {
 	background: #111525;
 	border: 1px solid #0074e7;
-	width: 18px;
-	margin: -2px 4; 
 }
 
 QSlider::handle:horizontal:pressed {
 	border: 1px solid #0074e7;
 	background: #1c273d;
-	width: 18px;
-	margin: -2px 4; 
 }
 
 /* Slider on Toolbar */
@@ -242,32 +242,37 @@ QRadioButton::indicator:unchecked {
 	background-color: #FFFFFF;
 }
 
-QRadioButton::indicator::disabled {
+QRadioButton::indicator:disabled {
 	background-color: #455971; 
 }
 
 /* Checkboxes */
 QCheckBox::indicator {
 	border: 1px solid #455971;
+	border-radius: 2px;
 	width: 0.75em;
 	height: 0.75em;
 	margin-top: 1px;
 }
 
 QCheckBox::indicator:checked {
-	background-color: #0074e7;
+	background-color: qradialgradient(cx:0, cy:0, radius: 1, fx:0.3, fy:0.3, stop:0.8 #008be7, stop:1 #0074e7);
 }
 
 QCheckBox::indicator:unchecked:hover {
 	border: 1px solid #0074e7;
 }
 
+QCheckBox::indicator:checked:hover {
+	background-color: qradialgradient(cx:0, cy:0, radius: 1, fx:0.3, fy:0.3, stop:0.8 #3ca3e7, stop:1 #2a89e7);
+}
+
 QCheckBox::indicator:unchecked {
 	background-color: #FFFFFF;
 }
 
-QCheckBox::indicator::disabled {
-	background-color: #455971;
+QCheckBox::indicator:disabled {
+	background-color: qradialgradient(cx:0, cy:0, radius: 1, fx:0.3, fy:0.3, stop:0.8 #51657e, stop:1 #455971);
 }
 
 /* Group Boxes (Settings Dialog) */
@@ -286,7 +291,7 @@ QGroupBox::title {
 }
 
 
-/* Settings Dialog: Tabs */
+/* Tabs */
 QTabBar::tab {
 	color: #455971;
 	padding-left: 1.25em;
@@ -298,6 +303,14 @@ QTabBar::tab {
 	border-bottom: 1px solid transparent;
 }
 
+QTabWidget::pane {
+	border: none;
+}
+
+QTabWidget::tab-bar {
+	alignment: center;
+}
+
 QTabBar::tab:!selected {
 	color: #FFFFFF;
 	border-bottom: 1px solid transparent;
@@ -332,17 +345,17 @@ QTabBar#tab_bar_settings::tab:hover {
 	border-bottom: 1px solid transparent;
 }
 
+/* Log Tabs */
+QTabWidget#tab_widget_log::tab-bar {
+	alignment: left;
+}
+
 QTabBar#tab_bar_log::tab:!selected {
 	color: #FFFFFF;
 	border: none;
 }
 
-QTabBar#tab_bar_log::tab:selected {
-	color: #0074e7;
-	border: none;
-}
-
-QTabBar#tab_bar_log::tab:hover {
+QTabBar#tab_bar_log::tab:selected, QTabBar#tab_bar_log::tab:hover {
 	color: #0074e7;
 	border: none;
 }
@@ -358,7 +371,7 @@ QComboBox {
 	min-height: 14px;
 }
 
-QComboBox::hover {
+QComboBox:hover {
 	color: #FFFFFF;
 	background-color: #1c273d;
 	border: 0.0625em solid #0074e7;
@@ -387,9 +400,9 @@ QComboBox::item:!selected {
 }
 
 QComboBox::indicator{
-	background-color:transparent;
-	selection-background-color:transparent;
-	color:transparent;
+	background-color: transparent;
+	selection-background-color: transparent;
+	color: transparent;
 	selection-color: transparent;
 }
 
@@ -401,7 +414,7 @@ QComboBox::selected {
 	padding-bottom: 0.125em;
 }
 
-QComboBox::disabled {
+QComboBox:disabled {
 	background-color: #26293b;
 	color: #455971;
 }
@@ -424,10 +437,10 @@ QPushButton:hover {
 }
 
 QPushButton::pressed {
-	background-color: #111525;
+	background-color: #121d34;
 }
 
-QPushButton::disabled {
+QPushButton:disabled {
 	border: 1px solid #999999;
 	color: #999999;
 }
@@ -459,14 +472,27 @@ QSpinBox:disabled, QDoubleSpinBox:disabled {
 }
 
 /* Libraries List */
+QListWidget {
+	border: 1px solid #FFFFFF;
+	border-radius: 0.1em;
+}
+
+QListWidget:disabled {
+	border: 1px solid #455971;
+}
+
 QListWidget::item:selected {
-	background-color: #111525;
+	background-color: #1c273d;
 	color: #0074e7;
 	border-radius: 0.125em;
 }
 
 QListWidget::item:hover {
 	background-color: #1c273d;
+}
+
+QListWidget:disabled, QListWidget:disabled:hover, QListWidget::item:disabled:hover {
+	background-color: #111525;
 	color: #FFFFFF;
 	border-radius: 0.25em;
 }
@@ -489,6 +515,10 @@ QTableView {
 	color: #FFFFFF;
 }
 
+QTableView::item:hover {
+	color: #0074e7;
+}
+
 /* Progress Bar */
 QProgressBar {
 	border: 1px solid #455971;
@@ -511,24 +541,33 @@ QLabel#gamelist_icon_background_color {
 }
 
 /* Table Headers */
-QHeaderView::section {
-	background-color: #111525;
-	color: #FFFFFF;
-	padding-left: 0.25em;
-	padding-top: 0.25em;
-	padding-bottom: 0.25em;
-	border: 2px solid #370048;
+QHeaderView {
+	border: 1px solid qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0.25 #370048, stop: 0.5 #161249, stop: 1 #00364a);
 	border-left: none;
 	border-right: none;
 	border-top: none;
 }
 
+QHeaderView::section {
+	background-color: #111525;
+	color: #FFFFFF;
+	padding-top: 3px;
+	padding-left: 3px;	
+	height: 20px;
+	border: none;
+}
+
+QHeaderView::section:first {
+	padding-left: 5px;
+}
+
 /* Tooltips */
 QToolTip {
 	background-color: #111525;
 	color: #FFFFFF;
 	padding: 0.1em;
 	border: none;
+	opacity: 225;
 }
 
 /* Log and Debugger Borders */
@@ -580,7 +619,7 @@ QLabel#log_level_warning {
 }
 
 QLabel#log_level_notice {
-	color: #ffffff;
+	color: #FFFFFF;
 }
 
 QLabel#log_level_trace {
@@ -591,11 +630,6 @@ QLabel#log_stack {
 	color: #0071ec;
 }
 
-/* Disable Borders */
-QTabWidget::pane {
-	border: none;
-}
-
 /* Debug UI Settings buttons */
 QLabel#color_button {
 	background: transparent;
diff --git a/bin/GuiConfigs/Skyline.qss b/bin/GuiConfigs/Skyline.qss
index 3e67023bb8..e99bfe3df3 100644
--- a/bin/GuiConfigs/Skyline.qss
+++ b/bin/GuiConfigs/Skyline.qss
@@ -96,11 +96,11 @@ QToolButton {
 	border-bottom: 2px solid transparent;
 }
 
-QToolButton::disabled {
+QToolButton:disabled {
 	color: #999999;
 }
 
-QToolButton::hover {
+QToolButton:hover {
 	border-bottom: 2px solid #FFFFFF;
 }
 
@@ -132,33 +132,37 @@ QSlider {
 }
 
 QSlider::groove:horizontal {
-	border: -5px solid #8cf944;
+	border: -3px solid transparent;
 	border-radius: 0.45em;
 	height: 8px;
 	background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0.25 #8500ae, stop: 0.5 #4343c1, stop: 1 #009ed0);
 	margin: 1px;
 }
 
+QSlider::groove:horizontal:disabled {
+	background: #b3b3b3;
+}
+
 QSlider::handle:horizontal {
 	background: #FFFFFF;
 	border: 1px solid #5c5c5c;
 	border-radius: 0.1em;
 	width: 18px;
-	margin: -2px 4; 
+	margin: -2px 2; 
+}
+
+QSlider::handle:horizontal:disabled {
+	border: 1px solid #b3b3b3;
 }
 
 QSlider::handle:horizontal:hover {
-	background: #FFFFFF;
+	background: qlineargradient(x1: 0, y1: 1, x2: 0, y2: 0, stop: 0.2 #FFF3FF, stop: 1 #FFFFFF);
 	border: 1px solid #8500ae;
-	width: 18px;
-	margin: -2px 4; 
 }
 
 QSlider::handle:horizontal:pressed {
 	background: #f8edfb;
 	border: 1px solid #8500ae;
-	width: 18px;
-	margin: -2px 4; 
 }
 
 /* Slider on Toolbar */
@@ -194,7 +198,7 @@ QScrollBar {
 }
 
 QScrollArea {
-    background: transparent;
+	background: transparent;
 }
 
 QTableView QScrollBar {
@@ -250,32 +254,41 @@ QRadioButton::indicator:unchecked {
 	background-color: #FFFFFF;
 }
 
-QRadioButton::indicator::disabled {
+QRadioButton::indicator:disabled {
 	background-color: #455971; 
 }
 
 /* Checkboxes */
 QCheckBox::indicator {
 	border: 1px solid #455971;
+	border-radius: 2px;
 	width: 0.75em;
 	height: 0.75em;
 	margin-top: 1px;
 }
 
 QCheckBox::indicator:checked {
-	background-color: #8500ae;
+	background-color: qradialgradient(cx:0, cy:0, radius: 1, fx:0.3, fy:0.3, stop:0.8 #c500ff, stop:1 #8500ae);
 }
 
 QCheckBox::indicator:unchecked:hover {
 	border: 1px solid #8500ae;
 }
 
+QCheckBox::indicator:checked:hover {
+	background-color: qradialgradient(cx:0, cy:0, radius: 1, fx:0.3, fy:0.3, stop:0.8 #da5eff, stop:1 #974cae);
+}
+
 QCheckBox::indicator:unchecked {
 	background-color: #FFFFFF;
 }
 
-QCheckBox::indicator::disabled {
-	background-color: #455971;
+QCheckBox::indicator:checked:disabled {
+	background-color: qradialgradient(cx:0, cy:0, radius: 1, fx:0.3, fy:0.3, stop:0.8 #b3b3b3, stop:1 #9d9d9d);
+}
+
+QCheckBox::indicator:unchecked:disabled {
+	border: 1px solid #b3b3b3;
 }
 
 /* Group Boxes (Settings Dialog) */
@@ -294,7 +307,7 @@ QGroupBox::title {
 }
 
 
-/* Settings Dialog: Tabs */
+/* Tabs */
 QTabBar::tab {
 	color: #455971;
 	padding-left: 1.25em;
@@ -306,6 +319,14 @@ QTabBar::tab {
 	border-bottom: 1px solid #455971;
 }
 
+QTabWidget::pane {
+	border: none;
+}
+
+QTabWidget::tab-bar {
+	alignment: center;
+}
+
 QTabBar::tab:!selected {
 	color: #455971;
 	border-bottom: 1px solid transparent;
@@ -337,6 +358,11 @@ QTabBar#tab_bar_settings::tab:selected, QTabBar#tab_bar_settings::tab:hover {
 	border-bottom: 1px solid #8500ae;
 }
 
+/* Log Tabs */
+QTabWidget#tab_widget_log::tab-bar {
+	alignment: left;
+}
+
 QTabBar#tab_bar_log::tab:!selected {
 	color: #956fa1;
 	border: none;
@@ -365,7 +391,7 @@ QComboBox {
 	min-height: 14px;
 }
 
-QComboBox::hover {
+QComboBox:hover {
 	color: #455971;
 	background-color: #FFFFFF;
 	border: 0.0625em solid qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0.25 #8500ae, stop: 0.5 #4343c1, stop: 1 #009ed0);
@@ -394,9 +420,9 @@ QComboBox::item:!selected {
 }
 
 QComboBox::indicator {
-	background-color:transparent;
-	selection-background-color:transparent;
-	color:transparent;
+	background-color: transparent;
+	selection-background-color: transparent;
+	color: transparent;
 	selection-color: transparent;
 }
 
@@ -408,7 +434,7 @@ QComboBox::selected {
 	padding-bottom: 0.125em;
 }
 
-QComboBox::disabled {
+QComboBox:disabled {
 	background-color: #b3b3b3;
 	color: #455971;
 }
@@ -436,7 +462,7 @@ QPushButton::pressed {
 	background-color: #f8edfb;
 }
 
-QPushButton::disabled {
+QPushButton:disabled {
 	border: 1px solid #b3b3b3;
 	color: #b3b3b3;
 }
@@ -468,6 +494,16 @@ QSpinBox:disabled, QDoubleSpinBox:disabled {
 }
 
 /* Libraries List */
+QListWidget {
+	border: 1px solid #455971;
+	border-radius: 0.1em;
+}
+
+QListWidget:disabled, QListWidget:disabled:hover, QListWidget::item:disabled:hover {
+	border: 1px solid #999999;
+	background: #FFFFFF;
+}
+
 QListWidget::item:selected {
 	background-color: #FFFFFF;
 	color: #4343c1;
@@ -503,7 +539,7 @@ QTableView {
 
 QTableView::item:hover {
 	color: #4343c1;
-}      
+}
 
 /* Progress Bar */
 QProgressBar {
@@ -528,24 +564,33 @@ QLabel#gamelist_icon_background_color {
 }
 
 /* Table Headers */
-QHeaderView::section {
-	background-color: #FFFFFF;
-	color: #455971;
-	padding-left: 0.25em;
-	padding-top: 0.25em;
-	padding-bottom: 0.25em;
-	border: 1px solid #8500ae;
+QHeaderView {
+	border: 1px solid qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0, stop: 0.25 #8500ae, stop: 0.5 #4343c1, stop: 1 #009ed0);
 	border-left: none;
 	border-right: none;
 	border-top: none;
 }
 
+QHeaderView::section {
+	background-color: #FFFFFF;
+	color: #455971;
+	padding-top: 3px;
+	padding-left: 3px;	
+	height: 20px;
+	border: none;
+}
+
+QHeaderView::section:first {
+	padding-left: 5px;
+}
+
 /* Tooltips */
 QToolTip {
 	background-color: #FFFFFF;
 	color: #8500ae;
 	padding: 0.1em;
 	border: none;
+	opacity: 225;
 }
 
 /* Log and Debugger Borders */
@@ -597,7 +642,7 @@ QLabel#log_level_warning {
 }
 
 QLabel#log_level_notice {
-	color: #ffffff;
+	color: #FFFFFF;
 }
 
 QLabel#log_level_trace {
@@ -608,11 +653,6 @@ QLabel#log_stack {
 	color: #0071ec;
 }
 
-/* Disable Borders */
-QTabWidget::pane {
-	border: none;
-}
-
 /* Debug UI Settings buttons */
 QLabel#color_button {
 	background: transparent;