Skip to content

siriusxm.com - Dec 2023 by fixingBadStyling

Details

AuthorfixingBadStyling

LicenseNo License

Categorysiriusxm.com

Created

Updated

Size1.0 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Overrides some styles for new SiriusXM Web Player Redesign

Notes

Edit variable values in the UserStyle section to customize sizing of Library.
Can edit:

  • width of the left nav area (there was too much wasted space previously)
  • the number of grid columns (channels) displayed in the library
  • the size of the font for the currently playing song or channel title. Can use decimal values.

Source code

/* ==UserStyle==
@name           siriusxm.com - Dec 2023
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me

// Override variables
@var text side-nav-md-width "Left Side Nav Width" 16rem;
@var text font-title-medium-font-size "Library Song Title Font Size" 1rem
@var number maxColumnCount "Library Grid Column Count" 10
==/UserStyle== */
@-moz-document domain("siriusxm.com") {
    *[class^='_ContentGrid'] {
        --max-column-count: var(--maxColumnCount);
    }

    
    @media (width >=960px) and (width < 1280px) {
        *[class^='_ContentGridItems'] {
            grid-template-columns: repeat(6, 1fr);
        }
    }
    
    
    @media (width >= 960px) {
        *[class^='_ContentGridItems'] {
            --max-column-count: 12;
        }
    }
    
    @media (width >= 1600px){
        :root[data-uitk-platform=web] *[class^='_ContentGridItems'] {
            grid-template-columns: repeat(12,1fr);
        }
    }
}

Reviews

No reviews yet.