Make Element/matrix look like discord
Discord Dark Theme for Matrix/Element by matrix_user
Details
Authormatrix_user
LicenseCC Zero
Categoryapp.element.io
Created
Updated
Size23 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Element Discord Dark Theme
@version 20210825.17.51
@namespace userstyles.world/user/matrix_user
@description Make Element/matrix look like discord
@author matrix_user
@license CC Zero
==/UserStyle== */
@-moz-document domain("app.element.io") {
/*@font-face {
font-family: Whitney;
font-weight: 300;
src: url(/assets/6c6374bad0b0b6d204d8d6dc4a18d820.woff) format("woff")
}*/
@font-face {
font-family: Whitney;
font-weight: 400;
src: url(https://vladnosek.github.io/misc/f4.woff) format("woff")
}
@font-face {
font-family: Whitney;
font-weight: 500;
src: url(https://vladnosek.github.io/misc/f3.woff) format("woff")
}
@font-face {
font-family: Whitney;
font-weight: 600;
src: url(https://vladnosek.github.io/misc/f5.woff) format("woff")
}
@font-face {
font-family: Whitney;
font-weight: 700;
src: url(https://vladnosek.github.io/misc/f2.woff) format("woff")
}
body {
font-family: Whitney, "Helvetica Neue", Helvetica, Arial, Twemoji, Apple Color Emoji, Segoe UI Emoji, Arial, Helvetica, sans-serif, Noto Color Emoji, sans-serif;
background-color: #2e3136;
}
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
padding: 8px;
}
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_roomListWrapper {
margin-top: 0px
}
.mx_LeftPanel {
background: black !important;
}
.mx_LeftPanel_roomListContainer {
backdrop-filter: none !important;
}
.mx_AccessibleButton.mx_RoomTile.mx_RoomTile_selected {
border-radius: 0;
padding-left: 10px;
}
.mx_RoomTile .mx_RoomTile_nameContainer .mx_RoomTile_name {
font-size: 16px;
}
.mx_RoomSublist .mx_RoomSublist_showNButton {
font-size: 14px;
font-weight: 400;
}
.mx_RoomSublist {
margin-left: 0
}
.mx_SpacePanel .mx_SpaceButton {
padding: 3px 2px 3px 0px;
}
.mx_SpacePanel .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
margin-left: 10px
}
[aria-label="Rooms"] [aria-label="Rooms"] .mx_DecoratedRoomAvatar .mx_BaseAvatar {
display: none
}
[aria-label="Rooms"] [aria-label="Rooms"] .mx_RoomTile_name:before {
content: '# ';
display: inline;
font-weight: 500;
font-size: 20px;
line-height: 1;
opacity: 0.3;
}
[aria-label="Rooms"] [aria-label="Rooms"] {
color: #8e9297;
font-weight: 500;
}
[aria-label="Rooms"] [aria-label="Rooms"] .mx_RoomTile_name {
line-height: 1.3;
}
.mx_AccessibleButton.mx_RoomTile:hover {
color: #d9dadb;
}
.mx_RoomTile:hover {
background-color: #4f545c2e
}
[aria-label="Rooms"] [aria-label="Rooms"] .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
color: #d9d9d9
}
[aria-label="Rooms"] [aria-label="Rooms"] .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents:after {
content: '';
width: 8px;
height: 8px;
border-radius: 99px;
background-color: white;
left: -4px;
top: 12.5px;
position: absolute
}
.mx_RoomTile.mx_RoomTile_hasMenuOpen,
.mx_RoomTile.mx_RoomTile_selected,
.mx_RoomTile:focus-within {
background-color: #4f545c52;
color: white;
}
.mx_EventTile_content .markdown-body code,
.mx_EventTile_content .markdown-body pre,
.mx_RoomHeader {
background-color: #36393f
}
.mx_RoomHeader {
border-bottom: 1px solid #292d32;
}
.mx_RoomHeader_buttons {
background-color: #35393f
}
.mx_RoomHeader_wrapper {
height: 48px;
}
.dark-panel,
.mx_E2EIcon_bordered {
background-color: #2f3136
}
.dark-panel .mx_textinput,
.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
.dark-panel :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text] {
background-color: #202225;
}
.mx_LeftPanel {
width: 260px !important;
}
.mx_RoomView_MessageList {
padding: 18px 8px;
}
.mx_EntityTile_power {
color: #a4a4a4;
padding-right: 8px;
font-size: 12px;
font-weight: 600;
}
.mx_AccessibleButton.mx_RoomTile.mx_RoomTile_selected {
color: white;
padding-left: 0;
border-radius: 4px;
}
[aria-label="People"] .mx_AccessibleButton.mx_RoomTile {
padding: 4px 6px
}
[aria-label="Rooms"] [aria-label="Rooms"] .mx_AccessibleButton.mx_RoomTile,
[aria-label="Rooms"] [aria-label="Rooms"] .mx_AccessibleButton.mx_RoomTile.mx_RoomTile_selected {
height: 34px;
}
.mx_AccessibleButton.mx_RoomTile {
color: #8e9297;
margin: 1px 8px;
border-radius: 4px;
font-weight: 500;
padding-left: 0;
}
.mx_LeftPanel .mx_LeftPanel_roomListContainer {
background-color: #2f3136
}
.mx_SpacePanel {
background-color: #202225
}
.mx_BaseAvatar.mx_BaseAvatar_image.mx_RoomAvatar_isSpaceRoom,
.mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom .mx_BaseAvatar_image,
.mx_BaseAvatar.mx_RoomAvatar_isSpaceRoom .mx_BaseAvatar_initial,
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon {
width: 40px !important;
height: 40px !important;
font-size: 28px !important;
line-height: 40px !important;
}
.mx_SpacePanel .mx_SpaceButton .mx_SpaceButton_icon:before {
-webkit-mask-size: 28px;
mask-size: 28px;
width: 40px;
height: 40px;
}
.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
background-color: #36393f;
}
.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,
.mx_EventTile:hover {
background-color: #32353b;
}
.mx_DateSeparator {
border-bottom: thin solid #ffffff0f;
padding-bottom: 0;
}
.mx_DateSeparator > div {
font-weight: 500;
font-size: 12px;
margin-bottom: -12px;
background-color: #36393f;
padding: 4px 9px;
}
.mx_SenderProfile_displayName {
color: white !important;
font-size: 16px;
font-weight: 600;
}
.mx_SenderProfile + .mx_EventTile_avatar {
margin-left: 6px;
}
.mx_SenderProfile + .mx_EventTile_avatar .mx_BaseAvatar_image {
width: 36px !important;
height: 36px !important;
}
.mx_SenderProfile + .mx_EventTile_avatar .mx_BaseAvatar_initial {
font-size: 20px !important;
width: 36px !important;
line-height: 36px !important;
}
.mx_EventTile:not([data-layout=bubble]),
.mx_EventTile_content .markdown-body {
font-size: 16px;
color: #dcddde;
}
.mx_EventTile_content .markdown-body code,
.mx_EventTile_content .markdown-body pre,
.mx_RoomHeader {
background-color: #35393f
}
.mx_EventTile_content .markdown-body a {
color: hsl(197, 100%, 47.8%)
}
a:hover,
a:link {
color: hsl(197, 100%, 48%)
}
.mx_NotificationBadge.mx_NotificationBadge_visible .mx_NotificationBadge_count {
font-weight: 600;
font-size: 12px;
text-shadow: 0 0 2px #1d1d1d;
}
.mx_AccessibleButton.mx_ReactionsRowButton {
background-color: #2f3136;
border: none;
padding: 0.325rem 1rem;
font-size: 14px;
}
.mx_AccessibleButton.mx_ReactionsRowButton.mx_ReactionsRowButton_selected {
border: 1px solid #ffffff6b;
}
.mx_SendMessageComposer {
font-size: 16px;
}
.mx_MessageComposer_wrapper {
background: #40444b;
padding-left: 40px;
margin: 0px 8px 8px 10px;
border-radius: 8px;
}
.mx_MessageComposer_row .mx_MessageComposer_avatar {
display: none;
}
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
left: 14px;
}
.mx_SendMessageComposer .mx_BasicMessageComposer {
min-height: 42px
}
.mx_EventTile:not([data-layout=bubble]):hover.mx_EventTile_verified .mx_EventTile_line {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-color: transparent;
}
.mx_MessageActionBar {
background-color: #36393f
}
.mx_ContextualMenu {
background-color: #18191c;
border-radius: 4px;
}
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_AccessibleButton:first-child,
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child {
border-radius: 0;
}
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:hover {
background-color: #ffffff12;
}
.mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle,
.mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle {
background-color: #ffffffa0
}
.mx_ReplyPreview {
background-color: #36393f;
box-shadow: 0 2px 3px rgb(0 0 0 / 8%);
}
.mx_EventTile_highlight {
background-color: #4d433b;
border-left: 2px solid gold;
}
.mx_EventTile_highlight.mx_EventTile.focus-visible:focus-within .mx_EventTile_line,
.mx_EventTile_highlight.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
.mx_EventTile_highlight.mx_EventTile:hover .mx_EventTile_line,
.mx_EventTile_highlight.mx_EventTile:hover {
background-color: #4d433b !impo...