Skip to content

MixCloud Accessibility Fixes by BoffinBrain

Imported from a private source

Screenshot of MixCloud Accessibility Fixes
Homepage Write a review Install Get Stylus

Details

AuthorBoffinBrain

LicenseCC-BY-4.0

Categorymixcloud

Created

Updated

Size948 B

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Adds a scrollbar to the playlist and a few other small UI tweaks.

Notes

This style adds a proper horizontal scrollbar to the playlist at the bottom of the page, so you can scan through long lists without wearing out your mousewheel or your hand. Phew!

Also fixes popup menus like the 'Add To' menu to be wider and use non-bold text, so you can see the whole line.

Ported over from UserStyles.org

Version History

V2.3.0 - 2024-12-16
Removed code relating to the play button and seek bars, since those elements have been replaced in the new Mixcloud UI.
Improved popup menu to also make its max-width larger. Most menu items should no longer be truncated with "..."

V2.2.3 - 2024-06-21
Updated selectors again.
Force the popup menu items to show in a normal weight font instead of bold.

V2.2.1 - 2023-01-21
Updated selectors to be more robust to future changes.
Increased progress bar contrast slightly.
Progress bar for the currently playing mix will be coloured red, similar to the default style.

V2.1.1 - 2022-10-26
Updated selectors for new CSS classes and removed redundant code for tooltip fixes and playback progress circle (these only appear on individual mix pages now).

V2.1.0 - 2020-10-31
Added a high-contrast fix for the alternate linear play progress indicator (Mixcloud seems to be introducing this in favour of the old ring progress indicator).
Added a quick z-index fix to prevent the Pro User icon appearing over the Add to Playlist popup.

V2.0.0 - 2020-07-12
Updated for new CSS classnames and added high contrast play rings.

V1.1.0 - 2020-02-19
Updated for the new (and ugly) Mixcloud 10 theme.

V1.0.0 - 2018-08-15
Initial release of MixCloud Playlist Horizontal Scrollbar on UserStyles.org.

Source code

/* ==UserStyle==
@name           Mixcloud Accessibility Fixes
@namespace      github.com/openstyles/stylus
@version        2.3.0
@description    Adds a scrollbar to the playlist and a few other small UI tweaks.
@author         BoffinBrain
==/UserStyle== */

@-moz-document domain("mixcloud.com") {
    
    /* Force playlist to be taller and add scrollbar */
    .up-next-open [class*="styles__UpNextArea"] {
        height: 65px;
        overflow-x: scroll !important;
    }

    /* Adjust height of the player wrapper's backing block to extend with scrollbar height (doesn't need to be precise) */
    [class*="styles__PlayerWrapper"]::before {
        height: 125px;
    }

    /* Popup menus: no bold text */
    .popover-list-item * {
        font-weight: normal !important;
    }

    /* Popup menus: increased width to show all text */
    .popover-list-item-text {
        max-width: 20em !important;
    }

}

Reviews

No reviews yet.