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

UI: Icon-Overlap fix mehr linken Innenabstand für Inputs/Selects/Trigger (kompatibel mit Light/Dark/Rainbow)

Browse source
This commit is contained in:
vibe-bot 2025-08-08 23:49:11 +02:00
parent ed66adaa26
commit 971f6995a0
1 changed files with 4 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

7
web/src/styles.css
View file

@ -41,9 +41,10 @@ body {
/* Stitch utility classes (Light) */ /* Stitch utility classes (Light) */
[data-theme="light"] .control-panel { background-color: #ffffff; border: 1px solid #e8e8ed; } [data-theme="light"] .control-panel { background-color: #ffffff; border: 1px solid #e8e8ed; }
[data-theme="light"] .tag-btn { padding: 8px 16px; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; background: #e8e8ed; color: #6e6e73; border: 1px solid transparent; transition: all .2s ease; cursor: pointer; } [data-theme="light"] .tag-btn { padding: 8px 16px; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; background: #e8e8ed; color: #6e6e73; border: 1px solid transparent; transition: all .2s ease; cursor: pointer; }
[data-theme="light"] .input-field.pl-10 { padding-left: 2.5rem; }
[data-theme="light"] .tag-btn:hover { background: #dcdce1; color: #1d1d1f; } [data-theme="light"] .tag-btn:hover { background: #dcdce1; color: #1d1d1f; }
[data-theme="light"] .tag-btn.active { background: #007aff; color: #fff; font-weight: 600; } [data-theme="light"] .tag-btn.active { background: #007aff; color: #fff; font-weight: 600; }
[data-theme="light"] .input-field { width: 100%; background: #f2f2f6; border: 1px solid #dcdce1; border-radius: .5rem; padding: .5rem 1rem; color: #1d1d1f; outline: none; } [data-theme="light"] .input-field { width: 100%; background: #f2f2f6; border: 1px solid #dcdce1; border-radius: .5rem; padding: .5rem 1rem .5rem 2.5rem; color: #1d1d1f; outline: none; }
[data-theme="light"] .input-field:focus { box-shadow: 0 0 0 3px rgba(0,122,255,.25); border-color: transparent; } [data-theme="light"] .input-field:focus { box-shadow: 0 0 0 3px rgba(0,122,255,.25); border-color: transparent; }
[data-theme="light"] .sound-btn { background: #ffffff; border: 1px solid #e8e8ed; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .2s ease; } [data-theme="light"] .sound-btn { background: #ffffff; border: 1px solid #e8e8ed; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: all .2s ease; }
[data-theme="light"] .sound-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); border-color: #007aff; } [data-theme="light"] .sound-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); border-color: #007aff; }
@ -138,7 +139,7 @@ header p { opacity: .8; }
} }
.control input, .control select { .control input, .control select {
width: 100%; width: 100%;
padding: 12px 14px; padding: 12px 14px 12px 40px; /* Platz für linkes Icon */
border-radius: 14px; border-radius: 14px;
border: 1px solid rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.25);
background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
@ -154,7 +155,7 @@ header p { opacity: .8; }
.select-trigger { .select-trigger {
width: 100%; width: 100%;
text-align: left; text-align: left;
padding: 12px 14px; padding: 12px 14px 12px 40px; /* Platz für linkes Icon */
border-radius: 14px; border-radius: 14px;
border: 1px solid rgba(255,255,255,.32); border: 1px solid rgba(255,255,255,.32);
background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12)); background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.12));