Thank you for your donation!

CSS fix to look at
lol, the good ol days.
(06-20-2020, 05:30 AM)swizzle Wrote:
(06-19-2020, 03:04 PM)Tim Curtis Wrote: Do I need to make any changes?

It's kind of painful, it needs to do like:


clean these up so we don't need to use !important so much, possible road to hell paved with good intentions situation but seems good so far. ;)

#lib-content ul {display:table;overflow-x:hidden;word-break:break-word;}
#lib-content li {display:block;position:relative;cursor:pointer;line-height:1.25em;}

add this to account for scrollbar and index width in li elements so the text doesn't overrun the index or scrollbar,

#genresList li, #artistsList li, #albumsList li {width:calc(100% - (var(--sbw) + 1.17rem));}

add this to handle radio covers and album covers, it needs to go after #albumcovers to avoid being overwritten

#radiocovers, #albumcovers {width:calc(100% - 2 * (var(--sbw) + 1rem));margin-left:calc(var(--sbw) + 1rem);}

add this to handle tag view columns.

#lib-genre ul, #lib-artist ul, #lib-album ul {width:calc(100% - (var(--sbw) + 1rem));margin:.25em 0;}

modify this to account for sbw:

#songsList {padding-bottom:calc(8em + env(safe-area-inset-bottom));margin:.5em .25em;width:calc(100% - var(--sbw));}

add a fixed width to the indexes and modify the spacing a bit...

#index-genres, #index-artists, #index-albums, #index-albumcovers, #index-browse, #index-radio {display:none;width:1rem}

#index-genres {right:calc(66.85% + var(--sbw));top:calc(1.55rem + 3px);height:calc(100% - 1.5rem - 3px);}
#index-artists {right:calc(33.33% + var(--sbw));top:calc(1.55rem + 3px);height:calc(100% - 1.5rem - 3px);}
#index-albums {right:var(--sbw);top:calc(1.55rem + 3px);height:calc(100% - 1.5rem - 3px);}
#index-albumcovers {position:fixed;right:var(--sbw);top:calc(3.5rem + 1px);top:calc(3.5rem + 1px + env(safe-area-inset-top));height:calc(100% - 9rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));}
#index-browse {right:var(--sbw);top:calc(3rem + 1px);height:calc(100% - 10rem);height:calc(100% - 10rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));}
#index-radio {right:var(--sbw);top:calc(3rem + 1px);height:calc(100% - 12rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));}

this makes the index text a little smaller but bolder and uses textvariant instead of opacity, the hit area is still the same but it looks a little cleaner. maybe. if we move the size back to .8em then the 1rem used in the calcs needs to grow a bit, I was using 1.17rem.

.alphabits ul li {display:table-row !important;font-size:.6em;text-transform:uppercase;line-height:normal;font-weight:600;color:var(--textvariant);text-align:center;}

Ok, enhancements committed. The .6em font size did look a bit too small so I bumped it to .8em.

Have a look at the commit to see if I made the 1.17rem's in the right places.
It looks like you missed one:

#lib-genre ul, #lib-artist ul, #lib-album ul {width:calc(100% - (var(--sbw) + 1rem));margin:.25em 0;}

It should be 1.17rem there too.

Forum Jump: