Last active
March 30, 2026 22:33
-
-
Save aaclarker/469aa663b7c95296ea337d8ba6ba4855 to your computer and use it in GitHub Desktop.
Rosé Pine Beeper Theme
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Rosé Pine inspired CSS theme for Beeper messaging application | |
| This file will be injected as a <style> tag | |
| After making your changes, type "Reload custom CSS" in the command bar | |
| To open dev tools, open the command bar and type "open console" | |
| */ | |
| :root, | |
| html { | |
| --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", | |
| "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", | |
| Twemoji, sans-serif !important; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| /* Rose Pine Moon palette */ | |
| --rp-base: #232136; | |
| --rp-base-rgb: 35, 33, 54; | |
| --rp-surface: #2a273f; | |
| --rp-surface-rgb: 42, 39, 63; | |
| --rp-overlay: #393552; | |
| --rp-overlay-rgb: 57, 53, 82; | |
| --rp-muted: #6e6a86; | |
| --rp-muted-rgb: 110, 106, 134; | |
| --rp-subtle: #908caa; | |
| --rp-subtle-rgb: 144, 140, 170; | |
| --rp-text: #e0def4; | |
| --rp-text-rgb: 224, 222, 244; | |
| --rp-love: #eb6f92; | |
| --rp-love-rgb: 235, 111, 146; | |
| --rp-gold: #f6c177; | |
| --rp-gold-rgb: 246, 193, 119; | |
| --rp-rose: #ea9a97; | |
| --rp-rose-rgb: 234, 154, 151; | |
| --rp-pine: #3e8fb0; | |
| --rp-pine-rgb: 62, 143, 176; | |
| --rp-foam: #9ccfd8; | |
| --rp-foam-rgb: 156, 207, 216; | |
| --rp-iris: #c4a7e7; | |
| --rp-iris-rgb: 196, 167, 231; | |
| /* Core app tokens */ | |
| --color-bg: var(--rp-base); | |
| --color-bg-rgb: var(--rp-base-rgb); | |
| --color-fg: var(--rp-text); | |
| --color-fg-rgb: var(--rp-text-rgb); | |
| --color-primary: var(--rp-iris); | |
| --color-primary-rgb: var(--rp-iris-rgb); | |
| --color-gray-rgb: var(--rp-muted-rgb); | |
| /* Gray ramp remapped to Rose Pine neutrals */ | |
| --color-base-gray-10: #1d1b2d; | |
| --color-base-gray-10-rgb: 29, 27, 45; | |
| --color-base-gray-20: var(--rp-base); | |
| --color-base-gray-20-rgb: var(--rp-base-rgb); | |
| --color-base-gray-30: var(--rp-surface); | |
| --color-base-gray-30-rgb: var(--rp-surface-rgb); | |
| --color-base-gray-40: var(--rp-overlay); | |
| --color-base-gray-40-rgb: var(--rp-overlay-rgb); | |
| --color-base-gray-50: #44415f; | |
| --color-base-gray-50-rgb: 68, 65, 95; | |
| --color-base-gray-60: #56526e; | |
| --color-base-gray-60-rgb: 86, 82, 110; | |
| --color-base-gray-70: #6e6a86; | |
| --color-base-gray-70-rgb: 110, 106, 134; | |
| --color-base-gray-80: #7d7896; | |
| --color-base-gray-80-rgb: 125, 120, 150; | |
| --color-base-gray-90: #908caa; | |
| --color-base-gray-90-rgb: var(--rp-subtle-rgb); | |
| --color-base-gray-100: #aaa6c4; | |
| --color-base-gray-100-rgb: 170, 166, 196; | |
| --color-base-gray-110: #c8c4df; | |
| --color-base-gray-110-rgb: 200, 196, 223; | |
| --color-base-gray-120: var(--rp-text); | |
| --color-base-gray-120-rgb: var(--rp-text-rgb); | |
| --color-base-white: #f6f2ff; | |
| --color-base-white-rgb: 246, 242, 255; | |
| --color-base-black: #0f0d1a; | |
| --color-base-black-rgb: 15, 13, 26; | |
| /* Accent ramp */ | |
| --color-base-system-blue-80: var(--rp-pine); | |
| --color-base-system-blue-80-rgb: var(--rp-pine-rgb); | |
| --color-base-system-blue-90: var(--rp-iris); | |
| --color-base-system-blue-90-rgb: var(--rp-iris-rgb); | |
| --color-base-system-blue-100: var(--rp-foam); | |
| --color-base-system-blue-100-rgb: var(--rp-foam-rgb); | |
| --color-base-system-blue-110: #d6bdf1; | |
| --color-base-system-blue-110-rgb: 214, 189, 241; | |
| /* Surfaces */ | |
| --color-background-app: var(--color-base-gray-10); | |
| --color-background-app-weak: var(--color-base-gray-20); | |
| --color-background-elevated: var(--color-base-gray-30); | |
| --color-background-elevated-hover: var(--color-base-gray-40); | |
| --color-background-grouped: var(--color-base-gray-20); | |
| --color-background-grouped-weak: #1b1a2b; | |
| --color-background-object: var(--color-base-gray-30); | |
| --color-background-sidebar: rgba(var(--rp-base-rgb), 0.88); | |
| --color-background-sidebar-opaque: #1b1a2b; | |
| --color-background-sidebar-thread-focus: rgba(var(--rp-iris-rgb), 0.12); | |
| --color-background-sidebar-thread-selected: rgba(var(--rp-iris-rgb), 0.22); | |
| --color-background-sidebar-thread-selected-unfocused: rgba( | |
| var(--rp-overlay-rgb), | |
| 0.92 | |
| ); | |
| --color-background-header-right: rgba(var(--rp-surface-rgb), 0.88); | |
| --color-background-header-right-opaque: var(--rp-surface); | |
| --color-background-menu: rgba(var(--rp-surface-rgb), 0.95); | |
| --color-background-menu-opaque: var(--rp-surface); | |
| --color-background-menu-option-hover: rgba(var(--rp-iris-rgb), 0.2); | |
| --color-background-input: rgba(var(--rp-base-rgb), 0.9); | |
| --color-background-kbd: rgba(var(--rp-overlay-rgb), 0.9); | |
| --color-background-tag: rgba(var(--rp-iris-rgb), 0.18); | |
| --color-background-scrollbar: rgba(var(--rp-subtle-rgb), 0.35); | |
| --color-background-scrollbar-hover: rgba(var(--rp-foam-rgb), 0.45); | |
| /* Selection and message states */ | |
| --color-background-selected-primary: rgba(var(--rp-iris-rgb), 0.22); | |
| --color-background-selected-secondary: rgba(var(--rp-overlay-rgb), 0.7); | |
| --color-background-message-active: rgba(var(--rp-overlay-rgb), 0.48); | |
| --color-background-message-bubble-received: #2d2a45; | |
| --color-background-message-bubble-sent: #c4a7e7; | |
| --color-background-message-bubble-linked: rgba(var(--rp-overlay-rgb), 0.5); | |
| /* Buttons */ | |
| --color-background-button-primary: var(--rp-iris); | |
| --color-background-button-primary-active: var(--rp-foam); | |
| --color-background-button-primary-disabled: rgba(var(--rp-muted-rgb), 0.45); | |
| --color-background-button-secondary: rgba(var(--rp-overlay-rgb), 0.7); | |
| --color-background-button-secondary-active: rgba(var(--rp-overlay-rgb), 0.95); | |
| --color-background-button-secondary-disabled: rgba(var(--rp-muted-rgb), 0.28); | |
| --color-background-button-translucent: rgba(var(--rp-text-rgb), 0.08); | |
| --color-background-button-translucent-active: rgba(var(--rp-text-rgb), 0.14); | |
| --color-background-button-translucent-disabled: rgba(var(--rp-text-rgb), 0.04); | |
| /* Borders */ | |
| --color-border-neutrals: rgba(var(--rp-subtle-rgb), 0.3); | |
| --color-border-neutrals-strong: rgba(var(--rp-foam-rgb), 0.28); | |
| --color-border-neutrals-weak: rgba(var(--rp-subtle-rgb), 0.18); | |
| --color-border-input: rgba(var(--rp-subtle-rgb), 0.32); | |
| --color-border-input-active: rgba(var(--rp-foam-rgb), 0.55); | |
| --color-border-translucent: rgba(var(--rp-text-rgb), 0.08); | |
| --color-border-translucent-strong: rgba(var(--rp-text-rgb), 0.12); | |
| --color-border-translucent-strongest: rgba(var(--rp-text-rgb), 0.25); | |
| --color-border-translucent-weak: rgba(var(--rp-text-rgb), 0.04); | |
| /* Text and icons */ | |
| --color-text-neutrals: var(--rp-text); | |
| --color-text-neutrals-subtle: var(--rp-subtle); | |
| --color-text-neutrals-weak: #b7b2d0; | |
| --color-text-on-accent: #232136; | |
| --color-text-on-accent-weak: rgba(var(--rp-base-rgb), 0.72); | |
| --color-text-translucent: rgba(var(--rp-text-rgb), 0.92); | |
| --color-text-translucent-subtle: rgba(var(--rp-text-rgb), 0.58); | |
| --color-text-translucent-weak: rgba(var(--rp-text-rgb), 0.75); | |
| --color-icon-neutrals: #b7b2d0; | |
| --color-icon-neutrals-strong: var(--rp-text); | |
| --color-icon-neutrals-subtle: var(--rp-muted); | |
| --color-icon-neutrals-weak: var(--rp-subtle); | |
| --color-icon-on-accent: rgba(var(--rp-base-rgb), 0.76); | |
| --color-icon-on-accent-strong: rgba(var(--rp-base-rgb), 0.92); | |
| --color-icon-on-accent-weak: rgba(var(--rp-base-rgb), 0.42); | |
| --color-icon-translucent: rgba(var(--rp-text-rgb), 0.64); | |
| --color-icon-translucent-strong: rgba(var(--rp-text-rgb), 0.9); | |
| --color-icon-translucent-subtle: rgba(var(--rp-text-rgb), 0.34); | |
| --color-icon-translucent-weak: rgba(var(--rp-text-rgb), 0.48); | |
| /* Misc */ | |
| --color-overlay-modal: rgba(var(--color-base-black-rgb), 0.6); | |
| --color-transparent: rgba(var(--color-base-black-rgb), 0); | |
| --left-pane-bg: linear-gradient( | |
| 180deg, | |
| rgba(var(--rp-base-rgb), 0.98) 0%, | |
| rgba(var(--rp-surface-rgb), 0.96) 100% | |
| ); | |
| --right-pane-bg: linear-gradient( | |
| 180deg, | |
| rgba(var(--rp-base-rgb), 1) 0%, | |
| rgba(var(--rp-surface-rgb), 0.98) 100% | |
| ); | |
| /* Legacy compatibility */ | |
| --error-color: var(--rp-love); | |
| --warning-color: var(--rp-gold); | |
| --snoozed-indicator-bg: var(--rp-gold); | |
| --error-indicator-bg: var(--rp-love); | |
| --message-snoozed-border: var(--rp-gold); | |
| --message-errored-beacon: var(--rp-love); | |
| --sms-sent-bg: var(--rp-pine); | |
| --compose-message-accent: var(--rp-subtle); | |
| --audio-bar-button: var(--rp-text); | |
| --audio-bar-preview-progress: var(--rp-foam); | |
| --audio-bar-bg: rgba(var(--rp-overlay-rgb), 0.8); | |
| --audio-bar-border: rgba(var(--rp-subtle-rgb), 0.28); | |
| --key-border: rgba(var(--rp-subtle-rgb), 0.45); | |
| --key-bg: linear-gradient( | |
| to bottom, | |
| rgba(var(--rp-overlay-rgb), 1), | |
| rgba(var(--rp-surface-rgb), 1) | |
| ); | |
| --color-key-bottom-bg: rgba(var(--rp-muted-rgb), 0.45); | |
| --prefs-well: rgba(var(--rp-overlay-rgb), 0.38); | |
| } | |
| body { | |
| background: var(--right-pane-bg); | |
| color: var(--color-text-neutrals); | |
| -webkit-font-smoothing: auto; | |
| } | |
| .main-window, | |
| .panes, | |
| .compose-message-container > *, | |
| .conversation, | |
| .subheader-content { | |
| background: transparent; | |
| } | |
| .left-wrapper, | |
| .sidebar, | |
| .filters-pane, | |
| .thread-list, | |
| .left { | |
| background: var(--left-pane-bg) !important; | |
| } | |
| .right-wrapper, | |
| .right, | |
| .main-window .right-wrapper { | |
| background: var(--right-pane-bg) !important; | |
| } | |
| .right-pane-header.right-pane-header-thread, | |
| .right-wrapper .right.right-thread .right-pane-header, | |
| .right-wrapper .right.right-prefs .right-pane-header, | |
| .main-window .right .right-pane-header { | |
| background: rgba(var(--rp-surface-rgb), 0.92) !important; | |
| border-bottom: 1px solid var(--color-border-neutrals-weak); | |
| box-shadow: none; | |
| } | |
| .thread-header, | |
| .subheader-content { | |
| backdrop-filter: blur(16px); | |
| } | |
| .sidebar-thread.isSelected > section, | |
| .ThreadListItem-module__wrapper.ThreadListItem-module__isSelected { | |
| background: rgba(var(--rp-iris-rgb), 0.2) !important; | |
| border-color: rgba(var(--rp-foam-rgb), 0.2); | |
| } | |
| .sidebar-thread.isSelected > section:before { | |
| background: rgba(var(--rp-foam-rgb), 0.55); | |
| } | |
| .sidebar-thread:hover > section, | |
| .ThreadListItem-module__wrapper:hover { | |
| background: rgba(var(--rp-overlay-rgb), 0.62) !important; | |
| } | |
| .command.command.highlighted, | |
| .command.command.highlighted .command-children, | |
| .command.command.highlighted .command-label { | |
| background: rgba(var(--rp-iris-rgb), 0.22) !important; | |
| } | |
| .linked-message { | |
| color: inherit !important; | |
| } | |
| .bubble-mode .message-contents { | |
| background: rgba(var(--rp-overlay-rgb), 0.92); | |
| border: 1px solid rgba(var(--rp-foam-rgb), 0.18); | |
| border-radius: 16px 16px 16px 8px; | |
| box-shadow: | |
| inset 0 1px 0 rgba(var(--rp-text-rgb), 0.03), | |
| 0 10px 24px rgba(var(--color-base-black-rgb), 0.18); | |
| } | |
| .bubble-mode .is-sender .message-contents { | |
| background: var(--rp-iris); | |
| border: 1px solid rgba(var(--rp-foam-rgb), 0.28); | |
| border-radius: 16px 16px 8px 16px; | |
| box-shadow: 0 10px 28px rgba(var(--rp-iris-rgb), 0.14); | |
| } | |
| .bubble-mode | |
| .is-sender:not(.type-action):not(.is-deleted) | |
| .message-text-container, | |
| .bubble-mode .is-sender .MessageSender-module__senderName, | |
| .bubble-mode .is-sender footer { | |
| color: var(--color-text-on-accent); | |
| } | |
| .message-reactions.bubble > .message-reaction-container { | |
| background: rgba(var(--rp-overlay-rgb), 0.86); | |
| border: 1px solid rgba(var(--rp-subtle-rgb), 0.22); | |
| } | |
| .message-reactions.bubble | |
| > .message-reaction-container.MessageReactions-module__isOwnReaction { | |
| border-color: rgba(var(--rp-foam-rgb), 0.45); | |
| background: rgba(var(--rp-iris-rgb), 0.14); | |
| } | |
| .message-container:hover { | |
| border-left-color: rgba(var(--rp-foam-rgb), 0.45); | |
| } | |
| .message-container.is-selected { | |
| background: rgba(var(--rp-overlay-rgb), 0.36); | |
| border-right-color: var(--rp-iris); | |
| } | |
| .date div { | |
| background: rgba(var(--rp-surface-rgb), 0.9); | |
| border: 1px solid rgba(var(--rp-subtle-rgb), 0.18); | |
| color: var(--color-text-neutrals-weak); | |
| } | |
| .ComposeMessage-module__input { | |
| background: linear-gradient( | |
| 180deg, | |
| rgba(var(--rp-base-rgb), 0.94) 0%, | |
| rgba(var(--rp-surface-rgb), 0.94) 100% | |
| ); | |
| border: 1px solid var(--color-border-input); | |
| border-radius: 16px 16px 10px 16px; | |
| color: var(--color-text-neutrals); | |
| box-shadow: inset 0 1px 0 rgba(var(--rp-text-rgb), 0.03); | |
| } | |
| .ComposeMessage-module__input:has(.ProseMirror-focused) { | |
| border-color: var(--color-border-input-active); | |
| box-shadow: 0 0 0 3px rgba(var(--rp-foam-rgb), 0.12); | |
| } | |
| [class*="ComposeMessage-module__textArea"] { | |
| caret-color: var(--rp-foam); | |
| } | |
| .ComposeMessage-module__textArea, | |
| .ProseMirror, | |
| .ProseMirror p, | |
| .ComposeMessage-module__placeholder { | |
| color: var(--color-text-neutrals); | |
| } | |
| .BrandSendButton-module__container, | |
| .styled-inputs button.primary, | |
| button.primary { | |
| background: linear-gradient( | |
| 180deg, | |
| rgba(var(--rp-iris-rgb), 1) 0%, | |
| rgba(var(--rp-pine-rgb), 0.95) 100% | |
| ) !important; | |
| color: var(--color-text-on-accent) !important; | |
| border: none; | |
| box-shadow: 0 10px 24px rgba(var(--rp-pine-rgb), 0.18); | |
| } | |
| .BrandSendButton-module__container:disabled { | |
| background: rgba(var(--rp-muted-rgb), 0.4) !important; | |
| box-shadow: none; | |
| } | |
| .BrandHiddenControls-module__toggle, | |
| .ComposeMessage-module__textAreaButtons .btn-icon, | |
| .styled-inputs button:not(.primary) { | |
| background: rgba(var(--rp-overlay-rgb), 0.6); | |
| color: var(--color-icon-neutrals); | |
| border: 1px solid rgba(var(--rp-subtle-rgb), 0.16); | |
| } | |
| .BrandHiddenControls-module__toggle:hover, | |
| .ComposeMessage-module__textAreaButtons .btn-icon:hover, | |
| .styled-inputs button:not(.primary):hover { | |
| background: rgba(var(--rp-iris-rgb), 0.14); | |
| color: var(--color-icon-neutrals-strong); | |
| } | |
| .styled-inputs input, | |
| .styled-inputs textarea, | |
| input, | |
| textarea, | |
| select { | |
| background: rgba(var(--rp-base-rgb), 0.9); | |
| color: var(--color-text-neutrals); | |
| border-color: rgba(var(--rp-subtle-rgb), 0.2); | |
| } | |
| .styled-inputs input:focus, | |
| .styled-inputs textarea:focus, | |
| input:focus, | |
| textarea:focus, | |
| select:focus { | |
| border-color: rgba(var(--rp-foam-rgb), 0.55); | |
| outline: none; | |
| } | |
| .feedback-widget .feedback-btn, | |
| .feedback-emoji-picker button, | |
| .feedback-emoji-picker .feedback-emoji-unselected, | |
| kbd { | |
| background: rgba(var(--rp-overlay-rgb), 0.82); | |
| border-color: rgba(var(--rp-subtle-rgb), 0.18); | |
| color: var(--color-text-neutrals); | |
| } | |
| .ScrollToBottom-module__scrollToBottom { | |
| background: rgba(var(--rp-surface-rgb), 0.92); | |
| border: 1px solid rgba(var(--rp-subtle-rgb), 0.22); | |
| color: var(--color-icon-neutrals-strong); | |
| box-shadow: 0 10px 24px rgba(var(--color-base-black-rgb), 0.16); | |
| } | |
| .ScrollToBottom-module__container:has( | |
| .ScrollToBottom-module__scrollButtonVisible | |
| )::after { | |
| border-color: var(--rp-foam); | |
| } | |
| [class*="BrandTooltip-module__container"], | |
| [role="tooltip"], | |
| [data-radix-popper-content-wrapper] > * { | |
| background: rgba(var(--rp-surface-rgb), 0.96) !important; | |
| color: var(--color-text-neutrals) !important; | |
| border: 1px solid rgba(var(--rp-subtle-rgb), 0.18); | |
| box-shadow: 0 18px 40px rgba(var(--color-base-black-rgb), 0.3); | |
| } | |
| .menu, | |
| .menu-option, | |
| [role="menu"], | |
| [role="dialog"] { | |
| color: var(--color-text-neutrals); | |
| } | |
| .menu-option:hover, | |
| [role="menuitem"]:hover { | |
| background: rgba(var(--rp-iris-rgb), 0.14) !important; | |
| } | |
| .thread-label, | |
| .AccountBadge-module__dot, | |
| [class*="AccountBadge-module__dot"] { | |
| background: var(--rp-foam); | |
| color: var(--rp-base); | |
| } | |
| .ThreadListItem-module__unreadCount, | |
| [class*="ThreadListItem-module__unreadCount"] { | |
| background: var(--rp-love) !important; | |
| color: var(--rp-base) !important; | |
| } | |
| body.compact-chat-list .ThreadListItem-module__unreadCount::after, | |
| body.compact-chat-list [class*="ThreadListItem-module__unreadCount"]::after { | |
| background: var(--rp-love) !important; | |
| } | |
| .custom-scrollbars ::-webkit-scrollbar { | |
| width: 12px; | |
| } | |
| .custom-scrollbars ::-webkit-scrollbar-thumb { | |
| border: 3px solid transparent; | |
| background-clip: padding-box; | |
| border-radius: 20px; | |
| background-color: var(--color-background-scrollbar); | |
| min-height: 40px; | |
| } | |
| .custom-scrollbars ::-webkit-scrollbar-thumb:hover { | |
| background-color: var(--color-background-scrollbar-hover); | |
| } | |
| .custom-scrollbars ::-webkit-scrollbar-button { | |
| width: 0; | |
| height: 0; | |
| display: none; | |
| } | |
| .custom-scrollbars ::-webkit-scrollbar-corner { | |
| background-color: transparent; | |
| } | |
| .no-transparency, | |
| .reduce-transparency { | |
| --left-pane-bg: var(--color-background-sidebar-opaque); | |
| --color-background-header-right: var(--color-background-header-right-opaque); | |
| --color-background-menu: var(--color-background-menu-opaque); | |
| } | |
| } | |
| @media (prefers-color-scheme: light) { | |
| :root { | |
| /* Rose Pine Dawn palette */ | |
| --rp-base: #faf4ed; | |
| --rp-base-rgb: 250, 244, 237; | |
| --rp-surface: #fffaf3; | |
| --rp-surface-rgb: 255, 250, 243; | |
| --rp-overlay: #f2e9e1; | |
| --rp-overlay-rgb: 242, 233, 225; | |
| --rp-muted: #9893a5; | |
| --rp-muted-rgb: 152, 147, 165; | |
| --rp-subtle: #797593; | |
| --rp-subtle-rgb: 121, 117, 147; | |
| --rp-text: #464261; | |
| --rp-text-rgb: 70, 66, 97; | |
| --rp-love: #b4637a; | |
| --rp-love-rgb: 180, 99, 122; | |
| --rp-gold: #ea9d34; | |
| --rp-gold-rgb: 234, 157, 52; | |
| --rp-rose: #d7827e; | |
| --rp-rose-rgb: 215, 130, 126; | |
| --rp-pine: #286983; | |
| --rp-pine-rgb: 40, 105, 131; | |
| --rp-foam: #56949f; | |
| --rp-foam-rgb: 86, 148, 159; | |
| --rp-iris: #907aa9; | |
| --rp-iris-rgb: 144, 122, 169; | |
| /* Core app tokens */ | |
| --color-bg: var(--rp-base); | |
| --color-bg-rgb: var(--rp-base-rgb); | |
| --color-fg: var(--rp-text); | |
| --color-fg-rgb: var(--rp-text-rgb); | |
| --color-primary: var(--rp-iris); | |
| --color-primary-rgb: var(--rp-iris-rgb); | |
| --color-gray-rgb: var(--rp-muted-rgb); | |
| /* Gray ramp remapped to Dawn neutrals */ | |
| --color-base-gray-10: #ffffff; | |
| --color-base-gray-10-rgb: 255, 255, 255; | |
| --color-base-gray-20: var(--rp-base); | |
| --color-base-gray-20-rgb: var(--rp-base-rgb); | |
| --color-base-gray-30: var(--rp-surface); | |
| --color-base-gray-30-rgb: var(--rp-surface-rgb); | |
| --color-base-gray-40: var(--rp-overlay); | |
| --color-base-gray-40-rgb: var(--rp-overlay-rgb); | |
| --color-base-gray-50: #ece7e4; | |
| --color-base-gray-50-rgb: 236, 231, 228; | |
| --color-base-gray-60: #ddd7dd; | |
| --color-base-gray-60-rgb: 221, 215, 221; | |
| --color-base-gray-70: #cac3d1; | |
| --color-base-gray-70-rgb: 202, 195, 209; | |
| --color-base-gray-80: var(--rp-muted); | |
| --color-base-gray-80-rgb: var(--rp-muted-rgb); | |
| --color-base-gray-90: #8b86a2; | |
| --color-base-gray-90-rgb: 139, 134, 162; | |
| --color-base-gray-100: var(--rp-subtle); | |
| --color-base-gray-100-rgb: var(--rp-subtle-rgb); | |
| --color-base-gray-110: #625d7c; | |
| --color-base-gray-110-rgb: 98, 93, 124; | |
| --color-base-gray-120: var(--rp-text); | |
| --color-base-gray-120-rgb: var(--rp-text-rgb); | |
| --color-base-white: #ffffff; | |
| --color-base-white-rgb: 255, 255, 255; | |
| --color-base-black: #2b283f; | |
| --color-base-black-rgb: 43, 40, 63; | |
| /* Accent ramp */ | |
| --color-base-system-blue-80: var(--rp-pine); | |
| --color-base-system-blue-80-rgb: var(--rp-pine-rgb); | |
| --color-base-system-blue-90: var(--rp-iris); | |
| --color-base-system-blue-90-rgb: var(--rp-iris-rgb); | |
| --color-base-system-blue-100: var(--rp-foam); | |
| --color-base-system-blue-100-rgb: var(--rp-foam-rgb); | |
| --color-base-system-blue-110: #7c6f95; | |
| --color-base-system-blue-110-rgb: 124, 111, 149; | |
| /* Surfaces */ | |
| --color-background-app: #ffffff; | |
| --color-background-app-weak: #f8f7fb; | |
| --color-background-elevated: #ffffff; | |
| --color-background-elevated-hover: #f4f1f7; | |
| --color-background-grouped: #faf8fc; | |
| --color-background-grouped-weak: #f3f0f6; | |
| --color-background-object: #fffdfc; | |
| --color-background-sidebar: rgba(252, 250, 255, 0.96); | |
| --color-background-sidebar-opaque: #f4f1f8; | |
| --color-background-sidebar-thread-focus: rgba(var(--rp-iris-rgb), 0.11); | |
| --color-background-sidebar-thread-selected: rgba(var(--rp-iris-rgb), 0.18); | |
| --color-background-sidebar-thread-selected-unfocused: rgba( | |
| var(--rp-overlay-rgb), | |
| 0.92 | |
| ); | |
| --color-background-header-right: rgba(255, 255, 255, 0.92); | |
| --color-background-header-right-opaque: #ffffff; | |
| --color-background-menu: rgba(255, 255, 255, 0.97); | |
| --color-background-menu-opaque: #ffffff; | |
| --color-background-menu-option-hover: rgba(var(--rp-iris-rgb), 0.12); | |
| --color-background-input: rgba(255, 255, 255, 0.98); | |
| --color-background-kbd: rgba(244, 241, 247, 0.95); | |
| --color-background-tag: rgba(var(--rp-iris-rgb), 0.12); | |
| --color-background-scrollbar: rgba(var(--rp-muted-rgb), 0.28); | |
| --color-background-scrollbar-hover: rgba(var(--rp-foam-rgb), 0.38); | |
| /* Selection and message states */ | |
| --color-background-selected-primary: rgba(var(--rp-iris-rgb), 0.18); | |
| --color-background-selected-secondary: rgba(233, 228, 239, 0.92); | |
| --color-background-message-active: rgba(237, 232, 242, 0.62); | |
| --color-background-message-bubble-received: #ffffff; | |
| --color-background-message-bubble-sent: #fef8f5; | |
| --color-background-message-bubble-linked: rgba(237, 232, 242, 0.78); | |
| /* Buttons */ | |
| --color-background-button-primary: var(--rp-iris); | |
| --color-background-button-primary-active: var(--rp-pine); | |
| --color-background-button-primary-disabled: rgba(var(--rp-muted-rgb), 0.35); | |
| --color-background-button-secondary: rgba(var(--rp-overlay-rgb), 0.75); | |
| --color-background-button-secondary-active: rgba(var(--rp-overlay-rgb), 0.98); | |
| --color-background-button-secondary-disabled: rgba(var(--rp-overlay-rgb), 0.45); | |
| --color-background-button-translucent: rgba(var(--rp-text-rgb), 0.06); | |
| --color-background-button-translucent-active: rgba(var(--rp-text-rgb), 0.1); | |
| --color-background-button-translucent-disabled: rgba(var(--rp-text-rgb), 0.03); | |
| /* Borders */ | |
| --color-border-neutrals: rgba(var(--rp-subtle-rgb), 0.3); | |
| --color-border-neutrals-strong: rgba(var(--rp-pine-rgb), 0.3); | |
| --color-border-neutrals-weak: rgba(var(--rp-subtle-rgb), 0.18); | |
| --color-border-input: rgba(var(--rp-subtle-rgb), 0.3); | |
| --color-border-input-active: rgba(var(--rp-foam-rgb), 0.52); | |
| --color-border-translucent: rgba(var(--rp-text-rgb), 0.08); | |
| --color-border-translucent-strong: rgba(var(--rp-text-rgb), 0.12); | |
| --color-border-translucent-strongest: rgba(var(--rp-text-rgb), 0.22); | |
| --color-border-translucent-weak: rgba(var(--rp-text-rgb), 0.04); | |
| /* Text and icons */ | |
| --color-text-neutrals: var(--rp-text); | |
| --color-text-neutrals-subtle: var(--rp-subtle); | |
| --color-text-neutrals-weak: #625d7c; | |
| --color-text-on-accent: #faf4ed; | |
| --color-text-on-accent-weak: rgba(var(--rp-base-rgb), 0.78); | |
| --color-text-translucent: rgba(var(--rp-text-rgb), 0.92); | |
| --color-text-translucent-subtle: rgba(var(--rp-text-rgb), 0.58); | |
| --color-text-translucent-weak: rgba(var(--rp-text-rgb), 0.72); | |
| --color-icon-neutrals: #6f6a8a; | |
| --color-icon-neutrals-strong: var(--rp-text); | |
| --color-icon-neutrals-subtle: var(--rp-muted); | |
| --color-icon-neutrals-weak: var(--rp-subtle); | |
| --color-icon-on-accent: rgba(var(--rp-base-rgb), 0.82); | |
| --color-icon-on-accent-strong: rgba(var(--rp-base-rgb), 0.94); | |
| --color-icon-on-accent-weak: rgba(var(--rp-base-rgb), 0.48); | |
| --color-icon-translucent: rgba(var(--rp-text-rgb), 0.62); | |
| --color-icon-translucent-strong: rgba(var(--rp-text-rgb), 0.88); | |
| --color-icon-translucent-subtle: rgba(var(--rp-text-rgb), 0.34); | |
| --color-icon-translucent-weak: rgba(var(--rp-text-rgb), 0.46); | |
| /* Misc */ | |
| --color-overlay-modal: rgba(var(--rp-text-rgb), 0.18); | |
| --color-transparent: rgba(var(--color-base-black-rgb), 0); | |
| --left-pane-bg: linear-gradient( | |
| 180deg, | |
| rgba(255, 255, 255, 0.98) 0%, | |
| rgba(247, 244, 251, 1) 100% | |
| ); | |
| --right-pane-bg: linear-gradient( | |
| 180deg, | |
| rgba(255, 255, 255, 1) 0%, | |
| rgba(250, 248, 252, 1) 100% | |
| ); | |
| /* Legacy compatibility */ | |
| --error-color: var(--rp-love); | |
| --warning-color: var(--rp-gold); | |
| --snoozed-indicator-bg: var(--rp-gold); | |
| --error-indicator-bg: var(--rp-love); | |
| --message-snoozed-border: var(--rp-gold); | |
| --message-errored-beacon: var(--rp-love); | |
| --sms-sent-bg: var(--rp-pine); | |
| --compose-message-accent: var(--rp-subtle); | |
| --audio-bar-button: var(--rp-text); | |
| --audio-bar-preview-progress: var(--rp-foam); | |
| --audio-bar-bg: rgba(var(--rp-overlay-rgb), 0.88); | |
| --audio-bar-border: rgba(var(--rp-subtle-rgb), 0.22); | |
| --key-border: rgba(var(--rp-subtle-rgb), 0.32); | |
| --key-bg: linear-gradient( | |
| to bottom, | |
| rgba(var(--color-base-white-rgb), 1), | |
| rgba(var(--rp-overlay-rgb), 1) | |
| ); | |
| --color-key-bottom-bg: rgba(var(--rp-muted-rgb), 0.28); | |
| --prefs-well: rgba(var(--rp-overlay-rgb), 0.55); | |
| } | |
| body { | |
| background: var(--right-pane-bg); | |
| color: var(--color-text-neutrals); | |
| -webkit-font-smoothing: auto; | |
| } | |
| .main-window, | |
| .panes, | |
| .compose-message-container > *, | |
| .conversation, | |
| .subheader-content { | |
| background: transparent; | |
| } | |
| .left-wrapper, | |
| .sidebar, | |
| .filters-pane, | |
| .thread-list, | |
| .left { | |
| background: var(--left-pane-bg) !important; | |
| } | |
| .right-wrapper, | |
| .right, | |
| .main-window .right-wrapper { | |
| background: var(--right-pane-bg) !important; | |
| } | |
| .right-pane-header.right-pane-header-thread, | |
| .right-wrapper .right.right-thread .right-pane-header, | |
| .right-wrapper .right.right-prefs .right-pane-header, | |
| .main-window .right .right-pane-header { | |
| background: rgba(255, 255, 255, 0.92) !important; | |
| border-bottom: 1px solid var(--color-border-neutrals-weak); | |
| box-shadow: none; | |
| } | |
| .thread-header, | |
| .subheader-content { | |
| backdrop-filter: blur(16px); | |
| } | |
| .sidebar-thread.isSelected > section, | |
| .ThreadListItem-module__wrapper.ThreadListItem-module__isSelected { | |
| background: rgba(var(--rp-iris-rgb), 0.16) !important; | |
| border-color: rgba(var(--rp-foam-rgb), 0.22); | |
| } | |
| .sidebar-thread.isSelected > section:before { | |
| background: rgba(var(--rp-foam-rgb), 0.72); | |
| } | |
| .sidebar-thread:hover > section, | |
| .ThreadListItem-module__wrapper:hover { | |
| background: rgba(240, 235, 245, 0.86) !important; | |
| } | |
| .command.command.highlighted, | |
| .command.command.highlighted .command-children, | |
| .command.command.highlighted .command-label { | |
| background: rgba(var(--rp-iris-rgb), 0.16) !important; | |
| } | |
| .linked-message { | |
| color: inherit !important; | |
| } | |
| .bubble-mode .message-contents { | |
| background: rgba(var(--color-base-white-rgb), 0.98); | |
| border: 1px solid rgba(var(--rp-subtle-rgb), 0.22); | |
| border-radius: 16px 16px 16px 8px; | |
| box-shadow: | |
| inset 0 1px 0 rgba(var(--color-base-white-rgb), 0.72), | |
| 0 10px 24px rgba(var(--rp-text-rgb), 0.1); | |
| } | |
| .bubble-mode .is-sender .message-contents { | |
| background: #fef8f5; | |
| border: 1px solid rgba(var(--rp-pine-rgb), 0.18); | |
| border-radius: 16px 16px 8px 16px; | |
| box-shadow: 0 8px 20px rgba(var(--rp-iris-rgb), 0.14); | |
| } | |
| .bubble-mode | |
| .is-sender:not(.type-action):not(.is-deleted) | |
| .message-text-container, | |
| .bubble-mode .is-sender .MessageSender-module__senderName, | |
| .bubble-mode .is-sender footer { | |
| color: var(--color-text-on-accent); | |
| } | |
| .message-reactions.bubble > .message-reaction-container { | |
| background: rgba(var(--color-base-white-rgb), 0.98); | |
| border: 1px solid rgba(var(--rp-subtle-rgb), 0.2); | |
| } | |
| .message-reactions.bubble | |
| > .message-reaction-container.MessageReactions-module__isOwnReaction { | |
| border-color: rgba(var(--rp-foam-rgb), 0.36); | |
| background: rgba(var(--rp-iris-rgb), 0.1); | |
| } | |
| .message-seen-by.redacted-region, | |
| .message-seen-by.redacted-region::before, | |
| .message-seen-by.redacted-region::after, | |
| .message-seen-by.redacted-region * { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| background-image: none !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| color: var(--rp-muted) !important; | |
| } | |
| .message-container:hover { | |
| border-left-color: rgba(var(--rp-foam-rgb), 0.36); | |
| } | |
| .message-container.is-selected { | |
| background: rgba(237, 232, 242, 0.72); | |
| border-right-color: var(--rp-iris); | |
| } | |
| .date div { | |
| background: rgba(var(--color-base-white-rgb), 0.98); | |
| border: 1px solid rgba(var(--rp-subtle-rgb), 0.18); | |
| color: var(--color-text-neutrals-weak); | |
| } | |
| .ComposeMessage-module__input { | |
| background: linear-gradient( | |
| 180deg, | |
| rgba(var(--color-base-white-rgb), 1) 0%, | |
| rgba(249, 247, 252, 0.98) 100% | |
| ); | |
| border: 1px solid var(--color-border-input); | |
| border-radius: 16px 16px 10px 16px; | |
| color: var(--color-text-neutrals); | |
| box-shadow: inset 0 1px 0 rgba(var(--color-base-white-rgb), 0.78); | |
| } | |
| .ComposeMessage-module__input:has(.ProseMirror-focused) { | |
| border-color: var(--color-border-input-active); | |
| box-shadow: 0 0 0 3px rgba(var(--rp-foam-rgb), 0.1); | |
| } | |
| [class*="ComposeMessage-module__textArea"] { | |
| caret-color: var(--rp-pine); | |
| } | |
| .ComposeMessage-module__textArea, | |
| .ProseMirror, | |
| .ProseMirror p, | |
| .ComposeMessage-module__placeholder { | |
| color: var(--color-text-neutrals); | |
| } | |
| .BrandSendButton-module__container, | |
| .styled-inputs button.primary, | |
| button.primary { | |
| background: linear-gradient( | |
| 180deg, | |
| rgba(var(--rp-iris-rgb), 1) 0%, | |
| rgba(var(--rp-pine-rgb), 0.96) 100% | |
| ) !important; | |
| color: var(--color-text-on-accent) !important; | |
| border: none; | |
| box-shadow: 0 10px 22px rgba(var(--rp-pine-rgb), 0.16); | |
| } | |
| .BrandSendButton-module__container:disabled { | |
| background: rgba(var(--rp-muted-rgb), 0.34) !important; | |
| box-shadow: none; | |
| } | |
| .BrandHiddenControls-module__toggle, | |
| .ComposeMessage-module__textAreaButtons .btn-icon, | |
| .styled-inputs button:not(.primary) { | |
| background: rgba(244, 241, 247, 0.92); | |
| color: var(--color-icon-neutrals); | |
| border: 1px solid rgba(var(--rp-subtle-rgb), 0.14); | |
| } | |
| .BrandHiddenControls-module__toggle:hover, | |
| .ComposeMessage-module__textAreaButtons .btn-icon:hover, | |
| .styled-inputs button:not(.primary):hover { | |
| background: rgba(var(--rp-iris-rgb), 0.12); | |
| color: var(--color-icon-neutrals-strong); | |
| } | |
| .styled-inputs input, | |
| .styled-inputs textarea, | |
| input, | |
| textarea, | |
| select { | |
| background: rgba(var(--color-base-white-rgb), 1); | |
| color: var(--color-text-neutrals); | |
| border-color: rgba(var(--rp-subtle-rgb), 0.18); | |
| } | |
| .styled-inputs input:focus, | |
| .styled-inputs textarea:focus, | |
| input:focus, | |
| textarea:focus, | |
| select:focus { | |
| border-color: rgba(var(--rp-foam-rgb), 0.45); | |
| outline: none; | |
| } | |
| .feedback-widget .feedback-btn, | |
| .feedback-emoji-picker button, | |
| .feedback-emoji-picker .feedback-emoji-unselected, | |
| kbd { | |
| background: rgba(var(--color-base-white-rgb), 0.98); | |
| border-color: rgba(var(--rp-subtle-rgb), 0.18); | |
| color: var(--color-text-neutrals); | |
| } | |
| .ScrollToBottom-module__scrollToBottom { | |
| background: rgba(var(--color-base-white-rgb), 0.98); | |
| border: 1px solid rgba(var(--rp-subtle-rgb), 0.22); | |
| color: var(--color-icon-neutrals-strong); | |
| box-shadow: 0 10px 24px rgba(var(--rp-text-rgb), 0.12); | |
| } | |
| .ScrollToBottom-module__container:has( | |
| .ScrollToBottom-module__scrollButtonVisible | |
| )::after { | |
| border-color: var(--rp-pine); | |
| } | |
| [class*="BrandTooltip-module__container"], | |
| [role="tooltip"], | |
| [data-radix-popper-content-wrapper] > * { | |
| background: rgba(var(--color-base-white-rgb), 1) !important; | |
| color: var(--color-text-neutrals) !important; | |
| border: 1px solid rgba(var(--rp-subtle-rgb), 0.18); | |
| box-shadow: 0 18px 34px rgba(var(--rp-text-rgb), 0.16); | |
| } | |
| .menu, | |
| .menu-option, | |
| [role="menu"], | |
| [role="dialog"] { | |
| color: var(--color-text-neutrals); | |
| } | |
| .menu-option:hover, | |
| [role="menuitem"]:hover { | |
| background: rgba(var(--rp-iris-rgb), 0.1) !important; | |
| } | |
| .thread-label, | |
| .AccountBadge-module__dot, | |
| [class*="AccountBadge-module__dot"] { | |
| background: var(--rp-foam); | |
| color: var(--color-base-white); | |
| } | |
| .ThreadListItem-module__unreadCount, | |
| [class*="ThreadListItem-module__unreadCount"] { | |
| background: var(--rp-gold) !important; | |
| color: var(--rp-text) !important; | |
| } | |
| body.compact-chat-list .ThreadListItem-module__unreadCount::after, | |
| body.compact-chat-list [class*="ThreadListItem-module__unreadCount"]::after { | |
| background: var(--rp-gold) !important; | |
| } | |
| .custom-scrollbars ::-webkit-scrollbar { | |
| width: 12px; | |
| } | |
| .custom-scrollbars ::-webkit-scrollbar-thumb { | |
| border: 3px solid transparent; | |
| background-clip: padding-box; | |
| border-radius: 20px; | |
| background-color: var(--color-background-scrollbar); | |
| min-height: 40px; | |
| } | |
| .custom-scrollbars ::-webkit-scrollbar-thumb:hover { | |
| background-color: var(--color-background-scrollbar-hover); | |
| } | |
| .custom-scrollbars ::-webkit-scrollbar-button { | |
| width: 0; | |
| height: 0; | |
| display: none; | |
| } | |
| .custom-scrollbars ::-webkit-scrollbar-corner { | |
| background-color: transparent; | |
| } | |
| .no-transparency, | |
| .reduce-transparency { | |
| --left-pane-bg: var(--color-background-sidebar-opaque); | |
| --color-background-header-right: var(--color-background-header-right-opaque); | |
| --color-background-menu: var(--color-background-menu-opaque); | |
| } | |
| } | |
| /* Account switcher/profile button cleanup */ | |
| .account-switcher .left-pane-footer .left-pane-footer-buttons button { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| border-radius: 999px !important; | |
| overflow: hidden; | |
| } | |
| .account-switcher .left-pane-footer .left-pane-footer-buttons button:hover, | |
| .account-switcher .left-pane-footer .left-pane-footer-buttons button:focus-visible, | |
| .account-switcher .left-pane-footer .left-pane-footer-buttons button:active { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| } | |
| .account-switcher .left-pane-footer .left-pane-footer-buttons button img, | |
| .account-switcher .left-pane-footer .left-pane-footer-buttons button .participant-img, | |
| .account-switcher .left-pane-footer .left-pane-footer-buttons button [class*="Avatar"], | |
| .account-switcher .left-pane-footer .left-pane-footer-buttons button [class*="avatar"] { | |
| border-radius: 999px !important; | |
| } | |
| .BrandTooltip-module__container > button[aria-label="Open settings"], | |
| .BrandTooltip-module__container > button[aria-label="Open settings"]:hover, | |
| .BrandTooltip-module__container > button[aria-label="Open settings"]:focus-visible, | |
| .BrandTooltip-module__container > button[aria-label="Open settings"]:active { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| border-radius: 999px !important; | |
| overflow: hidden; | |
| padding: 0 !important; | |
| } | |
| .BrandTooltip-module__container:has(> button[aria-label="Open settings"]) { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| background-image: none !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| padding: 0 !important; | |
| border-radius: 999px !important; | |
| } | |
| .BrandTooltip-module__container > button[aria-label="Open settings"] img, | |
| .BrandTooltip-module__container > button[aria-label="Open settings"] .settings-avatar { | |
| display: block; | |
| border-radius: 999px !important; | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| border: none !important; | |
| object-fit: cover; | |
| } | |
| button[aria-label="Open settings"] { | |
| -webkit-appearance: none !important; | |
| appearance: none !important; | |
| } | |
| .account-switcher | |
| .left-pane-footer | |
| .BrandTooltip-module__container:has(> button > .PlatformIcon-module__sfSymbolIcon), | |
| .account-switcher | |
| .left-pane-footer | |
| .BrandTooltip-module__container:has(> button > .PlatformIcon-module__sfSymbolIcon) | |
| > button { | |
| border-radius: var(--border-radius-100) !important; | |
| } | |
| .account-switcher | |
| .left-pane-footer | |
| .BrandTooltip-module__container:has(> button > .PlatformIcon-module__sfSymbolIcon) { | |
| overflow: hidden !important; | |
| background: var(--color-background-elevated) !important; | |
| background-color: var(--color-background-elevated) !important; | |
| background-image: none !important; | |
| border: 1px solid var(--color-border-neutrals-weak) !important; | |
| box-shadow: none !important; | |
| } | |
| .account-switcher | |
| .left-pane-footer | |
| .BrandTooltip-module__container:has(> button > .PlatformIcon-module__sfSymbolIcon) | |
| > button, | |
| .account-switcher | |
| .left-pane-footer | |
| .BrandTooltip-module__container:has(> button > .PlatformIcon-module__sfSymbolIcon) | |
| > button:hover, | |
| .account-switcher | |
| .left-pane-footer | |
| .BrandTooltip-module__container:has(> button > .PlatformIcon-module__sfSymbolIcon) | |
| > button:focus-visible, | |
| .account-switcher | |
| .left-pane-footer | |
| .BrandTooltip-module__container:has(> button > .PlatformIcon-module__sfSymbolIcon) | |
| > button:active { | |
| -webkit-appearance: none !important; | |
| appearance: none !important; | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| background-image: none !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| outline: none !important; | |
| border-radius: inherit !important; | |
| } | |
| /* Link styling */ | |
| .linked-message, | |
| .linked-message:hover, | |
| .linked-message:focus-visible, | |
| .message-text-container a, | |
| .message-text-container a:hover, | |
| .message-text-container a:focus-visible, | |
| .ProseMirror a, | |
| .ProseMirror a:hover, | |
| .ProseMirror a:focus-visible { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| text-decoration: underline !important; | |
| text-decoration-thickness: 1px !important; | |
| text-underline-offset: 0.14em !important; | |
| } | |
| .linked-message *, | |
| .message-text-container a *, | |
| .ProseMirror a *, | |
| .bubble-mode .is-sender .linked-message, | |
| .bubble-mode .is-sender .linked-message *, | |
| .bubble-mode .is-sender .message-text-container a, | |
| .bubble-mode .is-sender .message-text-container a *, | |
| .bubble-mode .is-sender .message-text-container mark, | |
| .bubble-mode .is-sender .message-text-container mark *, | |
| .bubble-mode .is-sender .message-text-container a::before, | |
| .bubble-mode .is-sender .message-text-container a::after { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| background-image: none !important; | |
| box-shadow: none !important; | |
| color: var(--color-text-on-accent) !important; | |
| -webkit-text-fill-color: var(--color-text-on-accent) !important; | |
| text-decoration: underline !important; | |
| text-decoration-thickness: 1px !important; | |
| text-underline-offset: 0.14em !important; | |
| } | |
| .message-text-container mark, | |
| .message-text-container mark * { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| color: inherit !important; | |
| } | |
| /* Quoted replies */ | |
| .msg-text .linked-message-inline-text { | |
| display: inline-block; | |
| padding: 3px 8px; | |
| border-radius: 10px; | |
| border: 1px solid var(--color-border-neutrals-weak); | |
| box-shadow: none; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| .msg-text .linked-message-inline-text { | |
| background: rgba(var(--rp-overlay-rgb), 0.96) !important; | |
| background-color: rgba(var(--rp-overlay-rgb), 0.96) !important; | |
| border-color: rgba(var(--rp-foam-rgb), 0.22) !important; | |
| } | |
| } | |
| @media (prefers-color-scheme: light) { | |
| .message-contents-container.hasText a[data-sentry-component="ExtLink"], | |
| .message-contents-container.hasText a[data-sentry-component="ExtLink"]:visited, | |
| .message-contents-container.hasText a[data-sentry-component="ExtLink"]:hover, | |
| .message-contents-container.hasText .BrandTooltip-module__container.ext-link-tooltip-anchor, | |
| .message-contents-container.hasText .BrandTooltip-module__container.ext-link-tooltip-anchor *, | |
| .message-contents-container.hasText .ext-link-icon { | |
| color: #232136 !important; | |
| -webkit-text-fill-color: #232136 !important; | |
| } | |
| .message-contents-container.hasText .ext-link-icon path { | |
| stroke: #232136 !important; | |
| } | |
| .msg-text .linked-message-inline-text { | |
| background: rgba(236, 231, 242, 0.92) !important; | |
| background-color: rgba(236, 231, 242, 0.92) !important; | |
| border-color: rgba(var(--rp-subtle-rgb), 0.22) !important; | |
| color: #000000 !important; | |
| -webkit-text-fill-color: #000000 !important; | |
| } | |
| .bubble-mode .is-sender .linked-message, | |
| .bubble-mode .is-sender .linked-message *, | |
| .bubble-mode .is-sender .message-contents, | |
| .bubble-mode .is-sender .message-contents-container.hasText, | |
| .bubble-mode .is-sender .message-text-container a, | |
| .bubble-mode .is-sender .message-text-container a *, | |
| .bubble-mode .is-sender .message-text-container a .ext-link-tooltip-anchor, | |
| .bubble-mode .is-sender .message-text-container a .ext-link-icon, | |
| .bubble-mode .is-sender .message-text-container a::before, | |
| .bubble-mode .is-sender .message-text-container a::after { | |
| color: #000000 !important; | |
| -webkit-text-fill-color: #000000 !important; | |
| } | |
| .bubble-mode .is-sender .message-text-container a .ext-link-tooltip-anchor { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| background-image: none !important; | |
| } | |
| } | |
| /* Preferences toggles */ | |
| .right.right-prefs, | |
| .right-wrapper .right.right-prefs, | |
| [class*="prefs"] { | |
| --color-primary: var(--rp-rose) !important; | |
| --color-primary-rgb: var(--rp-rose-rgb) !important; | |
| --color-background-selected-primary: var(--rp-rose) !important; | |
| } | |
| .right.right-prefs [role="switch"][aria-checked="true"], | |
| .right.right-prefs [role="checkbox"][aria-checked="true"], | |
| .right.right-prefs [aria-pressed="true"], | |
| .right.right-prefs input:checked + span, | |
| .right.right-prefs input:checked + div, | |
| .right.right-prefs label:has(input:checked) span, | |
| .right.right-prefs label:has(input:checked) div, | |
| [class*="prefs"] [role="switch"][aria-checked="true"], | |
| [class*="prefs"] [role="checkbox"][aria-checked="true"], | |
| [class*="prefs"] [aria-pressed="true"] { | |
| background: var(--rp-rose) !important; | |
| background-color: var(--rp-rose) !important; | |
| border-color: var(--rp-rose) !important; | |
| } | |
| .right.right-prefs input:checked, | |
| [class*="prefs"] input:checked { | |
| accent-color: var(--rp-rose) !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment