feat:add voice input
This commit is contained in:
@@ -138,7 +138,8 @@
|
||||
}
|
||||
|
||||
@keyframes pulse-enhanced {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(0.6);
|
||||
opacity: 0.4;
|
||||
}
|
||||
@@ -248,7 +249,8 @@
|
||||
}
|
||||
|
||||
.message-bubble.is-deleting {
|
||||
animation: delete-message-bubble 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
|
||||
animation: delete-message-bubble 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53)
|
||||
forwards;
|
||||
}
|
||||
|
||||
/* Typing indicator */
|
||||
@@ -271,7 +273,8 @@
|
||||
background-color: #9e9e9e;
|
||||
box-shadow: none;
|
||||
margin: 0 2px;
|
||||
animation: pulse-enhanced 1.8s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
animation: pulse-enhanced 1.8s infinite
|
||||
cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.3s;
|
||||
@@ -322,7 +325,9 @@
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
border-color: v-bind("`rgb(var(--v-theme-${activeModelColor}))`");
|
||||
box-shadow: v-bind("`0 0 0 2px rgba(var(--v-theme-${activeModelColor}), 0.25)`");
|
||||
box-shadow: v-bind(
|
||||
"`0 0 0 2px rgba(var(--v-theme-${activeModelColor}), 0.25)`"
|
||||
);
|
||||
transform: translateY(-1px) scale(1.005);
|
||||
}
|
||||
}
|
||||
@@ -441,10 +446,18 @@
|
||||
border: 1px solid transparent;
|
||||
animation: suggestion-fade-in 0.3s ease-out;
|
||||
|
||||
&:nth-child(1) { animation-delay: 0.1s; }
|
||||
&:nth-child(2) { animation-delay: 0.15s; }
|
||||
&:nth-child(3) { animation-delay: 0.2s; }
|
||||
&:nth-child(4) { animation-delay: 0.25s; }
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.suggestion-selected {
|
||||
@@ -586,7 +599,10 @@
|
||||
width: 100%;
|
||||
background-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important;
|
||||
color: rgba(
|
||||
var(--v-theme-on-background),
|
||||
var(--v-high-emphasis-opacity)
|
||||
) !important;
|
||||
font-size: 0.78rem;
|
||||
border-radius: 20px !important;
|
||||
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
@@ -594,19 +610,30 @@
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.1),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--hover-bg-color, rgba(var(--v-theme-primary), 0.1)) !important;
|
||||
border-color: var(--hover-border-color, rgba(var(--v-theme-primary), 0.8)) !important;
|
||||
background-color: var(
|
||||
--hover-bg-color,
|
||||
rgba(var(--v-theme-primary), 0.1)
|
||||
) !important;
|
||||
border-color: var(
|
||||
--hover-border-color,
|
||||
rgba(var(--v-theme-primary), 0.8)
|
||||
) !important;
|
||||
transform: translateY(-5px) scale(1.05) rotateZ(0.5deg);
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
@@ -617,27 +644,27 @@
|
||||
}
|
||||
|
||||
/* Quick reply staggered animations */
|
||||
.quick-reply-item:nth-child(1) {
|
||||
.quick-reply-item:nth-child(1) {
|
||||
transition-delay: 0ms;
|
||||
animation-delay: 0.05s;
|
||||
}
|
||||
.quick-reply-item:nth-child(2) {
|
||||
.quick-reply-item:nth-child(2) {
|
||||
transition-delay: 60ms;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.quick-reply-item:nth-child(3) {
|
||||
.quick-reply-item:nth-child(3) {
|
||||
transition-delay: 120ms;
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
.quick-reply-item:nth-child(4) {
|
||||
.quick-reply-item:nth-child(4) {
|
||||
transition-delay: 180ms;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.quick-reply-item:nth-child(5) {
|
||||
.quick-reply-item:nth-child(5) {
|
||||
transition-delay: 240ms;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
.quick-reply-item:nth-child(6) {
|
||||
.quick-reply-item:nth-child(6) {
|
||||
transition-delay: 300ms;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
@@ -727,7 +754,8 @@
|
||||
|
||||
/* Web search button animations */
|
||||
@keyframes webPulseImproved {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
filter: drop-shadow(0 0 8px rgba(var(--v-theme-primary), 0.5)) brightness(1);
|
||||
@@ -735,41 +763,45 @@
|
||||
25% {
|
||||
transform: scale(1.1) rotate(90deg);
|
||||
opacity: 0.9;
|
||||
filter: drop-shadow(0 0 12px rgba(var(--v-theme-primary), 0.7)) brightness(1.1);
|
||||
filter: drop-shadow(0 0 12px rgba(var(--v-theme-primary), 0.7))
|
||||
brightness(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05) rotate(180deg);
|
||||
opacity: 0.8;
|
||||
filter: drop-shadow(0 0 15px rgba(var(--v-theme-primary), 0.8)) brightness(1.2);
|
||||
filter: drop-shadow(0 0 15px rgba(var(--v-theme-primary), 0.8))
|
||||
brightness(1.2);
|
||||
}
|
||||
75% {
|
||||
transform: scale(1.08) rotate(270deg);
|
||||
opacity: 0.9;
|
||||
filter: drop-shadow(0 0 12px rgba(var(--v-theme-primary), 0.7)) brightness(1.1);
|
||||
filter: drop-shadow(0 0 12px rgba(var(--v-theme-primary), 0.7))
|
||||
brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes webActiveHoverImproved {
|
||||
0% {
|
||||
transform: scale(1.1) rotate(-3deg);
|
||||
filter: drop-shadow(0 0 10px rgba(var(--v-theme-primary), 0.6)) brightness(1.1);
|
||||
filter: drop-shadow(0 0 10px rgba(var(--v-theme-primary), 0.6))
|
||||
brightness(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.2) rotate(3deg);
|
||||
filter: drop-shadow(0 0 16px rgba(var(--v-theme-primary), 0.8)) brightness(1.3);
|
||||
filter: drop-shadow(0 0 16px rgba(var(--v-theme-primary), 0.8))
|
||||
brightness(1.3);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes webGlowImproved {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 20px rgba(var(--v-theme-primary), 0.4),
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 20px rgba(var(--v-theme-primary), 0.4),
|
||||
0 4px 15px rgba(var(--v-theme-primary), 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 30px rgba(var(--v-theme-primary), 0.6),
|
||||
box-shadow: 0 0 30px rgba(var(--v-theme-primary), 0.6),
|
||||
0 6px 20px rgba(var(--v-theme-primary), 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
@@ -785,15 +817,15 @@
|
||||
min-width: 100px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(var(--v-theme-primary), 0.15) 0%,
|
||||
circle,
|
||||
rgba(var(--v-theme-primary), 0.15) 0%,
|
||||
rgba(var(--v-theme-primary), 0.05) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
@@ -805,16 +837,16 @@
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.1),
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.1),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
@@ -842,8 +874,7 @@
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(var(--v-theme-primary), 0.2),
|
||||
box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.2),
|
||||
0 4px 15px rgba(var(--v-theme-primary), 0.1);
|
||||
}
|
||||
|
||||
@@ -897,13 +928,12 @@
|
||||
/* Web search button states */
|
||||
.web-search-btn.web-search-active {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(var(--v-theme-primary), 0.9) 0%,
|
||||
135deg,
|
||||
rgba(var(--v-theme-primary), 0.9) 0%,
|
||||
rgba(var(--v-theme-primary), 0.7) 100%
|
||||
) !important;
|
||||
border: 2px solid rgba(var(--v-theme-primary), 0.3);
|
||||
box-shadow:
|
||||
0 0 20px rgba(var(--v-theme-primary), 0.4),
|
||||
box-shadow: 0 0 20px rgba(var(--v-theme-primary), 0.4),
|
||||
0 4px 15px rgba(var(--v-theme-primary), 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
animation: webGlowImproved 3s ease-in-out infinite;
|
||||
@@ -1113,7 +1143,8 @@
|
||||
}
|
||||
|
||||
@keyframes gentle-pulse {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 2px 8px rgba(var(--v-theme-primary), 0.2);
|
||||
}
|
||||
50% {
|
||||
@@ -1174,21 +1205,38 @@
|
||||
overflow: hidden;
|
||||
|
||||
/* Staggered animations for each option */
|
||||
&:nth-child(1) { animation-delay: 0.5s; }
|
||||
&:nth-child(2) { animation-delay: 0.6s; }
|
||||
&:nth-child(3) { animation-delay: 0.7s; }
|
||||
&:nth-child(4) { animation-delay: 0.8s; }
|
||||
&:nth-child(5) { animation-delay: 0.9s; }
|
||||
&:nth-child(6) { animation-delay: 1.0s; }
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
animation-delay: 0.9s;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.5s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -1243,10 +1291,18 @@
|
||||
opacity: 0;
|
||||
animation-fill-mode: forwards;
|
||||
|
||||
&:nth-child(1) { animation-delay: 0.5s; }
|
||||
&:nth-child(2) { animation-delay: 0.6s; }
|
||||
&:nth-child(3) { animation-delay: 0.7s; }
|
||||
&:nth-child(4) { animation-delay: 0.8s; }
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
span:first-child {
|
||||
color: rgba(var(--v-theme-on-surface), 0.8);
|
||||
@@ -1274,13 +1330,18 @@
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.5s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -1329,19 +1390,32 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:nth-child(1) { animation-delay: 0.2s; }
|
||||
&:nth-child(2) { animation-delay: 0.3s; }
|
||||
&:nth-child(3) { animation-delay: 0.4s; }
|
||||
&:nth-child(4) { animation-delay: 0.5s; }
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.5s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -1387,19 +1461,32 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:nth-child(1) { animation-delay: 0.3s; }
|
||||
&:nth-child(2) { animation-delay: 0.4s; }
|
||||
&:nth-child(3) { animation-delay: 0.5s; }
|
||||
&:nth-child(4) { animation-delay: 0.6s; }
|
||||
&:nth-child(1) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.5s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -1567,11 +1654,11 @@
|
||||
background: rgba(var(--v-theme-surface), 0.6) !important;
|
||||
border: 1px solid rgba(var(--v-theme-outline), 0.3);
|
||||
}
|
||||
|
||||
|
||||
.web-search-btn::before {
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(var(--v-theme-primary), 0.2) 0%,
|
||||
circle,
|
||||
rgba(var(--v-theme-primary), 0.2) 0%,
|
||||
rgba(var(--v-theme-primary), 0.1) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
@@ -1579,22 +1666,22 @@
|
||||
}
|
||||
|
||||
.quick-replies-fade-leave-active {
|
||||
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
|
||||
transition: opacity 0.25s ease-out, transform 0.25s ease-out;
|
||||
}
|
||||
|
||||
.quick-replies-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.quick-replies-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
grid-gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
width: 100%;
|
||||
margin-top: 1rem !important;
|
||||
animation: replies-container-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
grid-gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
width: 100%;
|
||||
margin-top: 1rem !important;
|
||||
animation: replies-container-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
@@ -1639,7 +1726,9 @@
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
border-color: v-bind("`rgb(var(--v-theme-${activeModelColor}))`");
|
||||
box-shadow: v-bind("`0 0 0 2px rgba(var(--v-theme-${activeModelColor}), 0.25)`");
|
||||
box-shadow: v-bind(
|
||||
"`0 0 0 2px rgba(var(--v-theme-${activeModelColor}), 0.25)`"
|
||||
);
|
||||
transform: translateY(-1px) scale(1.005) translateZ(0);
|
||||
transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
@@ -1749,4 +1838,191 @@
|
||||
.quick-replies-fade-leave-from {
|
||||
margin-top: 0.8rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recording-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #f44336;
|
||||
border-radius: 50%;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.voice-message-display {
|
||||
padding: 8px 12px;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 16px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.voice-recording-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
background-color: rgba(var(--v-theme-surface), 0.8);
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.recording-duration {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
color: var(--v-theme-on-surface);
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.voice-ready-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 12px;
|
||||
background-color: rgba(var(--active-model-color), 0.1);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(var(--active-model-color), 0.3);
|
||||
}
|
||||
|
||||
.voice-message-bubble {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(var(--active-model-color), 0.1),
|
||||
rgba(var(--active-model-color), 0.05)
|
||||
);
|
||||
border: 1px solid rgba(var(--active-model-color), 0.2);
|
||||
}
|
||||
|
||||
.voice-controls-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.voice-recording-ui {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.voice-waveform {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
height: 28px;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.waveform-bar {
|
||||
width: 3px;
|
||||
background: rgba(var(--active-model-color), 0.7);
|
||||
border-radius: 2px;
|
||||
transition: height 0.1s ease;
|
||||
animation: waveform 1.5s ease-in-out infinite;
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
|
||||
@keyframes waveform {
|
||||
0%, 100% {
|
||||
height: 6px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
height: 20px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.voice-controls-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.recording-time {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 11px;
|
||||
color: rgba(var(--v-theme-on-surface), 0.7);
|
||||
background: rgba(var(--v-theme-surface), 0.9);
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.voice-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.voice-btn {
|
||||
min-width: 36px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.voice-preview-ui {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.voice-preview-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.voice-preview-text {
|
||||
font-weight: 500;
|
||||
color: rgba(var(--v-theme-on-surface), 0.8);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.voice-duration {
|
||||
font-size: 12px;
|
||||
color: rgba(var(--v-theme-on-surface), 0.6);
|
||||
}
|
||||
|
||||
.normal-input-ui {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.waveform-visualizer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.waveform-visualizer canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user