root/jukebox-vibe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: Fix Icon-Overlap endgültig gezielte Klasse 'with-left-icon' + CSS padding-left, keine globalen Side-Effects

Browse source
This commit is contained in:
vibe-bot 2025-08-08 23:57:50 +02:00
parent 971f6995a0
commit e3cca87bcc
2 changed files with 11 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/src/App.tsx
View file

@ -159,7 +159,7 @@ export default function App() {
<div className="control-panel rounded-xl p-6 mb-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 items-center">
<div className="relative">
<input className="input-field pl-10" placeholder="Nach Sounds suchen..." value={query} onChange={(e)=>setQuery(e.target.value)} />
<input className="input-field pl-10 with-left-icon" placeholder="Nach Sounds suchen..." value={query} onChange={(e)=>setQuery(e.target.value)} />
<span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>search</span>
</div>
<div className="relative">
@ -186,7 +186,7 @@ export default function App() {
<span className="text-sm font-semibold w-8 text-center" style={{color:'var(--text-secondary)'}}>{Math.round(volume*100)}%</span>
</div>
<div className="relative md:col-span-2 lg:col-span-1">
<input className="input-field pl-10" placeholder="MP3 URL..." value={mediaUrl} onChange={(e)=>setMediaUrl(e.target.value)} onKeyDown={async (e)=>{ if(e.key==='Enter'){ if(!selected){ setError('Bitte Voice-Channel wählen'); setInfo(null); return;} const [guildId,channelId]=selected.split(':'); try{ await playUrl(mediaUrl,guildId,channelId,volume); setError(null); setInfo('MP3 heruntergeladen und abgespielt.'); }catch(err:any){ setInfo(null); setError(err?.message||'Download fehlgeschlagen'); } } }} />
<input className="input-field pl-10 with-left-icon" placeholder="MP3 URL..." value={mediaUrl} onChange={(e)=>setMediaUrl(e.target.value)} onKeyDown={async (e)=>{ if(e.key==='Enter'){ if(!selected){ setError('Bitte Voice-Channel wählen'); setInfo(null); return;} const [guildId,channelId]=selected.split(':'); try{ await playUrl(mediaUrl,guildId,channelId,volume); setError(null); setInfo('MP3 heruntergeladen und abgespielt.'); }catch(err:any){ setInfo(null); setError(err?.message||'Download fehlgeschlagen'); } } }} />
<span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>link</span>
<button className="absolute right-0 top-0 h-full px-4 text-white flex items-center rounded-r-lg transition-all font-semibold" style={{background:'var(--accent-green)'}} onClick={async ()=>{ if(!selected){ setError('Bitte Voice-Channel wählen'); setInfo(null); return;} const [guildId,channelId]=selected.split(':'); try{ await playUrl(mediaUrl,guildId,channelId,volume); setError(null); setInfo('MP3 heruntergeladen und abgespielt.'); }catch(e:any){ setInfo(null); setError(e?.message||'Download fehlgeschlagen'); } }}>
<span className="material-icons text-sm mr-1">file_download</span>
@ -210,7 +210,7 @@ export default function App() {
{!isAdmin && (
<>
<div className="relative w-full sm:w-auto" style={{maxWidth:'15%'}}>
<input className="input-field pl-10" placeholder="Admin Passwort" type="password" value={adminPwd} onChange={(e)=>setAdminPwd(e.target.value)} />
<input className="input-field pl-10 with-left-icon" placeholder="Admin Passwort" type="password" value={adminPwd} onChange={(e)=>setAdminPwd(e.target.value)} />
<span className="material-icons absolute left-3 top-1/2 -translate-y-1/2" style={{color:'var(--text-secondary)'}}>lock</span>
</div>
<button className="bg-gray-800 text-white hover:bg-black font-semibold py-2 px-5 rounded-lg transition-all w-full sm:w-auto" style={{maxWidth:'15%'}} onClick={async ()=>{ const ok=await adminLogin(adminPwd); if(ok){ setIsAdmin(true); setAdminPwd(''); } else alert('Login fehlgeschlagen'); }}>Login</button>

10
web/src/styles.css
View file

@ -50,6 +50,9 @@ body {
[data-theme="light"] .sound-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); border-color: #007aff; }
.gradient-text { background: -webkit-linear-gradient(45deg, #333, #555); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Platz für linke Icons in allen Themes erzwingen */
.input-field.pl-10 { padding-left: 2.5rem !important; }
/* Rainbow Chaos Theme */
[data-theme="rainbow"] body {
background:
@ -139,7 +142,7 @@ header p { opacity: .8; }
}
.control input, .control select {
width: 100%;
padding: 12px 14px 12px 40px; /* Platz für linkes Icon */
padding: 12px 14px; /* Standard ohne Icon */
border-radius: 14px;
border: 1px solid rgba(255,255,255,.25);
background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
@ -155,7 +158,7 @@ header p { opacity: .8; }
.select-trigger {
width: 100%;
text-align: left;
padding: 12px 14px 12px 40px; /* Platz für linkes Icon */
padding: 12px 14px; /* Standard ohne Icon */
border-radius: 14px;
border: 1px solid rgba(255,255,255,.32);
background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
@ -191,6 +194,9 @@ header p { opacity: .8; }
backdrop-filter: blur(18px);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
/* Konkrete Felder mit Icons: zusätzliche linke Padding über Klasse steuern */
.with-left-icon { padding-left: 40px !important; }
.control.theme select option { background: #0f1530; color: #e7e7ee; }
.control input::placeholder { color: #c8c8d8; }