GruvboxLightGPT by csepes

/* ==UserStyle==
@name           GruvboxLightGPT
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A Gruvbox Light GPT userstyle
@author         csepes
==/UserStyle== */
@-moz-document url-prefix("https://chatgpt.com/") {
    :root {
        --white: #fbf1c7;
        /* Light background */
        --black: #3c3836;
        /* Dark foreground */
        --gray-50: #f9f5d7;
        /* Lightest Gruvbox tone */
        --gray-100: #ebdbb2;
        /* Very light Gruvbox tone */
        --gray-200: #d5c4a1;
        /* Light Gruvbox tone */
        --gray-300: #bdae93;
        /* Sandy Gruvbox tone */
        --gray-400: #928374;
        /* Medium Gruvbox tone */
        --gray-500: #7c6f64;
        /* Dark Gruvbox tone */
        --gray-600: #665c54;
        /* Darker Gruvbox tone */
        --gray-700: #504945;
        /* Darker Gruvbox tone */
        --gray-750: #3c3836;
        /* Darker Gruvbox tone */
        --gray-800: #32302f;
        /* Darkest Gruvbox tone */
        --gray-900: #282828;
        /* Very dark Gruvbox tone */
        --gray-950: #1d2021;
        /* Deepest Gruvbox tone */
        --red-500: #cc241d;
        /* Gruvbox red */
        --red-700: #9d0006;
        /* Darker Gruvbox red */
        --brand-purple: #b16286;
        /* Gruvbox purple */
    }

    .dark {
        --text-primary: #3c3836;
        /* Gruvbox dark foreground */
        --text-secondary: #504945;
        /* Gruvbox darker foreground */
        --text-tertiary: #665c54;
        /* Gruvbox darker tone */
        --text-quaternary: #7c6f64;
        /* Gruvbox dark sandy tone */
        --text-error: #cc241d;
        /* Gruvbox red */
        --border-light: #ebdbb2;
        /* Light Gruvbox border */
        --border-medium: #d5c4a1;
        /* Medium Gruvbox border */
        --border-heavy: #bdae93;
        /* Heavy Gruvbox border */
        --border-xheavy: #a89984;
        /* Extra heavy Gruvbox border */
        --main-surface-primary: #f9f5d7;
        /* Light Gruvbox tone */
        --main-surface-secondary: #ebdbb2;
        /* Very light Gruvbox tone */
        --main-surface-tertiary: #d5c4a1;
        /* Sandy Gruvbox tone */
        --sidebar-surface-primary: #bdae93;
        /* Sandy Gruvbox tone */
        --sidebar-surface-secondary: #a89984;
        /* Medium sandy Gruvbox tone */
        --sidebar-surface-tertiary: #928374;
        /* Dark Gruvbox tone */
        --link: #458588;
        /* Gruvbox blue for links */
        --link-hover: #076678;
        /* Darker Gruvbox blue for link hover */
    }

    .dark\:prose-invert:is(.dark *) :where(code):not(:where([class~="not-prose"] *)) {
        background-color: var(--gray-700);
        color: #fbf1c7;
    }

    .bg-gray-950 {
        --tw-bg-opacity: 1;
        background-color: #1d2021;
    }

    .dark .dark\:bg-token-main-surface-secondary {
        background-color: var(--sidebar-surface-primary);
    }

    .dark .dark\:text-gray-500 {
        --tw-text-opacity: 1;
        color: #fbf1c7;
    }

    .dark .dark\:text-white {
        --tw-text-opacity: 1;
        color: #3c3836;
    }

    input::placeholder,
    textarea::placeholder {
        color: #bdae93;
        opacity: 1;
    }

    .disabled\:dark\:bg-token-text-quaternary:is(.dark *):disabled {
        background-color: var(--gray-800);
    }

    /* Target the SVG directly using its class */
    .icon-2xl {
        fill: #bdae93;
        /* Change the fill color to Gruvbox tone */
        width: 32px;
        /* Adjust the width if necessary */
        height: 32px;
        /* Adjust the height if necessary */
    }

    /* You can also target the path within the SVG */
    .icon-2xl path {
        fill: #bdae93;
        /* Change the fill color to Gruvbox tone */
    }

    /* Scrollbar for WebKit browsers (Chrome, Safari) */
    ::-webkit-scrollbar {
        width: 12px;
        /* Adjust the width as needed */
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #a89984;
        /* Medium Gruvbox tone */
        border-radius: 20px;
        /* Rounded edges */
        border: 3px solid transparent;
        /* Adds space around thumb */
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #928374;
        /* Dark Gruvbox tone */
    }

    /* Scrollbar for Firefox */
    html {
        scrollbar-width: thin;
        scrollbar-color: #a89984 transparent;
    }

    /* Scrollbar for Edge, IE */
    * {
        scrollbar-width: thin;
        scrollbar-color: #a89984 transparent;
    }

    body {
        scrollbar-width: thin;
        scrollbar-color: #a89984 transparent;
    }

    .dark .dark\:bg-white {
        --tw-bg-opacity: 1;
        background-color: rgb(50, 48, 47);
    }

    .group.flex.gap-2.p-2\.5.text-sm.cursor-pointer.focus\:ring-0.radix-disabled\:pointer-events-none.radix-disabled\:opacity-50.items-center.hover\:bg-token-sidebar-surface-secondary.m-0.rounded-lg.px-2 {
        display: none;
    }
}