じーぴーてぃー by strmdn

/* ==UserStyle==
@name         ChatGPT - Remake of Razorglass 2 electric boogaloo
@namespace    userstyles.world/user/oples
@author       Enokai, Thomas Noack
@description  Re-Remade the original Razorglass (see: userstyles.world/user/toemass202).
@version      0.2.0
@license      CC0 1.0 Universal
@preprocessor less
==/UserStyle== */
@-moz-document domain("chatgpt.com") {
    :root {

        /* TIP: Disable the code Word Wrapping to ignore the 2 base64 images */
        --header-height: 3rem;

        /* Light Theme  */
        /* 
         * Light background source: https://www.pexels.com/photo/snow-covered-mountain-surrounded-with-clouds-4179793/
         * Change the background HERE! (for light theme) 
         */
      
      
        /* 今のところbase 64は不要　*/
        --background: url(https://img.chichipui.com/bbe9424e-73d8-4cca-bc7c-0f4ad0ecddd9);
        --backgroud-repeat : repeat x;
        --selected-chat-gradient: linear-gradient(135deg, #b8e5ff0f, #d9d9d9, #d9d9d9 100%);
        --selected-gpt-gradient: linear-gradient(135deg, #7cffde08, #ebebeb 100%);
        --main-surface-secondary: #d0d0cf;
        --surface-primary: 255, 255, 255;
        --bg-selection: #7ad28d;
        --text-color:0,0, 0;
        --text-gray-color: 100, 100, 100;
        --text-dark-color: 22, 22, 22;
        --text-color-selection: #191919;
        --surface-message-gpt: 210, 210, 210;
    }

    html.dark {
        /* Dark Theme */
        /* 
         * Dark background source: https://www.pexels.com/photo/green-pine-tree-leaves-192136/
         * Change the background HERE! (for dark theme)
         */

      --background: url(https://img.chichipui.com/5492a2c5-3a0b-4f92-84cf-f7015ab40f04);
        --backgroud-repeat : repeat x;
        --selected-chat-gradient: linear-gradient(135deg, #b8e5ff0f, #000, #000 100%);
        --selected-gpt-gradient: linear-gradient(135deg, #7cffde08, #000 100%);
        --main-surface-secondary: #131311;
        --surface-primary: 0, 0, 0;
        --bg-selection: #045e17;
        --text-color: 220, 220, 220;
        --text-gray-color: 180, 180, 180;
        --text-dark-color: 220, 223, 228;
        --text-color-selection: #fff;
        --surface-message-gpt: 0, 0, 0;
    }

    .markdown .bg-gray-800 span,
    .markdown th {
        font-size: 16px;
    }

    .markdown h1,
    .markdown th {
        text-shadow: 0 2px 2px #000;
    }

    ::-moz-selection {
        background: var(--bg-selection);
        color: var(--text-color-selection);
    }

    body {
        color: rgb(var(--text-color));
        border-left: solid 3px #000 !important;
    }

    .dark\:text-gray-500:is(.dark *) {
        color: rgb(var(--text-color) / var(--tw-text-opacity));
    }

    /* Chat background */
    body > div.relative > div.max-w-full:nth-child(2),
    body > div.flex:not(.relative) {
        background-image: var(--background);
        background-size: cover;
        background-position: center;
    }

    /* Header */
    div.draggable.no-draggable-children {
        padding: 0 0.75rem;
        height: var(--header-height);
        background-color: rgba(var(--surface-primary), 0.5);
        backdrop-filter: blur(1rem);
    }

    div.draggable.no-draggable-children button.group {
        background-color: transparent !important;
    }

    .bg-token-main-surface-primary {
        background-color: rgba(var(--surface-primary), 0.3);
        backdrop-filter: blur(5px);
    }

    div.flex.flex-col.text-sm.pb-9 {
        background: linear-gradient(135deg, #b9efff1c, #000);
        border-left: solid 0px #10a37f !important;
    }

    #headlessui-portal-root .btn-danger,
    .markdown th,
    div > .hover\:bg-gray-500\/10 {
        background-color: #3f3f3f;
    }

    @media (min-width: 768px) {
        .md\:pb-\[8vh\] {
            position: relative;
            z-index: -5;
        }
    }

    h1 {
        filter: drop-shadow(0px 0px .25rem rgb(var(--surface-primary))) drop-shadow(0px 0px 5rem rgb(var(--surface-primary)));
    }

    .dark .dark\:text-gray-100,
    a {
        color: rgb(var(--text-dark-color));
    }

    button.group {
        background: var(--main-surface-secondary);
    }

    main button,
    main li.group {
        border-color: #1d1e1a !important;
    }

    main button:focus {
        border-color: #fd971f !important;
    }

    .input-container,
    .output-container {
        border: 1px solid #75715e;
        background-color: #272822
    }

    #headlessui-portal-root .grow.justify-center .text-gray-500,
    .user-input {
        color: #fd971f
    }

    #headlessui-portal-root .grow.justify-center svg.text-green-700,
    .assistant-output,
    textarea + button.text-gray-500 {
        color: #a6e22e
    }

    .timestamp {
        color: #75715e
    }

    .send-button {
        background-color: #f92672;
        color: #f8f8f2
    }

    .send-button:hover {
        background-color: #ffb86c
    }

    svg[viewBox="0 0 41 41"] {
        -webkit-filter: invert(100%);
        filter: invert(100%)
    }

    .relative.rounded-sm {
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        background-color: #75ac9d !important
    }

    .bg-gray-900.md\:fixed,
    .dark .dark\:bg-gray-900,
    .scrollbar-trigger,
    .scrollbar-trigger a.bg-gray-900 {
        background-color: black
    }

    .markdown .bg-black {
        background-color: #0c0d09
    }

    .markdown .bg-gray-800 {
        background-color: #2c041d
    }

    .markdown ul li::before {
        content: "●";
        color: #fff;
        font-size: .875rem;
        line-height: 1.8rem
    }

    .markdown hr {
        border-color: #a66212
    }

    .markdown th {
        font-weight: 400
    }

    .markdown h1 {
        color: #fff !important;
        font-size: 1.8em !important
    }

    @media only screen and (max-width:768px) {
        .sticky.top-0 {
            background-color: #121310;
            border-color: #a66212
        }

        .sticky.top-0 h1 {
            color: #fff !important
        }

        .sticky.top-0 h1 + button {
            color: #a6e22e !important
        }

        #headlessui-portal-root .bg-gray-600 {
            background-color: rgba(var(--surface-primary), .9) !important
        }

        .dark .dark\:border-white\/20 {
            border-color: #262721
        }
    }

    @media only screen and (min-width:768px) {
        .md\:right-2 {
            right: 1.2rem
        }

        .dark .dark\:md\:bg-vert-dark-gradient {
            background-image: inherit
        }
    }

    @media only screen and (min-width:1200px) {
        .xl\:max-w-3xl {
            max-width: 90%
        }
    }

    @media only screen and (min-width:1400px) {
        .xl\:max-w-3xl {
            max-width: 90%
        }
    }

    @media only screen and (min-width:1500px) {
        .xl\:max-w-3xl {
            max-width: 90%
        }
    }

    @media only screen and (min-width:1800px) {
        .xl\:max-w-3xl {
            max-width: 90%
        }
    }

    .bg-gradient-to-l {
        background-image: linear-gradient(to left, #1e1e1e00 0, rgba(37, 38, 32, 0) 100%)
    }

    @media(min-width:768px) {
        .md\:max-w-3xl {
            max-width: 90%
        }
    }

    @media(min-width:1280px) {
        .gizmo .gizmo\:xl\:max-w-\[48rem\] {
            max-width: 90%
        }
    }

    div[data-testid^="conversation-turn-"]:nth-child(even) {
        font-size: 0.9rem !important;
        box-shadow: 0 0 5px #000000f0;
        border-left: 3px solid;
        border-image: linear-gradient(to right, #51515199 100%, #51515138 10%) 1 100%;
        margin-bottom: 2px;
    }

    /* All chats */
    .mx-auto.flex.flex-1.gap-4.text-base.md\:gap-5.lg\:gap-6.md\:max-w-3xl.lg\:max-w-\[40rem\].xl\:max-w-\[48rem\] {
        /*margin-left: 2rem;*/
    }

    /* USER */
    .w-full.text-token-text-primary:nth-child(even) {
        /*background: var(--selected-chat-gradient) !important;
		border-top: solid rgba(255, 255, 255, .2) 1px !important;
    box-shadow: 25px 0 20px -10px #51515138 inset;*/
    }

    .w-full.text-token-text-primary:nth-child(even) > div .bg-token-message-surface {
        background: rgba(255, 255, 255, 0.75);
        color: black;
        backdrop-filter: blur(2rem);
    }

    div[data-testid^="conversation-turn-"]:nth-child(odd) {
        font-size: 0.9rem !important;
        border-left: 3px solid;
        border-image: linear-gradient(to right, #10a37fa1 100%, #10a37f70 10%, ) 1 100%;
        margin-bottom: 2px
    }

    /* GPT */
    .w-full.text-token-text-primary:nth-child(odd) {
        /*background: var(--selected-gpt-gradient) !important;
    box-shadow: 25px 0 20px -20px #10a37f9e inset;*/
    }

    /* GPT - user icon container */
    .w-full.text-token-text-primary:nth-child(odd) > div > div > div:nth-child(1) {
        padding-top: 0.5rem;
    }

    /* GPT - user icon */
    .w-full.text-token-text-primary:nth-child(odd) > div > div > div:nth-child(1) > div {
        position: sticky;
        /* header height */
        top: calc(var(--header-height) + 1rem);
    }

    /* GPT - chat */
    .w-full.text-token-text-primary:nth-child(odd) > div > div > div:nth-child(2) {
        backdrop-filter: blur(2rem);
        background: rgba(var(--surface-message-gpt), 0.5);
        border-radius: 2rem;
        padding: 0.25rem 1rem;
    }

    /* */
    div.md\:pb-9 {
        padding-bottom: 1rem;
    }

    /* ASK - Bottom input bar */
    div[role="presentation"] > div:nth-child(2) {
        padding-bottom: .5rem;
    }

    .m-auto {
        font...