Ezmary commited on
Commit
e870dbe
·
verified ·
1 Parent(s): 205b753

Update src/App.scss

Browse files
Files changed (1) hide show
  1. 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: var(--border);
29
- outline-color: var(--foreground);
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 & Header controls */
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; border-color: var(--border);
77
- background-color: var(--popover); color: var(--popover-foreground);
 
 
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; font-size: 0.875rem; line-height: 1.5rem; direction: rtl;
85
- padding: 1rem; border-radius: var(--radius-md, 0.5rem); color: oklch(0.145 0 0);
 
 
 
 
 
 
86
  }
87
- .dark .notification-popover-text-content { background-color: oklch(0.25 0.05 230); color: oklch(0.95 0.01 230); }
 
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); background-color: #e5e7eb;
 
95
  cursor: pointer; transition: background-color 0.2s, transform 0.1s ease-out;
96
- svg { opacity: 0.7; stroke: #374151; width: 24px; height: 24px; }
 
 
 
 
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 { opacity: 0.8; stroke: oklch(0.85 0 0); }
 
 
 
105
  }
106
 
107
- /* Logo Animation Styling in App.scss - mostly for the wrapper if needed */
108
  .logo-animation-wrapper {
109
  position: relative;
110
  display: flex;
111
  align-items: center;
112
  justify-content: center;
113
- // حلقه‌ها و آیکون داخلی توسط کامپوننت LogoAnimation مدیریت می‌شوند
114
- // و از کلاس‌های Tailwind برای رنگ و انیمیشن پینگ استفاده می‌کنند.
115
- // کلاس .for-footer می‌تواند برای استایل‌دهی خاص به لوگوی فوتر استفاده شود اگر لازم باشد.
 
 
116
  }
117
 
118
- /* Footer styles - تلاش برای بالاتر آوردن و تطابق با HTML */
119
  .footer-controls-html-like {
120
  width: 100%;
121
  display: flex;
122
  align-items: center;
123
  position: absolute;
124
- // *** تنظیم دقیق bottom برای بالاتر آمدن فوتر ***
125
- bottom: 2rem; // فاصله 2rem از پایین صفحه. این مقدار را می‌توانید تنظیم کنید.
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; // پدینگ صفر، اندازه آیکون با CSS داخلی SVG کنترل می‌شود
160
  display: flex;
161
  align-items: center;
162
  justify-content: center;
163
  border-width: 1px;
164
- border-color: var(--border);
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
- // رنگ‌ها بر اساس HTML مرجع (میکروفون چپ، دوربین راست)
194
- .mic-button-color { background-color: #fecdd3; } // قرمز برای میکروفون (چپ)
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; background-color: var(--background); border: 1px solid var(--border);
 
 
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: var(--foreground); transition: transform 0.3s ease-in-out; }
218
  &:hover svg { transform: rotate(360deg); }
219
  }
220
 
221
- /* Keyframes for popover */
222
- @keyframes popover-drop-in {
223
- 0% { opacity: 0; transform: translateY(-100%) scale(0.9); }
224
- 70% { opacity: 1; transform: translateY(5px) scale(1.02); }
225
- 100% { opacity: 1; transform: translateY(0) scale(1); }
226
- }
227
- @keyframes popover-lift-out {
228
- 0% { opacity: 1; transform: translateY(0) scale(1); }
229
- 100% { opacity: 0; transform: translateY(-100%) scale(0.9); }
230
- }
231
- .animate-popover-open-top-center { animation: popover-drop-in 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; }
232
- .animate-popover-close-top-center { animation: popover-lift-out 0.3s ease-in forwards; }
 
 
 
 
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
+ }