feat(web): inline chat search and global audio bar
Some checks failed
CI / test (push) Failing after 20s
Some checks failed
CI / test (push) Failing after 20s
- replace modal message search with header inline search controls - add global top audio bar linked to active inline audio player - improve chat info header variants and light theme readability
This commit is contained in:
@@ -58,19 +58,19 @@ body {
|
||||
}
|
||||
|
||||
html[data-theme="light"] {
|
||||
--bm-bg-primary: #eef3fb;
|
||||
--bm-bg-secondary: #f5f8fd;
|
||||
--bm-bg-tertiary: #ffffff;
|
||||
--bm-bg-primary: #eaf1fb;
|
||||
--bm-bg-secondary: #f3f7fd;
|
||||
--bm-bg-tertiary: #fbfdff;
|
||||
--bm-text-color: #0f172a;
|
||||
--bm-panel-bg: rgba(255, 255, 255, 0.93);
|
||||
--bm-panel-border: rgba(15, 23, 42, 0.12);
|
||||
--bm-panel-bg: rgba(255, 255, 255, 0.96);
|
||||
--bm-panel-border: rgba(15, 23, 42, 0.14);
|
||||
}
|
||||
|
||||
html[data-theme="light"] .tg-chat-wallpaper {
|
||||
background:
|
||||
radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.08), transparent 30%),
|
||||
radial-gradient(circle at 86% 74%, rgba(34, 197, 94, 0.06), transparent 33%),
|
||||
linear-gradient(160deg, rgba(15, 23, 42, 0.01) 0%, rgba(15, 23, 42, 0.02) 100%);
|
||||
radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.09), transparent 32%),
|
||||
radial-gradient(circle at 86% 74%, rgba(14, 165, 233, 0.06), transparent 35%),
|
||||
linear-gradient(160deg, rgba(148, 163, 184, 0.08) 0%, rgba(148, 163, 184, 0.03) 100%);
|
||||
}
|
||||
|
||||
html[data-theme="light"] .bg-slate-900\/95,
|
||||
@@ -78,12 +78,22 @@ html[data-theme="light"] .bg-slate-900\/90,
|
||||
html[data-theme="light"] .bg-slate-900\/80,
|
||||
html[data-theme="light"] .bg-slate-900\/70,
|
||||
html[data-theme="light"] .bg-slate-900\/60,
|
||||
html[data-theme="light"] .bg-slate-900,
|
||||
html[data-theme="light"] .bg-slate-900 {
|
||||
background-color: rgba(255, 255, 255, 0.97) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .bg-slate-800\/80,
|
||||
html[data-theme="light"] .bg-slate-800\/70,
|
||||
html[data-theme="light"] .bg-slate-800\/60,
|
||||
html[data-theme="light"] .bg-slate-800 {
|
||||
background-color: rgba(255, 255, 255, 0.92) !important;
|
||||
background-color: rgba(241, 245, 249, 0.95) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .bg-slate-700\/80,
|
||||
html[data-theme="light"] .bg-slate-700\/70,
|
||||
html[data-theme="light"] .bg-slate-700\/60,
|
||||
html[data-theme="light"] .bg-slate-700 {
|
||||
background-color: rgba(226, 232, 240, 0.95) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .border-slate-700\/80,
|
||||
@@ -91,12 +101,147 @@ html[data-theme="light"] .border-slate-700\/70,
|
||||
html[data-theme="light"] .border-slate-700\/60,
|
||||
html[data-theme="light"] .border-slate-700\/50,
|
||||
html[data-theme="light"] .border-slate-700 {
|
||||
border-color: rgba(15, 23, 42, 0.14) !important;
|
||||
border-color: rgba(71, 85, 105, 0.28) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-slate-100 {
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-slate-200 {
|
||||
color: #1e293b !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-slate-300 {
|
||||
color: #334155 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-slate-400 {
|
||||
color: #64748b !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-slate-500 {
|
||||
color: #94a3b8 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .hover\:bg-slate-800\/70:hover,
|
||||
html[data-theme="light"] .hover\:bg-slate-800\/65:hover,
|
||||
html[data-theme="light"] .hover\:bg-slate-800\/60:hover,
|
||||
html[data-theme="light"] .hover\:bg-slate-800:hover {
|
||||
background-color: rgba(226, 232, 240, 0.95) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .hover\:bg-slate-700\/80:hover,
|
||||
html[data-theme="light"] .hover\:bg-slate-700:hover {
|
||||
background-color: rgba(203, 213, 225, 0.9) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .tg-panel {
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
|
||||
}
|
||||
|
||||
html[data-theme="light"] .bg-slate-950\/55,
|
||||
html[data-theme="light"] .bg-slate-950\/60,
|
||||
html[data-theme="light"] .bg-slate-950\/90 {
|
||||
background-color: rgba(15, 23, 42, 0.28) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] input,
|
||||
html[data-theme="light"] textarea,
|
||||
html[data-theme="light"] select {
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
html[data-theme="light"] input::placeholder,
|
||||
html[data-theme="light"] textarea::placeholder {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-slate-950,
|
||||
html[data-theme="light"] .text-black {
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .bg-sky-500\/30 {
|
||||
background-color: rgba(14, 165, 233, 0.2) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-sky-100 {
|
||||
color: #0369a1 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-sky-300 {
|
||||
color: #075985 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-red-400,
|
||||
html[data-theme="light"] .text-red-300 {
|
||||
color: #b91c1c !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-amber-300 {
|
||||
color: #a16207 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-emerald-400 {
|
||||
color: #047857 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .border-slate-800\/60,
|
||||
html[data-theme="light"] .border-slate-800,
|
||||
html[data-theme="light"] .border-slate-900 {
|
||||
border-color: rgba(71, 85, 105, 0.2) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .bg-slate-900\/50 {
|
||||
background-color: rgba(248, 250, 252, 0.95) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .bg-slate-800\/50 {
|
||||
background-color: rgba(241, 245, 249, 0.88) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-slate-600 {
|
||||
color: #475569 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-slate-700 {
|
||||
color: #334155 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-slate-800 {
|
||||
color: #1e293b !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-slate-900 {
|
||||
color: #0f172a !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .bg-white {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .bg-slate-100 {
|
||||
background-color: #f1f5f9 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .bg-slate-200 {
|
||||
background-color: #e2e8f0 !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .border-slate-600,
|
||||
html[data-theme="light"] .border-slate-500 {
|
||||
border-color: rgba(100, 116, 139, 0.35) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .ring-slate-700,
|
||||
html[data-theme="light"] .ring-slate-600 {
|
||||
--tw-ring-color: rgba(100, 116, 139, 0.35) !important;
|
||||
}
|
||||
|
||||
html[data-theme="light"] .text-slate-100,
|
||||
html[data-theme="light"] .text-slate-200,
|
||||
html[data-theme="light"] .text-slate-300,
|
||||
html[data-theme="light"] .text-slate-400 {
|
||||
color: #334155 !important;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user