Seatalkweb.com Less Distractions by kenrick95

/* ==UserStyle==
@name           Seatalkweb.com Less Distractions
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document url-prefix("https://seatalkweb.com/") {
    /* Insert code here... */
    /** Full screen window */
    .home-main-window {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .desktop-app-check-notification {
        display: none;
    }

    /** Less padding on chat list */
    .messages-chat-session-list-item {
        padding: 8px;
    }
    .master-view-session-list {
        padding-bottom: 0 !important;
    }
    /* Less padding on sidebar items */
    .sidebar-tabs-list-box .ant-list-items .ant-list-item {
        padding: 4px !important;
        height: 32px;
    }
    /* Less padding on chat bar */
    .messages-message-detail-view-header .contact-contact-list-item {
        padding: 4px;
    }
    .footer {
        padding: 4px 8px 8px 0 !important;
    }
    .toolbar {
        padding: 4px 8px 4px 4px !important;
    }
    .messages-message-editor .icon-container {
        height: 24px !important;
        width: 24px !important;
        margin-left: 0 !important;
    }
    .format-toolbar-container {
        margin-left: 0 !important;
    }
    .toolbar-left {
        gap: 8px;
    }
    .messages-message-editor .icon-container svg {
        height: 24px !important;
        width: 24px !important;
    }
    .messages-message-list .items {
        gap: 8px;
    }
    .messages-message-list-item {
        margin-top: 0 !important;
    }
    .messages-message-list-item .message-list-item-container {
        width: auto;
    }
    .messages-message-list-item .container .wrapper .content {
        margin-left: 6px !important;
        margin-right: 6px !important;
    }
    .messages-message-list-item .container .wrapper .beside-content {
        position: absolute;
        top: 0;
        right: 12px;
    }
    .messages-message-list-item .container .wrapper .beside-content .quick-operation {
        position: absolute;
        top: 0;
        right: 52px;
    }
    .messages-message-list-item .container .wrapper .beside-content .content-info {
        bottom: unset;
        text-align: left;
        align-items: start;
        justify-content: end;
    }
    .messages-message-list-item .container .wrapper .beside-content .content-info .time {
        min-width: 40px;
    }
    .messages-message-list-item .container {
        max-width: 100%;
    }
    .messages-message-list-item-bubble {
        padding: 0px 4px !important;
        background: none !important;
        border: 0 !important;
    }
    .messages-message-list-item-bubble .split-line {
        margin: 5px -8px;
        border: 0 !important;
    }
    .messages-message-list-item-bubble.isSentByMe {
        color: inherit !important;
    }
    .message-quote-preview.sender-is-me .original-message-info .message-text {
        color: inherit !important;
    }
    .messages-message-list-item-bubble-quote-card .messages-message-list-item-bubble-card .container .quotation-mark-container svg.isSentByMe {
        fill: var(--icon_3rd) !important;
    }
    .messages-message-list-item-bubble.isSentByMe .emoji-bar .item {
        background-color: var(--er_renone_normal);
        color: var(--er_renone_text);
    }
    .messages-message-list-item-bubble.isSentByMe .messages-message-list-item-mention {
        color: var(--functional_brand_primary) !important;
    }
    .messages-message-list-item-bubble.isSentByMe ::selection {
        color: inherit !important;
        background-color: var(--functional_brand_2nd) !important;
    }
    .message-quote-preview.sender-is-me .recalled,
    .message-quote-preview.sender-is-me .original-message-info .message-username {
        color: var(--text_3rd) !important;
    }
    .messages-message-list-item-bubble-quote-card.isSentByMe .messages-message-list-item-bubble-card {
        background-color: var(--commonbg_1st_hover) !important;
    }
    .messages-message-list-item-bubble.isSentByMe a {
        color: var(--functional_brand_primary) !important;
    }
    .messages-message-list-item-bubble.isSentByMe .rich-text-preview pre, .messages-message-list-item-bubble.isSentByMe .rich-text-preview code {
        color: var(--icon_1st) !important;
        background-color: var(--commonbg_1st_hover) !important;
    }
    /*
    .messages-message-list-item.isSentByMe .common-avatar {
        margin-top: 15px;
    }
    .messages-message-list-item-bubble.isSentByMe {
        margin-top: 5px; 
    }
    */
    .messages-message-list-item.isSentByMe,
    .messages-message-list-item.isSentByMe .wrapper {
        flex-direction: row !important;
    }
    .messages-message-list-item-bubble .tail {
        display: none;
    }
    .messages-message-list-item-bubble.isSentByMe .tail {
        display: none;
    }
    .messages-message-list-item-bubble-quote-card {
        margin-bottom: 8px;
    }

    /* Larger width for thread panel, pinned message */
    .my-thread-panel > .ant-drawer-content-wrapper,
    .thread-detail-panel > .ant-drawer-content-wrapper,
    .contact-pinned-messages-panel > .ant-drawer-content-wrapper {
        width: 80% !important;
    }

    /* Hide image on chat list */
    .messages-chat-session-list-item .common-avatar {
        display: none;
    }
    /* ----- end ----- */
    /* Don't show the unread dot */
    .unread-indicator-dot {
        display: none !important;
    }
    /* reset weight to normal */
    .sidebar-tabs-list-box .ant-list-items .ant-list-item .name-box .name.bold-text {
        font-weight: normal !important;
    }
    /* ----- end ----- */
    /* For muted channels, don't show the red dot */
    .messages-chat-session-list-item:has(.ele_ic_nonotification) > .onclick-wrapper > .common-avatar::after {
        display: none !important;
    }
    /* ----- end ----- */
    /* For muted channels, don't show red mentions */
    .messages-chat-session-list-item:has(.ele_ic_nonotification) .info .text .text-prefix:not(.no-highlight) {
        color: inherit !important;
    }
    /* ----- end ----- */
    .home-main-window {
        /* FIXME: This is a temporary workaround to allow things in the screen to be clickable*/
        .greeting-placeholder {
            app-region: no-drag;

            &::before {
                content: '';
                height: 40px;
                display: block;
                position: absolute;
                top: 0;
                right: 0;
                left: 0;
                app-region: drag;
            }
        }

        .sidebar-sidebar {
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 1001;
            background: var(--commonbg_list);
            flex-direction: row;
            width: auto;
            height: 70px;
            border-radius: 0 8px 0 0;
            padding-right: 20px;
            padding-top: 15px !important;
            /* Mac transparent menu bar*/
            app-region: no-drag;
            /* TODO: This doesn't work now, it needs to be ordered AFTER the component order, source: https://github.com/electron/electron/issues/1354#issuecomment-300860582*/
            > .common-icon,
            > .icon {
                margin: 0;
                margin-left: 12px;
                svg {
                    display: block;
                }
            }
            .common-avatar {
                margin-bottom: 0;
                background: none;
                border: 0;
                display: flex;
            }
            /* Minor balancing on settings button*/
            span:has(> .sprite_toolbar_ic_settings) {
                display: inline-flex;
            }
            .sprite_toolbar_ic_settings {
                margin-left: 10px;
            }
        }
        .master-view-session-list {
            padding-bottom: 70px;
        }
    }
    .light-theme .home-main-window .sidebar-sidebar {
        background: var(--commonbg_dark);
    }
}