☰

ChatGPT界面美化（基于Tim Macy作品）

为ChatGPT页面的各种按钮添加彩色图标，并优化界面布局，隐藏不必要元素，提升视觉体验。基于Tim Macy Read Aloud Speedster脚本修改

// ==UserScript==
// @name         ChatGPT界面美化（基于Tim Macy作品）
// @description  为ChatGPT页面的各种按钮添加彩色图标，并优化界面布局，隐藏不必要元素，提升视觉体验。基于Tim Macy Read Aloud Speedster脚本修改
// @author       schweigen（基于Tim Macy原作品）
// @license      AGPL-3.0-or-later
// @version      1.1
// @namespace    schweigen.ChatGPTButtonColors
// @icon         https://www.google.com/s2/favicons?sz=64&domain=chatgpt.com
// @match        https://chatgpt.com
// @match        https://chatgpt.com/?model=*
// @match        https://chatgpt.com/?temporary-chat=*
// @match        https://chatgpt.com/c/*
// @match        https://chatgpt.com/g/*
// @match        https://chatgpt.com/share/*
// @run-at       document-start
// ==/UserScript==

/************************************************************************
*                                                                       *
*                    原版权 © 2025 Tim Macy                             *
*                    修改版 © 2025 schweigen                            *
*                    GNU Affero General Public License v3.0             *
*                                                                       *
*             基于 Tim Macy Read Aloud Speedster 脚本修改                *
*             原作品: https://github.com/TimMacy                        *
*                                                                       *
************************************************************************/

(function() {
    'use strict';
    
    const styleSheet = document.createElement('style');
    styleSheet.textContent = `
        /* 复制按钮 - 橙色 */
        button[aria-label="Copy"],
        div[role="menuitem"]:has(path[d^="M12 7.1a"]),
        header button:has(path[d^="M12.668 10.667C12"]),
        button.surface-nav-element:has(svg path[d^="M12 7.1a"]),
        button[data-testid="copy-turn-action-button"] svg {
            color: darkorange !important;
            opacity: .9;
        }

        /* 复制成功 - 绿色 */
        button:has(svg path[d^="M15.483"]) {
            color: springgreen !important;
        }

        .light button:has(svg path[d^="M15.483"]) {
            color: limegreen !important;
        }

        /* 点赞按钮 - 绿色 */
        button[aria-label="Good response"],
        button .icon-md path[d^="M12.1318"],
        button svg path[d^="M10.9153"],
        div[role="menuitem"]:has(path[d^="m4.5 4.944"]),
        button[data-testid="good-response-turn-action-button"] svg {
            color: #00ad00 !important;
            opacity: .9;
        }

        /* 点踩按钮 - 红色 */
        button[aria-label="Bad response"],
        button .icon-md path[d^="M11.8727"],
        button svg path[d^="M12.6687"],
        button.surface-nav-element:has(svg path[d^="M11.868 21"]),
        button[data-testid="bad-response-turn-action-button"] svg {
            color: crimson !important;
            opacity: .9;
        }

        /* 编辑按钮 - 黄色(暗色模式)/靛蓝色(亮色模式) */
        button[aria-label="Edit message"],
        button[aria-label="Edit in canvas"],
        button:has(svg path[d^="M12.0303 4.11328"]) {
            color: yellow !important;
            opacity: .8;
        }

        .light button[aria-label="Edit message"],
        .light button[aria-label="Edit in canvas"],
        .light button:has(svg path[d^="M12.0303 4.11328"]) {
            color: indigo !important;
            opacity: .8;
        }

        /* 模型切换按钮 - 灰色 */
        main .flex.justify-start button[aria-haspopup="menu"][data-state="closed"] > div {
            color: gray !important;
        }

        .light main .flex.justify-start button[aria-haspopup="menu"][data-state="closed"] > div {
            color: dimgray !important;
        }

        /* 朗读按钮 - 天蓝色 */
        button[aria-label="Read aloud"],
        div[role="menuitem"]:has(path[d^="M9 6.25v5.5"]),
        button[data-testid="voice-play-turn-action-button"] svg {
            color: deepskyblue !important;
            opacity: .9;
        }

        /* 停止朗读按钮 - 天蓝色 */
        button[aria-label="Stop"] {
            color: deepskyblue !important;
        }

        /* 分享按钮 - 默认颜色但降低透明度 */
        article button[aria-label="Share"] {
            opacity: .8;
        }

        /* Sora星标按钮 - 金色 */
        a:has(svg path[d^="M9.822 2.077c"]),
        div.pointer-events-none path[d^="M10.258"],
        button.surface-nav-element path[d^="M10.258"],
        div[role="menuitem"]:has(path[d^="M9.822 2.077c"]),
        button.surface-nav-element path[d^="M9.822 2.077c"],
        div[role="menuitem"]:has(path[d^="M10.258 1.555c"]) {
            color: gold !important;
        }

        /* 删除按钮 - 红色 */
        .text-token-text-destructive,
        button:has(path[d^="m10 11.5 4"]),
        [data-testid="delete-chat-menu-item"],
        div[role="menuitem"]:has(path[d^="M10.556 4a1 1 0"]) {
            color: #e02e2a !important;
        }

        /* 删除按钮悬停效果 */
        .text-token-text-destructive:hover,
        button:has(path[d^="m10 11.5 4"]):hover,
        [data-testid="delete-chat-menu-item"]:hover,
        div[role="menuitem"]:has(path[d^="M10.556 4a1 1 0"]):hover {
            color: white !important;
            background: rgba(255, 0, 0, .5) !important;
        }

        /* 恢复按钮悬停效果 - 绿色背景 */
        div[role="menuitem"]:has(path[d^="m4.5 4.944"]):hover {
            color: white !important;
            background: rgba(0, 255, 0, .5) !important;
        }

        /* 按钮悬停时透明度变为1 */
        :is(
            button[aria-label="Copy"],
            button[data-testid="copy-turn-action-button"] svg,
            button[aria-label="Good response"],
            button[data-testid="good-response-turn-action-button"] svg,
            button[aria-label="Bad response"],
            button[data-testid="bad-response-turn-action-button"] svg,
            button[aria-label="Edit message"],
            button[aria-label="Edit in canvas"],
            button[aria-label="Read aloud"],
            button[data-testid="voice-play-turn-action-button"] svg,
            article button[aria-label="Share"]
        ):hover {
            opacity: 1 !important;
        }

        /* ChatGPT回复中的粗体文字高亮 */
        .markdown strong {
            color: springgreen !important;
        }

        .light .markdown strong {
            color: darkviolet !important;
        }

        /**************************************
                界面优化与隐藏功能
        **************************************/

        /* 隐藏"查看计划"和"Get Plus"按钮 */
        #page-header div:has(path[d^="M17.665 10C17"]),
        div.__menu-item:has(svg path[d^="M8.44824"]) {
            display: none !important;
        }

        /* 隐藏"Get Pro"按钮 */
        main .flex > button.btn-primary:first-child:last-child {
            display: none;
        }

        /* 隐藏"ChatGPT可能出错"提示文字 */
        div.text-token-text-secondary[class*="md:px-"] {
            display: none;
        }

        .xl\\:px-5, main form {
            padding-bottom: 1rem;
        }

        /* Codex和Sora按钮并排显示 */
        nav > aside > a.group.__menu-item#sora,
        nav > aside > a.group.__menu-item[href="/codex"] {
            width: calc(50% - 6px);
        }

        nav > aside > a.group.__menu-item#sora {
            transform: translate(100%, -100%);
            margin-bottom: -32px;
        }

        /* "新项目"和"查看更多"按钮并排 */
        nav #snorlax-heading {
            display: flex;
            flex-direction: column;
        }

        nav > #snorlax-heading > div:first-child,
        nav > #snorlax-heading > div:last-child {
            width: calc(50% - 6px);
        }

        nav > #snorlax-heading > div:last-child {
            position: absolute;
            transform: translateX(100%);
            flex-direction: row-reverse;
            padding: 8px 10px 8px 20px;
            order: -1;
        }

        /* 搜索和库按钮紧凑化 */
        nav > aside > a:has(svg path[d^="M2.6687"]),
        #stage-slideover-sidebar nav > aside div.absolute.inset-0,
        nav > aside > div:has(svg path[d^="M14.0857"]) div.text-token-text-tertiary,
        nav > aside > a:has(svg path[d^="M9.38759"]) div.text-token-text-tertiary {
            display: none;
        }

        .tall\\:top-header-height,
        nav > aside.last\\:mb-5.mt-\\(--sidebar-section-first-margin-top\\) {
            height: 0;
            padding: 0;
            margin-bottom: -8px;
        }

        nav > aside > a:has(svg path[d^="M9.38759"]),
        nav > aside > div:has(svg path[d^="M14.0857"]) {
            margin: 0;
            z-index: 31;
            color: var(--text-tertiary);
        }

        nav > aside > div:has(svg path[d^="M14.0857"]) {
            transform: translate(45.5px, -44px);
            width: 40px;
        }

        nav > aside > a:has(svg path[d^="M9.38759"]) {
            transform: translate(86.5px, -80px);
            width: 92px;
        }

        nav > aside > div:has(svg path[d^="M14.0857"]):hover,
        nav > aside > a:has(svg path[d^="M9.38759"]):hover,
        nav button:has(svg path[d^="M6.83496"]):hover {
            color: var(--text-primary);
        }

        #stage-slideover-sidebar nav > div.sticky.top-0.z-30,
        #stage-slideover-sidebar div.bg-token-bg-elevated-secondary.top-0 {
            z-index: 17;
        }

        /* 紧凑侧边栏 - 带分隔线的紧凑侧边栏设计 */
        nav .__menu-item:not(:has(svg path[d^="M14.0857"])):not(:has(svg path[d^="M9.38759"])),
        nav .__menu-item-trailing-btn {
            min-height: calc(var(--spacing)*8);
            max-height: 32px;
        }

        nav .__menu-item-trailing-btn,
        .self-stretch {
            align-self: center;
        }

        nav .__menu-item-trailing-btn:hover {
            background: rgba(255, 255, 255, .1);
        }

        nav .light .__menu-item-trailing-btn:hover {
            background: rgba(1, 1, 1, .1);
        }

        nav .mt-\\(--sidebar-section-first-margin-top\\),
        nav .pt-\\(--sidebar-section-first-margin-top\\),
        nav .mt-\\(--sidebar-section-margin-top\\),
        nav .pt-\\(--sidebar-section-margin-top\\) {
            margin-top: 10px!important;
            padding: 0!important;
        }

        nav .mt-\\(--sidebar-section-first-margin-top\\)::before,
        nav .pt-\\(--sidebar-section-first-margin-top\\)::before,
        nav .mt-\\(--sidebar-section-margin-top\\)::before,
        nav .pt-\\(--sidebar-section-margin-top\\)::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            background-color: color(srgb 1 1 1 / 0.17);
            display: block;
            transform: translateY(-5px);
        }

        nav .light .mt-\\(--sidebar-section-first-margin-top\\)::before,
        nav .light .pt-\\(--sidebar-section-first-margin-top\\)::before,
        nav .light .mt-\\(--sidebar-section-margin-top\\)::before,
        nav .light .pt-\\(--sidebar-section-margin-top\\)::before {
            background-color: color(srgb 0 0 0 / 0.17);
        }

        nav .tall\\:top-header-height {
            margin-top: 0!important;
        }

        nav .tall\\:top-header-height::before {
            background-color: transparent;
        }

        .tall\\:top-header-height,
        nav > aside.last\\:mb-5.mt-\\(--sidebar-section-first-margin-top\\) {
            margin-bottom: -10px!important;
        }

        nav > #history > aside > h2 {
            padding: 3px 10px 0 10px;
        }
    `;

    // 添加样式表到页面
    (document.head
        ? Promise.resolve(document.head)
        : new Promise(resolve => {
            document.readyState === 'loading'
                ? document.addEventListener('DOMContentLoaded', () => resolve(document.head), {once: true})
                : resolve(document.head);
        })
    ).then(head => {
        if (head) {
            head.appendChild(styleSheet);
        } else {
            document.documentElement.appendChild(styleSheet);
            console.error("ChatGPT按钮颜色美化: 无法找到head元素，使用备用方法添加样式表。");
        }
    });

})();

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址