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 16:09:22 -05:00
parent af44db6e5d
commit 364f53fb21
2 changed files with 28 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/App.css
View File

@ -117,13 +117,17 @@ ion-accordion ion-item::part(native) {
/* Section headers styling */ /* Section headers styling */
.section-header { .section-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-left: 4px solid #ff6b35 !important; border-left: 4px solid #007bff;
border-radius: 0 8px 8px 0 !important; padding: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important; margin: 8px 0;
--padding-start: 16px !important; border-radius: 8px;
--padding-end: 16px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
--min-height: 48px !important; }
.section-header.other-variations {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-left: 4px solid #6c757d;
} }
.section-header h3 { .section-header h3 {
@ -131,33 +135,27 @@ ion-accordion ion-item::part(native) {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 700; font-weight: 700;
color: #495057; color: #495057;
display: flex; display: flex !important;
align-items: center; align-items: center !important;
gap: 8px; gap: 12px !important;
} }
.section-header.other-variations { /* Dark mode support */
border-left-color: #6c757d !important;
}
.section-header.other-variations h3 {
color: #6c757d;
}
/* Dark mode section headers */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.section-header { .section-header {
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%); background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border-left: 4px solid #4299e1;
color: #e2e8f0;
}
.section-header.other-variations {
background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
border-left: 4px solid #718096;
} }
.section-header h3 { .section-header h3 {
color: #e2e8f0; color: #e2e8f0;
} }
.section-header.other-variations h3 {
color: #a0aec0;
}
} }
/* Enhanced pill styling */ /* Enhanced pill styling */

4
src/features/TopPlayed/Top100.tsx
View File

@ -126,7 +126,9 @@ const Top100: React.FC = () => {
<> <>
<IonItem className="section-header" lines="none"> <IonItem className="section-header" lines="none">
<h3> <h3>
<span className="icon-wrapper" style={{ marginRight: '12px', display: 'inline-block' }}>
<IonIcon icon={star} color="warning" /> <IonIcon icon={star} color="warning" />
</span>
Most Played Version Most Played Version
</h3> </h3>
</IonItem> </IonItem>
@ -149,7 +151,9 @@ const Top100: React.FC = () => {
<> <>
<IonItem className="section-header other-variations" lines="none"> <IonItem className="section-header other-variations" lines="none">
<h3> <h3>
<span className="icon-wrapper" style={{ marginRight: '12px', display: 'inline-block' }}>
<IonIcon icon={layers} color="medium" /> <IonIcon icon={layers} color="medium" />
</span>
Other Variations ({otherVariations.length}) Other Variations ({otherVariations.length})
</h3> </h3>
</IonItem> </IonItem>