For the top three, search for this selector in the code.
That should also apply to the listview item on the bottom and the now-playing item on the right, but if you need to override them you can. This is the selector for the gridrow:
And this will work for the now playing list items:
Code: Select all
div[data-id=nowplayinglistContainer] .lvItem[data-selected]
If you need a separate color/background color for when it's focused, add your own selector with [data-focused], for example:
Code: Select all
.lvItem[data-selected][data-focused]
If you need to learn more about how CSS selectors work,
the Mozilla Developer Network (MDN) is a fantastic resource. And if you don't know how Less works, I believe their site is
here.
Here's the LESS that I added to test those selectors:
Code: Select all
div[data-id=nowplayinglistContainer] .lvItem[data-selected]{
color: red!important;
}
div[data-id=nowplayinglistContainer] .lvItem[data-selected][data-focused]{
color: green!important;
}
.lvItem[data-selected]{
color: yellow!important;
}
.lvItem.gridrow[data-selected]{
font-weight: bold!important;
}
(Note that using "!important" isn't the greatest idea unless you have to. I just decided to add that because I didn't want to bother with CSS overrides elsewhere in the theme. Just used that code for demonstration.)
For the top three, search for this selector in the code. [code].lvItem[data-selected][/code]
That should also apply to the listview item on the bottom and the now-playing item on the right, but if you need to override them you can. This is the selector for the gridrow: [code].lvItem.gridrow[data-selected][/code]
And this will work for the now playing list items: [code]div[data-id=nowplayinglistContainer] .lvItem[data-selected][/code]
If you need a separate color/background color for when it's focused, add your own selector with [data-focused], for example:
[code].lvItem[data-selected][data-focused][/code]
If you need to learn more about how CSS selectors work, [url=https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors]the Mozilla Developer Network (MDN) is a fantastic resource.[/url] And if you don't know how Less works, I believe their site is [url=http://lesscss.org/#]here.[/url]
Here's the LESS that I added to test those selectors:
[code]
div[data-id=nowplayinglistContainer] .lvItem[data-selected]{
color: red!important;
}
div[data-id=nowplayinglistContainer] .lvItem[data-selected][data-focused]{
color: green!important;
}
.lvItem[data-selected]{
color: yellow!important;
}
.lvItem.gridrow[data-selected]{
font-weight: bold!important;
}[/code]
(Note that using "!important" isn't the greatest idea unless you have to. I just decided to add that because I didn't want to bother with CSS overrides elsewhere in the theme. Just used that code for demonstration.)
