Spaces:
Running
Running
Update src/App.scss
Browse files- src/App.scss +73 -62
src/App.scss
CHANGED
@@ -1,3 +1,5 @@
|
|
|
|
|
|
1 |
// 1. Import Tailwind's base, components, and utilities
|
2 |
@import 'tailwindcss/base';
|
3 |
@import 'tailwindcss/components';
|
@@ -7,30 +9,30 @@
|
|
7 |
:root {
|
8 |
--radius: 0.625rem; /* 10px */
|
9 |
--radius-md: 0.5rem; /* 8px */
|
10 |
-
--background: oklch(1 0 0);
|
11 |
-
--foreground: oklch(0.145 0 0);
|
12 |
--popover: oklch(1 0 0);
|
13 |
--popover-foreground: oklch(0.145 0 0);
|
14 |
-
--border: oklch(0.922 0 0);
|
15 |
}
|
16 |
|
17 |
.dark {
|
18 |
-
--background: oklch(0.145 0 0);
|
19 |
-
--foreground: oklch(0.985 0 0);
|
20 |
--popover: oklch(0.205 0 0);
|
21 |
--popover-foreground: oklch(0.985 0 0);
|
22 |
-
--border: oklch(1 0 0 / 10%);
|
23 |
}
|
24 |
|
25 |
// 3. Apply base styles
|
26 |
@layer base {
|
27 |
* {
|
28 |
-
border-color:
|
29 |
-
outline-color:
|
30 |
box-sizing: border-box;
|
31 |
}
|
32 |
body {
|
33 |
-
@apply bg-background text-foreground;
|
34 |
overflow-x: hidden;
|
35 |
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
36 |
-webkit-font-smoothing: antialiased;
|
@@ -67,33 +69,47 @@
|
|
67 |
pointer-events: none;
|
68 |
}
|
69 |
|
70 |
-
/* Notification Popover
|
71 |
.notification-popover-wrapper {
|
72 |
position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 100;
|
73 |
width: calc(100% - 1rem); max-width: 28rem; display: flex; justify-content: center; pointer-events: none;
|
74 |
}
|
75 |
.popover-content {
|
76 |
-
width: 100%; border-radius: var(--radius-md, 0.5rem); border-width: 1px;
|
77 |
-
background-color:
|
|
|
|
|
78 |
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
79 |
outline: none; transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
80 |
opacity: 0; transform: translateY(-100%) scale(0.9); pointer-events: none;
|
81 |
&.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
|
82 |
}
|
83 |
.notification-popover-text-content {
|
84 |
-
background-color: #eff6ff;
|
85 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
86 |
}
|
87 |
-
|
|
|
88 |
.header-controls {
|
89 |
display: flex; padding: 0.75rem 0.5rem; justify-content: space-between; align-items: center;
|
90 |
width: 100%; position: absolute; top: 0; left: 0; z-index: 10;
|
91 |
}
|
92 |
.header-button {
|
93 |
display: flex; align-items: center; justify-content: center; padding: 0.5rem;
|
94 |
-
width: 40px; height: 40px; border-radius: var(--radius-lg, 0.625rem);
|
|
|
95 |
cursor: pointer; transition: background-color 0.2s, transform 0.1s ease-out;
|
96 |
-
svg {
|
|
|
|
|
|
|
|
|
97 |
&:hover { background-color: #d1d5db; }
|
98 |
&:active { background-color: #9ca3af; transform: scale(0.95); }
|
99 |
}
|
@@ -101,38 +117,39 @@
|
|
101 |
background-color: oklch(0.28 0 0);
|
102 |
&:hover { background-color: oklch(0.35 0 0); }
|
103 |
&:active { background-color: oklch(0.40 0 0); transform: scale(0.95); }
|
104 |
-
svg {
|
|
|
|
|
|
|
105 |
}
|
106 |
|
107 |
-
/* Logo Animation Styling
|
108 |
.logo-animation-wrapper {
|
109 |
position: relative;
|
110 |
display: flex;
|
111 |
align-items: center;
|
112 |
justify-content: center;
|
113 |
-
|
114 |
-
|
115 |
-
|
|
|
|
|
116 |
}
|
117 |
|
118 |
-
/* Footer styles
|
119 |
.footer-controls-html-like {
|
120 |
width: 100%;
|
121 |
display: flex;
|
122 |
align-items: center;
|
123 |
position: absolute;
|
124 |
-
|
125 |
-
|
126 |
-
// padding چپ و راست برای فاصله از کنارههای صفحه
|
127 |
-
padding-left: 2.5rem; // کمی کمتر از HTML مرجع برای فضای بیشتر برای دکمهها
|
128 |
padding-right: 2.5rem;
|
129 |
-
// padding بالا و پایین داخلی فوتر (اگر نیاز باشد)
|
130 |
padding-top: 0.5rem;
|
131 |
padding-bottom: 0.5rem;
|
132 |
-
|
133 |
box-sizing: border-box;
|
134 |
z-index: 20;
|
135 |
-
justify-content: space-between;
|
136 |
}
|
137 |
|
138 |
.small-logo-footer-html-like {
|
@@ -140,13 +157,13 @@
|
|
140 |
left: 50%;
|
141 |
top: 50%;
|
142 |
transform: translate(-50%, -50%);
|
143 |
-
z-index: 1;
|
144 |
display: flex;
|
145 |
align-items: center;
|
146 |
justify-content: center;
|
147 |
}
|
148 |
|
149 |
-
.control-button-wrapper {
|
150 |
position: relative;
|
151 |
display: flex;
|
152 |
justify-content: center;
|
@@ -156,12 +173,12 @@
|
|
156 |
height: 80px;
|
157 |
width: 80px;
|
158 |
border-radius: 9999px;
|
159 |
-
padding: 0;
|
160 |
display: flex;
|
161 |
align-items: center;
|
162 |
justify-content: center;
|
163 |
border-width: 1px;
|
164 |
-
border-color:
|
165 |
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
|
166 |
cursor: pointer;
|
167 |
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
@@ -174,30 +191,19 @@
|
|
174 |
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
|
175 |
}
|
176 |
|
177 |
-
// استایل برای SVG داخل دکمههای کنترل
|
178 |
svg {
|
179 |
-
// برای آیکون میکروفون مرجع که کلاس .reference-mic-svg دارد
|
180 |
&.reference-mic-svg {
|
181 |
-
width: 75%;
|
182 |
height: 75%;
|
183 |
}
|
184 |
-
// برای SVGهای دیگر (مثل دوربین، توقف، ...) اگر نیاز به تنظیم اندازه باشد
|
185 |
-
// مثال:
|
186 |
-
// &:not(.reference-mic-svg) {
|
187 |
-
// width: 50%;
|
188 |
-
// height: 50%;
|
189 |
-
// }
|
190 |
}
|
191 |
}
|
192 |
|
193 |
-
|
194 |
-
.
|
195 |
-
.cam-button-color { background-color: #E0ECFF; } // آبی برای دوربین (راست)
|
196 |
-
|
197 |
.dark .mic-button-color { background-color: #5C2129; }
|
198 |
.dark .cam-button-color { background-color: #223355; }
|
199 |
|
200 |
-
|
201 |
/* Switch Camera Button */
|
202 |
.switch-camera-button-container {
|
203 |
position: absolute; bottom: calc(100% + 0.65rem); left: 50%;
|
@@ -208,25 +214,30 @@
|
|
208 |
&.visible { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
|
209 |
}
|
210 |
.switch-camera-button-content {
|
211 |
-
width: 48px; height: 48px;
|
|
|
|
|
212 |
border-radius: 9999px; display: flex; align-items: center; justify-content: center;
|
213 |
box-shadow: 0 5px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08); cursor: pointer;
|
214 |
transform-origin: center; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
215 |
&:hover { 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); }
|
216 |
&:active { transform: scale(1.03) rotate(0deg); }
|
217 |
-
svg { width: 22px; height: 22px; stroke:
|
218 |
&:hover svg { transform: rotate(360deg); }
|
219 |
}
|
220 |
|
221 |
-
/* Keyframes for popover */
|
222 |
-
|
223 |
-
|
224 |
-
|
225 |
-
|
226 |
-
|
227 |
-
|
228 |
-
|
229 |
-
|
230 |
-
|
231 |
-
|
232 |
-
|
|
|
|
|
|
|
|
1 |
+
// src/App.scss
|
2 |
+
|
3 |
// 1. Import Tailwind's base, components, and utilities
|
4 |
@import 'tailwindcss/base';
|
5 |
@import 'tailwindcss/components';
|
|
|
9 |
:root {
|
10 |
--radius: 0.625rem; /* 10px */
|
11 |
--radius-md: 0.5rem; /* 8px */
|
12 |
+
--background: oklch(1 0 0); /* سفید در حالت روشن */
|
13 |
+
--foreground: oklch(0.145 0 0); /* تقریبا مشکی در حالت روشن */
|
14 |
--popover: oklch(1 0 0);
|
15 |
--popover-foreground: oklch(0.145 0 0);
|
16 |
+
--border: oklch(0.922 0 0); /* خاکستری خیلی روشن */
|
17 |
}
|
18 |
|
19 |
.dark {
|
20 |
+
--background: oklch(0.145 0 0); /* تقریبا مشکی در حالت تیره */
|
21 |
+
--foreground: oklch(0.985 0 0); /* سفید در حالت تیره */
|
22 |
--popover: oklch(0.205 0 0);
|
23 |
--popover-foreground: oklch(0.985 0 0);
|
24 |
+
--border: oklch(1 0 0 / 10%); /* خاکستری خیلی تیره با شفافیت */
|
25 |
}
|
26 |
|
27 |
// 3. Apply base styles
|
28 |
@layer base {
|
29 |
* {
|
30 |
+
border-color: theme('colors.custom-border');
|
31 |
+
outline-color: theme('colors.custom-foreground');
|
32 |
box-sizing: border-box;
|
33 |
}
|
34 |
body {
|
35 |
+
@apply bg-custom-background text-custom-foreground;
|
36 |
overflow-x: hidden;
|
37 |
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
38 |
-webkit-font-smoothing: antialiased;
|
|
|
69 |
pointer-events: none;
|
70 |
}
|
71 |
|
72 |
+
/* Notification Popover */
|
73 |
.notification-popover-wrapper {
|
74 |
position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 100;
|
75 |
width: calc(100% - 1rem); max-width: 28rem; display: flex; justify-content: center; pointer-events: none;
|
76 |
}
|
77 |
.popover-content {
|
78 |
+
width: 100%; border-radius: var(--radius-md, 0.5rem); border-width: 1px;
|
79 |
+
background-color: theme('colors.custom-popover');
|
80 |
+
color: theme('colors.custom-popover-foreground');
|
81 |
+
border-color: theme('colors.custom-border');
|
82 |
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
83 |
outline: none; transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
84 |
opacity: 0; transform: translateY(-100%) scale(0.9); pointer-events: none;
|
85 |
&.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
|
86 |
}
|
87 |
.notification-popover-text-content {
|
88 |
+
background-color: #eff6ff;
|
89 |
+
font-size: 0.875rem; line-height: 1.5rem; direction: rtl;
|
90 |
+
padding: 1rem; border-radius: var(--radius-md, 0.5rem);
|
91 |
+
color: oklch(0.145 0 0);
|
92 |
+
}
|
93 |
+
.dark .notification-popover-text-content {
|
94 |
+
background-color: oklch(0.25 0.05 230);
|
95 |
+
color: oklch(0.95 0.01 230);
|
96 |
}
|
97 |
+
|
98 |
+
/* Header controls */
|
99 |
.header-controls {
|
100 |
display: flex; padding: 0.75rem 0.5rem; justify-content: space-between; align-items: center;
|
101 |
width: 100%; position: absolute; top: 0; left: 0; z-index: 10;
|
102 |
}
|
103 |
.header-button {
|
104 |
display: flex; align-items: center; justify-content: center; padding: 0.5rem;
|
105 |
+
width: 40px; height: 40px; border-radius: var(--radius-lg, 0.625rem);
|
106 |
+
background-color: #e5e7eb;
|
107 |
cursor: pointer; transition: background-color 0.2s, transform 0.1s ease-out;
|
108 |
+
svg {
|
109 |
+
opacity: 0.7;
|
110 |
+
stroke: #374151;
|
111 |
+
width: 24px; height: 24px;
|
112 |
+
}
|
113 |
&:hover { background-color: #d1d5db; }
|
114 |
&:active { background-color: #9ca3af; transform: scale(0.95); }
|
115 |
}
|
|
|
117 |
background-color: oklch(0.28 0 0);
|
118 |
&:hover { background-color: oklch(0.35 0 0); }
|
119 |
&:active { background-color: oklch(0.40 0 0); transform: scale(0.95); }
|
120 |
+
svg {
|
121 |
+
opacity: 0.8;
|
122 |
+
stroke: oklch(0.85 0 0);
|
123 |
+
}
|
124 |
}
|
125 |
|
126 |
+
/* Logo Animation Styling */
|
127 |
.logo-animation-wrapper {
|
128 |
position: relative;
|
129 |
display: flex;
|
130 |
align-items: center;
|
131 |
justify-content: center;
|
132 |
+
color: white; /* برای سفید شدن آدمک اگر از currentColor استفاده میکند */
|
133 |
+
& > .z-10 > svg {
|
134 |
+
width: 100%;
|
135 |
+
height: 100%;
|
136 |
+
}
|
137 |
}
|
138 |
|
139 |
+
/* Footer styles */
|
140 |
.footer-controls-html-like {
|
141 |
width: 100%;
|
142 |
display: flex;
|
143 |
align-items: center;
|
144 |
position: absolute;
|
145 |
+
bottom: 2rem;
|
146 |
+
padding-left: 2.5rem;
|
|
|
|
|
147 |
padding-right: 2.5rem;
|
|
|
148 |
padding-top: 0.5rem;
|
149 |
padding-bottom: 0.5rem;
|
|
|
150 |
box-sizing: border-box;
|
151 |
z-index: 20;
|
152 |
+
justify-content: space-between;
|
153 |
}
|
154 |
|
155 |
.small-logo-footer-html-like {
|
|
|
157 |
left: 50%;
|
158 |
top: 50%;
|
159 |
transform: translate(-50%, -50%);
|
160 |
+
z-index: 1;
|
161 |
display: flex;
|
162 |
align-items: center;
|
163 |
justify-content: center;
|
164 |
}
|
165 |
|
166 |
+
.control-button-wrapper {
|
167 |
position: relative;
|
168 |
display: flex;
|
169 |
justify-content: center;
|
|
|
173 |
height: 80px;
|
174 |
width: 80px;
|
175 |
border-radius: 9999px;
|
176 |
+
padding: 0;
|
177 |
display: flex;
|
178 |
align-items: center;
|
179 |
justify-content: center;
|
180 |
border-width: 1px;
|
181 |
+
border-color: theme('colors.custom-border');
|
182 |
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
|
183 |
cursor: pointer;
|
184 |
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
|
|
191 |
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
|
192 |
}
|
193 |
|
|
|
194 |
svg {
|
|
|
195 |
&.reference-mic-svg {
|
196 |
+
width: 75%;
|
197 |
height: 75%;
|
198 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
199 |
}
|
200 |
}
|
201 |
|
202 |
+
.mic-button-color { background-color: #fecdd3; }
|
203 |
+
.cam-button-color { background-color: #E0ECFF; }
|
|
|
|
|
204 |
.dark .mic-button-color { background-color: #5C2129; }
|
205 |
.dark .cam-button-color { background-color: #223355; }
|
206 |
|
|
|
207 |
/* Switch Camera Button */
|
208 |
.switch-camera-button-container {
|
209 |
position: absolute; bottom: calc(100% + 0.65rem); left: 50%;
|
|
|
214 |
&.visible { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
|
215 |
}
|
216 |
.switch-camera-button-content {
|
217 |
+
width: 48px; height: 48px;
|
218 |
+
background-color: theme('colors.custom-background');
|
219 |
+
border: 1px solid theme('colors.custom-border');
|
220 |
border-radius: 9999px; display: flex; align-items: center; justify-content: center;
|
221 |
box-shadow: 0 5px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08); cursor: pointer;
|
222 |
transform-origin: center; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
|
223 |
&:hover { 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); }
|
224 |
&:active { transform: scale(1.03) rotate(0deg); }
|
225 |
+
svg { width: 22px; height: 22px; stroke: theme('colors.custom-foreground'); transition: transform 0.3s ease-in-out; }
|
226 |
&:hover svg { transform: rotate(360deg); }
|
227 |
}
|
228 |
|
229 |
+
/* Keyframes for popover - استفاده مستقیم از خصوصیات انیمیشن */
|
230 |
+
/* این Keyframe ها باید در tailwind.config.js در بخش theme.extend.keyframes تعریف شده باشند */
|
231 |
+
/* و در اینجا فقط نام آنها استفاده میشود. */
|
232 |
+
.animate-popover-open-top-center {
|
233 |
+
animation-name: popover-drop-in; /* نام keyframe از tailwind.config.js */
|
234 |
+
animation-duration: 0.4s;
|
235 |
+
animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
|
236 |
+
animation-fill-mode: forwards;
|
237 |
+
}
|
238 |
+
.animate-popover-close-top-center {
|
239 |
+
animation-name: popover-lift-out; /* نام keyframe از tailwind.config.js */
|
240 |
+
animation-duration: 0.3s;
|
241 |
+
animation-timing-function: ease-in;
|
242 |
+
animation-fill-mode: forwards;
|
243 |
+
}
|