Ezmary commited on
Commit
d8a8bc1
·
verified ·
1 Parent(s): 192e3ba

Update src/App.scss

Browse files
Files changed (1) hide show
  1. src/App.scss +92 -38
src/App.scss CHANGED
@@ -99,8 +99,9 @@
99
  direction: rtl;
100
  max-height: 70vh;
101
  overflow-y: auto;
 
102
 
103
- ul { list-style: none; padding: 0; margin: 0; width: 240px; }
104
  li {
105
  display: flex; align-items: center; justify-content: space-between;
106
  padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background-color 150ms ease;
@@ -111,46 +112,99 @@
111
  div { display: flex; align-items: center; gap: 12px; }
112
  .material-symbols-outlined { font-size: 22px; &.tick { color: #34c759; } }
113
  }
 
 
114
 
115
- .menu-divider {
116
- border: none; height: 1px; background-color: theme('colors.custom-border');
117
- margin: 8px 4px;
118
- }
119
- .menu-subtitle {
120
- font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
121
- color: theme('colors.custom-foreground'); opacity: 0.5;
122
- padding: 8px 12px;
123
- }
124
- .voice-grid {
125
- display: grid;
126
- grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
127
- gap: 12px;
128
- padding: 4px 8px 8px;
129
- }
130
- .voice-card {
131
- cursor: pointer; text-align: center;
132
- img {
133
- width: 56px; height: 56px; border-radius: 50%;
134
- object-fit: cover;
135
- border: 3px solid transparent;
136
- transition: border-color 0.2s, transform 0.2s;
137
- &:hover { transform: scale(1.05); }
138
- }
139
- &.active img {
140
- border-color: #0a84ff;
141
- transform: scale(1.05);
142
- }
143
- .voice-name {
144
- font-size: 0.75rem;
145
- margin-top: 4px;
146
- color: theme('colors.custom-foreground');
147
- opacity: 0.8;
148
- white-space: nowrap;
149
- overflow: hidden;
150
- text-overflow: ellipsis;
151
- }
152
  }
153
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
154
  }
155
 
156
  /* استایل ویدیو و کنترل‌ها */
 
99
  direction: rtl;
100
  max-height: 70vh;
101
  overflow-y: auto;
102
+ width: 280px;
103
 
104
+ ul { list-style: none; padding: 0; margin: 0; }
105
  li {
106
  display: flex; align-items: center; justify-content: space-between;
107
  padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background-color 150ms ease;
 
112
  div { display: flex; align-items: center; gap: 12px; }
113
  .material-symbols-outlined { font-size: 22px; &.tick { color: #34c759; } }
114
  }
115
+ }
116
+ }
117
 
118
+ /* استایل‌های پیش‌نمایش گوینده و گالری */
119
+ .selected-voice-display {
120
+ padding: 16px;
121
+ text-align: center;
122
+ border-bottom: 1px solid theme('colors.custom-border');
123
+ margin: -8px -8px 8px -8px;
124
+
125
+ .voice-image-wrapper {
126
+ width: 80px;
127
+ height: 80px;
128
+ border-radius: 50%;
129
+ margin: 0 auto 12px;
130
+ position: relative;
131
+ box-shadow: 0 0 0 4px transparent;
132
+ transition: box-shadow 0.3s ease;
133
+
134
+ &.speaking {
135
+ animation: pulse-glow 1.5s infinite ease-in-out;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
136
  }
137
  }
138
+
139
+ img {
140
+ width: 100%; height: 100%;
141
+ border-radius: 50%; object-fit: cover;
142
+ }
143
+ h3 {
144
+ font-size: 1.1rem; font-weight: 700;
145
+ margin: 0 0 4px 0; color: theme('colors.custom-foreground');
146
+ }
147
+ p {
148
+ font-size: 0.8rem;
149
+ color: theme('colors.custom-foreground');
150
+ opacity: 0.7; margin: 0;
151
+ }
152
+ }
153
+
154
+ .menu-divider {
155
+ border: none; height: 1px; background-color: theme('colors.custom-border');
156
+ margin: 8px 4px;
157
+ }
158
+ .menu-subtitle {
159
+ font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
160
+ color: theme('colors.custom-foreground'); opacity: 0.5;
161
+ padding: 8px 12px;
162
+ }
163
+ .voice-grid {
164
+ display: grid;
165
+ grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
166
+ gap: 12px; padding: 4px 8px 8px;
167
+ }
168
+ .voice-card {
169
+ cursor: pointer; text-align: center;
170
+ img {
171
+ width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
172
+ border: 3px solid transparent; transition: border-color 0.2s, transform 0.2s;
173
+ &:hover { transform: scale(1.05); }
174
+ }
175
+ &.active img { border-color: #0a84ff; transform: scale(1.05); }
176
+ .voice-name { font-size: 0.75rem; margin-top: 4px; color: theme('colors.custom-foreground'); opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
177
+ }
178
+
179
+ @keyframes pulse-glow {
180
+ 0% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.7); }
181
+ 70% { box-shadow: 0 0 0 10px rgba(10, 132, 255, 0); }
182
+ 100% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0); }
183
+ }
184
+
185
+ /* استایل پیغام تایید (Toast) */
186
+ .confirmation-toast {
187
+ position: fixed;
188
+ bottom: 110px;
189
+ left: 50%;
190
+ transform: translateX(-50%);
191
+ background-color: rgba(44, 44, 46, 0.9);
192
+ color: #fff;
193
+ padding: 12px 24px;
194
+ border-radius: 999px;
195
+ font-size: 0.9rem;
196
+ font-weight: 500;
197
+ z-index: 1001;
198
+ box-shadow: 0 4px 12px rgba(0,0,0,0.3);
199
+ backdrop-filter: blur(5px);
200
+ animation: fade-in-out 3s ease-in-out forwards;
201
+ }
202
+
203
+ @keyframes fade-in-out {
204
+ 0% { opacity: 0; transform: translate(-50%, 20px); }
205
+ 15% { opacity: 1; transform: translate(-50%, 0); }
206
+ 85% { opacity: 1; transform: translate(-50%, 0); }
207
+ 100% { opacity: 0; transform: translate(-50%, 20px); }
208
  }
209
 
210
  /* استایل ویدیو و کنترل‌ها */