Skip to content

Purple Elment 2025 by violetjewel

Write a review Install Get Stylus

Details

Authorvioletjewel

LicenseNo License

Categoryvioletjewel.userstyles.world

Created

Updated

Size10 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Cute purple theme for Element.io (Matrix Client) with pink highlights! <3

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 Chat (Matrix client)
@version      20231127.17.50
@namespace    userstyles.world/user/Siriusmart
@description  WIP implementation of the Catppuccin theme Mocha flavour.
@author       Siriusmart
@license      GPLv3
==/UserStyle== */
@-moz-document domain("element.io") {
  :root {
    --pink: #f881c5dd;
    --translucent-pink: #ff79c688;
    --dark-pink: #68466d;
    --vdark-pink: #4a324e;
    --text: #ffffffbb;
  }

  /* backgrounds */
  /*.mx_RoomSearch {
    background: var(--translucent-base)
}*/
  .mx_MainSplit {
    background: var(--vdark-pink);
  }

  code {
    background: var(--dark-pink) !important;
    border: 1px solid var(--translucent-pink) !important;
  }
  .mx_EventTile_content .markdown-body pre code {
    white-space: pre;
    border: 0 !important;
  }
  .mx_EventTile_content .markdown-body pre {
    background: var(--dark-pink) !important;
  }
  .hljs-comment,
  .hljs-quote {
    color: #7c8390;
    font-style: italic;
  }

  .mx_RoomHeader {
    background: var(--dark-pink);
    border-radius: 32px;
  }

  .mx_SpaceButton_icon {
    background: var(--dark-pink);
    border-radius: 32px;
  }

  .mx_SpaceButton_avatarWrapper {
    background: var(--dark-pink);
    border-radius: 32px;
  }

  .mx_SpaceButton {
    background: var(--text);
  }

  .mx_SpaceButton_selectionWrapper {
    background: var(--text);
  }

  .mx_RoomPreviewBar_panel {
    background: transparent !important;
    border-top: 1px solid var(--pink);
  }

  .mx_HomePage_default_wrapper img {
    filter: invert(100%) hue-rotate(255deg) brightness(145%) saturate(50%)
  }

  .mx_RoomPreviewBar_Loading {
    background: transparent !important;
  }

  * {
    color: var(--text);
  }

  .mx_IconizedContextMenu_item *::before {
    background: var(--pink) !important;
  }

  .mx_AccessibleButton:not(.mx_LeftPanel_roomListContainer *):not(.mx_SpacePanel *):hover {
    background: var(--pink) !important;
  }

  .mx_LeftPanel_filterContainer .mx_AccessibleButton,
  .mx_RoomSearch_shortcutPrompt {
    background: transparent !important;
  }

  .mx_LeftPanel_filterContainer .mx_AccessibleButton:hover {
    background: transparent;
    border: 1px solid var(--vdark-pink);
  }

  .mx_TopUnreadMessagesBar::after {
    border-color: var(--pink) !important;
  }

  .mx_EventTile[data-layout="group"].mx_EventTile_isEditing > .mx_EventTile_line,
  .mx_EventTile[data-layout="group"].mx_EventTile_selected > .mx_EventTile_line,
  .mx_EventTile[data-layout="irc"].mx_EventTile_isEditing > .mx_EventTile_line,
  .mx_EventTile[data-layout="irc"].mx_EventTile_selected > .mx_EventTile_line {
    box-shadow: inset var(--EventTile-box-shadow-offset-x) 0 0 var(--EventTile-box-shadow-spread-radius) var(--pink);
  }

  .mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_2char {
    background: var(--pink)
  }

  .mx_EmojiPicker_anchor::before {
    background: var(--pink)
  }

  .mx_EmojiPicker_anchor_visible {
    border-color: var(--pink);
  }

  .mx_EmojiPicker_anchor:hover {
    border-color: var(--pink) !important;
    background-color: transparent !important;
  }

  .mx_RoomSublist .mx_RoomSublist_resizeBox.mx_RoomSublist_hasMenuOpen .mx_RoomSublist_resizerHandle,
  .mx_RoomSublist .mx_RoomSublist_resizeBox:hover .mx_RoomSublist_resizerHandle,
  .mx_ResizeHandle_horizontal::before {
    background-color: var(--lavender) !important;
  }

  .mx_RoomTile_selected,
  .mx_RoomTile:hover {
    background: var(--vdark-pink) !important;
  }

  .mx_RoomHeader_wrapper .mx_AccessibleButton::before {
    background: var(--pink) !important;
  }

  .mx_RightPanel_headerButton:hover::before,
  .mx_RightPanel_headerButton_highlight::before {
    background: var(--pink) !important;
  }

  .mx_MessageComposer_sendMessage {
    background: var(--red);
  }

  .mx_MessageComposer_sendMessage::before {
    background: var(--pink);
  }

  .mx_SpacePanel {
    background: var(--dark-pink);
  }

  .mx_LeftPanel_wrapper .mx_LeftPanel_wrapper--user {
    background: var(--dark-pink);
  }

  .mx_RoomView_wrapper .mx_SpaceRoomView {
    background: var(--dark-pink);
  }

  .mx_RightPanel,
  .mx_ContextualMenu {
    background: var(--dark-pink) !important;
  }

  .mx_RoomSummaryCard_e2ee::before {
    background: var(--pink) !important;
  }

  .mx_RoomSummaryCard_e2ee_normal::before {
    background: var(--pink) !important;
  }

  .mx_RoomSummaryCard_e2ee {
    background: var(--dark-pink) !important;
    border-color: var(--pink) !important;
  }

  .mx_QuickSettingsButton::before {
    background-color: var(--pink) !important;
  }

  .mx_AccessibleButton {
    color: var(--subtext1) !important;
  }

  .mx_AccessibleButton_kind_primary_outline,
  .mx_Dialog_buttons_row button {
    border-color: var(--pink) !important;
  }

  .mx_Dialog_buttons_row .mx_Dialog_primary {
    background: var(--pink) !important;
    color: var(--dark-pink) !important;
  }

  .mx_AccessibleButton_kind_primary_outline:hover {
    border-color: var(--pink) !important;
  }

  .mx_TabbedView_tabLabel_active {
    background: transparent !important;
    border: 1px solid var(--pink) !important;
    color: var(--pink) !important;
  }

  .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
    background: var(--pink) !important;
  }

  .mx_TabbedView_tabLabel:hover:not(.mx_TabbedView_tabLabel_active) > .mx_TabbedView_maskedIcon::before {
    background: var(--pink) !important;
  }

  .mx_TabbedView_tabLabel:hover:not(.mx_TabbedView_tabLabel_active) {
    color: var(--pink) !important;
  }

  .mx_ToggleSwitch {
    background: var(--pink);
  }

  .mx_ToggleSwitch_on {
    background: var(--pink) !important;
  }

  .mx_StyledRadioButton input[type="radio"]:checked + div {
    border-color: var(--pink) !important;
  }

  .mx_StyledRadioButton input[type="radio"]:checked + div > div {
    background: var(--pink)
  }

  .mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"]:checked + label > .mx_Checkbox_background {
    background: var(--pink);
    border-color: var(--pink);
  }

  .mx_BetaCard_betaPill {
    background: var(--pink);
    color: var(--dark-pink);
  }

  /* text */
  .mx_NotificationBadge_count {
    color: var(--pink) !important;
  }

  .mx_EmojiPicker_search input {
    color: var(--pink);
  }

  .mx_EmojiPicker_item {
    opacity: 0.4;
  }

  .mx_EmojiPicker_footer .mx_EmojiPicker_item {
    opacity: 0.6;
  }

  .mx_EmojiPicker_shortcode {
    color: var(--pink)
  }

  .mx_EmojiPicker_category_label {
    color: var(--pink)
  }

  .mx_EmojiPicker_quick_header {
    color: var(--pink)
  }

  .mx_GenericEventListSummary,
  .mx_ReadReceiptGroup {
    opacity: 0.3;
  }

  .mx_GenericEventListSummary:hover,
  .mx_EventTile:hover .mx_ReadReceiptGroup {
    opacity: 0.8;
  }

  .mx_AccessibleButton_kind_link_inline {
    color: var(--pink) !important;
  }

  .mx_SpacePanel_toggleCollapse {
    background: var(--pink) !important
  }

  .mx_AccessibleButton {
    color: var(--pink);
  }

  .mx_ReadReceiptGroup_remainder {
    color: var(--pink) !important;
  }

  .mx_BaseCard_Button_sublabel {
    color: var(--pink) !important;
  }

  button[data-testid="dialog-cancel-button"] {
    color: var(--pink) !important;
  }

  .mx_EventTile_line,
  .mx_RoomTopic {
    color: var(--pink);
  }

  .mx_EventTile_line a,
  .linkified {
    color: var(--pink) !important;
  }

  a {
    color: var(--pink) !important;
  }

  .mx_MessageTimestamp {
    color: var(--pink) !important;
  }

  .mx_BaseCard_Button {
    color: var(--text)
  }

  .mx_AccessibleButton_kind_link {
    color: var(--pink) !important;
  }

  .mx_RightPanel h1 {
    color: var(--pink)
  }

  .mx_EventTile_details span {
    color: var(--pink)
  }

  .mx_EventTile_details .mx_DisambiguatedProfile span {
    color: var(--text) !important;
  }

  .mx_RoomView_MessageList .mx_EventTile::after {
    background-color: var(--pink) !important;
  }

  hr,
  .mx_EmojiPicker_header,
  .mx_EmojiPicker_footer {
    border-color: var(--pink) !important;
  }

  .mx_EventTile_details strong {
    color: var(--sky)
  }

  /* highlights */
  .mx_Pill.mx_AtRoomPill,
  .mx_Pill.mx_UserPill_me {
    background: var(--pink) !important;
    color: var(--pink) !important;
  }

  .mx_EventTile.mx_EventTile_highlight,
  .mx_EventTile.mx_EventTile_highlight .markdown-body,
  .mx_EventTile.mx_EventTile_highlight .mx_EventTile_edited {
    color: var(--pink)
  }

  .mx_EventTile_highlight.mx_EventTile_lastInSection .mx_EventTile_line {
    background: var(--pink) !important;
  }

  .mx_EventTile_highlight.mx_EventTile_continuation .mx_EventTile_line {
    background: var(--pink) !important;
  }

  .mx_EventTile:hover > .mx_EventTile_line {
    background: var(--vdark-pink) !important;
  }

  .mx_RoomSearch_spotlightTriggerText,
  .mx_RoomSearch_shortcutPrompt {
    color: var(--pink) !important;
  }

  .mx_RoomSearch_icon {
    background: var(--pink) !important;
  }

  /* buttons */
  .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
    background: var(--vdark-pink);
    border-color: var(--pink);
    color: var(--pink) !important;
  }

  .mx_AccessibleButton_kind_danger {
    background: #f337 !important;
    color: var(--pink) !important;
  }

  .mx_AccessibleButton.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
    color: var(--pink);
    border-color: var(--pink);
  }

  .mx_NotificationBadge {
    border: none !important;
  }

  .mx_NotificationBadge_dot {
    border: 2px solid var(--pink) !important;
  }

  .mx_AccessibleButton:not(.mx_NotificationBadge) {
    background: transparent !important;
    border-color: var(--pink);
  }

  .mx_AccessibleButton::before {
    background: var(--pink) !important;
  }

  summary {
    color: var(--pink) !important;
  }

  .mx_AccessibleButton:not(.mx_NotificationBadge):hover {
    background: transparent !important;
    border-color: var(--pink) !important;
  }

  /* username colours */
  .mx_Username_color1 {
    color: var(--p...

Reviews

No reviews yet.