2021-12-11 10:17:48 +00:00
/ *
Quality of Life Enhancements to make Element less shitty
compared to other instant messaging clients out there ,
make it feel a little bit more like a real thing .
Ideas by schrumpel , 12 / 11 / 2021
* /
/* The default behaviour is just horrible and triggers me everytime I scroll through the timeline, apply this and see for yourself why this is better! */
. mx_MImageBody {
width : max-content !important ;
}
/* Running a Discord bridge for example and you will thank me for this, this is important because otherwise Messages from people that use Discord are shown with less opacity than normal messages, because they are being sent as notices */
. mx_MNoticeBody {
opacity : 1 !important ;
}
/* make the file clipper appear on the left side, more intuitive for me */
. mx_AccessibleButton . mx_MessageComposer_button . mx_MessageComposer_upload {
position : absolute !important ;
left : 10 px !important ;
}
/* remove the horrible and ugly padding from the right panel */
. mx_MainSplit > . mx_RightPanel_ResizeWrapper {
padding : 0 !important ;
}
/* also the border radius! */
. mx_RightPanel {
border-radius : 0 !important ;
}
/* make avatars more edgy, but only 15% */
. mx_BaseAvatar_image {
border-top-left-radius : 5 px !important ;
border-top-right-radius : 5 px !important ;
border-bottom-left-radius : 5 px !important ;
border-bottom-right-radius : 5 px !important ;
}
. mx_DecoratedRoomAvatar . mx_DecoratedRoomAvatar_cutout . mx_BaseAvatar , . mx_ExtraTile . mx_DecoratedRoomAvatar_cutout . mx_BaseAvatar {
-webkit-mask-image : unset !important ;
mask-image : unset !important ;
}
/* videos/images should not have rounded borders... */
. mx_MImageBody_thumbnail , . mx_MVideoBody {
border-radius : 0 !important ;
}
/* fix the ugly room list white border */
. mx_SpacePanel . mx_SpaceButton . mx_SpaceButton_active . mx_SpaceButton_narrow . mx_SpaceButton_selectionWrapper {
padding : 1 px !important ;
border : 3 px solid transparent !important ;
border-radius : 15 % !important ;
background : var ( -- roomlist-highlights-color ) !important ;
box-shadow : 1 px 1 px 0 px white , 1 px - 1 px 0 px white , - 1 px - 1 px 0 px white , - 1 px 1 px 0 px white ;
}
/* wtf is wrong with you guys?! */
/* why the hell are there 2 borders on the mx_RoomHeader? JESUS */
. mx_RoomHeader_wrapper {
border : 0 !important ;
2021-12-11 18:17:51 +00:00
}
/* messagebox stuff*/
. mx_MessageComposer_wrapper {
border-top : 1 px solid #40444b 36 !important ;
}
. mx_SendMessageComposer {
background : var ( -- timeline-background-color ) !important ;
}
. mx_SendMessageComposer . mx_BasicMessageComposer . mx_BasicMessageComposer_input {
background : var ( -- roomlist-background-color ) !important ;
padding : 10 px !important ;
border-radius : 5 px !important ;
margin-top : 10 px !important ;
margin-bottom : 10 px !important ;
}
. mx_MessageComposer_e2eIcon . mx_E2EIcon {
position : absolute !important ;
margin-right : 0 !important ;
margin-left : - 5 px !important ;
width : 12 px !important ;
height : 12 px !important ;
top : 5 px !important ;
left : unset !important ;
z-index : 1 !important ;
}
. mx_EventTile : not ( [ data-layout = " bubble " ] ) : hover . mx_EventTile_verified . mx_EventTile_line {
-webkit-box-shadow : inset 54 px 0 0 - 50 px var ( -- accent ) !important ;
box-shadow : inset 54 px 0 0 - 50 px var ( -- accent ) !important ;
}
/ *
> hardcoding the fucking color code jesus christ
https : / / github . com / matrix-org / matrix-react-sdk / blob / 57fae019917bd309ef65e4599d061bd0409fb5b9 / res / css / views / elements / _Tooltip . scss # L65
* /
. mx_Tooltip {
background-color : var ( -- roomlist-background-color , #21262C ) !important ;
}
2021-12-11 18:33:53 +00:00
. mx_Dialog {
box-shadow : unset !important ;
border : 1 px solid var ( -- roomlist-highlights-color , black ) !important ;
border-radius : 0 !important ;
}
. mx_textinput_icon . mx_textinput_search {
border : 1 px solid rgba ( 64 , 68 , 75 ,. 21176470588235294 ) !important ;
2021-12-11 19:07:11 +00:00
}
. markdown-body blockquote , . markdown-body dl , . markdown-body ol , . markdown-body p , . markdown-body pre , . markdown-body table , . markdown-body ul {
margin-bottom : 0 !important ;
2021-12-11 18:33:53 +00:00
}