Various experimental Element improvements, especially related to the IRC layout.
Experimental Element improvements by Steffo99
Details
AuthorSteffo99
LicenseCC-BY-4.0
Categorystaging.element.io
Created
Updated
Size8.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Since it's experimental, only applies to staging.element.io.
May get removed in the future if I ever get around to implementing them directly in the Element source.
Source code
/* ==UserStyle==
@name Experimental Element improvements
@version 20230510.11.24
@namespace userstyles.world/user/Steffo99
@description Various experimental Element improvements, especially related to the IRC layout.
@author Steffo99
@license CC-BY-4.0
==/UserStyle== */
@-moz-document domain("staging.element.io") {
/*** Fully yellow highlights ***/
.mx_Pill.mx_AtRoomPill,
.mx_Pill.mx_UserPill_me {
background-color: hsl(45deg 100% 70%) !important;
color: #000 !important;
}
/* Group, IRC */
.mx_EventTile_highlight:is([data-layout="group"], [data-layout="irc"]) .mx_EventTile_line {
background-color: hsl(45deg 100% 50% / 0.1);
color: hsl(45deg 100% 70%);
}
.mx_EventTile_highlight:is([data-layout="group"], [data-layout="irc"]):is(:hover, :focus) .mx_EventTile_line {
background-color: hsl(45deg 100% 50% / 0.18);
}
.mx_EventTile_highlight:is([data-layout="group"], [data-layout="irc"]) .mx_EventTile_line :is(.markdown-body, .mx_EventTile_edited) {
color: hsl(45deg 100% 70%);
}
/* Bubbles */
.mx_EventTile_highlight:is([data-layout="bubble"])::before {
background-color: hsl(45deg 100% 50% / 0.05);
}
.mx_EventTile_highlight:is([data-layout="bubble"]),
.mx_EventTile_highlight:is([data-layout="bubble"]) .mx_EventTile_line .markdown-body {
color: hsl(45deg 100% 70%);
}
.mx_EventTile_highlight:is([data-layout="bubble"]) .mx_EventTile_line {
background-color: hsl(45deg 100% 50% / 0.14);
}
.mx_EventTile_highlight:is([data-layout="bubble"]):hover::before,
.mx_EventTile_highlight:is([data-layout="bubble"]):focus::before {
background-color: hsl(45deg 100% 50% / 0.12);
}
}
@-moz-document domain("staging.element.io") {
/*** Blockquote color ***/
.markdown-body blockquote {
color: unset;
}
}
@-moz-document domain("staging.element.io") {
/*** IRC message alignment ***/
.mx_EventTile:is([data-layout="irc"]) {
align-items: center;
}
.mx_EventTile:is([data-layout="irc"]) .mx_DisambiguatedProfile {
text-align: left;
}
.mx_EventTile:is([data-layout="irc"]) > * {
margin-right: 0;
}
.mx_EventTile:is([data-layout="irc"]) {
gap: var(--right-padding);
}
.mx_EventTile:is([data-layout="irc"]) .mx_ReplyTile_sender .mx_DisambiguatedProfile {
text-align: left;
}
.mx_EventTile:is([data-layout="irc"]) .mx_EventTile_msgOption .mx_ReadReceiptGroup {
inset-block-start: -2.15rem;
}
.mx_EventTile:is([data-layout="irc"]).mx_EventTile_info .mx_EventTile_avatar {
margin-right: 0;
}
/*
.mx_EventTile:is([data-layout="irc"]).mx_EventTile_info .mx_EventTile_avatar {
left: 0;
}
.mx_EventTile:is([data-layout="irc"]).mx_EventTile_info .mx_EventTile_line {
margin-inline-start: 0;
}
*/
}
@-moz-document domain("staging.element.io") {
/*** IRC big emoji ***/
.mx_EventTile:is([data-layout="irc"]) .mx_EventTile_bigEmoji {
line-height: unset;
font-size: max(1.8rem, 1em);
}
}
@-moz-document domain("staging.element.io") {
/*** IRC replies ***/
.mx_EventTile:is([data-layout="irc"]) .mx_ReplyChain_wrapper > div {
margin: 0;
}
.mx_EventTile:is([data-layout="irc"]) .mx_ReplyChain_wrapper {
opacity: 0.6;
}
.mx_EventTile:is([data-layout="irc"]) :is(.mx_ReplyTile, .mx_ReplyChain),
.mx_EventTile:is([data-layout="irc"]) :is(.mx_ReplyChain, .mx_ReplyChain) :is(.mx_DisambiguatedProfile, .mx_UserPill, .markdown-body) {
font-size: 1rem;
}
.mx_EventTile:is([data-layout="irc"]) :is(.mx_ReplyTile, .mx_ReplyChain) code {
padding: 0;
line-height: 1.4rem;
}
.mx_EventTile:is([data-layout="irc"]) :is(.mx_ReplyTile, .mx_ReplyChain) .mx_UserPill {
padding-left: 0;
padding-right: 0.5ex;
padding-top: 0;
padding-bottom: 0;
line-height: 1.4rem;
}
.mx_EventTile:is([data-layout="irc"]) :is(.mx_ReplyTile, .mx_ReplyChain) .mx_BaseAvatar {
height: 12px !important;
width: 12px !important;
min-width: 12px;
min-height: 12px;
margin-left: 0;
margin-right: 0.5ex;
}
.mx_EventTile:is([data-layout="irc"]) .mx_ReplyTile a {
display: flex;
gap: 8px;
}
.mx_EventTile:is([data-layout="irc"]) .mx_ReplyTile .mx_EventTile_content {
-webkit-line-clamp: unset;
line-clamp: unset;
display: unset;
max-height: var(--line-height);
}
.mx_EventTile:is([data-layout="irc"]) .mx_ReplyTile .mx_DisambiguatedProfile {
width: auto;
}
.mx_EventTile:is([data-layout="irc"]) .mx_ReplyTile:hover .mx_DisambiguatedProfile_displayName {
padding-right: 0 !important;
}
}
@-moz-document domain("staging.element.io") {
/*** IRC margins ***/
.mx_IRCLayout .mx_EventTile {
--EventTile_irc_line-padding-block: 2px;
padding: var(--EventTile_irc_line-padding-block) 0;
}
.mx_EventTile:is([data-layout="irc"]) .mx_EventTile_content {
padding: 0 !important;
}
}
@-moz-document domain("staging.element.io") {
/*** IRC link previews ***/
.mx_EventTile:is([data-layout="irc"]) .mx_LinkPreviewWidget {
margin-top: 4px;
margin-bottom: 0;
}
.mx_EventTile:is([data-layout="irc"]) .mx_LinkPreviewWidget_wrapImageCaption {
margin-left: 8px;
margin-right: 8px;
gap: 8px;
}
.mx_EventTile:is([data-layout="irc"]) .mx_LinkPreviewWidget_image {
flex-basis: var(--line-height) !important;
height: var(--line-height) !important;
}
.mx_EventTile:is([data-layout="irc"]) .mx_LinkPreviewWidget_image img {
width: var(--line-height) !important;
height: var(--line-height) !important;
}
.mx_EventTile:is([data-layout="irc"]) .mx_LinkPreviewWidget_description {
display: none !important;
}
}
@-moz-document domain("staging.element.io") {
/*** IRC media body ***/
.mx_EventTile:is([data-layout="irc"]) .mx_MediaBody {
display: flex;
flex-direction: row;
gap: 4px;
/* max-width: unset; */
padding: 1px;
line-height: var(--line-height);
align-items: center;
}
.mx_EventTile:is([data-layout="irc"]) .mx_MFileBody_info_icon {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-right: 0;
}
.mx_EventTile:is([data-layout="irc"]) .mx_MFileBody_info_icon::before {
width: 10px;
height: 10px;
left: 3px;
top: 3px;
}
.mx_EventTile:is([data-layout="irc"]) .mx_MFileBody_info_filename {
vertical-align: bottom;
width: auto;
padding-right: 2px;
}
}
@-moz-document domain("staging.element.io") {
/*** IRC images ***/
.mx_EventTile:is([data-layout="irc"]) :is(.mx_MImageBody_thumbnail_container, .mx_MVideoBody_container) {
max-height: 100px !important;
border-radius: 2px;
}
.mx_EventTile:is([data-layout="irc"]) .mx_MImageReplyBody :is(.mx_MImageBody_thumbnail_container, .mx_MVideoBody_container) {
max-height: var(--line-height) !important;
}
}
@-moz-document domain("staging.element.io") {
/*** IRC reactions ***/
.mx_EventTile:is([data-layout="irc"]) .mx_ReactionsRow {
margin-top: 1px;
margin-bottom: 0;
font-size: 1rem;
opacity: 0.6;
}
.mx_EventTile:is([data-layout="irc"]) .mx_ReactionsRowButton {
line-height: 1.4rem;
}
.mx_EventTile:is([data-layout="irc"]) .mx_ReactionsRow_addReactionButton {
height: 1rem;
}
}
@-moz-document domain("staging.element.io") {
/*** IRC polls ***/
.mx_EventTile:is([data-layout="irc"]) .mx_MPollBody {
margin-top: 0;
margin-bottom: 0;
}
.mx_EventTile:is([data-layout="irc"]) .mx_MPollBody > h2 {
margin-bottom: 2px;
}
.mx_EventTile:is([data-layout="irc"]) .mx_MPollBody .mx_MPollBody_allOptions {
grid-gap: 4px;
margin-bottom: 2px;
}
}
@-moz-document domain("staging.element.io") {
/*** IRC stickers ***/
.mx_MStickerBody_wrapper {
padding: 0;
}
}
@-moz-document domain("staging.element.io") {
/*** Faded edit note ***/
.mx_EventTile_edited {
opacity: 0.3;
}
}