diff --git a/styles/chatgpt/rose-pine.user.less b/styles/chatgpt/rose-pine.user.less index 93c4357..6347c5b 100644 --- a/styles/chatgpt/rose-pine.user.less +++ b/styles/chatgpt/rose-pine.user.less @@ -1,7 +1,7 @@ /* ==UserStyle== @name Rosé Pine for ChatGPT @description Soho vibes for ChatGPT -@version 1.1.1 +@version 1.1.2 @license MIT @author Jenish Boricha (https://github.com/jenishboricha) @namespace https://github.com/rose-pine/ @@ -9,13 +9,16 @@ @updateURL https://github.com/rose-pine/userstyles/raw/main/styles/chatgpt/rose-pine.user.less @preprocessor less -@var select lightFlavor "Light Palette" ["dawn:Rosé Pine Dawn*"] -@var select darkFlavor "Dark Palette" ["main:Rosé Pine*", "moon:Rosé Pine Moon"] +@var select lightFlavor "Light Palette" ["dawn:Rosé Pine Dawn*", "main:Rosé Pine", "moon:Rosé Pine Moon"] +@var select darkFlavor "Dark Palette" ["main:Rosé Pine*", "moon:Rosé Pine Moon", "dawn:Rosé Pine Dawn"] @var select accentColor "Accent Color" ["rose:Rose*", "love:Love", "gold:Gold", "pine:Pine", "foam:Foam", "iris:Iris"] @var select codeFontFamily "Code Font Family" ["default:Default*", "cascadia:Cascadia Code", "firacode:Fira Code", "geist:Geist Mono", "ibm:IBM Plex Mono", "inconsolata:Inconsolata", "jetbrains:JetBrains Mono", "source:Source Code Pro", "space:Space Mono", "ubuntu:Ubuntu Sans Mono"] @var range codeFontSize "Code Font Size" [14, 12, 20, 1, "px"] @var range codeLineHeight "Code Line Height" [1.4, 1.2, 2.0, 0.05] @var checkbox enableCodeBlocks "Enable Code Block Theme" 1 +@var checkbox useBrowserFont "Use Browser Default Font" 0 +@var checkbox hideUpsells "Hide Codex & Plan Upsells" 0 +@var checkbox hideDisclaimer "Hide AI Disclaimer" 0 ==/UserStyle== */ @-moz-document domain("chatgpt.com"), domain("auth.openai.com") { @@ -29,12 +32,14 @@ @dawn: { @base: #faf4ed; @surface: #fffaf3; @overlay: #f2e9e1; @muted: #9893a5; @subtle: #797593; @text: #464261; @love: #b4637a; @gold: #ea9d34; @rose: #d7827e; @pine: #286983; @foam: #56949f; @iris: #907aa9; @highlightLow: #f4ede8; @highlightMed: #dfdad9; @highlightHigh: #cecacd; }; } - /* ChatGPT Rules */ - .light { + /* ChatGPT Rules October 2026 Update */ + .light, + :root[data-theme="light"] { #rose-pine(@lightFlavor, @accentColor); } - .dark { + .dark, + :root[data-theme="dark"] { #rose-pine(@darkFlavor, @accentColor); } @@ -79,6 +84,45 @@ ~"'Ubuntu Sans Mono', 'Ubuntu Mono', monospace", @default-mono-stack))))))))); + &, + body { + background-color: @base !important; + color: @text !important; + } + + & when (@useBrowserFont = 1) { + &, + * { + --font-sans: sans-serif !important; + --default-font-family: sans-serif !important; + } + + body, + .font-sans, + .markdown, + .prose, + p, + h1, + h2, + h3, + h4, + h5, + h6, + li, + a, + button, + input, + textarea, + select, + label, + #prompt-textarea, + div[class*="RichTextInput"], + div[data-message-author-role] *:not(pre):not(code):not(pre *):not(code *):not(.cm-editor *) { + font-family: sans-serif !important; + } + } + + &, * { --text-primary: @text; --text-secondary: @subtle; @@ -88,6 +132,14 @@ --bg-secondary: @surface; --bg-tertiary: @overlay; + --token-bg-primary: @base !important; + --token-bg-secondary: @overlay !important; + --token-bg-tertiary: @overlay !important; + --token-border-heavy: @highlightHigh !important; + --token-text-primary: @text !important; + --token-text-secondary: @subtle !important; + --token-text-tertiary: @muted !important; + --bg-secondary-surface: @surface; --bg-elevated-primary: @base; @@ -99,9 +151,73 @@ --main-surface-secondary: @surface; --main-surface-tertiary: @overlay; - /* Set Composer Token directly to Surface */ + /* Surface & Background Tokens */ + --surface: @surface !important; + --surface-card: @surface !important; + --surface-secondary: @overlay !important; + --color-surface: @surface !important; + --color-surface-card: @surface !important; + --wb-surface-primary: @base !important; + --wb-surface-secondary: @surface !important; + --color-background-primary: @base !important; + --color-background-secondary: @surface !important; + --color-background-tertiary: @overlay !important; + --color-background-primary-soft-alpha: @surface !important; + --color-background-page-search: @surface !important; + --color-background-execution-output: @surface !important; + --code-block-surface: @surface !important; + --color-text-codex-description: @muted !important; + + --background-mode-toggle-track: @surface !important; + --color-background-mode-toggle-track: @surface !important; + --mode-toggle-primary: @text !important; + --color-mode-toggle-primary: @text !important; + --mode-toggle-inactive: @subtle !important; + --color-mode-toggle-inactive: @subtle !important; + + --color-text-codex-syntax-comment: @muted !important; + --text-codex-syntax-comment: @muted !important; + --color-text-codex-syntax-keyword: if(@flavor = dawn, @pine, @foam) !important; + --text-codex-syntax-keyword: if(@flavor = dawn, @pine, @foam) !important; + --color-text-codex-syntax-name: @pine !important; + --text-codex-syntax-name: @pine !important; + --color-text-codex-syntax-variable: @iris !important; + --text-codex-syntax-variable: @iris !important; + --color-text-codex-syntax-function: @iris !important; + --text-codex-syntax-function: @iris !important; + --color-text-codex-syntax-title: @iris !important; + --text-codex-syntax-title: @iris !important; + --color-text-codex-syntax-type: @iris !important; + --text-codex-syntax-type: @iris !important; + --color-text-codex-syntax-string: @rose !important; + --text-codex-syntax-string: @rose !important; + --color-text-codex-syntax-literal: @love !important; + --text-codex-syntax-literal: @love !important; + --color-text-codex-syntax-number: @love !important; + --text-codex-syntax-number: @love !important; + --color-text-codex-syntax-tag: @pine !important; + --text-codex-syntax-tag: @pine !important; + --color-text-codex-syntax-preprocessor: @pine !important; + --text-codex-syntax-preprocessor: @pine !important; + + --info-solid: @accent-color !important; + --color-info-solid: @accent-color !important; + --composer-primary: @accent-color !important; + --color-composer-primary: @accent-color !important; + + --learning-block-accent: @accent-color !important; + --learning-block-color-primary: @accent-color !important; + --learning-block-accent-surface: fade(@accent-color, 18%) !important; + + --menu-surface: @surface !important; + --popover-surface: @surface !important; + --color-background-elevated: @surface !important; + --color-primary-ghost-hover: @overlay !important; + --primary-ghost-hover: @overlay !important; + --composer-surface-primary: @surface !important; - --composer-surface-secondary: @overlay !important; + --composer-surface-secondary: @surface !important; + --composer-surface: @surface !important; --interactive-bg-secondary-hover: @overlay; --interactive-bg-secondary-press: @surface; @@ -111,6 +227,7 @@ --border-light: @highlightLow; --border-default: @highlightMed; --border-medium: @highlightHigh; + --border-heavy: @highlightHigh; --interactive-border-focus: @subtle; --theme-user-msg-bg: @surface; @@ -143,22 +260,286 @@ --menu-item-open: fade(@love, 30%); } - /* Clear hardcoded background overrides on prompt */ - #prompt-textarea { + .bg-info-solid, + .pulsing-dot, + span.bg-composer-primary { + background-color: @accent-color !important; + } + + main, + div[class*="Layout-"], + div[class*="WorkspaceContent-"], + div[class*="MainContentViewport-"], + div[class*="MainContentFrame-"], + div[class*="MainContentSurface"], + div[class*="thread-scroll-container"], + div[class*="group/thread-scroll-layout"] { + background-color: @base !important; + background-image: none !important; + } + + div.z-20.mt-auto.grid, + div.sticky.bottom-0.min-w-0.self-end, + div[class*="pb-(--thread-composer-bottom-inset)"], + div[class*="pointer-events-none"][class*="inset-x-0"][class*="bottom-0"] { + background-color: @base !important; + background-image: linear-gradient(to top, @base 80%, transparent 100%) + !important; + } + + div[class*="ComposerLayoutRoot"] { + --composer-surface-primary: @surface !important; + --composer-surface-secondary: @surface !important; + --composer-surface: @surface !important; + background-color: @surface !important; + background-image: none !important; + border: 1px solid fade(@highlightHigh, 45%) !important; + border-radius: 1.75rem !important; + box-shadow: none !important; + outline: none !important; + overflow: hidden !important; + + &::before, + &::after { + display: none !important; + } + } + + div[class*="ComposerLayoutRoot"] div, + div[class*="ComposerLayoutRoot"] form, + div[class*="ComposerFooter"] { + background-color: transparent !important; + background-image: none !important; + border-color: transparent !important; + box-shadow: none !important; + outline: none !important; + + &::before, + &::after { + box-shadow: none !important; + border-color: transparent !important; + } + } + + #prompt-textarea, + div[class*="RichTextInput"] { background-color: transparent !important; color: @text !important; } + div[class*="relative"][class*="mx-auto"]:has(> div[class*="ComposerLayoutRoot"]), + div[class*="max-w-"] > div[class*="ComposerLayoutRoot"] { + background-color: transparent !important; + box-shadow: none !important; + } + + .bg-background-mode-toggle-track { + background-color: @surface !important; + border: 1px solid fade(@highlightHigh, 45%) !important; + } + + div[class*="root-"][aria-label="Composer mode"], + div[class*="root-HUUPVC"] { + background-color: transparent !important; + + span[class*="bg-background-mode-toggle-track"] { + background-color: @surface !important; + border: 1px solid fade(@highlightHigh, 45%) !important; + } + + span[class*="indicator-"] { + background-color: @overlay !important; + box-shadow: none !important; + } + + button { + background-color: transparent !important; + color: @subtle !important; + + &[aria-pressed="true"] { + color: @text !important; + } + } + + .text-mode-toggle-primary { + color: @text !important; + } + + .text-mode-toggle-inactive { + color: @subtle !important; + } + } + + div[class*="ComposerLayoutRoot"] button.bg-composer-primary, + div[class*="ComposerLayoutRoot"] button[style*="background"], + div[class*="ComposerLayoutRoot"] button[class*="bg-blue"], + div[class*="ComposerLayoutRoot"] button[aria-label*="Voice"], + div[class*="ComposerLayoutRoot"] button[aria-label*="Send"], + div[class*="ComposerLayoutRoot"] button[aria-label*="Stop"], + div[class*="ComposerLayoutRoot"] button[data-testid*="send"], + div[class*="ComposerLayoutRoot"] button[data-testid*="stop"] { + background-color: @accent-color !important; + color: @base !important; + + svg, + path, + rect, + .text-composer-primary { + color: @base !important; + fill: currentColor !important; + } + } + + /* Codex Upsell Banner */ + aside[class*="surface-NbxhOL"] { + background-color: @surface !important; + border-color: @highlightLow !important; + border-radius: 1.25rem !important; + color: @text !important; + } + + div[data-user-message-bubble="true"], + .bg-user-message { + background-color: @surface !important; + color: @text !important; + } + nav, - aside, + aside:not([class*="surface-"]), [data-sidebar], + .sidebar-navigation, + div:has(> .sidebar-navigation), div[class*="group/sidebar"], div[class*="sidebar-container"], div[class*="bg-token-sidebar-surface"] { + background-color: @surface !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } + div[class*="gap-toolbar-action"], + .browser\:bg-surface:has(> button.button-toolbar), + button.button-toolbar { + background-color: transparent !important; + } + + button.button-toolbar:hover { + background-color: @surface !important; + } + + div:has(> .vertical-scroll-fade-mask), + div:has(> div > .vertical-scroll-fade-mask), + div:has(> div > div > .vertical-scroll-fade-mask), + [role="menu"], + [role="listbox"], + [data-radix-menu-content], + [data-radix-popper-content-wrapper] > div { + background-color: @surface !important; + background-image: none !important; + border-color: @highlightMed !important; + color: @text !important; + } + + button.menu-row-opacity:hover, + button.menu-row-opacity:focus, + button.menu-row-opacity:focus-visible, + button.menu-row-opacity[data-highlighted], + button.menu-row-opacity[data-state="open"], + [role="menuitem"]:hover, + [role="menuitem"][data-highlighted] { + background-color: @overlay !important; + background-image: none !important; + } + + div[class*="CodeBlock-"] { + background-color: transparent !important; + } + + .bg-surface-card, + .bg-surface-secondary\/20, + div[class*="visualizationSurface-"], + div[class*="visualizationLayer-"] > div[aria-hidden="true"] { + background-color: @surface !important; + background-image: none !important; + } + + div.rounded-4xl:has(div[class*="visualizationSurface-"]) { + background-color: @surface !important; + border: 1px solid fade(@highlightHigh, 40%) !important; + } + + div[class*="visualizationLayer-"] { + --learning-block-accent: @accent-color !important; + --learning-block-color-primary: @accent-color !important; + --learning-block-accent-surface: fade(@accent-color, 18%) !important; + + .bg-token-bg-secondary { + background-color: @overlay !important; + } + + .border-token-border-heavy { + border-color: @highlightHigh !important; + } + + .border-\[var\(--learning-block-accent\)\], + .border-\[var\(--learning-block-color-primary\)\] { + border-color: @accent-color !important; + } + + .bg-\[var\(--learning-block-accent-surface\)\] { + background-color: fade(@accent-color, 18%) !important; + } + } + + div[class*="CodeSurface-"] { + background-color: @surface !important; + background-image: none !important; + border-color: @highlightLow !important; + border-radius: 1.25rem !important; + overflow: hidden !important; + + &, + * { + --surface: @surface !important; + --color-surface: @surface !important; + --code-block-surface: @surface !important; + --main-surface-secondary: @surface !important; + } + + > div, + div[class*="InlineCodePane-"], + div[class*="Viewer-"], + div[class*="Scrollport-"], + div[class*="ViewerContent-"], + pre, + code { + background-color: @surface !important; + background-image: none !important; + border: none !important; + } + } + + /* Hide Upsells & Hide AI Disclaimer */ + & when (@hideUpsells = 1) { + div[class*="container-C1xTCG"], + aside[class*="surface-NbxhOL"], + div:has(> aside[class*="surface-"]), + a[href*="#pricing"], + button[data-testid*="upgrade"], + div[data-testid*="upsell"] { + display: none !important; + } + } + + & when (@hideDisclaimer = 1) { + div.text-codex-description[data-markdown-copy="exclude"], + div[class*="text-codex-description"][data-markdown-copy="exclude"], + div.sticky.bottom-0 > div.text-center.text-xs { + display: none !important; + } + } + + /* Monospace Font for Code Blocks */ pre { background-color: transparent !important; --code-block-surface: transparent !important; @@ -167,8 +548,11 @@ } pre, + pre *, pre code, + pre code *, .cm-editor, + .cm-editor *, .cm-scroller, .cm-content, .cm-line, @@ -226,6 +610,8 @@ color: @text !important; font-family: @font-stack !important; font-size: 0.9em !important; + padding: 0.15em 0.35em !important; + border-radius: 0.3em !important; } code[class*="language-"], @@ -267,20 +653,27 @@ background-color: fade(@highlightHigh, 30%) !important; } + div[class*="CodeSurface-"], + pre, pre code, .cm-editor, .cm-content, .cm-line, .light\:cm-light, .dark\:cm-light { + /* Comments */ .ͼe, .ͼt, span.ͼe, span.ͼt, - span[class*="comment"] { + span[class*="comment"], + span[class*="Comment-"], + .text-codex-syntax-comment, + span[class*="codex-syntax-comment"] { color: @muted !important; } + /* Tags & Preprocessors */ .ͼf, .ͼu, .ͼ13, @@ -290,20 +683,37 @@ span.ͼ13, span.ͼd, span[class*="preprocessor"], - span[class*="tag"] { + span[class*="Preprocessor-"], + span[class*="tag"], + span[class*="Tag-"], + .text-codex-syntax-name, + .text-codex-syntax-tag, + .text-codex-syntax-meta, + .text-codex-syntax-preprocessor, + span[class*="codex-syntax-name"], + span[class*="codex-syntax-tag"], + span[class*="codex-syntax-meta"], + span[class*="codex-syntax-preprocessor"] { color: @pine !important; } + /* Keywords */ .ͼg, .ͼv, .ͼb, span.ͼg, span.ͼv, span.ͼb, - span[class*="keyword"] { + span[class*="keyword"], + span[class*="Keyword-"], + .text-codex-syntax-keyword, + .text-codex-syntax-builtin, + span[class*="codex-syntax-keyword"], + span[class*="codex-syntax-builtin"] { color: if(@flavor = dawn, @pine, @foam) !important; } + /* Functions, Identifiers, Types, Classes, Primitives */ .ͼl, .ͼ11, .ͼc, @@ -311,22 +721,43 @@ span.ͼ11, span.ͼc, span[class*="function"], + span[class*="Function-"], span[class*="type"], + span[class*="Type-"], span[class*="class-name"], - span[class*="primitive"] { + span[class*="primitive"], + .text-codex-syntax-variable, + .text-codex-syntax-function, + .text-codex-syntax-title, + .text-codex-syntax-type, + .text-codex-syntax-class, + .text-codex-syntax-entity, + span[class*="codex-syntax-variable"], + span[class*="codex-syntax-function"], + span[class*="codex-syntax-title"], + span[class*="codex-syntax-type"], + span[class*="codex-syntax-class"], + span[class*="codex-syntax-entity"] { color: @iris !important; } + /* Strings & Regex */ .ͼk, .ͼz, .ͼa, span.ͼk, span.ͼz, span.ͼa, - span[class*="string"] { + span[class*="string"], + span[class*="String-"], + .text-codex-syntax-string, + .text-codex-syntax-regexp, + span[class*="codex-syntax-string"], + span[class*="codex-syntax-regexp"] { color: @rose !important; } + /* Numbers, Booleans, Literals, Constants */ .ͼj, .ͼy, .ͼ10, @@ -336,26 +767,50 @@ span.ͼ10, span.ͼh, span[class*="number"], + span[class*="Number-"], span[class*="boolean"], - span[class*="literal"] { + span[class*="Boolean-"], + span[class*="literal"], + span[class*="Literal-"], + .text-codex-syntax-number, + .text-codex-syntax-literal, + .text-codex-syntax-boolean, + .text-codex-syntax-constant, + span[class*="codex-syntax-number"], + span[class*="codex-syntax-literal"], + span[class*="codex-syntax-boolean"], + span[class*="codex-syntax-constant"] { color: @love !important; } + /* Properties, Attributes, Operators, Punctuation */ .ͼm, .ͼ12, span.ͼm, span.ͼ12, span[class*="attribute"], span[class*="property"], - span[class*="variable"], span[class*="operator"], - span[class*="punctuation"] { + span[class*="Operator-"], + span[class*="punctuation"], + span[class*="Punctuation-"], + .text-codex-syntax-property, + .text-codex-syntax-attribute, + .text-codex-syntax-operator, + .text-codex-syntax-punctuation, + span[class*="codex-syntax-property"], + span[class*="codex-syntax-attribute"], + span[class*="codex-syntax-operator"], + span[class*="codex-syntax-punctuation"] { color: @text !important; } + /* Escape Characters */ .ͼ15, span.ͼ15, - span[class*="escape"] { + span[class*="escape"], + .text-codex-syntax-escape, + span[class*="codex-syntax-escape"] { color: @subtle !important; } } @@ -396,6 +851,9 @@ .bg-token-bg-primary { background-color: var(--bg-primary); } + .bg-token-bg-secondary { + background-color: @overlay !important; + } .bg-token-main-surface-primary { background-color: var(--main-surface-primary); } @@ -422,7 +880,10 @@ .__tailwind-utility(green, 600, @pine); .__tailwind-utility(red, 500, @love); + .__tailwind-utility(blue, 300, @accent-color); .__tailwind-utility(blue, 400, @accent-color); + .__tailwind-utility(blue, 500, @accent-color); + .__tailwind-utility(blue, 600, @accent-color); .__tailwind-utility(gray, 600, @highlightMed); .__tailwind-utility(gray, 500, @muted);