v1.0.8

CHANGELOG.md

@@ -1,5 +1,6 @@
 # Version 1.0.8 - Tidy Chat
 - Added a Chat Card theme design stolen from [Luckas](https://discord.com/channels/170995199584108546/1065764029278212230/1130303762515361902) on Discord... It was too pretty not to steal.
+  - Has two settings, one for the border radius of the chat cards and the other if the chat card should be brought to the front when hovered over.
 - Added CSS Variables for Player Color `--player-color-PLYAERID`and `--player-color-PLAYERID-contrast` variables
   - These CSS variables will update anytime a player changes their color for live changes to any UI using them
 - Fixed Chat Textarea not getting themed in `Foundry Colorized`.... Sorry this took so long...

languages/en.json

@@ -361,7 +361,17 @@
 				"settings": {
 					"tidySidebarChat": {
 						"name": "Tidy Sidebar Chat",
-						"hint": "This setting will format the chat cards in a manner that I personally like inspired by Lukas from Discord."
+						"hint": "This setting will format the chat cards in a manner that I personally like inspired by Lukas from Discord.",
+						"settings": {
+							"borderRadius": {
+								"name": "Border Radius",
+								"hint": "This setting controls the border radius of the chat cards."
+							},
+							"zIndex": {
+								"name": "On Chat Message Hover z-index",
+								"hint": "When set to 1, the chat card will appear above the other chat cards when hovered. When set to 0, the chat card will remain the same."
+							}
+						}
 					},
 					"tidySidebarPaddingY": {
 						"name": "Tidy Sidebar (Padding Y)",

themes/assets/scripts/tidy-sidebar-chat.js

@@ -7,5 +7,5 @@ document.querySelectorAll('#sidebar #chat .chat-message').forEach((elem) => {
 
 // On New Chat Cards set Player Color
 Hooks.on('renderChatMessage', async (chatMessage, [elem], data) => {
-	elem.style.setProperty('--player-color', `var(--player-color-${data.user.id}, ${data.user.color})`);
+	elem.style.setProperty('--player-color', `var(--player-color-${chatMessage.user.id}, ${chatMessage.user.color})`);
 });

themes/assets/styles/tidy-sidebar-chat.css

@@ -1,6 +1,6 @@
 #sidebar #chat .chat-message {
 	border-color: var(--player-color) !important;
-	border-radius: 5px 5px 0 0;
+	border-radius: var(--tidy-sidebar-chat-border-radius, 5px) var(--tidy-sidebar-chat-border-radius, 5px) 0 0;
     border-width: 0 0 0 3px;
     box-shadow: 0 0 5px black;
     margin: 0px 3px;
@@ -10,12 +10,12 @@
 	transition: box-shadow 0.2s ease-in-out, border-radius 0.2s ease-in-out;
 }
 #sidebar #chat .chat-message:last-child {
-	border-radius: 5px;
+	border-radius: var(--tidy-sidebar-chat-border-radius, 5px);
 }
 #sidebar #chat .chat-message.message:hover {
-	border-radius: 5px;
+	border-radius: var(--tidy-sidebar-chat-border-radius, 5px);
     box-shadow: 0 0 10px black;
-    z-index: 1;
+    z-index: var(--tidy-sidebar-chat-z-index, 1);
 }
 #sidebar #chat .chat-message header.message-header {
 	border-bottom: 2px groove #FFF;

themes/lib-themer.theme

@@ -199,7 +199,29 @@
 				},{
 					"name": "./modules/lib-themer/themes/assets/scripts/tidy-sidebar-chat.js",
 					"type": "text/javscript"
-				}]
+				}],
+				"settings": {
+					"--tidy-sidebar-chat-border-radius": {
+						"name": "lib-themer.theme.cssTidySidebar.settings.tidySidebarChat.settings.borderRadius.name",
+						"hint": "lib-themer.theme.cssTidySidebar.settings.tidySidebarChat.settings.borderRadius.hint",
+						"type": "number",
+						"default": "5px",
+						"range": {
+							"min": 0,
+							"max": 5
+						}
+					},
+					"--tidy-sidebar-chat-z-index": {
+						"name": "lib-themer.theme.cssTidySidebar.settings.tidySidebarChat.settings.zIndex.name",
+						"hint": "lib-themer.theme.cssTidySidebar.settings.tidySidebarChat.settings.zIndex.hint",
+						"type": "number",
+						"default": "1",
+						"range": {
+							"min": 0,
+							"max": 1
+						}
+					}
+				}
 			},
 			"--tidy-sidebar-padding-y": {
 				"name": "lib-themer.theme.cssTidySidebar.settings.tidySidebarPaddingY.name",