listen.tidal.com - 2024 - blueish and colors by nope-im-not-pro

/* ==UserStyle==
@name       listen.tidal.com - 2024 - blueish
@version    20240719.13.32
@namespace  github.com/openstyles/stylus
@author     RandomInternetPerson3
==/UserStyle== */

@-moz-document domain("listen.tidal.com") {
    /* Change color of (close to) all text to blue */
    [data-wave-color=textDefault] {
        color: #0064ff;
    }

    /* Change text color */
    .wave-text-body-demi {
        color: #000dff;
    }
    .wave-text-body-demi:hover {
        color: #000;
        opacity: 1;
        background-color: #ccc;
        border-radius: 3px;
    }

    /* Set pointer events, line height, and important text color to blue */
    .css-1c26ayy {
        pointer-events: auto;
        line-height: 38px;
        color: #000dff !important;
    }

    /* Set button and svg (on the right bottom corner) background color, border radius, and border color */
    .moreContainer--JnBwQ button svg {
        background-color: #000 !important;
        border-radius: 2px;
        border: 3px solid #000;
    }

/* ------------------------------------------------------------------------------------ */
/*                               high quality settings                                  */
/* ------------------------------------------------------------------------------------ */
    
    /* Change "high quality" text color to green */
    .textHigh--qvNFM {
        color: #00ff00;
    }

    /* Set "high quality" wave badge background color and text color */
    ._wave-badge-color-high_1oxl7_17 {
        background-color: #21feec1a;
        color: #00ff00;
    }

/* ------------------------------------------------------------------------------------ */
/*                              maximum quality settings                                */
/* ------------------------------------------------------------------------------------ */

    /* Set "maximum quality" wave badge background color and text color */
    ._wave-badge-color-max_1oxl7_22 {
        background-color: #21feec1a;
        color: #ff9d00;
    }
    /* Change "maximum quality" text color to orange */
    .textMax--ADaW_ {
        color: #ff9d00;
    }

/* ------------------------------------------------------------------------------------ */
/*                             buttons and menu settings                                */
/* ------------------------------------------------------------------------------------ */

    /* Set button background color and border */
    .button--XV8ps {
        background-color: #0000;
        border: 1px solid #afafafb5;
    }

    /* Change button border on hover */
    .button--XV8ps:hover {
        background-color: #0000;
        border: 2px solid #e4e4e4b5;
    }

    /* Change color of button svg and icon */
    .button--XV8ps svg, .icon--1quCi {
        color: #ccc;
    }

    /* Set context menu button background color, text color, and border radius */
    .contextMenuButton--MUBcz {
        border-radius: 3px;
        background-color: #000;
        color: #9c9c9c;
    }

    /* Change context menu button background color and text color on hover */
    .contextMenuButton--MUBcz:hover {
        border-radius: 3px;
        background-color: #ffffff52;
        color: #afafaf;
    }

    /* Change text color for album, artist, and contribution text */
    .albumText--z0uyY, .artistText--_2feZ, .contributionText--on89h {
        color: #cacaca;
    }

    /* Change button state text and svg color */
    .buttonStates--VkrQG {
        color: #ccc;
    }
    .buttonStates--VkrQG svg {
        color: #ccc;
    }

    /* Change general button text color */
    button {
        color: #ccc;
    }

    /* Change button text offset color and margin */
    .buttonTextOffset--UgJSV {
        margin-top: 8.5px;
        color: #ccc;
    }

    /* Change background text color */
    .backgroundLow--K9l0e {
        color: #fff;
    }

    /* Adjust playing icon margin, height, width, and background color */
    .isPlayingIcon--InpuJ, .isPlayingIcon--InpuJ svg {
        margin-top: 2%;
        height: 100%;
        width: 100%;
        background-color: var(--main-bg-color);
    }

/* ------------------------------------------------------------------------------------ */
/*               playing song and playlist-, album-, etc-overwiew settings              */
/* ------------------------------------------------------------------------------------ */

    /* Change background color of the playing table row */
    .tableRowIsPlaying--zW40l {
        background: #07017d61;
    }

    /* Set time element font variant and opacity */
    time {
        font-variant-numeric: tabular-nums;
        opacity: 0.7;
    }
    /* Change icon fill color and color on hover */
    .icon--dd0Ta {
        fill: #3a00ffad;
    }
    .icon--dd0Ta:hover {
        color: #fff;
    }

/* ------------------------------------------------------------------------------------ */
/*                                searchfield settings                                  */
/* ------------------------------------------------------------------------------------ */

    /* Adjust search field */
    .searchField--fgDKc {
        color: #ccc;
        background-color: #000;
        border-radius: 11px;
    }
    /* Set background and text color on focus within */
    div.searchField--fgDKc:focus-within input {
        color: #fff;
        background-color: #000;
        border-radius: 10px;
        opacity: 0.7;
    }
}