Sleazy Fork is available in English.

Nomi Dark Theme

Dark theme for Nomi.

/* ==UserStyle==
@name            Nomi Dark Theme
@description     Dark theme for Nomi.
@version         1.35.0
@author          BreatFR (https://breat.fr)
@namespace       https://gitlab.com/breatfr
@homepageURL     https://gitlab.com/breatfr/nomi
@supportURL      https://discord.com/channels/1099791840028405864/1138872233641652364
@license         AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
==/UserStyle== */

/* === Credits ===
Created by  BreatFR
Creatied on 2023/08/08
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("nomi.ai") {
        /* ========================================================================
       Bigger chat font size
     ======================================================================= */
    .css-2hr7pt,
    .css-3td3fo,
    .css-d56yar {
        font-size: 20px;
    }

    /* ========================================================================
       Remove logo at the top left corner
     ======================================================================= */
    .css-zkgx86, /* Remove logo */
    .css-e2xlbb.el09qsr0 > div:nth-of-type(1) /* Remove border under removed logo */{
        display: none;
    }

    /* ========================================================================
       Heart background
     ======================================================================= */
    .css-1vi0cy8 {
        background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) fixed 100% !important;
        border-radius: 0px 0px 20px 20px;
    }

    /* ========================================================================
       Thin scrollbars for normally all browsers
     ======================================================================= */
    ::-webkit-scrollbar {
      width: 5px;
    }

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

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

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

    /* ========================================================================
       Bigger image in picture viewer
     ======================================================================= */
    .css-staxus {
        height: 100% !important;
    }

    /* ========================================================================
       Textarea customization
     ======================================================================= */
    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        100% {
            background-position: 100% 50%;
        }
    }

    textarea:not(:focus) {
        animation: gradient 5s ease infinite;
        animation-fill-mode: forwards !important;
        background-image: linear-gradient(90deg, rgba(58,180,133,0.14066876750700286) 0%, rgba(89,98,140,0.16307773109243695) 21%, rgba(253,29,29,0.16307773109243695) 43%, rgba(218,41,141,0.16867997198879547) 65%, rgba(183,53,252,0.24711134453781514) 80%, rgba(252,176,69,0.3031337535014006) 100%);
        background-size: 200% 200%;
        color: #2f343d !important;
    }

    textarea:focus {
        animation: gradient 5s ease infinite;
        animation-fill-mode: forwards !important;
        background-image: linear-gradient(90deg, rgba(58,180,133,0.14066876750700286) 0%, rgba(89,98,140,0.16307773109243695) 21%, rgba(253,29,29,0.16307773109243695) 43%, rgba(218,41,141,0.16867997198879547) 65%, rgba(183,53,252,0.24711134453781514) 80%, rgba(252,176,69,0.3031337535014006) 100%);
        background-size: 200% 200%;
        border-color: #9610FF !important;
        color: var(--toastify-color-light) !important;
    }

    /* Fix texarea to always stay on screen */
    .css-1ooloxp {
        position: sticky !important;
    }

    /* Make textarea to grow to the top and not to the down and add rouned corners */
    .css-d56yar {
        border-radius: 20px;
        min-height: 56px;
        resize: vertical !important;
    }

    /* Hide the resizer of the textarea */
    textarea::-webkit-resizer {
        display: none;
    }

    /* ========================================================================
       Height of menu
     ======================================================================= */
    .css-udmu36 {
        border-top: 0px !important;
        min-height: 85px;
        max-height: 85px;
        padding: 0px !important;
    }

    /* Little bigger font-size in menu */
    .css-1pqzh7c {
        font-size: 14px;
    }

    /* ========================================================================
       Nomi's names list in left side
     ======================================================================= */
    /* Smaller names */
    .css-5f4tlo {
        line-height: 100%;
        padding: 10px 0px;
    }

    /* Nomi's name and pictures link, infos link SVG are pink in left side of chat page */
    .css-5f4tlo h4,
    .css-5f4tlo svg path {
        color: pink !important;
        stroke: pink;
    }

    /* Remove borders between nomis list if more than 1 nomi */
    .css-nzao1s.eawisc75 div {
        border: 0px !important;
    }

    /* ========================================================================
       Pictures are in row in chat
     ======================================================================= */
    .css-1cwe3m3 {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
    }

    /* ========================================================================
       Add rounded corners to pics in chat and photo album page
     ======================================================================= */
    .e129scxq2,
    .css-yb98gs {
        border-radius: 20px !important;
    }

    /* ========================================================================
       Replace the "Profile picture" overlay photo album page by a border
     ======================================================================= */
    .css-yb98gs {
        background: transparent !important;
        border: 5px solid rgb(171, 64, 255);
    }

    .css-1gp3erv:hover {
        transform: scale(1.9) !important;
        transition: 0.2s linear !important;
        z-index: 9999 !important;
    }

    .css-yb98gs p {
        display: none;
    }

    /* ========================================================================
       Image zoom on hover in picture viewer page
     ======================================================================= */
    .css-1mh151z:hover {
        display: block;
        max-height: 93%;
        transform: scale(1.25);
        transition: 0.2s linear;
    }

    /* ========================================================================
       Dark theme
     ======================================================================= */
    /* Light color for all texts */
    * {
        color: var(--toastify-color-light) !important;
    }

    /* Dark background color on whole page */
    body,
    input,
    select,
    --toastify-spinner-color-empty-area,
    ul.css-497xvz,
    .css-18rjz9j,
    .css-ea8az7,
    .css-1j5d3ll,
    .css-8oy3d3,
    .css-1j19l95,
    .css-mcumek,
    .css-9i2gok,
    .css-7fgif5,
    .css-13esyrq,
    .css-1n084m6,
    .css-vtzx0o,
    .css-1l1u68n,
    .css-i616ue,
    .css-1d7lv4w,
    .react-datepicker__month-container,
    .react-datepicker__header,
    .css-1je5qdk,
    .css-1ejta19,
    .css-1n084m6,
    .css-u5iji2,
    .css-1oeraiw,
    .css-1ooloxp {
        background-color: rgb(9, 16, 29) !important;
    }

    /* Remove border on pop up for selfie request */
    .css-wwpt19 {
        border: 0px !important;
    }

    /* Nomi.ai color in menu */
    .css-g6cz36 {
        color: rgb(150, 16, 255) !important;
    }

    /* SVG are white */
    svg path {
        stroke: white;
    }

    .css-1u2l9gp svg path {
        stroke: rgb(9, 16, 29);
    }

    /* Fix spinner */
    .css-1iw9n18 svg path {
        stroke: none;
    }

    /* Fix SVG menu */
    .css-i3pbo svg path,
    .css-vo6oh1 svg path,
    /* Fix SVG customization */
    .css-1v8aab4 svg path,
    .css-1o5vjud svg path,
    /* Fix SVG loading */
    .css-1j0l6xk svg path {
        stroke: rgb(150, 16, 255);
    }

    /* Fix camera button */
    .css-1x4dmv7 svg path {
        fill: rgb(150, 16, 255);
    }

    /* Make logout SVG and text red again */
    .css-1rv67vh,
    .css-1hmb4pn svg path,
    /* Make delete image SVG red */
    .css-l9wrht svg path {
        color: #e74c3c !important;
        fill: #e74c3c;
    }

    /* Delete account button */
    .css-1yp80wt {
        align-items: center;
        background-color: rgb(247, 85, 85);
        border: 2px solid rgb(247, 85, 85);
        border-radius: 100px;
        display: flex;
        font-size: 16px;
        font-weight: 600;
        height: 58px;
        letter-spacing: 0.2px;
        line-height: 22px;
        padding: 18px 32px;    
    }

    /* Delete Nomi buttons */
    button.css-8as6rk,
    .css-a6rva7 button {
        background-color: #e74c3c !important;
        color: white !important;
    }

    /* Fix SVG on nomi details page when hover */
    .css-bxdqnu:hover svg path {
        fill: white;
    }

    /* Fix some buttons and bubbles to make them more visible */
    .css-9i2gok,
    .css-hsqzc1,
    .css-1qvkgqq,
    .css-bxdqnu:hover /* Fix nomi details page hover */ {
        background-color: gray !important;
    }

    /* Blue background for the Welcome bubble */
    .css-1y64612 > :last-child {
        background: var(--toastify-color-info) !important;
    }

    /* Titles on new nomi page */
    h5.css-124mhq6 {
        background: transparent!important;
        color: var(--toastify-color-light) !important;
    }

    /* Selfie notifications */
    .Toastify__zoom-enter svg path,
    .Toastify__zoom-error svg path,
    .Toastify__toast-theme--light,
    .Toastify__toast-body,
    /* Fix bubble during selfie is taking to make her more visible */
    .css-12kxn86,
    .css-kkk4zb {
        background: #616161 !important;
        stroke: none;
    }

    /* Make "Send" button and "Delete Nomi Forever" visible again when disabled */
    .css-8as6rk:disabled,
    .css-12a128q:disabled,
    .css-1x4dmv7:disabled svg path {
        background-color: gray !important;
        cursor: not-allowed !important;
        fill: gray;
    }

    /* Date bubble */
    .css-ygnlmt {
        background-color: transparent !important;
        display: inline-block;
        padding: 0 10px;
        position: relative;
    }

    .css-ygnlmt::before,
    .css-ygnlmt::after {
        background-color: white;
        content: "";
        height: 2px;
        position: absolute;
        top: 20%;
        width:100%;
    }

    .css-ygnlmt::before {
        left: 0;
        transform: translate(-100%);
    }

    .css-ygnlmt::after {
        transform: translate(100%);
        right: 0;
    }

    /* Make send button visible again when disabled */
    .css-ntdqfs:disabled,
    .css-1x4dmv7:disabled {
        background-color: gray !important;
        cursor: not-allowed !important;
    }

    /* Our bubbles color */
    .css-3td3fo, /* Our bubbles color mobile */
    .css-13w4jtb {
        background: linear-gradient(to right, #3a6186, #89253e);
        border-radius: 20px 8px 20px 20px;
    }

    /* Replace thumbs background and remove borders */
    .css-16hofwr {
        background-color: transparent;
        border: 0px !important;
    }

    /* Put a background under unclicked thumbs */
    .css-d3fk4o {
        background: rgb(9, 16, 29) !important;
        border: 0px !important;
    }

    /* Remove background under clicked thumbs */
    .css-vocaqi {
        background-color: transparent !important;
        border: 0px !important;
    }

    /* Change background color under unclicked thumbs when hover */
    .css-d3fk4o:hover {
        background-color: #eeeeee !important;
    }

    /* Remove the border on top of the left side */
    .css-e2xlbb.e1fc4ty00 > div:nth-of-type(1) {
        display: none;
    }

    @media (max-width: 1500px) {
        /* Put profile pic in full size without going in album */
        .css-e2xlbb,
        .css-nzao1s {
            border-right: 0px;
            max-width: 768px;
            margin: 0px;
            padding: 0px 0px 0px 2px !important;
        }

        /* Remove free space on screen size 640px and more and rearrange a little the space */
        .css-1fswsvh {
            margin-left: min(25vw, 480px);
            padding-right: 10px;
        }

        /* Hide scrollbar but keep the function */
        .css-1htcw6x {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .css-1htcw6x::-webkit-scrollbar {
            display: none;
        }

        .css-1fswsvh {
            padding: 0px 10px 0px 10px;
        }

        /* "Current Profile Picture" button on picture viewer page is less opaque */
        .css-1i76af2 {
            opacity: 0.5;
        }

        /* Nomi's answers */
        .css-2hr7pt, /* Nomi's bubbles color mobile */
        .css-afkp3z, /* Nomi's bubbles color */
        .css-1ve1qsh /* Nomi's bubbles color when she answer */ {
            background: linear-gradient(to right, #cc2b5e, #753a88);
            border-radius: 8px 20px 20px 20px !important;
            margin-left: 10px !important;
        }

        /* Add space between form elements */
        form {
            gap: 10px;
        }
    }

    @media (min-width: 1500px) {
        /* Fix bar position with Nomi's name, photo album and infos links at the top */
        .css-5f4tlo {
            background: rgb(9, 16, 29) !important;
            position: sticky;
            top: 0px !important;
            z-index: 9999;
        }

        .css-s37f8j {
            overflow-y: scroll;
        }

        /* Put profile pic in full size without going in album */
        .css-1htcw6x,
        .css-e2xlbb,
        .css-nzao1s {
            border-right: 0px;
            margin: 0px !important;
            max-width: 770px;
            padding: 0px 0px 0px 2px !important;
            width: 770px;
        }

        .css-1fswsvh {
            margin-left: 770px;
            padding: 0px 10px 0px 0px;
        }

        /* Remove space between chat and textarea */
        .css-1vi0cy8 {
            gap: 0px !important;
            margin-bottom: 10px;
        }

        .e1rpo1t71 {
            margin-top: 25px !important;
        }

        .css-1tyfq5e {
            height: 0px;
        }

        /* "Current Profile Picture" button on picture viewer page is less opaque and got a little marge under him */
        .css-1i76af2 {
            margin-bottom: 10px;
            opacity: 0.5;
        }

        /* Add a round corner to the div on profile pic */
        .css-1htcw6x {
            border-radius: 0px  0px 20px 20px !important;
        }

        /* Hide scrollbar but keep the function */
        .css-s37f8j,
        .css-1htcw6x {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .css-s37f8j::-webkit-scrollbar,
        .css-1htcw6x::-webkit-scrollbar {
            display: none;
        }

        /* Nomi's answer */
        .css-3fim88 {
            margin-left: 10px !important;
        }

        .css-2hr7pt, /* Nomi's bubbles color mobile */
        .css-afkp3z, /* Nomi's bubbles color */
        .css-1ve1qsh /* Nomi's bubbles color when she answer */ {
            background: linear-gradient(to right, #cc2b5e, #753a88);
            border-radius: 8px 20px 20px 20px !important;
            margin-left: 10px !important;
        }

        /* Add space between form elements */
        form {
            gap: 10px;
            padding: 0px 0px 0px 10px !important;
        }

        .css-alqmgy {
            gap: 10px;
        }

        /* ========================================================================
        Home page customization to avoid scroll bar
        ======================================================================= */
        /* Avatar, name, hello message, beta alert message go on left side */
        .css-1g4jhqi {
            left: 0px;
            position: fixed;    
            top: 0px;
            width: 25vw;
        }

        .css-1g4jhqi img {
            border-radius: 5px;
            left: 10px;
            position: fixed;
            top: 10px;
        }

        .css-1y64612 {
            display: block;
            left: 0px;
            position: fixed;
            top: 100px;
            width: 25vw;
        }

        .css-1gqy2tx {
            display: block;
            left: 70px;
            position: fixed;
            top: 10px !important;
        }

        /* Nomi list */
        .css-cnprv6,
        .css-1pb0fgy {
            margin: 3% 0px 0px 70px;
            padding: 0px;
            width: 60vw !important;
        }
    }
}