Spaces:
Running
Running
Update src/App.scss
Browse files- 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;
|
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 |
-
|
116 |
-
|
117 |
-
|
118 |
-
|
119 |
-
|
120 |
-
|
121 |
-
|
122 |
-
|
123 |
-
|
124 |
-
|
125 |
-
|
126 |
-
|
127 |
-
|
128 |
-
|
129 |
-
|
130 |
-
|
131 |
-
|
132 |
-
|
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 |
/* استایل ویدیو و کنترلها */
|