giers10/Heimgeist
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update styles for audio input and status display

Browse Source
This commit is contained in:
Victor Giers
2026-04-16 22:05:35 +02:00
parent 7d744cf7b0
commit 9301c65a93
1 changed files with 76 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/styles.css
View File

@@ -307,6 +307,10 @@ body { background: var(--bg); color: var(--text); font-family: ui-sans-serif, sy
.select { min-width: 220px; } .select { min-width: 220px; }
.button { cursor: pointer; } .button { cursor: pointer; }
.button:hover { border-color: var(--accent); } .button:hover { border-color: var(--accent); }
.button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.button.ghost { background: transparent; } .button.ghost { background: transparent; }
.button.danger { border-color: #8f3d49; color: #ffb8c2; } .button.danger { border-color: #8f3d49; color: #ffb8c2; }
.button.danger:hover { border-color: #d86a79; } .button.danger:hover { border-color: #d86a79; }
@@ -521,6 +525,40 @@ textarea.input {
min-height: 0; min-height: 0;
} }
.composer-audio-status {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: color-mix(in srgb, var(--panel) 82%, transparent);
color: var(--muted);
font-size: 12px;
line-height: 1;
}
.composer-audio-status--recording {
color: #ffb3af;
border-color: color-mix(in srgb, #ff5f56 35%, var(--border));
}
.composer-audio-status__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff5f56;
animation: mic-pulse 1.2s ease-in-out infinite;
}
.composer-audio-status__spinner {
width: 12px;
height: 12px;
margin: 0;
border-width: 2px;
}
.image-attachment-card { .image-attachment-card {
position: relative; position: relative;
width: 72px; width: 72px;
@@ -1136,7 +1174,8 @@ input:checked + .slider:before {
*/ */
.websearch-toggle, .websearch-toggle,
.db-picker-toggle, .db-picker-toggle,
.image-attach-toggle { .image-attach-toggle,
.audio-input-toggle {
background: transparent; background: transparent;
border: 0; border: 0;
padding: 0; /* icon-only */ padding: 0; /* icon-only */
@@ -1156,7 +1195,8 @@ input:checked + .slider:before {
.websearch-toggle svg, .websearch-toggle svg,
.db-picker-toggle svg, .db-picker-toggle svg,
.image-attach-toggle svg { .image-attach-toggle svg,
.audio-input-toggle svg {
width: 20px; width: 20px;
height: 20px; height: 20px;
pointer-events: none; pointer-events: none;
@@ -1165,10 +1205,26 @@ input:checked + .slider:before {
/* Active state = accent color */ /* Active state = accent color */
.websearch-toggle.active, .websearch-toggle.active,
.db-picker-toggle.active, .db-picker-toggle.active,
.image-attach-toggle.active { .image-attach-toggle.active,
.audio-input-toggle.active {
color: var(--accent); color: var(--accent);
} }
.audio-input-toggle.recording {
color: #ff5f56;
}
.audio-input-toggle:disabled {
opacity: 0.6;
cursor: wait;
}
.composer-audio-icon-spinner {
width: 18px;
height: 18px;
margin: 0;
}
/* /*
.websearch-toggle:hover { .websearch-toggle:hover {
color: var(--accent); color: var(--accent);
@@ -1180,6 +1236,8 @@ input:checked + .slider:before {
.websearch-toggle:focus-visible, .websearch-toggle:focus-visible,
.image-attach-toggle:focus, .image-attach-toggle:focus,
.image-attach-toggle:focus-visible, .image-attach-toggle:focus-visible,
.audio-input-toggle:focus,
.audio-input-toggle:focus-visible,
.db-picker-toggle:focus, .db-picker-toggle:focus,
.db-picker-toggle:focus-visible { .db-picker-toggle:focus-visible {
outline: none; outline: none;
@@ -1240,6 +1298,21 @@ input:checked + .slider:before {
font-size: 12px; font-size: 12px;
} }
@keyframes mic-pulse {
0% {
opacity: 0.65;
transform: scale(0.9);
}
50% {
opacity: 1;
transform: scale(1.05);
}
100% {
opacity: 0.65;
transform: scale(0.9);
}
}
.db-picker-empty { .db-picker-empty {
padding: 10px; padding: 10px;
color: var(--muted); color: var(--muted);