Tweak: Custom UI's improvement & visibility fix (#902)

<!-- Пишите **НИЖЕ** заголовков и **ВЫШЕ** комментариев, иначе что то
может пойти не так. -->
<!-- Вы можете прочитать Contributing.MD, если хотите узнать больше. -->

## Что этот PR делает
- Немного улучшает спрайты кастомных худов, поправляя их, и местами
улучшая видимость слотов и выделения (смотреть icondiff)
 - Исправляет видимость новых худов в выборе
- Добавляет покраску обводки предметов и тултипов, которые я забыл
добавить изначально
- Trasen был переименован в Trasenknox, дабы иметь сходство с другими
кодовыми базами и дабы его было проще находить в поиске вскода
 
## Почему это хорошо для игры
Доработка худов, и их видимость в селекторе худов

## Изображения изменений

![image](https://github.com/ss220club/Paradise-SS220/assets/20109643/19105ae6-2f96-47ba-8fff-8d88f0386b3a)

![image](https://github.com/ss220club/Paradise-SS220/assets/20109643/72c000e3-890a-4854-a62c-cb9f0e030a0b)

![image](https://github.com/ss220club/Paradise-SS220/assets/20109643/283577d0-e71a-48c9-8dfe-b98a574caa21)

![image](https://github.com/ss220club/Paradise-SS220/assets/20109643/663c2675-d698-40a0-8aae-ee7aeb1671e6)

## Тестирование
Проверял в игре

## Changelog

:cl:
tweak: Визуальные улучшения новых интерфейсов (видимость слотов и
выделения, правки)
tweak: Новые интерфейсы теперь также окрашивают тултип и обводку
предметов
fix: Новые интерфейсы снова отображаются в селекторе UI style
/:cl:

<!-- Оба :cl:'а должны быть на месте, что-бы чейнджлог работал! Вы
можете написать свой ник справа от первого :cl:, если хотите. Иначе
будет использован ваш ник на ГитХабе. -->
<!-- Вы можете использовать несколько записей с одинаковым префиксом
(Они используются только для иконки в игре) и удалить ненужные. Помните,
что чейнджлог должен быть понятен обычным игроком. -->
<!-- Если чейнджлог не влияет на игроков(например, это рефактор), вы
можете исключить всю секцию. -->

code/__DEFINES/color_defines.dm

@@ -129,6 +129,11 @@
 #define COLOR_THEME_OPERATIVE "#B8221F"
 #define COLOR_THEME_GLASS "#75A4C4"
 #define COLOR_THEME_CLOCKWORK "#CFBA47"
+// SS220 ADDITION - START
+#define COLOR_THEME_VAPORWAVE "#bc3ce3"
+#define COLOR_THEME_DETECTIVE "#c7b08b"
+#define COLOR_THEME_TRASENKNOX "#3ce375"
+// SS220 ADDITION - END
 
 // Color matrix utilities
 #define COLOR_MATRIX_ADD(C) list(COLOR_RED, COLOR_GREEN, COLOR_BLUE, C)

code/__HELPERS/type2type.dm

@@ -209,16 +209,16 @@
 			return 'icons/mob/screen_white.dmi'
 		if("Midnight")
 			return 'icons/mob/screen_midnight.dmi'
-		// SS220 ADDITION START
+		// SS220 ADDITION - START
 		if("Vaporwave")
 			return 'modular_ss220/aesthetics/skin/icons/screen_vaporwave.dmi'
 		if("Detective")
 			return 'modular_ss220/aesthetics/skin/icons/screen_detective.dmi'
-		if("Trasen")
+		if("Trasenknox")
 			return 'modular_ss220/aesthetics/skin/icons/screen_trasenknox.dmi'
 		if("Clockwork")
 			return 'modular_ss220/aesthetics/skin/icons/screen_clockwork.dmi'
-		// SS220 ADDITION END
+		// SS220 ADDITION - END
 		else
 			return 'icons/mob/screen_midnight.dmi'
 

code/game/objects/items.dm

@@ -779,6 +779,14 @@ GLOBAL_DATUM_INIT(welding_sparks, /mutable_appearance, mutable_appearance('icons
 				outline_color = COLOR_THEME_CLOCKWORK //if you want free gbp go fix the fact that clockwork's tooltip css is glass'
 			if("glass")
 				outline_color = COLOR_THEME_GLASS
+			// SS220 ADDITION - START
+			if("vaporwave")
+				outline_color = COLOR_THEME_VAPORWAVE
+			if("detective")
+				outline_color = COLOR_THEME_DETECTIVE
+			if("trasenknox")
+				outline_color = COLOR_THEME_TRASENKNOX
+			// SS220 ADDITION - END
 			else //this should never happen, hopefully
 				outline_color = COLOR_WHITE
 	if(color)

code/modules/client/preference/link_processing.dm

@@ -929,7 +929,7 @@
 				if("hear_adminhelps")
 					sound ^= SOUND_ADMINHELP
 				if("ui")
-					var/new_UI_style = tgui_input_list(user, "Choose your UI style", "UI style", list("Midnight", "Plasmafire", "Retro", "Slimecore", "Operative", "White"))
+					var/new_UI_style = tgui_input_list(user, "Choose your UI style", "UI style", list("Midnight", "Plasmafire", "Retro", "Slimecore", "Operative", "White", "Vaporwave", "Detective", "Trasenknox", "Clockwork")) // SS220 EDIT "Vaporwave, Detective, Trasenknox, Clockwork"
 					if(!new_UI_style)
 						return
 					switch(new_UI_style)
@@ -945,16 +945,16 @@
 							UI_style = "Operative"
 						if("White")
 							UI_style = "White"
-						// SS220 ADDITION START
+						// SS220 ADDITION - START
 						if("Vaporwave")
 							UI_style = "Vaporwave"
 						if("Detective")
 							UI_style = "Detective"
-						if("Trasen")
-							UI_style = "Trasen"
+						if("Trasenknox")
+							UI_style = "Trasenknox"
 						if("Clockwork")
 							UI_style = "Clockwork"
-						// SS220 ADDITION END
+						// SS220 ADDITION - END
 
 					if(ishuman(usr)) //mid-round preference changes, for aesthetics
 						var/mob/living/carbon/human/H = usr

code/modules/client/preference/preferences_mysql.dm

@@ -35,7 +35,7 @@
 
 	//Sanitize
 	ooccolor		= sanitize_hexcolor(ooccolor, initial(ooccolor))
-	UI_style		= sanitize_inlist(UI_style, list("White", "Midnight", "Plasmafire", "Retro", "Slimecore", "Operative", "Vaporwave", "Detective", "Trasen", "Clockwork"), initial(UI_style))// SS220 ADDITIONS "Vaporwave, Detective, Trasen, Clockwork"
+	UI_style		= sanitize_inlist(UI_style, list("White", "Midnight", "Plasmafire", "Retro", "Slimecore", "Operative", "Vaporwave", "Detective", "Trasenknox", "Clockwork"), initial(UI_style)) // SS220 EDIT "Vaporwave, Detective, Trasenknox, Clockwork"
 	default_slot	= sanitize_integer(default_slot, 1, max_save_slots, initial(default_slot))
 	toggles			= sanitize_integer(toggles, 0, TOGGLES_TOTAL, initial(toggles))
 	toggles2		= sanitize_integer(toggles2, 0, TOGGLES_2_TOTAL, initial(toggles2))

code/modules/tooltip/tooltip.html

@@ -77,6 +77,19 @@
 		.operative .wrap {border-color: #1E0101;}
 		.operative .content {color: #FFFFFF; border-color: #750000; background-color: #350000;}
 
+		/* SS220 ADDITION - START */
+		.clockwork .wrap {border-color: #170800;}
+		.clockwork .content {color: #B18B25; border-color: #000000; background-color: #5F380E;}
+
+		.vaporwave .wrap {border-color: #0c122c;}
+		.vaporwave .content {color: #bc3ce3; border-color: #170c2c; background-color: #1d1a22;}
+
+		.detective .wrap {border-color: #2c0F0c;}
+		.detective .content {color: #c7b08b; border-color: #2c0F0c; background-color: #221c1a;}
+
+		.trasenknox .wrap {border-color: #998e81;}
+		.trasenknox .content {color: #3ce375; border-color: #998e81; background-color: #1e1d21;}
+		/* SS220 ADDITION - END */
 
 	</style>
 </head>