Update src/App.scss

src/App.scss

@@ -1,4 +1,3 @@
-// ... (بالای فایل App.scss بدون تغییر) ...
 // 1. Import Tailwind's base, components, and utilities
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
@@ -47,16 +46,28 @@
 }
 
 .main-wrapper {
-    min-height: 100vh; 
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
 }
 .media-area {
-    flex-grow: 1; 
+    flex-grow: 1;
+    position: relative; // برای large-logo-container
 }
 
+#large-logo-container { // استایل از HTML مرجع شما
+    display: flex; // در App.tsx با flex items-center justify-center کنترل می شود
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
 
-/* Notification Popover & Header controls ... (بدون تغییر از نسخه قبل) ... */
+
+/* Notification Popover & Header controls (بدون تغییر از پاسخ قبلی) */
 .notification-popover-wrapper {
     position: fixed;
     top: 1rem;
@@ -69,7 +80,6 @@
     justify-content: center;
     pointer-events: none;
 }
-
 .popover-content {
     width: 100%;
     border-radius: var(--radius-md, 0.5rem);
@@ -83,14 +93,12 @@
     opacity: 0;
     transform: translateY(-100%) scale(0.9);
     pointer-events: none;
-
     &.open {
         opacity: 1;
         transform: translateY(0) scale(1);
         pointer-events: auto;
     }
 }
-
 .notification-popover-text-content {
     background-color: #eff6ff;
     font-size: 0.875rem;
@@ -104,10 +112,9 @@
     background-color: oklch(0.25 0.05 230);
     color: oklch(0.95 0.01 230);
 }
-
 .header-controls {
     display: flex;
-    padding: 0.75rem 0.5rem; 
+    padding: 0.75rem 0.5rem;
     justify-content: space-between;
     align-items: center;
     width: 100%;
@@ -116,43 +123,38 @@
     left: 0;
     z-index: 10;
 }
-
 .header-button {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0.5rem; 
-    width: 40px;  
-    height: 40px; 
-    border-radius: var(--radius-lg, 0.625rem); 
-    background-color: #e5e7eb; 
+    padding: 0.5rem;
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-lg, 0.625rem);
+    background-color: #e5e7eb;
     cursor: pointer;
-    transition: background-color 0.2s, transform 0.1s ease-out; 
-
+    transition: background-color 0.2s, transform 0.1s ease-out;
     svg {
         opacity: 0.7;
-        stroke: #374151; 
-        width: 24px;   
+        stroke: #374151;
+        width: 24px;
         height: 24px;
     }
-
     &:hover {
-        background-color: #d1d5db; 
+        background-color: #d1d5db;
     }
-
     &:active {
-        background-color: #9ca3af; 
-        transform: scale(0.95); 
+        background-color: #9ca3af;
+        transform: scale(0.95);
     }
 }
-
 .dark .header-button {
     background-color: oklch(0.28 0 0);
     &:hover {
         background-color: oklch(0.35 0 0);
     }
     &:active {
-        background-color: oklch(0.40 0 0); 
+        background-color: oklch(0.40 0 0);
         transform: scale(0.95);
     }
     svg {
@@ -161,98 +163,105 @@
     }
 }
 
-
+/* Logo Animation Styling */
 .logo-animation-wrapper {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-    // svg inside the logo should fill its container
-    & > div > svg {
+    & > div > svg { // اطمینان از اینکه SVG داخل لوگو تمام فضا را پر می کند
         width: 100%;
         height: 100%;
     }
 }
+.logo-animation-wrapper.for-footer {
+    // اگر نیاز به استایل خاصی برای لوگوی فوتر باشد
+}
+
 
 /* Footer styles to mimic HTML example */
 .footer-controls-html-like {
     width: 100%;
     display: flex;
-    /* Default for HTML was space-between if no logo, space-around with logo.
-       Let's try space-between and position logo absolutely for now. */
-    justify-content: space-between; // Mic left, Cam right as per your HTML example
-    align-items: center;
+    align-items: center; // برای هم ترازی عمودی
     position: absolute;
     bottom: 0;
-    // Padding from your HTML example
-    padding: 2rem 3rem; // 32px top/bottom, 48px left/right
+    padding: 2rem 3rem; // 32px top/bottom, 48px left/right (از HTML مرجع)
     box-sizing: border-box;
-    z-index: 20;
-}
+    z-index: 20; // بالاتر از محتوای مدیا
 
-// Wrapper for the camera button and its switch button, to align with HTML
-.cam-wrapper-html-like {
-    position: relative; // For absolute positioning of switch-camera-button
-    display: flex;
-    justify-content: center; // Center the button itself if wrapper is wider
+    // چیدمان دکمه ها: میکروفون چپ، لوگو وسط (اگر فعال)، دوربین راست
+    // با استفاده از flex-grow برای لوگو، دکمه ها به کناره ها می چسبند
+    // یا با justify-content: space-between و margin auto برای لوگو
+    justify-content: space-between; // میکروفو�� چپ، دوربین راست
 }
 
+// کانتینر برای لوگوی کوچک در فوتر، برای قرارگیری دقیق بین دکمه ها
 .small-logo-footer-html-like {
-    // This will be positioned between the two main buttons if footer uses space-around
-    // If footer uses space-between, we might need to position it absolutely in the center
-    // For now, let's assume it just takes its space if visible.
-    // We need to ensure the parent .footer-controls-html-like can accommodate it.
-    // To place it in the absolute center of the footer:
-    position: absolute;
-    left: 50%;
-    top: 50%; // Relative to footer's padding box
-    transform: translate(-50%, -50%);
-    z-index: 1; // Behind buttons if they overlap
+    // این به صورت خودکار بین دو دکمه قرار می گیرد اگر فضای کافی باشد
+    // یا می توان آن را به صورت absolute در وسط قرار داد
+    // position: absolute;
+    // left: 50%;
+    // top: 50%;
+    // transform: translate(-50%, -50%);
+    // z-index: 1; // پشت دکمه ها اگر همپوشانی داشته باشند
+    // برای حالا، اجازه می دهیم با flex در جای خود قرار گیرد
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // اگر می خواهید دقیقاً وسط باشد و دکمه ها در کناره ها:
+    margin-left: auto;
+    margin-right: auto;
 }
 
 
+.control-button-wrapper { // برای دکمه دوربین و دکمه تعویض آن
+    position: relative;
+    display: flex;
+    justify-content: center;
+}
+// .cam-wrapper-html-like در ControlTray.tsx استفاده شده
+
 .control-button {
-    height: 80px; // From your HTML
-    width: 80px;  // From your HTML
+    height: 80px; // از HTML مرجع
+    width: 80px;  // از HTML مرجع
     border-radius: 9999px;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     border-width: 1px;
-    border-color: var(--border); // Uses your theme's border color
+    border-color: var(--border);
     box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
     cursor: pointer;
     transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
     flex-shrink: 0;
-    z-index: 2; // Ensure buttons are above the small logo
+    z-index: 2; // اطمینان از اینکه دکمه ها قابل کلیک هستند
 
     &:hover {
         transform: scale(1.05);
         box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
     }
-
-    // Ensure SVGs inside control buttons scale appropriately
+    // اطمینان از اینکه SVG داخل دکمه ها به درستی نمایش داده می شود
     svg {
-        // transform: scale(0.55); // If SVGs are too large by default
-        // Or set explicit width/height if SVGs don't have inherent good sizes
-        // width: 38px; height: 38px; // Example, adjust based on your SVGs
+      // اگر SVG ها خیلی بزرگ هستند، می توانید اندازه آنها را اینجا کنترل کنید
+      // مثال: width: 50%; height: 50%;
+      // یا با transform: scale(0.55); اگر در HTML اصلی شما اینگونه بوده
     }
 }
 
-// Mic button is on the left in HTML example
-.mic-button-color { background-color: #fecdd3; } // Reddish
-// Cam button is on the right in HTML example
-.cam-button-color { background-color: #E0ECFF; } // Blueish
+// ترتیب رنگ ها بر اساس HTML مرجع شما (میکروفون چپ، دوربین راست)
+.mic-button-color { background-color: #fecdd3; } // قرمز برای میکروفون
+.cam-button-color { background-color: #E0ECFF; } // آبی برای دوربین
 
 .dark .mic-button-color { background-color: #5C2129; }
 .dark .cam-button-color { background-color: #223355; }
 
 
-/* Switch Camera Button - positioning relative to its wrapper */
+/* Switch Camera Button (بدون تغییر از پاسخ قبلی) */
 .switch-camera-button-container {
     position: absolute;
-    bottom: calc(100% + 0.65rem); // As in your HTML
+    bottom: calc(100% + 0.65rem);
     left: 50%;
     transform: translateX(-50%) translateY(15px) scale(0.7);
     z-index: 5;
@@ -260,17 +269,15 @@
     pointer-events: none;
     transition: opacity 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
     transform-origin: center bottom;
-
     &.visible {
         opacity: 1;
         transform: translateX(-50%) translateY(0) scale(1);
         pointer-events: auto;
     }
 }
-
 .switch-camera-button-content {
-    width: 48px; // As in your HTML
-    height: 48px; // As in your HTML
+    width: 48px;
+    height: 48px;
     background-color: var(--background);
     border: 1px solid var(--border);
     border-radius: 9999px;
@@ -281,53 +288,34 @@
     cursor: pointer;
     transform-origin: center;
     transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
-
     &:hover {
-        transform: scale(1.12) rotate(-6deg); // As in your HTML
+        transform: scale(1.12) rotate(-6deg);
         box-shadow: 0 7px 15px rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.12);
     }
     &:active {
-        transform: scale(1.03) rotate(0deg); // As in your HTML
+        transform: scale(1.03) rotate(0deg);
     }
-
     svg {
-        width: 22px; // As in your HTML
-        height: 22px; // As in your HTML
+        width: 22px;
+        height: 22px;
         stroke: var(--foreground);
         transition: transform 0.3s ease-in-out;
     }
     &:hover svg {
-        transform: rotate(360deg); // As in your HTML
+        transform: rotate(360deg);
     }
 }
 
-/* Keyframes for popover ... (بدون تغییر) ... */
+/* Keyframes for popover (بدون تغییر از پاسخ قبلی) */
 @keyframes popover-drop-in {
-    0% {
-        opacity: 0;
-        transform: translateY(-100%) scale(0.9);
-    }
-    70% {
-        opacity: 1;
-        transform: translateY(5px) scale(1.02);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
+    0% { opacity: 0; transform: translateY(-100%) scale(0.9); }
+    70% { opacity: 1; transform: translateY(5px) scale(1.02); }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
 }
-
 @keyframes popover-lift-out {
-    0% {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-    100% {
-        opacity: 0;
-        transform: translateY(-100%) scale(0.9);
-    }
+    0% { opacity: 1; transform: translateY(0) scale(1); }
+    100% { opacity: 0; transform: translateY(-100%) scale(0.9); }
 }
-
 .animate-popover-open-top-center {
     animation: popover-drop-in 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
 }