GUI: Improved pop up and scrollbar arrows look

Previous triangle drawing was all wrong, rewrote it from the scratch.
Added padding to drawsteps in stx files

4 files changed, 432 insertions, 52 deletions

diff --git a/gui/themes/scummclassic/THEMERC b/gui/themes/scummclassic/THEMERC
index b871dfe430..f6a46692a0 100644
--- a/gui/themes/scummclassic/THEMERC
+++ b/gui/themes/scummclassic/THEMERC
@@ -1 +1 @@
-[SCUMMVM_STX0.8.4:ScummVM Classic Theme:No Author]
+[SCUMMVM_STX0.8.5:ScummVM Classic Theme:No Author]
diff --git a/gui/themes/scummclassic/classic_gfx.stx b/gui/themes/scummclassic/classic_gfx.stx
index c0fcc9f083..2f8f0a358a 100644
--- a/gui/themes/scummclassic/classic_gfx.stx
+++ b/gui/themes/scummclassic/classic_gfx.stx
@@ -176,7 +176,7 @@
 		/>
 	</drawdata>
 
-	<drawdata id = 'scrollbar_button_idle' cache = 'false'>
+	<drawdata id = 'scrollbar_button_idle' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'bevelsq'
 					bevel = '2'
 					fill = 'none'
@@ -184,26 +184,62 @@
 		<drawstep	func = 'triangle'
 					fg_color = 'green'
 					fill = 'foreground'
-					width = 'auto'
-					height = 'auto'
-					xpos = 'center'
+					width = '10'
+					height = '10'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,3,0'
+					orientation = 'top'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'scrollbar_button_idle' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'bevelsq'
+					bevel = '2'
+					fill = 'none'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '5'
+					height = '5'
+					xpos = 'right'
 					ypos = 'center'
+					padding = '0,0,2,0'
 					orientation = 'top'
 		/>
 	</drawdata>
 
-	<drawdata id = 'scrollbar_button_hover' cache = 'false'>
+	<drawdata id = 'scrollbar_button_hover' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'bevelsq'
 					bevel = '2'
 					fill = 'none'
 		/>
 		<drawstep	func = 'triangle'
-					fg_color = 'green2'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '10'
+					height = '10'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,3,0'
+					orientation = 'top'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'scrollbar_button_hover' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'bevelsq'
+					bevel = '2'
+					fill = 'none'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
 					fill = 'foreground'
-					width = 'auto'
-					height = 'auto'
-					xpos = 'center'
+					width = '5'
+					height = '5'
+					xpos = 'right'
 					ypos = 'center'
+					padding = '0,0,2,0'
 					orientation = 'top'
 		/>
 	</drawdata>
@@ -272,20 +308,70 @@
 		/>
 	</drawdata>
 
-	<drawdata id = 'popup_idle' cache = 'false'>
+	<!--popup_idle HERE  -->
+	<drawdata id = 'popup_idle' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'bevelsq'
 					bevel = '2'
 					fill = 'none'
 		/>
+		
 		<drawstep	func = 'triangle'
 					fg_color = 'green'
 					fill = 'foreground'
-					width = 'height'
-					height = 'auto'
+					width = '10'
+					height = '5'
 					xpos = 'right'
-					ypos = 'center'
+					ypos = '10'
+					padding = '0, 0, 7, 0'
 					orientation = 'bottom'
 		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 7, 0'
+					orientation = 'top'
+		/>
+		
+		<text	font = 'text_default'
+				text_color = 'color_normal'
+				vertical_align = 'center'
+				horizontal_align = 'left'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'popup_idle' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'bevelsq'
+					bevel = '2'
+					fill = 'none'
+		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '9'
+					padding = '0, 0, 3, 0'
+					orientation = 'bottom'
+		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 3, 0'
+					orientation = 'top'
+		/>
+		
 		<text	font = 'text_default'
 				text_color = 'color_normal'
 				vertical_align = 'center'
@@ -293,47 +379,141 @@
 		/>
 	</drawdata>
 
-	<drawdata id = 'popup_disabled' cache = 'false'>
+	<drawdata id = 'popup_disabled' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'bevelsq'
 					bevel = '2'
 					fill = 'none'
 		/>
 		<drawstep	func = 'triangle'
-					fg_color = 'lightgrey'
+					fg_color = 'green'
 					fill = 'foreground'
-					width = 'height'
-					height = 'auto'
+					width = '10'
+					height = '5'
 					xpos = 'right'
-					ypos = 'center'
+					ypos = '10'
+					padding = '0, 0, 7, 0'
 					orientation = 'bottom'
 		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 7, 0'
+					orientation = 'top'
+		/>
 		<text	font = 'text_default'
 				text_color = 'color_normal_disabled'
 				vertical_align = 'center'
 				horizontal_align = 'left'
 		/>
 	</drawdata>
+	
+	<drawdata id = 'popup_disabled' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'bevelsq'
+					bevel = '2'
+					fill = 'none'
+		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '9'
+					padding = '0, 0, 3, 0'
+					orientation = 'bottom'
+		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 3, 0'
+					orientation = 'top'
+		/>
+		
+		<text	font = 'text_default'
+				text_color = 'color_normal'
+				vertical_align = 'center'
+				horizontal_align = 'left'
+		/>
+	</drawdata>
 
-	<drawdata id = 'popup_hover' cache = 'false'>
+	<drawdata id = 'popup_hover' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'bevelsq'
 					bevel = '2'
 					fill = 'none'
 		/>
 		<drawstep	func = 'triangle'
-					fg_color = 'green2'
+					fg_color = 'green'
 					fill = 'foreground'
-					width = 'height'
-					height = 'auto'
+					width = '10'
+					height = '5'
 					xpos = 'right'
-					ypos = 'center'
+					ypos = '10'
+					padding = '0, 0, 7, 0'
 					orientation = 'bottom'
 		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 7, 0'
+					orientation = 'top'
+		/>
 		<text	font = 'text_default'
 				text_color = 'color_normal_hover'
 				vertical_align = 'center'
 				horizontal_align = 'left'
 		/>
 	</drawdata>
+	
+	<drawdata id = 'popup_hover' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'bevelsq'
+					bevel = '2'
+					fill = 'none'
+		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '9'
+					padding = '0, 0, 3, 0'
+					orientation = 'bottom'
+		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 3, 0'
+					orientation = 'top'
+		/>
+		
+		<text	font = 'text_default'
+				text_color = 'color_normal'
+				vertical_align = 'center'
+				horizontal_align = 'left'
+		/>
+	</drawdata>
 
 	<drawdata id = 'widget_textedit' cache = 'false'>
 		<drawstep	func = 'bevelsq'
diff --git a/gui/themes/scummmodern/THEMERC b/gui/themes/scummmodern/THEMERC
index e6e2efe60e..1d288adffd 100644
--- a/gui/themes/scummmodern/THEMERC
+++ b/gui/themes/scummmodern/THEMERC
@@ -1 +1 @@
-[SCUMMVM_STX0.8.4:ScummVM Modern Theme:No Author]
+[SCUMMVM_STX0.8.5:ScummVM Modern Theme:No Author]
diff --git a/gui/themes/scummmodern/scummmodern_gfx.stx b/gui/themes/scummmodern/scummmodern_gfx.stx
index 24e41a84bc..e2c809af59 100644
--- a/gui/themes/scummmodern/scummmodern_gfx.stx
+++ b/gui/themes/scummmodern/scummmodern_gfx.stx
@@ -260,7 +260,7 @@
 	</drawdata>
 
 	<!-- Buttons at the top and bottom of the scrollbar -->
-	<drawdata id = 'scrollbar_button_idle' cache = 'false'>
+	<drawdata id = 'scrollbar_button_idle' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'roundedsq'
 					radius = '10'
 					fill = 'none'
@@ -270,15 +270,35 @@
 		<drawstep	func = 'triangle'
 					fg_color = 'shadowcolor'
 					fill = 'foreground'
-					width = 'auto'
-					height = 'auto'
-					xpos = 'center'
+					width = '10'
+					height = '10'
+					xpos = 'right'
 					ypos = 'center'
+					padding = '0,0,2,0'
 					orientation = 'top'
 		/>
 	</drawdata>
 
-	<drawdata id = 'scrollbar_button_hover' cache = 'false'>
+	<drawdata id = 'scrollbar_button_idle' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'roundedsq'
+					radius = '10'
+					fill = 'none'
+					fg_color = 'darkgray'
+					stroke = '1'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'shadowcolor'
+					fill = 'foreground'
+					width = '5'
+					height = '5'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,1,0'
+					orientation = 'top'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'scrollbar_button_hover' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'roundedsq'
 					radius = '10'
 					fill = 'gradient'
@@ -292,10 +312,30 @@
 		<drawstep	func = 'triangle'
 					fg_color = 'shadowcolor'
 					fill = 'foreground'
-					width = 'auto'
-					height = 'auto'
-					xpos = 'center'
+					width = '10'
+					height = '10'
+					xpos = 'right'
 					ypos = 'center'
+					padding = '0,0,2,0'
+					orientation = 'top'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'scrollbar_button_hover' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'roundedsq'
+					radius = '10'
+					fill = 'none'
+					fg_color = 'darkgray'
+					stroke = '1'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'shadowcolor'
+					fill = 'foreground'
+					width = '5'
+					height = '5'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,2,0'
 					orientation = 'top'
 		/>
 	</drawdata>
@@ -393,7 +433,7 @@
 	</drawdata>
 
 	<!-- Idle popup -->
-	<drawdata id = 'popup_idle' cache = 'false'>
+	<drawdata id = 'popup_idle' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'roundedsq'
 					radius = '5'
 					stroke = '1'
@@ -402,15 +442,68 @@
 					bg_color = 'xtrabrightred'
 					shadow = '2'
 		/>
+	
 		<drawstep	func = 'triangle'
 					bg_color = 'shadowcolor'
 					fill = 'background'
-					width = 'height'
-					height = 'auto'
+					width = '10'
+					height = '5'
 					xpos = 'right'
-					ypos = 'center'
+					ypos = '10'
+					padding = '0, 0, 6, 0'
 					orientation = 'bottom'
 		/>
+		
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 6, 0'
+					orientation = 'top'
+		/>
+		
+		<text	font = 'text_default'
+				text_color = 'color_normal'
+				vertical_align = 'center'
+				horizontal_align = 'left'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'popup_idle' cache = 'false' resolution ='y<400'>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fg_color = 'lightgray2'
+					fill = 'background'
+					bg_color = 'xtrabrightred'
+					shadow = '2'
+		/>
+	
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '9'
+					padding = '0, 0, 3, 0'
+					orientation = 'bottom'
+		/>
+		
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 3, 0'
+					orientation = 'top'
+		/>
+		
 		<text	font = 'text_default'
 				text_color = 'color_normal'
 				vertical_align = 'center'
@@ -419,31 +512,86 @@
 	</drawdata>
 
 	<!-- Disabled popup -->
-	<drawdata id = 'popup_disabled' cache = 'false'>
+	<drawdata id = 'popup_disabled' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'roundedsq'
+					stroke = '1'
+					fg_color = 'lightgray'
 					radius = '5'
-					fill = 'foreground'
-					fg_color = 'darkgray'
+					fill = 'gradient'
+					gradient_start = 'blandyellow'
+					gradient_end = 'xtrabrightred'
+					shadow = '0'
+		/>
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '10'
+					padding = '0, 0, 6, 0'
+					orientation = 'bottom'
+		/>
+		
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 6, 0'
+					orientation = 'top'
+		/>
+		
+		<text	font = 'text_default'
+				text_color = 'color_normal_hover'
+				vertical_align = 'center'
+				horizontal_align = 'left'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'popup_disabled' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fg_color = 'lightgray2'
+					fill = 'background'
+					bg_color = 'xtrabrightred'
 					shadow = '2'
 		/>
+	
 		<drawstep	func = 'triangle'
-					fg_color = 'shadowcolor'
-					fill = 'foreground'
-					width = 'height'
-					height = 'auto'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '7'
+					height = '4'
 					xpos = 'right'
-					ypos = 'center'
+					ypos = '9'
+					padding = '0, 0, 3, 0'
 					orientation = 'bottom'
 		/>
+		
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 3, 0'
+					orientation = 'top'
+		/>
+		
 		<text	font = 'text_default'
-				text_color = 'color_normal_disabled'
+				text_color = 'color_normal'
 				vertical_align = 'center'
 				horizontal_align = 'left'
 		/>
 	</drawdata>
 
 	<!-- Hovered popup -->
-	<drawdata id = 'popup_hover' cache = 'false'>
+	<drawdata id = 'popup_hover' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'roundedsq'
 					stroke = '1'
 					fg_color = 'lightgray'
@@ -454,20 +602,72 @@
 					shadow = '0'
 		/>
 		<drawstep	func = 'triangle'
-					fg_color = 'shadowcolor'
-					fill = 'foreground'
-					width = 'height'
-					height = 'auto'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '10'
+					height = '5'
 					xpos = 'right'
-					ypos = 'center'
+					ypos = '10'
+					padding = '0, 0, 6, 0'
 					orientation = 'bottom'
 		/>
+		
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 6, 0'
+					orientation = 'top'
+		/>
+		
 		<text	font = 'text_default'
 				text_color = 'color_normal_hover'
 				vertical_align = 'center'
 				horizontal_align = 'left'
 		/>
 	</drawdata>
+	
+	<drawdata id = 'popup_hover' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fg_color = 'lightgray2'
+					fill = 'background'
+					bg_color = 'xtrabrightred'
+					shadow = '2'
+		/>
+	
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '9'
+					padding = '0, 0, 3, 0'
+					orientation = 'bottom'
+		/>
+		
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 3, 0'
+					orientation = 'top'
+		/>
+		
+		<text	font = 'text_default'
+				text_color = 'color_normal'
+				vertical_align = 'center'
+				horizontal_align = 'left'
+		/>
+	</drawdata>
 
 	<!-- Background of the textedit widget -->
 	<drawdata id = 'widget_textedit' cache = 'false'>