Styling Riot.im (Matrix client)

[grahamperrin]

Synchronous Messaging at Mozilla: The Decision

… Riot/Matrix has distinguished itself as an excellent open community collaboration tool, with robust support for accessibility and community safety that offers more agency and autonomy to the participants, teams and communities that make up Mozilla. …

For anyone who finds the coloured circles – in https://riot.im/app/ – excessive or superfluous, this might help:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("riot.im")  {
    .mx_RoomTile_avatar {
        display: none !important;
    }
    .mx_RoomHeader_avatar {
        display: none !important;
    }
    .mx_EventTile_avatar {
        display: none !important;
    }
    .mx_UserPill .mx_BaseAvatar {
        display: none !important;
    }
    .mx_UserPill {
        line-height: 1;
        border-radius: 3px;
        border: none;
        background: rgb(0, 0, 0) !important;
        padding: .2em;
    }
    .linkified {
        color: rgb(0, 255, 255) !important;
    }
}

Without the style:

Styled:

Styled and in a pop-up window:

– sidebar closed, to the right. I never found a reliable way to suppress the large circles in notifications and the list of members.