Minor tweaks to HTML and CSS.
This commit is contained in:
parent
d903f89b2e
commit
42e6250895
2 changed files with 13 additions and 6 deletions
|
|
@ -1,10 +1,11 @@
|
||||||
.recording-overlay {
|
.recording-overlay {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
width: min-content;
|
/*width: min-content;*/
|
||||||
|
width: 120px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 4px;
|
padding-left: 6px;
|
||||||
padding-right: 24px;
|
padding-right: 24px;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.6);
|
||||||
border-radius: 24px;
|
border-radius: 24px;
|
||||||
|
|
@ -35,7 +36,7 @@
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
height: 30px;
|
height: 28px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -46,7 +47,7 @@
|
||||||
|
|
||||||
.transcribing-text {
|
.transcribing-text {
|
||||||
color: #faa2ca;
|
color: #faa2ca;
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-family:
|
font-family:
|
||||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
|
|
|
||||||
|
|
@ -44,10 +44,16 @@ const RecordingOverlay: React.FC = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`recording-overlay ${isVisible ? "fade-in" : ""}`}>
|
<div className={`recording-overlay ${isVisible ? "fade-in" : ""}`}>
|
||||||
<img width="32" height="32" src={getIconPath()} alt={getIconAlt()} />
|
<img
|
||||||
|
width="28"
|
||||||
|
height="28"
|
||||||
|
src={getIconPath()}
|
||||||
|
alt={getIconAlt()}
|
||||||
|
style={{}}
|
||||||
|
/>
|
||||||
{state === "recording" && (
|
{state === "recording" && (
|
||||||
<div className="bars-container">
|
<div className="bars-container">
|
||||||
{Array.from({ length: 8 }, (_, i) => (
|
{Array.from({ length: 12 }, (_, i) => (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={i}
|
||||||
className="bar"
|
className="bar"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue