Update static/js/editor.js

static/js/editor.js

@@ -511,35 +511,30 @@ function updateOverlayContent(currentTime) {
                     let textColor = '#ffffff';
                     if (w.color) textColor = w.color;
 
-                    // استایل پایه برای همه کلمات جهت جلوگیری از پرش
-                    let baseStyle = `display: inline-block;
-                                     font-family: inherit;
-                                     padding: 2px 4px; /* پدینگ فیزیکی حداقلی برای جلوگیری از ناپدید شدن */
-                                     margin: 2px; 
-                                     position: relative;`;
+                    let baseStyle = `display: inline-block; line-height: 1.4; border-radius: ${state.st.radius}px; font-family: inherit;`;
 
                     if(isActive) {
-                        // در اینجا از box-shadow برای ایجاد کادر بزرگ استفاده می‌کنیم
-                        // paddingX و paddingY سایه را کنترل می‌کنند نه فاصله فیزیکی را
-                        html += `<span style="${baseStyle}
-                                background-color: ${boxColor};
-                                border-radius: ${state.st.radius}px;
-                                color: ${textColor} !important;
-                                box-shadow: 0 0 0 ${state.st.paddingY}px ${boxColor}, 
-                                            ${state.st.paddingX}px 0 0 ${boxColor}, 
-                                            -${state.st.paddingX}px 0 0 ${boxColor};
-                                transform: scale(1.05);
-                                z-index: 100;">${w.word}</span>`;
+                        html += `<span style="${baseStyle} 
+                                background-color: ${boxColor}; 
+                                color: ${textColor} !important; 
+                                box-shadow: 0 0 0 ${state.st.paddingY}px ${boxColor}; 
+                                margin: 0 ${state.st.paddingX}px;
+                                padding: 2px 0; 
+                                position: relative; 
+                                z-index: 100;
+                                transform: scale(1.1);">${w.word}</span> `;
                     } else {
-                        // کلمات غیرفعال هیچ پس‌زمینه و سایه‌ای ندارند
-                        html += `<span style="${baseStyle}
-                                background-color: transparent;
-                                color: ${textColor} !important;
-                                z-index: 1;">${w.word}</span>`;
+                        html += `<span style="${baseStyle} 
+                                color: ${textColor} !important; 
+                                text-shadow: none; 
+                                margin: 0 ${state.st.paddingX}px;
+                                padding: 2px 0;
+                                position: relative;
+                                z-index: 1;">${w.word}</span> `;
                     }
                     
                     if ((i + 1) % 5 === 0 && i !== seg.words.length - 1) {
-                        html += "<br>";
+                        html += "<br><br>"; 
                     }
                 });
                 tEl.innerHTML = html;