☰

Muah Dark Theme

Stylus dark theme for whole Muah.AI website.

/* ==UserStyle==
@name            Muah Dark Theme
@description     Stylus dark theme for whole Muah.AI website.
@version         1.0.0
@author          BreatFR (https://breat.fr)
@namespace       https://gitlab.com/breatfr
@homepageURL     https://gitlab.com/breatfr/muah
@supportURL      https://www.reddit.com/r/MuahAI/comments/1603snq/a_dark_theme_make_by_me/
@license         AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
==/UserStyle== */

/* === Credits ===
Website         https://breat.fr
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
telegram        https://t.me/breatfr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
=== Credits === */

@-moz-document domain("muah.ai") {
    /* Background and text color */
    select,
    .swal2-container.swal2-center.swal2-grow-fullscreen.borderless-container.swal2-backdrop-show div,
    .contact div,
    .modal-box,
    h2.swal2-title,
    h3.fadeIn,
    .screen__inner__NZe6j {
        background-color: rgb(9, 16, 29);
        color: white;
    }

    .form-messages.success {
        background-color: rgb(9, 16, 29);
        color: palegreen;
    }

    #account-bar,
    #swal2-html-container {
        color: white;
    }

    /* Heart background */
    .message-list__bHgr6 {
        background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) fixed 100%;
        background-color: rgb(9, 16, 29);
    }

    div.swal2-container.swal2-center.swal2-backdrop-show > div {
        background-color: rgb(9, 16, 29);
    }

    /* Dark emoji popup */
    section.emoji-mart div > :last-child,
    .emoji-mart-light,
    .emoji-mart-bar {
        background-color: rgb(9, 16, 29);
        border: 0px;
        border-radius: 10px;
        color: white;
    }

    /* Bigger emoji popup */
    section.emoji-mart {
        width: 31% !important;
    }

    button.emoji-mart-emoji span{
        min-height: 40px;
        min-width: 40px;
    }

    /* Bigger and white text in bubbles */
    .message-list__bHgr6 div {
        color: white;
        font-size: 20px;
    }

    /* New color for links to be more visible */
    a {
        color: #6ea8fe !important;
    }

    a:hover,
    .footer__options__8RNsw:hover {
        color: #8bb9fe !important;
    }

    /* Change color of text in the bottom of chat and put him little bigger */
    .footer__options__8RNsw,
    .powered-by__ydftk {
        color: pink;
        font-size: 12px;
    }

    /* Text between ** is now in italic and not bold */
    .message-bubble__puzVZ strong {
        font-style: italic;
        font-weight: normal;
    }

    /* Rouded corners for images */
    img {
        border-radius: 10px;
    }

    /* Chat popup now take 100% screen size */
    .screen__POUUM {
        padding:  0px !important;
    }

    .screen__inner__NZe6j {
        margin-bottom: 0px !important;
    }

    /* Hide big button at the bottom */
    .button__rX4Lp {
        display: none;
    }

    /* Remove borders on input items and make text visible when selected */
    input {
        border: 0px !important;
        color: white !important;
    }

    /* Make text in emoji search popup visible */
    #emoji-mart-search-1 {
        color: rgb(9, 16, 29) !important;
    }

    input::selection,
    input::-moz-selection {
        color:black !important;
        background-color: skyblue !important;
    }

    /* Bigger avatars */
    .avatar__zfL8P {
        height: 50px;
        width: 50px;
    }

    /* Dark emoji popup */
    .image-attachment__inner__yGCaU:hover {
        margin-left: 80% !important;
        transform: scale(2.5);
        transition: transform 0.3s;
    }

    /* Change background color of bubbles */
    /* AI bubbles */
    .message-bubble__puzVZ {
        background: linear-gradient(to right, #cc2b5e, #753a88)!important;
        border-radius: 8px 20px 20px 20px !important;
        max-width: 150vh;
    }

    /* Our bubbles */
    div.message-content__0O12f.message-content--reverse__gS9lU > div {
        background: linear-gradient(to right, #3a6186, #89253e) !important;
        border-radius: 20px 8px 20px 20px !important;
        max-width: 150vh;
    }

    /* Make placeholder more visible in textarea */
    .composer__input__d6OQi:before {
        color: rgb(9, 16, 29) !important;
    }

    /* Thin pink scrollbars */
    ::-webkit-scrollbar {
      width: 5px !important;
    }

    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey !important;
      border-radius: 20px !important;
    }

    ::-webkit-scrollbar-thumb {
      background: pink !important;
      border-radius: 20px !important;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: white !important;
    }

    @media (min-width: 930px) {
        .swal2-container.swal2-center.swal2-backdrop-show > div {
            border-radius: 10px;
            width: 69vmin;
        }
    }
}