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-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;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-left: 4px solid #007bff;
padding: 16px;
margin: 8px 0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.section-header.other-variations {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-left: 4px solid #6c757d;
}
.section-header h3 {
@ -131,33 +135,27 @@ ion-accordion ion-item::part(native) {
font-size: 1.1rem;
font-weight: 700;
color: #495057;
display: flex;
align-items: center;
gap: 8px;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.section-header.other-variations {
border-left-color: #6c757d !important;
}
.section-header.other-variations h3 {
color: #6c757d;
}
/* Dark mode section headers */
/* Dark mode support */
@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);
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 {
color: #e2e8f0;
}
.section-header.other-variations h3 {
color: #a0aec0;
}
}
/* Enhanced pill styling */

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

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