Mark-Lasfar
Fix: Multilingual speech synthesis with advanced language detection and playback controls
625c807 | /* | |
| * SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org> | |
| * SPDX-License-Identifier: Apache-2.0 | |
| */ | |
| .bubble { | |
| display: block ; | |
| align-self: flex-start; | |
| background: #1f1f1f; | |
| color: #e8e8e8; | |
| border-radius: var(--bubble-radius, 1rem); | |
| line-height: 1.5; | |
| white-space: normal; | |
| font-family: 'Inter', sans-serif; | |
| font-size: 0.95rem; | |
| position: relative; | |
| opacity: 1 ; | |
| animation: bubbleAppear 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; | |
| margin: 0.75rem 0; | |
| overflow-wrap: break-word; | |
| word-break: break-word; | |
| vertical-align: middle; | |
| padding: 1rem; | |
| box-sizing: border-box; | |
| max-width: 100%; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| transition: all 0.3s ease; | |
| min-height: 20px; | |
| user-select: text; /* للسماح بتحديد النصوص */ | |
| } | |
| .bubble:hover { | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); | |
| transform: translateY(-1px); | |
| } | |
| @keyframes bubbleAppear { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .bubble-user { | |
| align-self: flex-end; | |
| background: #2b2b2b; | |
| color: #fff; | |
| border-bottom-right-radius: 0.5rem; | |
| box-shadow: none; | |
| } | |
| .bubble-assist { | |
| align-self: flex-start; | |
| background: transparent; | |
| border: none; | |
| box-shadow: none; | |
| } | |
| .message-container { | |
| margin: 1rem 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .message-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-top: 0.5rem; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .message-container:hover .message-actions { | |
| opacity: 1; | |
| } | |
| .action-btn { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| color: #3b82f6; | |
| font-size: 0.9rem; | |
| padding: 0.2rem 0.5rem; | |
| } | |
| .action-btn:hover { | |
| color: #60a5fa; | |
| } | |
| /* Light theme support for bubbles (يتناغم مع tailwind) */ | |
| html.light .bubble { | |
| background: #f3f4f6; | |
| color: #1f2937; | |
| border-color: #e5e7eb; | |
| } | |
| html.light .bubble-user { | |
| background: #e0f2fe; | |
| } | |
| html.light .bubble-assist { | |
| background: #ffffff; | |
| } | |
| html.light .message-actions .action-btn { | |
| color: #3b82f6; | |
| } | |
| html.light .message-actions .action-btn:hover { | |
| color: #2563eb; | |
| } | |
| /* ============================================================ | |
| SPEECH CONTROLS | |
| ============================================================ */ | |
| /* Container لأزرار التحكم */ | |
| .speech-controls { | |
| display: flex; | |
| gap: 6px; | |
| margin-top: 8px; | |
| padding-top: 6px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.15); | |
| flex-wrap: wrap; | |
| } | |
| /* تنسيق الأزرار داخل الـ speech-controls */ | |
| .speech-controls .action-btn { | |
| background: rgba(59, 130, 246, 0.15); | |
| border-radius: 8px; | |
| padding: 4px 8px; | |
| transition: all 0.2s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .speech-controls .action-btn:hover { | |
| background: rgba(59, 130, 246, 0.35); | |
| transform: scale(1.05); | |
| } | |
| .speech-controls .action-btn:active { | |
| transform: scale(0.95); | |
| } | |
| /* زر الصوت النابض أثناء التشغيل */ | |
| @keyframes speakingPulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| 50% { | |
| transform: scale(1.15); | |
| opacity: 0.7; | |
| } | |
| } | |
| .action-btn.speaking { | |
| animation: speakingPulse 0.6s ease-in-out infinite; | |
| color: #10b981 ; | |
| } | |
| /* ============================================================ | |
| LIGHT THEME SUPPORT FOR SPEECH CONTROLS | |
| ============================================================ */ | |
| html.light .speech-controls { | |
| border-top-color: rgba(0, 0, 0, 0.1); | |
| } | |
| html.light .speech-controls .action-btn { | |
| background: rgba(59, 130, 246, 0.1); | |
| color: #2563eb; | |
| } | |
| html.light .speech-controls .action-btn:hover { | |
| background: rgba(59, 130, 246, 0.25); | |
| color: #1d4ed8; | |
| } | |
| html.light .action-btn.speaking { | |
| color: #059669 ; | |
| } | |
| /* ============================================================ | |
| RESPONSIVE FOR MOBILE | |
| ============================================================ */ | |
| @media (max-width: 640px) { | |
| .speech-controls { | |
| gap: 4px; | |
| } | |
| .speech-controls .action-btn { | |
| padding: 3px 6px; | |
| } | |
| .speech-controls .action-btn svg { | |
| width: 12px; | |
| height: 12px; | |
| } | |
| } |