danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Update style.css

Browse source
This commit is contained in:
Broque Thomas 2025-09-25 08:09:00 -07:00
parent 0247f324ee
commit 3d55c690a1
1 changed files with 40 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
webui/static/style.css
View file

@ -8574,7 +8574,7 @@ body {
pointer-events: none; pointer-events: none;
} }
/* Alphabet Selector */ /* Alphabet Selector - Apple Style Design */
.alphabet-selector { .alphabet-selector {
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -8588,37 +8588,59 @@ body {
.alphabet-selector-inner { .alphabet-selector-inner {
display: flex; display: flex;
gap: 4px; gap: 12px;
padding: 8px 0; padding: 16px;
min-width: max-content; min-width: max-content;
justify-content: center;
align-items: center;
} }
.alphabet-btn { .alphabet-btn {
padding: 8px 12px; padding: 0;
border: 1px solid rgba(255, 255, 255, 0.1); border: none;
border-radius: 8px; background: transparent;
background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.4);
color: rgba(255, 255, 255, 0.7); font-size: 16px;
font-size: 13px;
font-weight: 600; font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease-out;
white-space: nowrap; min-width: 20px;
min-width: 36px; height: 32px;
text-align: center; text-align: center;
display: flex;
align-items: center;
justify-content: center;
transform: scale(1);
text-shadow: none;
} }
.alphabet-btn:hover { .alphabet-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
color: #ffffff; color: #ffffff;
transform: scale(2.5);
margin-left: 15px;
margin-right: 15px;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
/* Neighbor scaling effect */
.alphabet-btn:hover + .alphabet-btn,
.alphabet-btn:has(+ .alphabet-btn:hover) {
transform: scale(1.8);
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}
.alphabet-btn:hover + .alphabet-btn + .alphabet-btn,
.alphabet-btn:has(+ .alphabet-btn + .alphabet-btn:hover) {
transform: scale(1.4);
color: rgba(255, 255, 255, 0.6);
} }
.alphabet-btn.active { .alphabet-btn.active {
background: linear-gradient(135deg, #1db954, #1ed760); color: #ffffff;
border-color: rgba(29, 185, 84, 0.4); transform: scale(1.2);
color: #000000; text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
font-weight: 700;
} }
/* Library Content */ /* Library Content */