← All changes | css/chat-style.css +101 -15 2.0.5 → 2.1.0 View file →

		@@ -170,8 +170,33 @@
170	170	gap: 8px !important;
171	171	margin-bottom: 8px !important;
172	172	}
173	173
	174	+.bot-message .chat-heading {
	175	+color: inherit;
	176	+}
	177	+
	178	+div.bot-message h1.chat-heading {
	179	+ font-size: 24px;
	180	+}
	181	+
	182	+div.bot-message h2.chat-heading {
	183	+ font-size: 20px;
	184	+}
	185	+
	186	+div.bot-message h3.chat-heading {
	187	+ font-size: 18px;
	188	+}
	189	+
	190	+div.bot-message h4.chat-heading {
	191	+ font-size: 16px;
	192	+}
	193	+
	194	+div.bot-message h5.chat-heading {
	195	+ font-size: 12px;
	196	+}
	197	+
	198	+
174	199	.mxchat-site-icon {
175	200	width: 16px !important;
176	201	height: 16px !important;
177	202	flex-shrink: 0 !important;
		@@ -263,15 +288,14 @@
263	288	}
264	289
265	290	.active-pdf-name {
266	291	font-size: 11px;
267		- color: #666;
268	292	white-space: nowrap;
269	293	overflow: hidden;
270	294	text-overflow: ellipsis;
271	295	}
272	296
273		-.remove-pdf-btn {
	297	+.remove-pdf-btn, .toolbar-perplexity {
274	298	background: 0 0;
275	299	border: none;
276	300	padding: 2px;
277	301	margin-left: 4px;
		@@ -279,9 +303,9 @@
279	303	transition: opacity .2s;
280	304	line-height: 13px;
281	305	}
282	306
283		-.remove-pdf-btn:hover {
	307	+.remove-pdf-btn:hover, .toolbar-perplexity:hover {
284	308	opacity: 1;
285	309	background: none;
286	310	}
287	311
		@@ -293,8 +317,9 @@
293	317	gap: 10px;
294	318	padding: 8px;
295	319	border-top: 1px solid #e5e5e5;
296	320	background: none;
	321	+ align-items: end;
297	322	}
298	323
299	324	#mxchat-chatbot .toolbar-btn {
300	325	background: none;
		@@ -331,8 +356,26 @@
331	356	background: none;
332	357	border: none;
333	358	}
334	359
	360	+/* Add this to your plugin's CSS */
	361	+.toolbar-btn.active {
	362	+ background-color: rgba(120, 115, 245, 0.2);
	363	+ box-shadow: 0 0 0 2px rgba(120, 115, 245, 0.4);
	364	+}
	365	+
	366	+
	367	+.system-message {
	368	+ padding: 8px 12px;
	369	+ margin: 8px 0;
	370	+ background-color: rgba(120, 115, 245, 0.1);
	371	+ border-radius: 8px;
	372	+ color: #555;
	373	+ font-style: italic;
	374	+ font-size: 14px;
	375	+ text-align: center;
	376	+}
	377	+
335	378	#mxchat-chatbot .spinner {
336	379	animation: rotate 2s linear infinite;
337	380	width: 20px;
338	381	height: 20px;
		@@ -746,9 +789,9 @@
746	789	text-align: left;
747	790	float: right;
748	791	clear: both;
749	792	border-radius: 18px 0 18px 18px;
750		- border: solid 1px #212121;
	793	+ border: 1px solid #e2e8ff;
751	794	word-wrap: break-word;
752	795	}
753	796
754	797	#mxchat-chatbot #chat-container #chat-box .bot-message {
		@@ -1030,52 +1073,81 @@
1030	1073	#mxchat-chatbot-wrapper .chatbot-footer .powered-by span {
1031	1074	text-decoration: underline;
1032	1075	}
1033	1076
1034		-.thinking-dots-container {
	1077	+#chat-box .bot-message.temporary-message .thinking-dots-container {
1035	1078	display: flex;
1036	1079	justify-content: center;
1037	1080	align-items: center;
1038	1081	overflow: hidden;
1039		- height: 20px; /* Adjust as needed */
	1082	+ height: 20px;
	1083	+ position: relative;
	1084	+ z-index: 1;
	1085	+ flex-shrink: 0;
1040	1086	}
1041	1087
1042		-.thinking-dots {
	1088	+#chat-box .bot-message.temporary-message .thinking-dots {
1043	1089	display: flex;
1044	1090	justify-content: center;
1045	1091	align-items: center;
1046	1092	height: 90%;
	1093	+ gap: 5px;
	1094	+ flex-shrink: 0;
1047	1095	}
1048	1096
1049		-.dot {
1050		- height: 8px;
1051		- width: 8px;
	1097	+#chat-box .bot-message.temporary-message .thinking-dots .dot {
	1098	+ height: 6px;
	1099	+ width: 6px;
1052	1100	margin: 0 3px;
1053	1101	background-color: #fff;
1054	1102	border-radius: 50%;
1055	1103	display: inline-block;
	1104	+ position: static;
	1105	+ right: auto;
	1106	+ top: auto;
	1107	+ text-align: initial;
	1108	+ color: transparent;
	1109	+ font-size: 0;
	1110	+ font-weight: normal;
	1111	+ line-height: normal;
	1112	+ font-style: normal;
1056	1113	animation: bounce 1.4s ease-in-out infinite both;
	1114	+ -webkit-animation: bounce 1.4s ease-in-out infinite both;
	1115	+ -moz-animation: bounce 1.4s ease-in-out infinite both;
	1116	+ -o-animation: bounce 1.4s ease-in-out infinite both;
	1117	+ vertical-align: middle;
1057	1118	}
1058	1119
1059		-.dot:first-child {
1060		- animation-delay: -.32s;
	1120	+#chat-box .bot-message.temporary-message .thinking-dots .dot:first-child {
	1121	+ animation-delay: -0.32s;
	1122	+ -webkit-animation-delay: -0.32s;
	1123	+ -moz-animation-delay: -0.32s;
	1124	+ -o-animation-delay: -0.32s;
1061	1125	}
1062	1126
1063		-.dot:nth-child(2) {
1064		- animation-delay: -.16s;
	1127	+#chat-box .bot-message.temporary-message .thinking-dots .dot:nth-child(2) {
	1128	+ animation-delay: -0.16s;
	1129	+ -webkit-animation-delay: -0.16s;
	1130	+ -moz-animation-delay: -0.16s;
	1131	+ -o-animation-delay: -0.16s;
1065	1132	}
1066	1133
1067	1134	@keyframes bounce {
1068	1135	0%, 100%, 80% {
1069	1136	transform: scale(1);
	1137	+ -webkit-transform: scale(1);
	1138	+ -moz-transform: scale(1);
	1139	+ -o-transform: scale(1);
1070	1140	}
1071	1141	40% {
1072	1142	transform: scale(1.5);
	1143	+ -webkit-transform: scale(1.5);
	1144	+ -moz-transform: scale(1.5);
	1145	+ -o-transform: scale(1.5);
1073	1146	}
1074	1147	}
1075	1148
1076	1149
1077		-
1078	1150	#pre-chat-message {
1079	1151	position: fixed;
1080	1152	bottom: 85px;
1081	1153	right: 30px;
		@@ -1165,6 +1237,20 @@
1165	1237	}
1166	1238
1167	1239
1168	1240
	1241	+/* Simplified styles for Perplexity status indicator */
	1242	+#active-perplexity-container {
	1243	+ display: flex;
	1244	+ align-items: center;
	1245	+ margin-left: 8px;
	1246	+ font-size: 12px;
	1247	+}
	1248	+
	1249	+#active-perplexity-status {
	1250	+}
	1251	+
	1252	+#perplexity-search-btn.active {
	1253	+ opacity: 1;
	1254	+}
1169	1255
1170	1256