Rosters Directing CSS at specific rosters

Hi!

I´m trying to figure out how to direct css at specific rosters, for instance if i wanted the font color of users to be different on a different roster.

Case in point yellow text on 8 vFS Black Sheep and lets say Blue on 561 ...
I´ve also been unsucessful in actually changing the text color of the username element, it appears to be overwritten somewhere else but not sure where.

Lastly - is there a way to retreieve an aggregated total number, lets say if we had a field with a numeric type, that gets entered into the roster details, then show the summed up total somewhere? Thinking flight log here, user enters 1.0 at one point, then 1.5 at another, this then gets added to the total_hours and displays 2.5 for example.

Thanks!

1703870638173.png

1703870665467.png
 
For a point of discussion, this is some modified nf_rosters.less I have so far to achieve the above:

Code:
.rosterUserList {
    .rank {
        width: 300px;
        text-align: center;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    .dataList-cell--combined {
        position: relative;
        width: 300px;
        margin: auto;
        text-align: center;

        .rankImage {
            display: block;
            max-width: 300px;
            width: 100%; /* Ensures the image scales responsively */
            margin: auto;
            position: relative; /* Needed to correctly position the overlay */
        }

        .usernameRoster {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            color: yellow; /* Yellow text color - does not take for some reason*/
            font-size: 2.0em;
            text-align: center;
            padding: 0.5em;
            transform: translateY(-20%);
        }
    }
}
 
Back
Top