← All changes | css/chat-transcripts.css +232 -0 2.0.5 → 2.3.3 View file →

		@@ -128,4 +128,236 @@
128	128	font-size: 16px;
129	129	width: 16px;
130	130	height: 16px;
131	131	}
	132	+
	133	+
	134	+
	135	+
	136	+/* Chat Email Notification Modal styles */
	137	+.mxchat-chat-notification-modal-overlay {
	138	+ position: fixed;
	139	+ z-index: 9999;
	140	+ left: 0;
	141	+ top: 0;
	142	+ width: 100%;
	143	+ height: 100%;
	144	+ background-color: rgba(0, 0, 0, 0.5);
	145	+ display: flex;
	146	+ align-items: center;
	147	+ justify-content: center;
	148	+ animation: mxchatNotificationFadeIn 0.3s ease;
	149	+}
	150	+
	151	+@keyframes mxchatNotificationFadeIn {
	152	+ from { opacity: 0; }
	153	+ to { opacity: 1; }
	154	+}
	155	+
	156	+.mxchat-chat-notification-modal-content {
	157	+ background-color: #fff;
	158	+ border-radius: 12px;
	159	+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	160	+ width: 90%;
	161	+ max-width: 500px;
	162	+ animation: mxchatNotificationSlideIn 0.3s ease;
	163	+}
	164	+
	165	+@keyframes mxchatNotificationSlideIn {
	166	+ from { transform: translateY(-20px); opacity: 0; }
	167	+ to { transform: translateY(0); opacity: 1; }
	168	+}
	169	+
	170	+.mxchat-chat-notification-modal-header {
	171	+ padding: 20px;
	172	+ border-bottom: 1px solid #e5e7eb;
	173	+ display: flex;
	174	+ justify-content: space-between;
	175	+ align-items: center;
	176	+}
	177	+
	178	+.mxchat-chat-notification-modal-header h2 {
	179	+ margin: 0;
	180	+ font-size: 20px;
	181	+ font-weight: 600;
	182	+ color: #1f2937;
	183	+}
	184	+
	185	+.mxchat-chat-notification-modal-close {
	186	+ background: none;
	187	+ border: none;
	188	+ font-size: 24px;
	189	+ cursor: pointer;
	190	+ color: #6b7280;
	191	+ padding: 0;
	192	+ width: 30px;
	193	+ height: 30px;
	194	+ display: flex;
	195	+ align-items: center;
	196	+ justify-content: center;
	197	+ border-radius: 50%;
	198	+ transition: all 0.2s ease;
	199	+}
	200	+
	201	+.mxchat-chat-notification-modal-close:hover {
	202	+ background-color: #f3f4f6;
	203	+ color: #1f2937;
	204	+}
	205	+
	206	+.mxchat-chat-notification-modal-body {
	207	+ padding: 20px;
	208	+}
	209	+
	210	+.mxchat-chat-notification-modal-body p {
	211	+ margin-top: 0;
	212	+ color: #4b5563;
	213	+ line-height: 1.6;
	214	+}
	215	+
	216	+.mxchat-chat-notification-modal-footer {
	217	+ padding: 20px;
	218	+ border-top: 1px solid #e5e7eb;
	219	+ display: flex;
	220	+ justify-content: flex-end;
	221	+ gap: 10px;
	222	+}
	223	+
	224	+#mxchat-chat-email-notification-btn:hover {
	225	+ transform: translateY(-2px);
	226	+ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
	227	+}
	228	+
	229	+#mxchat-chat-email-notification-btn .dashicons {
	230	+ font-size: 18px;
	231	+ width: 18px;
	232	+ height: 18px;
	233	+}
	234	+
	235	+/* Form styles within chat notification modal */
	236	+.mxchat-chat-notification-modal-content .form-table {
	237	+ margin: 0;
	238	+}
	239	+
	240	+.mxchat-chat-notification-modal-content .form-table th {
	241	+ padding: 15px 10px 15px 0;
	242	+ width: 180px;
	243	+ font-weight: 600;
	244	+ color: #374151;
	245	+}
	246	+
	247	+.mxchat-chat-notification-modal-content .form-table td {
	248	+ padding: 15px 10px;
	249	+}
	250	+
	251	+.mxchat-chat-notification-modal-content .regular-text {
	252	+ width: 100%;
	253	+ max-width: 100%;
	254	+ border: 1px solid #d1d5db;
	255	+ border-radius: 6px;
	256	+ padding: 8px 12px;
	257	+ font-size: 14px;
	258	+}
	259	+
	260	+.mxchat-chat-notification-modal-content .description {
	261	+ margin-top: 8px;
	262	+ color: #6b7280;
	263	+ font-size: 13px;
	264	+}
	265	+
	266	+/* Checkbox styling in chat notification modal */
	267	+.mxchat-chat-notification-modal-content input[type="checkbox"] {
	268	+ margin-right: 8px;
	269	+}
	270	+
	271	+.mxchat-chat-notification-modal-content label {
	272	+ color: #374151;
	273	+ font-size: 14px;
	274	+}
	275	+
	276	+/* Button styling in chat notification modal */
	277	+.mxchat-chat-notification-modal-content .button {
	278	+ padding: 8px 16px;
	279	+ border-radius: 6px;
	280	+ font-size: 14px;
	281	+ cursor: pointer;
	282	+ transition: all 0.2s ease;
	283	+}
	284	+
	285	+.mxchat-chat-notification-modal-content .button-primary {
	286	+ background: linear-gradient(135deg, #3b82f6, #8b5cf6);
	287	+ border: none;
	288	+ color: #fff;
	289	+}
	290	+
	291	+.mxchat-chat-notification-modal-content .button-primary:hover {
	292	+ transform: translateY(-1px);
	293	+ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
	294	+}
	295	+
	296	+.mxchat-chat-notification-modal-content .mxchat-chat-notification-modal-cancel {
	297	+ background: #f3f4f6;
	298	+ border: 1px solid #e5e7eb;
	299	+ color: #374151;
	300	+}
	301	+
	302	+.mxchat-chat-notification-modal-content .mxchat-chat-notification-modal-cancel:hover {
	303	+ background: #e5e7eb;
	304	+}
	305	+
	306	+
	307	+
	308	+
	309	+/* Pagination Styles */
	310	+.mxchat-pagination {
	311	+ margin-top: 20px;
	312	+ display: flex;
	313	+ flex-wrap: wrap;
	314	+ justify-content: space-between;
	315	+ align-items: center;
	316	+}
	317	+
	318	+.mxchat-pagination-info {
	319	+ margin-bottom: 10px;
	320	+ color: #666;
	321	+}
	322	+
	323	+.mxchat-pagination-controls {
	324	+ display: flex;
	325	+ flex-wrap: wrap;
	326	+ gap: 5px;
	327	+}
	328	+
	329	+.mxchat-pagination-button {
	330	+ padding: 6px 12px;
	331	+ background: #f7f7f7;
	332	+ border: 1px solid #ddd;
	333	+ border-radius: 3px;
	334	+ cursor: pointer;
	335	+ transition: all 0.2s ease;
	336	+}
	337	+
	338	+.mxchat-pagination-button:hover {
	339	+ background: #e9e9e9;
	340	+}
	341	+
	342	+.mxchat-pagination-button.active {
	343	+ background: #2271b1;
	344	+ border-color: #2271b1;
	345	+ color: white;
	346	+ font-weight: bold;
	347	+}
	348	+
	349	+.mxchat-pagination-ellipsis {
	350	+ padding: 6px 8px;
	351	+ color: #666;
	352	+}
	353	+
	354	+@media (max-width: 782px) {
	355	+ .mxchat-pagination {
	356	+ flex-direction: column;
	357	+ align-items: flex-start;
	358	+ }
	359	+
	360	+ .mxchat-pagination-controls {
	361	+ margin-top: 10px;
	362	+ }
	363	+}