chat.openai.com by gamatek

/* ==UserStyle==
@name           chat.openai.com - 24/05/2023 16:44:39
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */

@-moz-document domain("chat.openai.com") {
    :root {
        --bg-gradient-retro-storm-1: hsl(202, 47%, 42.9%);
        --bg-gradient-retro-storm-2: hsl(241, 27.8%, 47.3%);

        --custom-theme-background: linear-gradient(
            148.71deg,
            var(--bg-gradient-retro-storm-1) 5.64%,
            var(--bg-gradient-retro-storm-2) 26.38%,
            var(--bg-gradient-retro-storm-2) 49.92%,
            var(--bg-gradient-retro-storm-1) 73.12%
        );

        --bg-overlay-chat: linear-gradient(
            rgb(0, 0, 0, 0.8),
            rgb(0, 0, 0, 0.8)
        ) fixed 0 0/cover,
        var(--custom-theme-background) fixed 0 0/cover;
        
        --bg-overlay-3: linear-gradient(
            rgb(0, 0, 0, 0.7),
            rgb(0, 0, 0, 0.7)
        ) fixed 0 0/cover,
            var(--custom-theme-background) fixed 0 0/cover;
    }
    
    body {
        background: var(--bg-overlay-chat);
    }
    
    /* Right */
    #__next > div > div:nth-child(1) {
        background: var(--bg-overlay-3);
    }
    
    #__next > div > div:nth-child(1) a:not(:hover):not(.bg-gray-800),
    #__next > div > div:nth-child(1) h3 {
        background: none;
    }
    
    #__next > div > div:nth-child(1) a > div > div {
        background: none;
    }
    
    /* Chat */
    #__next > div > div:nth-child(2) .group .xl\:max-w-3xl {
        max-width: 100%;
        padding: 1rem 5rem;
    }

    #__next > div > div:nth-child(2) .group {
        background: none;
        border: none;
    }

    #__next > div > div:nth-child(2) .group div:has(>svg),
    #__next > div > div:nth-child(2) .group img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
    }
    
    #__next > div > div:nth-child(2) .group div:has(>svg) {
        background: hsl(235, 85.6%, 64.7%);
    }
    
    #__next > div > div:nth-child(2) .group .w-\[30px\]:has(img) {
        width: 40px;
    }
    
    #__next > div > div:nth-child(2) .dark\:bg-gray-800:not(:has(>form)) {
        background: var(--bg-overlay-chat);
    }
    
    #__next > div > div:nth-child(2) .group *:not(code>span) {
        color: #dbdee1;
    }
    
    #__next > div > div:nth-child(2) .group.dark\:bg-\[\#444654\] {
        position: relative;
        background: rgba(240, 177, 50, 0.1) !important;
    }
    
    #__next > div > div:nth-child(2) .group.dark\:bg-\[\#444654\]:before {
        content: "";
        position: absolute;
        width: 2px;
        height: 100%;
        background: #f0b132;
    }
    
    #__next > div > div:nth-child(2) .group .bg-black.rounded-md.mb-4:has(code) {
        background: #2b2d31;
        font-size: 0.875rem;
        line-height: 1.125rem;
        border-radius: 4px;
    }
    
    #__next > div > div:nth-child(2) .group .bg-black.rounded-md.mb-4:has(code) div:nth-child(1) {
        display: none;
    }
    
    #__next > div > div:nth-child(2) .group .bg-black.rounded-md.mb-4:has(code) div:nth-child(2) {
        padding: 0.5em;
    }
    
    /* Chat input */
    #__next > div > div:nth-child(2) div:has(>form) > div {
        display: none;
    }
    
    #__next > div > div:nth-child(2) div:has(>form) {
        background: none;
    }

    #__next > div > div:nth-child(2) form {
        max-width: 100%;
        padding: 1.5rem;
    }
    
    #__next > div > div:nth-child(2) form div:has(>textarea) {
        background: var(--bg-overlay-3);
    }
    
    #__next > div > div:nth-child(2) form button:has(svg) {
        background: hsl(235, 85.6%, 64.7%) !important;
    }
}