/* * mic_system.css * ضع هذا الملف في: css/mic_system.css * أضف في : */ /* =========================== المنطقة الرئيسية =========================== */ #mic_stage_wrapper { width: 100%; background: var(--back_chat, #1a1a2e); border-bottom: 1px solid rgba(255,255,255,0.07); padding: 14px 10px 8px; box-sizing: border-box; user-select: none; -webkit-user-select: none; } #mic_stage { display: flex; justify-content: center; align-items: flex-end; gap: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; } #mic_stage::-webkit-scrollbar { display: none; } /* =========================== بطاقة المايك الواحد =========================== */ .mic_slot { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; width: 72px; position: relative; transition: transform .2s ease; } /* =========================== حلقة الصوت =========================== */ .mic_ring { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 62px; height: 62px; border-radius: 50%; pointer-events: none; z-index: 1; } .mic_ring_inner { width: 100%; height: 100%; border-radius: 50%; border: 2px solid transparent; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; } /* حالة يتكلم */ .mic_slot.speaking .mic_ring_inner { border-color: #2d7dff; box-shadow: 0 0 0 4px rgba(45,125,255,.18), 0 0 12px rgba(45,125,255,.35); animation: micPulse .7s ease-in-out infinite alternate; } @keyframes micPulse { from { box-shadow: 0 0 0 3px rgba(45,125,255,.15), 0 0 8px rgba(45,125,255,.25); } to { box-shadow: 0 0 0 7px rgba(45,125,255,.07), 0 0 18px rgba(45,125,255,.45); } } /* =========================== الصورة الرمزية =========================== */ .mic_avatar_wrap { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; cursor: pointer; position: relative; z-index: 2; background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.10); transition: border-color .2s, transform .15s; flex-shrink: 0; } .mic_avatar_wrap:active { transform: scale(.93); } .mic_slot.occupied .mic_avatar_wrap { border-color: rgba(45,125,255,.5); } .mic_slot.speaking .mic_avatar_wrap { border-color: #2d7dff; } .mic_avatar { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* أيقونة كتم */ .mic_mute_badge { display: none; position: absolute; bottom: 0; right: 0; background: #e74c3c; border-radius: 50%; width: 18px; height: 18px; font-size: 9px; color: #fff; align-items: center; justify-content: center; border: 1.5px solid var(--back_chat, #1a1a2e); z-index: 3; } .mic_slot.muted .mic_mute_badge { display: flex; } /* =========================== الاسم =========================== */ .mic_name { font-size: 11px; color: rgba(255,255,255,.55); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px; line-height: 1.2; margin-top: 2px; } .mic_slot.occupied .mic_name { color: rgba(255,255,255,.85); } /* =========================== زر الصعود =========================== */ .mic_btn { display: none; /* يظهر فقط على المايك الفارغ عند hover أو touch */ align-items: center; justify-content: center; gap: 4px; background: #2d7dff; color: #fff; border: none; border-radius: 20px; padding: 4px 10px; font-size: 11px; cursor: pointer; outline: none; transition: background .2s, transform .15s; white-space: nowrap; } .mic_btn:active { transform: scale(.93); background: #1a5fd4; } .mic_btn i { font-size: 10px; } /* على الموبايل: اظهر الزر دائماً للمايكات الفارغة */ @media (hover: none) { .mic_slot:not(.occupied) .mic_btn { display: flex; } .mic_slot:not(.occupied) .mic_avatar_wrap { cursor: default; } } /* على الديسكتوب: عند hover */ @media (hover: hover) { .mic_slot:not(.occupied):hover .mic_btn { display: flex; } } /* =========================== شريط الحالة =========================== */ #mic_status_bar { text-align: center; margin-top: 6px; min-height: 16px; } #mic_status_text { font-size: 11px; color: rgba(255,255,255,.4); transition: color .3s; } #mic_status_text.active { color: #2d7dff; } #mic_status_text.error { color: #e74c3c; } /* =========================== حالة طلب معلق (وميض) =========================== */ .mic_slot.pending .mic_avatar_wrap { border-color: #f39c12; animation: pendingBlink .9s ease-in-out infinite alternate; } @keyframes pendingBlink { from { border-color: rgba(243,156,18,.4); } to { border-color: #f39c12; } } /* =========================== أيقونة المايك الفارغ =========================== */ .mic_slot:not(.occupied) .mic_avatar { filter: opacity(.3) grayscale(1); padding: 12px; box-sizing: border-box; } /* =========================== Responsive - موبايل صغير =========================== */ @media (max-width: 380px) { .mic_slot { width: 62px; } .mic_avatar_wrap { width: 52px; height: 52px; } .mic_ring { width: 54px; height: 54px; } #mic_stage { gap: 10px; } }