mbrucedogs/singsalot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Signed-off-by: mbrucedogs <mbrucedogs@gmail.com>

Browse Source
This commit is contained in:
mbrucedogs 2025-07-22 15:54:54 -05:00
parent 3dc13949eb
commit af44db6e5d
1 changed files with 110 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/App.css
View File

@ -74,3 +74,113 @@ ion-accordion ion-item::part(native) {
--border-width: 0 0 1px 0 !important; --border-width: 0 0 1px 0 !important;
--border-color: var(--ion-item-border-color, rgba(0, 0, 0, 0.13)) !important; --border-color: var(--ion-item-border-color, rgba(0, 0, 0, 0.13)) !important;
} }
/* Top 100 Highlighting */
.highlighted-song {
border: 3px solid #ff6b35 !important;
background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 107, 53, 0.05) 100%) !important;
border-radius: 12px !important;
margin: 8px 0 !important;
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
position: relative !important;
backdrop-filter: blur(4px);
}
.highlighted-song::before {
content: "★ MOST PLAYED";
position: absolute;
top: -10px;
right: 12px;
background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: bold;
z-index: 10;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Dark mode support for highlighted song */
@media (prefers-color-scheme: dark) {
.highlighted-song {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 107, 53, 0.08) 100%) !important;
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
.highlighted-song::before {
background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.5);
}
}
/* Section headers styling */
.section-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
border-left: 4px solid #ff6b35 !important;
border-radius: 0 8px 8px 0 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
--padding-start: 16px !important;
--padding-end: 16px !important;
--min-height: 48px !important;
}
.section-header h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
color: #495057;
display: flex;
align-items: center;
gap: 8px;
}
.section-header.other-variations {
border-left-color: #6c757d !important;
}
.section-header.other-variations h3 {
color: #6c757d;
}
/* Dark mode section headers */
@media (prefers-color-scheme: dark) {
.section-header {
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.section-header h3 {
color: #e2e8f0;
}
.section-header.other-variations h3 {
color: #a0aec0;
}
}
/* Enhanced pill styling */
.pill {
display: inline-block;
padding: 6px 12px;
border-radius: 16px;
font-size: 0.8rem;
font-weight: 600;
text-align: center;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.pill--count {
background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
color: white;
margin-left: 8px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.pill--count:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}