/* ==UserStyle==
@name           Element no images
@namespace      bkil.hu
@version        2023.09.01
@description    Show captions after you disable images and fonts within your browser. TODO: a few things still overlap
@author         bkil
==/UserStyle== */
@-moz-document domain("app.element.io"),
url-prefix("https://riot."),
url-prefix("https://matrix."),
url-prefix("https://element.") {
    /* make alt text small */
    .mx_AccessibleButton:not(.mx_ReactionsRowButton),
    .mx_EventTile_button {
        font-size: xx-small;
    }

    /* show alt text along some buttons */
    div.mx_AccessibleButton[aria-label]:not(.mx_MemberStatusMessageAvatar, .mx_MessageActionBar_maskButton, .mx_RoomTile, [role="menuitem"], [role="switch"])::after {
        content: attr(aria-label);
        outline: auto;
        line-height: initial;
    }

    /* limit line wrapping in room breadcrumb */
    .mx_RoomBreadcrumbs_crumb {
        max-height: 8rem;
    }

    /* underline read receipts */
    div.mx_ReadReceiptGroup_button[aria-label]:not(.mx_MemberStatusMessageAvatar, .mx_MessageActionBar_maskButton, .mx_RoomTile, [role="menuitem"], [role="switch"])::after {
        outline: initial;
        border-bottom: 1px solid;
    }

    .mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_avatar {
        position: initial;
    }

    div.mx_AccessibleButton[aria-label].mx_MessageActionBar_maskButton::before {
        content: attr(aria-label);
        outline: auto;
        line-height: initial;
    }


    .mx_EmojiPicker_anchor::after {
        content: attr(title);
        font-size: xx-small;
    }


    .mx_EventTile_readAvatars {
        width: initial;
        height: initial;
        top: initial;
    }

    .mx_EventTile_readAvatars .mx_AccessibleButton {
        left: initial !important;
    }

    /* reveal buttons of danger */
    .mx_AccessibleButton.mx_AccessibleButton_kind_danger {
        color: initial;
    }

    /* hide user avatar */
    .mx_BaseAvatar.mx_BaseAvatar_image,
    /* hide default avatar */
    .mx_BaseAvatar .mx_BaseAvatar_image,
    .mx_BaseAvatar img,
    /* hide avatar character */
    .mx_EventTile_avatar > button {
        visibility: hidden;
        width: 0;
        height: 0;
    }

    /* place the display name first */
    .mx_EventTile[data-layout=group] > .mx_DisambiguatedProfile,
    .mx_GroupLayout .mx_EventTile > .mx_DisambiguatedProfile {
        margin-left: initial;
        max-width: 100%;
    }

    /* place the mxid after the display name from the avatar alt */
    .mx_IRCLayout .mx_EventTile .mx_EventTile_avatar,
    .mx_EventTile[data-layout=group] > .mx_EventTile_avatar {
        position: initial;
        display: inline;
        margin-left: 1em;
    }

    /* hide optional disambiguated mxid in case of a clash - we always show it */
    .mx_DisambiguatedProfile_mxid {
        display: none;
    }

    .mx_BaseAvatar_image {
        border: 1px solid;
        aspect-ratio: initial;
    }

    /* show full mxid of users involved in summarized events */
    .mx_GenericEventListSummary_avatars .mx_BaseAvatar_image,
    .mx_ReplyTile .mx_BaseAvatar_image {
        width: initial !important;
        height: initial !important;
        font-size: xx-small;
    }

    /* read avatars */
    .mx_EventTile_readAvatars .mx_BaseAvatar_image,
    .mx_EventTile_readAvatars span.mx_BaseAvatar {
        height: 4em !important;
        width: 9em !important;
        position: initial;
        border-radius: initial;
        /*
        transform: rotate(-90deg);
        */
    }

    .mx_BaseAvatar_initial {
        display: none;
    }

    .mx_EventTile_readAvatarRemainder {
        position: initial;
    }

    /* increase width of read receipts, fix height at page bottom */
    .mxEventTitle_msgOption,
    .mx_EventTile:not([data-layout=bubble]) .mx_EventTile_msgOption {
        width: initial;
        height: initial;
        text-align: initial;
        margin-right: initial;
    }

    .mx_ReadReceiptGroup .mx_ReadReceiptGroup_button {
        padding: initial;
    }

    .mx_ReadReceiptGroup {
        display: initial;
        position: initial;
    }

    .mx_ReadReceiptGroup .mx_ReadReceiptGroup_button {
        display: initial;
    }

    /* make lines more dense */
    .mx_EventTile[data-layout=group] .mx_EventTile_line,
    .mx_EventTile[data-layout=group] .mx_EventTile_reply {
        line-height: initial;
    }

    /* show mxid instead of avatar */
    .mx_IRCLayout .mx_EventTile .mx_EventTile_avatar .mx_BaseAvatar_image::before,
    .mx_RoomView_body .mx_BaseAvatar_image[title]::before,
    .mx_RoomView_body .mx_EventTile_avatar button[title]::before {
        visibility: visible;
        content: attr(title);
    }

    .mx_IRCLayout .mx_EventTile .mx_EventTile_avatar .mx_BaseAvatar_image,
    .mx_EventTile_avatar .mx_BaseAvatar_image {
        width: initial !important;
    }

    .mx_EventTile_avatar button[title] {
      width: initial;
      height: initial;
      border-radius: initial;
      aspect-ratio: initial;
      font-weight: initial;
      text-transform: initial;
      line-height: initial;
      background-color: initial;
    }

    .mx_MemberList_wrapper .mx_EntityTile[title]::after {
        content: attr(title);
    }

    .mx_MessageActionBar .mx_AccessibleButton {
        width: 5em;
        height: 4em;
        overflow: visible;
        color: initial;
    }

    /* Add fixed caption to a few buttons manually */
    .mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_button,
    /* close reply panel */
    .mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header .mx_ReplyPreview_header_cancel {
        background-color: initial;
    }

    /* Add fixed caption to a few buttons manually */
    .mx_EventTile_body .mx_EventTile_pre_container .mx_EventTile_button,
    /* close reply panel */
    .mx_ReplyPreview .mx_ReplyPreview_section .mx_ReplyPreview_header .mx_ReplyPreview_header_cancel,
    /* delete room alias */
    .mx_EditableItem_delete {
        width: initial;
        height: initial;
        mask: initial;
        -webkit-mask: initial;
    }

    .mx_ReplyPreview_header_cancel::before,
    .mx_ReplyPreview_cancel::before {
        content: 'cancel';
    }

    .mx_ReplyPreview_cancel > img {
        outline: auto;
    }

    /* scroll up in chat log to first unread message */
    div.mx_TopUnreadMessagesBar_scrollUp[role]::after {
        font-size: x-large;
        content: 'up';
        outline: initial;
    }

    /* jump to most recent messages in chat log */
    div.mx_JumpToBottomButton_scrollDown[role]::after {
        font-size: small;
        content: 'down';
        outline: initial;
    }

    /* make chat log read */
    div.mx_TopUnreadMessagesBar_markAsRead[role]::after {
        font-size: medium;
        content: 'x';
        outline: initial;
    }

    /* copy to clipboard, for example an Id or share URL */
    .mx_ShareDialog_matrixto_copy::before {
        content: 'copy';
    }

    /* preformatted code block */
    .mx_EventTile_expandButton::before {
        content: 'expand';
    }

    .mx_EventTile_copyButton::before {
        content: 'copy';
    }

    /* close side panel */
    .mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,
    .mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close {
        width: 3em;
    }

    div.mx_BaseCard_close[role]::after {
        content: 'close';
        outline: initial;
    }

    /* back side panel */
    div.mx_BaseCard_back[role]::after {
        content: 'back';
        outline: initial;
    }

    /* explore rooms server picker help */
    .mx_ServerPicker_help::after {
        content: 'help';
    }

    /* poll creation: remove choice */
    .mx_PollCreateDialog_removeOption::after {
        content: 'remove';
    }

    /* room search */
    .mx_SearchBar_searchButton::after {
        content: 'search';
    }
    .mx_SearchBar_cancel::after {
        content: 'cancel';
    }
    .mx_RoomSearch_clearButton::after {
        content: 'clear';
    }
    /* delete room alias */
    .mx_EditableItem_delete::after {
        content: 'delete';
    }

    /* room member search */
    .mx_SearchBox .mx_SearchBox_closeButton {
        width: initial;
    }
    .mx_SearchBox_closeButton::after {
        content: 'clear';
    }

    /* if an option is activated/checked */
    .mx_Checkbox_checkmark::after {
        content: '+';
    }

    .mx_Checkbox input[type=checkbox] + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
        -webkit-mask-image: initial;
    }

    .mx_AccessibleButton[role]:not([role="switch"]) {
        -webkit-mask-image: initial;
        background-color: initial;
    }

    /* make "no" confirmation at room alias removal visible */
    .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
        color: initial;
    }

    /* make certain buttons visible that were white on green, e.g., "Save" */
    .mx_ServerPicker .mx_ServerPicker_help,
    .mx_AccessibleButton_kind_primary,
    .mx_MemberList_invite,
    .mx_AccessibleButton.mx_AccessibleButton_kind_primary,
    .mx_AccessibleButton.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
        color: initial;
    }

    /* indicate current tab in settings panel */
    .mx_TabbedView_tabsOnLeft .mx_TabbedView_tabLabel_active {
        color: initial;
        outline: auto;
    }

    /* message sending indicator */
    .mx_EventTile_sending .mx_EventTile_receiptSending::after {
        content: 'sending';
        font-size: xx-small;
    }

    .mx_EventTile_sending .mx_EventTile_receiptSending {
        width: initial;
    }

    /* The authenticity of this encrypted message can't be guaranteed on this device */
    .mx_EventTile_e2eIcon.mx_EventTile_e2eIcon_normal::before {
        content: '!';
        background-color: orange;
    }

    /* Unable to decrypt */
    .mx_EventTile_e2eIcon.mx_EventTile_e2eIcon_warning::before {
        content: '!!';
        background-color: red;
    }

    /* replace icons with text */
    .mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee::before,
    .mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal::before,
    .mx_E2EIcon_normal::after, .mx_E2EIcon_normal::before,
    .mx_E2EIcon_verified::after, .mx_E2EIcon_verified::before,
    .mx_E2EIcon_warning::after, .mx_E2EIcon_warning::before,
    .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe::before,
    .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe::before {
      font-size: xx-small;
      width: initial;
      background-color: initial;
      mask: initial;
      -webkit-mask: initial;
      position: initial;
    }

    .mx_RoomHeader .mx_RoomHeader_icon {
      width: initial;
    }

    /* above room name on right panel: non-E2EE room by default */
    .mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee::before {
      content: 'cleartext';
    }

    /* above room name on right panel: E2EE room */
    .mx_RoomSummaryCard .mx_BaseCard_header .mx_RoomSummaryCard_avatar .mx_RoomSummaryCard_e2ee_normal::before {
      content: 'E2EE';
    }

    /* on top next to room topic: E2EE */
    .mx_E2EIcon_normal::before {
      content: 'E2EE';
    }

    /* on top next to room topic: E2EE, everybody verified */
    .mx_E2EIcon_verified::before {
      content: 'E2EE verified';
    }

    /* on top next to room topic: E2EE, not everybody verified */
    .mx_E2EIcon_warning::before {
      content: 'E2EE unverified';
    }

    /* on top next to room topic: publicly joinable rooms */
    .mx_RoomHeader_avatar .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon,
    .mx_RoomHeader_avatar .mx_ExtraTile .mx_DecoratedRoomAvatar_icon {
      position: initial;
      width: initial;
      margin: initial;
    }

    .mx_RoomHeader_avatar .mx_DecoratedRoomAvatar .mx_DecoratedRoomAvatar_icon_globe::before,
    .mx_RoomHeader_avatar .mx_ExtraTile .mx_DecoratedRoomAvatar_icon_globe::before {
      content: 'public';
    }
}