nextcloud-breeze-dark/css/apps/thirdparty/_ojsxc.scss

/***
 * @copyright Copyright (c) 2020, Magnus Walbeck <mw@mwalbeck.org>
 *
 * @license GNU AGPL version 3 or any later version, see COPYING file for more.
 */

/* JavaScript XMPP Chat ----------------------------------------------------- */

.jsxc-button--default,
.jsxc-button--primary {
    background-color: var(--color-main-background);
    border: 1px solid var(--color-border);
    color: var(--color-main-text);
    transition: none;

    &:hover {
        background-color: var(--color-main-background);
    }
}

.jsxc-button[disabled],
.jsxc-button[disabled]:hover {
    background-color: var(--color-background-alternate);
    border: 1px solid var(--color-border);
    color: var(--color-main-text);
}

#jsxc-roster {
    background-color: var(--color-main-background);
    border-left-color: var(--color-border);

    input {
        background-color: var(--color-background-darker);
        border-color: var(--color-border);
    }

    .jsxc-roster-toggle {
        background-color: var(--color-background-darker);
        border: 1px solid var(--color-border);

        &::after {
            border-right-color: var(--color-border);
        }
    }

    .jsxc-roster-item {
        color: var(--color-main-text);

        &:hover {
            background-color: var(--color-background-hover);
        }

        .jsxc-menu__content {
            border: 1px solid var(--color-border);
        }
    }

    > .jsxc-bottom {
        background-color: var(--color-main-background);
        border-top: 1px solid var(--color-border);
    }

    &[data-mute="yes"] .jsxc-js-presence-menu .jsxc-menu__button::after {
        filter: invert(95%);
        opacity: 0.7;
    }
}

.jsxc-menu {
    color: var(--color-main-text);

    &.jsxc-menu--light li {
        color: var(--color-main-text);
        opacity: 0.7;

        &:hover,
        > span:hover {
            cursor: pointer;
            opacity: 1;
        }

        &.jsxc-disabled {
            color: var(--color-text-maxcontrast);
            opacity: 0.5;

            &:hover {
                cursor: default;
            }
        }
    }

    &.jsxc-menu--dark li:hover {
        background-color: var(--color-background-hover);
        box-shadow: 0 0 0 1px var(--color-primary-element) inset;
        color: var(--color-main-text);
    }

    .jsxc-menu__content {
        background-color: var(--color-main-background);
        box-shadow: none;
        filter: none;

        &::after {
            color: var(--color-border);
        }
    }

    &.jsxc-menu--pushup ul {
        background-color: var(--color-background-darker);
        border-top-color: var(--color-border);

        li {
            color: var(--color-main-text);

            &:hover:not(.jsxc-disabled) {
                background-color: var(--color-background-hover);
                color: var(--color-main-text);
                opacity: 1;
            }

            &:last-child {
                border-bottom-color: var(--color-border);
            }

            a {
                color: var(--color-main-text);
            }
        }
    }
}

.jsxc-dialog-wrapper {
    background-color: var(--color-background-blur);

    .jsxc-dialog {
        background-color: var(--color-main-background);
        border-color: var(--color-border);

        .jsxc-page {
            section {
                border-top-color: var(--color-border);
            }

            h2 {
                color: var(--color-main-text);
            }

            .jsxc-list__item--clickable:hover {
                background-color: var(--color-background-hover);
            }
        }

        .form-group input {
            background-color: var(--color-background-darker);
            border-color: var(--color-border);
            box-shadow: none;
            color: var(--color-main-text);

            &:invalid {
                border-color: var(--color-error);
            }
        }
    }
}

.jsxc-window-item {
    &.jsxc-normal .jsxc-bar--window {
        background-color: var(--color-primary-element);
        color: var(--color-main-text);
    }

    &.jsxc-minimized .jsxc-bar--window {
        background-color: var(--color-main-background);
        color: var(--color-main-text);
    }

    .jsxc-menu__content {
        border: 1px solid var(--color-border);
    }

    .jsxc-memberlist {
        background-color: var(--color-primary);

        ul {
            color: var(--color-main-text);
        }
    }
}

.jsxc-window {
    background-color: var(--color-main-background);
    border-color: var(--color-border);

    .jsxc-message-area {
        .jsxc-out {
            background-color: var(--color-background-darker);
        }

        .jsxc-in {
            background-color: var(--color-text-selection) !important;
        }
    }

    .jsxc-timestamp {
        color: var(--color-text-maxcontrast);
    }

    .jsxc-send-area {
        background-color: var(--color-background-darker);

        .jsxc-message-input {
            background-color: var(--color-background-darker);

            &::placeholder {
                color: var(--color-text-maxcontrast);
                opacity: 0.7;
            }

            &:hover,
            &:focus,
            &:active {
                background-color: var(--color-background-darker) !important;
            }
        }
    }

    .jsxc-mam-load-more span {
        background-color: var(--color-main-background);
        border: 1px solid var(--color-border);
        border-radius: 16px;
        opacity: 0.7;

        &:hover {
            background-color: var(--color-background-hover);
            border-color: var(--color-primary-element);
            color: var(--color-main-text);
            opacity: 1;
        }

        &:focus,
        &:active {
            background-color: var(--color-primary-element);
            border-color: var(--color-primary-element);
            color: var(--color-main-text);
            opacity: 1;
        }
    }
}

.app-settings #ojsxc-admin.ojsxc {
    form.ojsxc input[readonly] {
        background-color: var(--color-main-background);
    }

    h3 {
        border-bottom-color: var(--color-border);
    }
}

/* Icons -------------------------------------------------------------------- */

.jsxc-icon--clickable,
.jsxc-file-transfer {
    opacity: 0.7 !important;

    &:hover {
        opacity: 1 !important;
    }
}

.jsxc-icon--more-dark {
    background-image: var(--icon-more-f2f2f2);
    transform: rotate(0.25turn);
}

.jsxc-icon--delete {
    background-image: var(--icon-delete-f2f2f2);

    &:hover {
        background-image: var(--icon-delete-da4453);
    }
}

.jsxc-icon--edit {
    background-image: var(--icon-rename-f2f2f2);
}

.jsxc-icon--info {
    background-image: var(--icon-info-f2f2f2);
}

.jsxc-icon--help {
    background-image: var(--icon-ojsxc-help-f2f2f2);
}

.jsxc-icon--contact {
    background-image: var(--icon-ojsxc-contact-f2f2f2);
}

.jsxc-icon--groupcontact {
    background-image: var(--icon-ojsxc-groupcontact-f2f2f2);
}

.jsxc-icon--setting {
    background-image: var(--icon-ojsxc-gear-f2f2f2);
}

.jsxc-icon--menu-dark,
.jsxc-waiting::before,
.jsxc-icon--emoticon,
.jsxc-file-transfer,
div.jsxc-transfer .jsxc-transfer-icon {
    filter: invert(95%);
}