ElementTheme.css

ElementTheme.css

/* ==UserStyle==
@name         Theme for Element (Matrix Client)
@namespace    github.com/openstyles/stylus
@version      1.0.0
@license      unlicense
@preprocessor default
==/UserStyle== */

/* Background Application */
div.mx_MatrixChat > .mx_RoomView {
    background: #000;
    background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(24, 27, 33, 1)), var(--stylus-bg-image);
    /* If you don't know how to use `var()`, use `url("https://example.com/")` where the URL is your image. Beware of same origin! */
    background-size: cover;
}

/* ==Avatar Size Modifiers== */
div.mx_EventTile .mx_EventTile_avatar img.mx_BaseAvatar_image {
    width: 40px!important;
    height: 40px!important;
}

div.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar img.mx_BaseAvatar_image {
    width: 14px!important;
    height: 14px!important;
}

ol > li div.mx_EventTile .mx_EventTile_avatar .mx_BaseAvatar span.mx_BaseAvatar_initial {
    width: 40px!important;
    line-height: 40px!important;
}

/* Custom Style for Background */
.mx_PinnedEventsPanel > .mx_PinnedEventsPanel_body {
    background-color: #22262e;
    background-color: rgba( 0, 0, 0, 0.70);
    padding: 0px 0px 15px 15px;
}

.mx_EventTile:not([data-layout=bubble]):hover.mx_EventTile_verified .mx_EventTile_line {
    border-left: none;
    margin-left: 4px;
}

.mx_EventTile:not([data-layout=bubble]):hover.mx_EventTile_verified .mx_EventTile_line:before {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    background-color: #24b868;
}

.mx_EventTile:not([data-layout=bubble]).mx_EventTile_selected > .mx_EventTile_line {
    border-left: none;
    padding-left: 64px;
    background: #22262e;
    background: rgba(61, 145, 157, .2);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 20%, rgba(164, 106, 0, .3) 80%);
}

.mx_EventTile:not([data-layout=bubble]).mx_EventTile_selected > .mx_EventTile_line:before {
    content: "";
    display: block;
    position: absolute;
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    bottom: 0px;
    left: 0;
    border: #ffa500 solid 1px;
    border: rgba(255, 165, 0, .7) solid 1px;
    border-radius: 1rem;
}

.mx_EventTile:not([data-layout=bubble]).mx_EventTile.focus-visible:focus-within .mx_EventTile_line,
.mx_EventTile:not([data-layout=bubble]).mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
.mx_EventTile:not([data-layout=bubble]).mx_EventTile:hover .mx_EventTile_line {
    background-color: #22262e;
    background-color: rgba(0, 0, 0, 0.20);
}

.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,
.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
.mx_EventTile:hover .mx_EventTile_line,
li.mx_EventTile:hover {
    border-radius: 1rem;
    background-color: #22262e;
    background-color: rgba(0, 0, 0, 0.30);
}

.mx_EventTile:not([data-layout=bubble]).mx_EventTile_highlight .markdown-body .mx_EventTile_line,
.mx_EventTile:not([data-layout=bubble]).mx_EventTile_highlight .mx_EventTile_line {
    background: #22262e;
    background: linear-gradient(90deg, rgba(25, 0, 0, 0) 0%, rgba(30, 0, 0, 0.3) 15%, rgba(20, 0, 0, 0.3) 60%, rgba(20, 0, 0, 0) 100%);
}

.mx_RoomHeader.light-panel {
    background-color: #22262e;
    background-color: rgba(24, 27, 33, 0.45);
}

#mx_RightPanel.mx_fadable {
    background-color: rgba(32, 37, 43, 0.70);
}

.markdown-body blockquote {
    background: linear-gradient(90deg, rgba(34, 38, 46, 1) 0%, rgba(0, 0, 0, 0) 80%);
    color: #fff;
}

.mx_RoomHeader_buttons {
    background-color: #181b21;
    background-color: rgba( 0, 0, 0, 0);
}

.mx_EventTile > .mx_SenderProfile:before {
    position: absolute;
    content: "";
    width: 42rem;
    height: 2rem;
    background: #22262e;
    background: linear-gradient(90deg, rgba(34, 38, 46, 1) 0%, rgba(34, 38, 46, 1) 50%, rgba(34, 38, 46, 0) 100%);
    z-index: -1;
    left: 2rem;
}

.mx_SenderProfile > span {
    background-color: transparent;
}

.mx_Username_color8 {
    color: #ff00d4;
}

/* Bad CSS Fixes */
.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton {
    display: flex;
    flex: 0 0 32px;
    align-content: center;
    justify-content: center;
}

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton:before {
    top: 8px;
}

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer {
    position: relative;
    flex: 0 0 4rem;
    max-height: 6rem;
    height: auto;
}

div.mx_AccessibleButton.mx_RoomSublist_menuButton {
    display: none;
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer .mx_NotificationBadge {
    margin-left: 8px;
}

.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_badgeContainer {
    order: 3;
    position: relative;
    top: -10px;
    left: -5px;
}

.mx_UserMenu_minimized .mx_UserMenu_row {
    position: relative;
    left: 6px;
}

#mx_RightPanel.mx_fadable .mx_RoomView_MessageList {
    height: auto!important
}

ul.mx_SpacePanel.collapsed {
    width: 4px;
}

ul.mx_SpacePanel.collapsed:hover {
    width: auto;
}

.mx_MImageBody {
    width: 30%;
}