じぴてぃあると　2025/03/07 background-position: center; 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
@modder       strmdn,2025/03/07　https://github.com/sokudon/stylus_custom_css/tree/master/chatgpt
==/UserStyle== */
@-moz-document domain("chatgpt.com") {
    main {
        /* 背景透過 */
        background: #ffffff7d;
    }

    :root {
        --white: #fff;
        --black: #000;
        --gray-50: #f9f9f9;
        --gray-100: #ececec;
        --gray-200: #e3e3e3;
        --gray-300: #cdcdcd;
        --gray-400: #b4b4b4;
        --gray-500: #9b9b9b;
        --gray-600: #676767;
        --gray-700: #424242;
        --gray-750: #2f2f2f;
        --gray-800: #212121;
        --gray-900: #171717;
        --gray-950: #0d0d0d;
        --red-500: #ef4444;
        --red-700: #b91c1c;
        --brand-purple: #ab68ff;
        --yellow-900: #927201;
        --header-height: 3rem;
        --background: url(https://images-ng.pixai.art/images/orig/0cebf8f4-e050-494d-b1cb-33d420e75a5f);
        --backgroud-repeat: repeat x;
        /* typo: "backgroud" -> "background" に修正すべき */
        --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: #fff;
        --bg-selection: #7ad28d;
        --text-color: #000;
        --text-gray-color: 100, 100, 100;
        --text-dark-color: 22, 22, 22;
        --text-color-selection: #191919;
        --surface-message-gpt: 210, 210, 210;
        --text-primary: var(--gray-950);
        --main-surface-tertiary: var(--gray-100);
    }

    body {
        color: rgb(var(--text-color));
        border-left: solid 3px #000 !important;
        background-image: var(--background);
        background-size: cover;
        /* 画面全体をカバー */
        background-position: center;
        /* top center; HDゑ用　スマフォはcenterでちょい隠れるのもあり*/
        /* 上部を優先表示 */
        background-repeat: no-repeat;
        min-height: 100vh;
    }

    .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);
    }

    /* 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-size: 0.9rem !important;
        color: #cfc7c7 !important;
    }

    .text-base {
        font-size: 1.0rem !important;
        color: rgb(var(--text-gray-color)) !important;
        /*         color: #f7eaea !important; */
    }

    .break-words {
        font-size: 1.0rem !important;
        /*         color: #f7eaea !important; */
    }

    .prose pre {
        font-size: 0.775em !important;
        color: #ba...