user style for element (matrix)

screenshot of element (matrix) chat with pretentious-ass serif styling

I’m redacting the background image I use, because I imagine people would only want this to inspire their own modifications anyway. Should I use the proper theming system? Yes. Have I figured out how to do that as easily as shoving some user CSS on top? No. Is it secure to let Stylus shove arbitrary stuff into my e2ee messaging? Probably not.

Fern Micro from DJR: I adore it.

“Hamlet” is a 15th century proto-Roman typeface and I could pretend to be embarrassed by that but I think you already know that’s the kind of thing that makes me cackle with self-satisfaction.

I don’t remember why --darkest-green is white. Leave me alone.

:root {
    --transparent-gold: #2803362b;
    --darkest-green: #fff;
    --opaque-gold: #d0bb72;
    --light-bg: #471546;
    --color-7: #1b16a1;
    --color-6: #0a777a;
    --color-5: #8d4414;
    --color-4: #467314;
    --color-3: #3b1065;
    --color-2: #7c0f31;
    --color-1: #115189;
}
body {
    font-family: "Fern Micro";
}

.mx_SenderProfile_displayName,
.mx_RoomHeader_name,
.mx_RoomListHeader {
    font-family: "Hamlet";
    font-size: 130%;
}

.mx_BackdropPanel--image {
    display: none;
}

.mx_BackdropPanel {
    background-color: #230930;
    background-image: url(<<<REDACTED>>>);
    filter: unset;
    background-size: cover;
}

.mx_LeftPanel_wrapper .mx_LeftPanel_wrapper--user {
    background-color: hsla(0, 0%, 100%, .1);
}

.mx_RoomHeader_button::before,
.mx_RightPanel_headerButton::before,
.mx_MessageComposer_button::before,
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back,
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close,
.mx_SpacePanel,
.mx_RoomSearch,
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon {
    background-color: var(--transparent-gold);
}

.mx_RoomHeader_button:hover,
.mx_RightPanel_headerButton:hover,
.mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::after,
.mx_MessageComposer_button:hover::after {
    background: rgba(189, 13, 162, 0.1);
}

.mx_RoomHeader_button:hover::before,
.mx_RightPanel_headerButton:hover::before,
.mx_MessageComposer_button.mx_MessageComposer_closeButtonMenu::before,
.mx_MessageComposer_button:hover::before {
    background-color: #9a65a2;
}

.mx_TopUnreadMessagesBar::after {
    border: 6px solid #a75bb2;
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton::before,
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_favourites .mx_SpaceButton_icon::before,
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_home .mx_SpaceButton_icon::before,
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_orphans .mx_SpaceButton_icon::before,
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_people .mx_SpaceButton_icon::before,
.mx_RoomSearch .mx_RoomSearch_icon,
.mx_RoomListHeader .mx_RoomListHeader_plusButton::before,
.mx_RoomListHeader .mx_RoomListHeader_contextMenuButton::before,
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_headerText .mx_RoomSublist_collapseBtn::before,
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton::before,
.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_menuButton::before,
.mx_QuickSettingsButton::before,
.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_dot {
    background-color: var(--darkest-green);
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton,
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton,
.mx_SpacePanel .mx_SpaceTreeLevel .mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial,
.mx_RoomListHeader .mx_RoomListHeader_plusButton,
.mx_RoomSublist.mx_RoomSublist_minimized .mx_RoomSublist_headerContainer .mx_RoomSublist_auxButton {
    background-color: var(--transparent-gold);
    color: var(--darkest-green);
}
.mx_RoomSearch .mx_RoomSearch_input:not(.mx_RoomSearch_inputExpanded)::placeholder {
    color: var(--darkest-green) !important;
}

.mx_RoomSublist .mx_RoomSublist_headerContainer,
.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
    color: var(--darkest-green);
}

.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_2char,
.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_3char {
    border: 2px solid var(--transparent-gold);
}


.mx_NotificationBadge.mx_NotificationBadge_visible,
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_RoomSearch_shortcutPrompt {
    background-color: var(--transparent-gold);
    color: var(--darkest-green);
}

.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_back::before,
.mx_BaseCard .mx_BaseCard_header .mx_BaseCard_close::before,
.mx_RoomTile.mx_RoomTile_hasMenuOpen,
.mx_RoomTile.mx_RoomTile_selected,
.mx_RoomTile:focus-within,
.mx_RoomTile:hover .mx_RoomListHeader_contextMenuButton,
.mx_RoomTile:hover {
    background-color: var(--light-bg);
}

.mx_AccessibleButton.mx_RoomListHeader_contextMenuButton,
.mx_RoomTile.mx_RoomTile_selected {
    color: var(--light-bg);
    background-color: var(--darkest-green);
    text-shadow: unset;
}

.mx_RoomSublist .mx_RoomSublist_headerContainer .mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_sticky,
.mx_RoomSublist_stickable.mx_RoomSublist_headerContainer_stickyTop.mx_RoomSublist_headerContainer_sticky,
.mx_RoomSublist_stickable {
    border-radius: 7px;
    background-color: var(--transparent-gold);
}

.mx_RoomTile {
    border-radius: 7px;
    color: var(--darkest-green);
}

.mx_SpacePanel .mx_SpacePanel_badgeContainer .mx_NotificationBadge_dot {
    border-color: var(--transparent-gold);
}
/*
.mx_RoomTile {
    text-shadow: 1px 1px 0 var(--opaque-gold), -1px 1px 0 var(--opaque-gold), 1px -1px 0 var(--opaque-gold), -1px -1px 0 var(--opaque-gold);
}
*/
.mx_ResizeHandle.mx_ResizeHandle_horizontal {
    border-left-color: white;
    border-left-style: double;
    border-width: 4px;
}
.mx_RoomSublist_headerContainer_withAux {
    background-color: transparent;
}

.mx_WhoIsTypingTile_label {
    color: #eeebef;
}

.dark-panel {
    background-color: #eeebef;
    border-style: double;
    border-color: white;
    border-width: 4px;
}

.mx_MemberList_invite {
    background-color: var(--light-bg);
}





.mx_ReplyChain.mx_ReplyChain_color6 {
    border-left-color: var(--color-6);
}

.mx_ReplyChain.mx_ReplyChain_color5 {
    border-left-color: var(--color-5);
}

.mx_ReplyChain.mx_ReplyChain_color4 {
    border-left-color: var(--color-4);
}

.mx_ReplyChain.mx_ReplyChain_color3 {
    border-left-color: var(--color-3);
}

.mx_ReplyChain.mx_ReplyChain_color2 {
    border-left-color: var(--color-2);
}

.mx_ReplyChain.mx_ReplyChain_color1 {
    border-left-color: var(--color-1);
}

.mx_Username_color7 {
    color: var(--color-7);
}

.mx_Username_color6 {
    color: var(--color-6);
}

.mx_Username_color5 {
    color: var(--color-5);
}

.mx_Username_color4 {
    color: var(--color-4);
}

.mx_Username_color3 {
    color: var(--color-3);
}

.mx_Username_color2 {
    color: var(--color-2);
}

.mx_Username_color1 {
    color: var(--color-1);
}