element-modifications/custom.css

/* Element Web modification by nixc */
/* f0ck.it version: 1.8.2-20-gb73e2fc2-dirty */
/* Olm version: 3.2.3 */
.mx_AuthPage_modalContent {
  background: #222121 !important;
}

.mx_Header_title {
  color: white;
  font-family: monospace;
  text-transform: uppercase full-width;
}

.mx_ButtonSignIn {
  background-color: #9f0;
  color: black !important;
  font-family: monspace;
  text-transform: uppercase full-width;
  font-weight: bold;
}

.mx_ButtonSignIn {
  background-color: #828384 !important;
}

.mx_AuthPage_modalBlur {
  filter: none !important;
  background: none !important;
}

.mx_AuthPage_modalContent {
  border-radius: 0 !important;
}

.mx_AuthPage {
background: rgba(0, 0, 0, 0) url("img/background-auth.jpg") repeat fixed center center / cover !important;
}

body {
  background: #161618;
}

.mx_AuthBody_language .mx_Dropdown_input {
  color: #333435;
}

.mx_MImageBody_thumbnail_container {
  max-width: 430px;
}

.mx_ShareDialog_social_container {
  display: none;
}

.mx_MNoticeBody.mx_EventTile_content {
  background: #1c1c1e;
  border-radius: 5px;
  padding: 5px;
  opacity: 1;
}

.mx_MStickerBody_wrapper {
  max-width: 150px;
}

.mx_MStickerBody_wrapper {
  padding: 0;
}

#stickerpicker > .mx_AppTileMenuBar {
  display: none;
}

.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
  border-radius: 0;
}

.mx_AppTileFullWidth {
  border-radius: 0;
  border: 0;
}

.mx_AppTileBody, .mx_AppTileBody_mini {
  border-radius: 0;
}

.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
  bottom: 8px;
  padding: 1px;
  margin: -1px;
  border: 1px solid black;
}

.mx_ContextualMenu_chevron_bottom {
  border-left: 8px solid #0000;
  border-top: 8px solid #000;
  border-right: 8px solid transparent;
}

.mx_MImageBody_thumbnail {
  border-radius: 0;
}

span.mx_MVideoBody video.mx_MVideoBody {
  max-height: 480px;
  max-width: 480px;
  border-radius: 0;
  /*min-width: 480px;*/
  background: black;
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
  padding: 5px;
  order: 3;
  border-top: 1px solid var(--roomlist-separator-color);
}

.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
  margin-left: 0;
  margin-right: 0;
}

.mx_RoomSearch.mx_RoomSearch_focused {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: transparent;
  border-radius: 0;
  background: #161618;
}

.mx_UserMenu .mx_UserMenu_headerButtons::before {
  mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.mx_AccessibleButton.mx_MessageComposer_button.mx_MessageComposer_upload {
  order: -1;
}

.mx_MessageComposer_upload {
  margin-right: 30px;
  margin-left: 20px;
}

.mx_MessageComposer .mx_MessageComposer_avatar {
  position: relative;
  left: -15px;
}

.mx_MessageComposer_wrapper {
  padding-left: 15px;
  padding-right: 5px;
}

.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
  padding: 0;
}

.mx_RightPanel {
  border-radius: 0;
}

.mx_AccessibleButton.mx_MessageComposer_button.mx_MessageComposer_voiceMessage {
  order: 1;
}

.mx_MessageComposer_button {
  order: 2;
}

.mx_BetaCard {
  background-color: #252526;
}

.mx_MImageBody_gifLabel {
  display: none;
}

.mx_VoiceMessagePrimaryContainer .mx_Clock {
  width: auto;
  padding-right: 6px;
  padding-left: 8px;
}

.mx_MImageBody {
  display: block;
  margin-right: 0;
  width: max-content;
  min-width: unset;
  max-width: 30%;
}

/* .mx_MFileBody {
  max-width: 0ch;
  display: flex;
  height: 0;
  overflow: hidden;
} */

.mx_BaseAvatar_image {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar, .mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
  -webkit-mask-image: unset;
  mask-image: unset;
}

span.mx_MVideoBody video.mx_MVideoBody {
  max-height: 270px;
  max-width: 0;
  border-radius: 5px;
  min-width: 480px;
  background: black;
  margin-top: 5px;
}

.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line, .mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply {
  padding-top: 5px;
  padding-bottom: 5px;
}

.mx_MImageBody_thumbnail {
  margin-bottom: 5px;
  padding-bottom: 5px;
}

.mx_InlineSpinner {
  display: inline;
  position: relative;
  left: 0;
  top: 5px;
}

.mx_Spinner_icon {
  background-color: #000;
  -webkit-animation: spin 2.1s steps(60) infinite;
  animation: spin 2.1s steps(60) infinite;
  filter: invert(100);
}

.mx_SendMessageComposer .mx_BasicMessageComposer {
  -ms-flex: 1;
  flex: 1;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 48px;
}

.mx_MessageComposer_wrapper {
  padding-left: 0;
  padding-right: 0;
}

.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
  margin-left: 0;
}

.mx_LeftPanel {
  z-index: 1;
}

.mx_ReplyPreview {
  border: 0;
      border-bottom-color: currentcolor;
      border-bottom-style: none;
      border-bottom-width: 0px;
  background: var(--timeline-background-color);
  border-bottom: none;
  border-radius: 0;
  max-height: 50vh;
  overflow: auto;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin: 0;
  z-index: 0;
}

.mx_EventTile_content .markdown-body code, .mx_EventTile_content .markdown-body pre {
  background-color: black;
}

.hljs {
  color: #ece0e0;
}

.mx_EventTile[data-layout=bubble][data-self=true] {
  --backgroundColor: #252525;
}

.mx_EventTile[data-layout=bubble][data-self=false] {
  --backgroundColor: #252525;
}

.mx_EventTile[data-layout=bubble] .mx_EventTile_avatar img {
  -webkit-box-shadow: 0 0 0 3px #252525;
  box-shadow: 0 0 0 3px #252525;
  border-radius: 50%;
}

.mx_EventTile[data-layout=bubble].mx_EventTile_selected:before, .mx_EventTile[data-layout=bubble]:hover:before {
  background: #25252540;
}

.mx_EventTile[data-layout=bubble].mx_EventTile_selected .mx_EventTile_avatar img, .mx_EventTile[data-layout=bubble]:hover .mx_EventTile_avatar img {
  -webkit-box-shadow: 0 0 0 3px #252525;
  box-shadow: 0 0 0 3px #252525;
}

.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_Clock {
  width: auto;
}

.mx_ToastContainer .mx_Toast_toast, .mx_ToastContainer.mx_ToastContainer_stacked::before {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(136, 131, 131, 0.5);
  box-shadow: 0px 0px 0px 1px rgba(136, 131, 131, 0.5);
  border-radius: 0;
  background: #202020;
}

.mx_NotificationBadge.mx_NotificationBadge_visible {
  background-color: #ff0707;
}

.mx_MessageComposer_e2eIcon.mx_E2EIcon {
  position: absolute;
  left: 55px;
  margin-right: 0;
  top: 25px;
}

.mx_ContextualMenu {
  border-radius: 0;
}

.mx_Dialog {
  -webkit-box-shadow: unset;
  box-shadow: unset;
  border-radius: 0;
}

.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon {
    top: 10px;
    opacity: 0.1;
}


/* in v 1.19.1 the access menu had no color anymore, this attempts to fix it */
.mx_AccessibleButton.mx_MessageActionBar_maskButton::after {
  background: white;
}

.mx_ToastContainer {
  background: var(--roomlist-background-color);
}

.mx_AppPermissionWarning {
  background: #161618;
  padding: 5px;
}

.mx_ContextualMenu {
  -webkit-box-shadow: none;
  box-shadow: none;
  color: var(--timeline-text-color);
  border: 1px solid #2e2e30;
  margin: 5px;
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:hover {
  background-color: var(--roomlist-highlights-color);
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child {
  border-radius: 0;
}

.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_AccessibleButton:first-child {
  border-radius: 0;
}