Skip to content

Instantly share code, notes, and snippets.

@czyt

czyt/CherryStudio.css

Created September 15, 2025 13:09
Show Gist options
  • Save czyt/2174e2ac9b9de7890bb31cc3acedea18 to your computer and use it in GitHub Desktop.
Save czyt/2174e2ac9b9de7890bb31cc3acedea18 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CherryStudio.css
/**
* Cherry Studio - Apple Design Overhaul
* Crafted by Swift Expert
*
* This version addresses the stubborn sidebar glass effect by targeting the root cause:
* an opaque layout container blocking the backdrop. By making the main layout
* transparent, the sidebar's backdrop-filter can now function as intended.
*
* - Strategy: "Unblock" the view instead of faking the effect.
* - Key Fix: Set the background of the main `.ant-layout` to transparent.
* - Result: A true, functional, and elegant glassmorphism sidebar.
*/
:root {
/* --- 🍎 Apple Font System --- */
--font-apple-system: -apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Arial", sans-serif;
--font-apple-mono: "SF Mono", "Menlo", "Monaco", "JetBrains Mono", "Consolas", monospace;
/* --- 🍎 Core Variables (Dark Mode Default) --- */
--radius-l: 18px;
--radius-m: 12px;
--radius-s: 8px;
--transition-fast: all 0.2s cubic-bezier(0.5, 0, 0.25, 1);
--transition-normal: all 0.35s cubic-bezier(0.5, 0, 0.25, 1);
/* --- Dark Mode Palette --- */
--bg-page-dark: #1D1D1F; /* macOS Dark Mode Background */
--color-accent-dark: #0A84FF; /* macOS Accent Blue (Dark) */
--bg-material-dark: rgba(50, 50, 52, 0.75);
--border-material-dark: rgba(255, 255, 255, 0.18);
--shadow-material-dark: 0 16px 32px rgba(0, 0, 0, 0.25), 0 6px 12px rgba(0, 0, 0, 0.2);
--text-primary-dark: rgba(255, 255, 255, 0.95);
--text-secondary-dark: rgba(235, 235, 245, 0.7);
/* --- Markdown Color Palette (Dark) --- */
--md-text-dark: #d3c6aa;
--md-h1-dark: #FFADAD;
--md-h2-dark: #FFD6A5;
--md-h3-dark: #FDFFB6;
--md-h4-dark: #CAFFBF;
--md-h5-dark: #9BF6FF;
--md-h6-dark: #A0C4FF;
--md-strong-dark: #B55A5A;
--md-em-dark: #9da9a0;
--md-link-dark: #7fbbb3;
--md-blockquote-bg-dark: #283035;
--md-blockquote-border-dark: #4f585e;
}
/* --- 🍎 Light Mode --- */
body[theme-mode="light"] {
--bg-page-light: #F5F5F7; /* macOS Light Mode Background */
--color-accent-light: #007AFF; /* macOS Accent Blue (Light) */
--bg-material-light: rgba(252, 252, 252, 0.8);
--border-material-light: rgba(0, 0, 0, 0.12);
--shadow-material-light: 0 16px 32px rgba(0, 0, 0, 0.08), 0 6px 12px rgba(0, 0, 0, 0.06);
--text-primary-light: rgba(0, 0, 0, 0.88);
--text-secondary-light: rgba(60, 60, 67, 0.68);
/* --- Markdown Color Palette (Light) --- */
--md-text-light: #5C6A72;
--md-h1-light: #FF5252;
--md-h2-light: #F57D26;
--md-h3-light: #DFA000;
--md-h4-light: #4CAF50;
--md-h5-light: #03A9F4;
--md-h6-light: #673AB7;
--md-strong-light: #B55A5A;
--md-em-light: #829181;
--md-link-light: #3795C5;
--md-blockquote-bg-light: #efebd4;
--md-blockquote-border-light: #bec5b2;
}
/* --- 🍎 Base & Typography with Ambient BG --- */
body {
font-family: var(--font-apple-system) !important;
font-weight: 400;
letter-spacing: normal !important;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background var(--transition-normal);
}
body[theme-mode="dark"] { background: radial-gradient(circle at 50% 0%, hsl(240, 3%, 15%), var(--bg-page-dark) 70%); }
body[theme-mode="light"] { background: radial-gradient(circle at 50% 0%, hsl(240, 5%, 98%), var(--bg-page-light) 80%); }
/* --- THE KEY FIX --- */
/* Make the main layout container transparent to allow backdrop-filter to work */
.ant-layout, .ant-layout-has-sider, #root > .ant-layout {
background: transparent !important;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-apple-system) !important; font-weight: 600 !important; color: var(--text-primary-dark); }
body[theme-mode="light"] h1, body[theme-mode="light"] h2, body[theme-mode="light"] h3, body[theme-mode="light"] h4, body[theme-mode="light"] h5, body[theme-mode="light"] h6 { color: var(--text-primary-light); }
.markdown p, .markdown li, .markdown blockquote, .markdown table { font-family: var(--font-apple-system) !important; font-weight: 400; color: var(--text-secondary-dark); }
body[theme-mode="light"] .markdown p, body[theme-mode="light"] .markdown li, body[theme-mode="light"] .markdown blockquote, body[theme-mode="light"] .markdown table { color: var(--text-secondary-light); }
code, pre, .cherry-code-content, .cherry-code-content * { font-family: var(--font-apple-mono) !important; font-size: 0.95em !important; line-height: 1.6 !important; }
strong, b { color: var(--color-accent-dark) !important; }
body[theme-mode="light"] strong, b { color: var(--color-accent-light) !important; }
/* --- 🍎 Enhanced Markdown Styles --- */
/* Base Markdown Styles */
.markdown {
color: var(--md-text-dark);
transition: var(--transition-normal);
}
body[theme-mode="light"] .markdown {
color: var(--md-text-light);
}
/* Markdown Headers with Apple-style Typography */
.markdown h1 {
font-size: 2em !important;
color: var(--md-h1-dark) !important;
font-weight: 600 !important;
border: none !important;
padding-bottom: 0 !important;
margin: 1.5em 0 0.8em 0;
line-height: 1.2;
}
.markdown h2 {
font-size: 1.75em !important;
color: var(--md-h2-dark) !important;
font-weight: 600 !important;
border: none !important;
padding-bottom: 0 !important;
margin: 1.3em 0 0.7em 0;
line-height: 1.2;
}
.markdown h3 {
font-size: 1.5em !important;
color: var(--md-h3-dark) !important;
font-weight: 600 !important;
border: none !important;
padding-bottom: 0 !important;
margin: 1.2em 0 0.6em 0;
line-height: 1.3;
}
.markdown h4 {
font-size: 1.25em !important;
color: var(--md-h4-dark) !important;
font-weight: 600 !important;
border: none !important;
padding-bottom: 0 !important;
margin: 1.1em 0 0.5em 0;
line-height: 1.3;
}
.markdown h5 {
font-size: 1.1em !important;
color: var(--md-h5-dark) !important;
font-weight: 600 !important;
border: none !important;
padding-bottom: 0 !important;
margin: 1em 0 0.4em 0;
line-height: 1.4;
}
.markdown h6 {
font-size: 1em !important;
color: var(--md-h6-dark) !important;
font-weight: 600 !important;
border: none !important;
padding-bottom: 0 !important;
margin: 1em 0 0.4em 0;
line-height: 1.4;
}
/* Light Mode Headers */
body[theme-mode="light"] .markdown h1 { color: var(--md-h1-light) !important; }
body[theme-mode="light"] .markdown h2 { color: var(--md-h2-light) !important; }
body[theme-mode="light"] .markdown h3 { color: var(--md-h3-light) !important; }
body[theme-mode="light"] .markdown h4 { color: var(--md-h4-light) !important; }
body[theme-mode="light"] .markdown h5 { color: var(--md-h5-light) !important; }
body[theme-mode="light"] .markdown h6 { color: var(--md-h6-light) !important; }
/* Markdown Text Emphasis */
.markdown strong {
color: var(--md-strong-dark) !important;
font-weight: bold !important;
}
.markdown em {
color: var(--md-em-dark) !important;
font-style: italic !important;
}
body[theme-mode="light"] .markdown strong { color: var(--md-strong-light) !important; }
body[theme-mode="light"] .markdown em { color: var(--md-em-light) !important; }
/* Markdown Links */
.markdown a {
color: var(--md-link-dark) !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(167, 192, 128, 0.2) !important;
transition: var(--transition-fast);
}
.markdown a:hover {
border-bottom-color: var(--md-link-dark) !important;
opacity: 0.8;
}
body[theme-mode="light"] .markdown a {
color: var(--md-link-light) !important;
border-bottom: 1px solid rgba(141, 161, 1, 0.2) !important;
}
body[theme-mode="light"] .markdown a:hover {
border-bottom-color: var(--md-link-light) !important;
}
/* Markdown HR with Apple-style Gradient */
.markdown hr {
border: none !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, #E5FFFF, transparent) !important;
margin: 2em 0 !important;
opacity: 0.6;
}
/* Markdown Blockquotes with Material Design */
.markdown blockquote {
padding: 1rem 1.5rem !important;
margin: 1.5rem 0 !important;
background-color: var(--md-blockquote-bg-dark) !important;
border-left: 4px solid var(--md-blockquote-border-dark) !important;
border-radius: var(--radius-m) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
body[theme-mode="light"] .markdown blockquote {
background-color: var(--md-blockquote-bg-light) !important;
border-left-color: var(--md-blockquote-border-light) !important;
}
/* Footnotes with Apple Material Design */
.footnotes {
margin: 1em 0 !important;
padding: 12px 16px !important;
border-radius: var(--radius-m) !important;
background-color: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--border-material-dark) !important;
transition: var(--transition-normal);
}
body[theme-mode="light"] .footnotes {
background-color: rgba(0, 0, 0, 0.03) !important;
border-color: var(--border-material-light) !important;
}
/* --- 🍎 Applying Material Style to Components --- */
.inputbar-container,
.ant-popover-inner,
.ant-notification-notice,
.ant-message-notice-content,
.ant-drawer-content,
.ant-modal-content,
.cherry-code-wrapper,
.bubble .message-content-container {
background-color: var(--bg-material-dark) !important;
backdrop-filter: blur(30px) saturate(1.8);
-webkit-backdrop-filter: blur(30px) saturate(1.8);
border-radius: var(--radius-l) !important;
border: 1px solid var(--border-material-dark) !important;
box-shadow: var(--shadow-material-dark) !important;
color: var(--text-primary-dark) !important;
transition: var(--transition-normal);
overflow: hidden;
}
body[theme-mode="light"] .inputbar-container,
body[theme-mode="light"] .ant-popover-inner,
body[theme-mode="light"] .ant-notification-notice,
body[theme-mode="light"] .ant-message-notice-content,
body[theme-mode="light"] .ant-drawer-content,
body[theme-mode="light"] .ant-modal-content,
body[theme-mode="light"] .cherry-code-wrapper,
body[theme-mode="light"] .bubble .message-content-container {
background-color: var(--bg-material-light) !important;
border: 1px solid var(--border-material-light) !important;
box-shadow: var(--shadow-material-light) !important;
color: var(--text-primary-light) !important;
}
/* --- 🍎 Sidebar --- */
div[class*="AgentsGroupList-"] {
background-color: var(--bg-material-dark) !important;
backdrop-filter: blur(30px) saturate(1.8);
-webkit-backdrop-filter: blur(30px) saturate(1.8);
border-right: 1px solid var(--border-material-dark) !important;
padding: 8px !important;
min-width: 160px !important; height: 100vh !important; display: flex !important; flex-direction: column !important; gap: 4px !important; overflow-y: auto !important;
}
body[theme-mode="light"] div[class*="AgentsGroupList-"] {
background-color: var(--bg-material-light) !important;
border-right-color: var(--border-material-light) !important;
}
div[class*="AgentsGroupList-"]::-webkit-scrollbar { display: none !important; }
/* --- Chat Bubble & Input --- */
.bubble .message-content-container { padding: 14px 20px !important; }
.inputbar-container { padding: 8px !important; }
.inputbar-container:focus-within {
border-color: rgba(10, 132, 255, 0.7) !important;
box-shadow: var(--shadow-material-dark), 0 0 0 4px rgba(10, 132, 255, 0.3) !important;
transform: translateY(-2px);
}
body[theme-mode="light"] .inputbar-container:focus-within {
border-color: rgba(0, 122, 255, 0.7) !important;
box-shadow: var(--shadow-material-light), 0 0 0 4px rgba(0, 122, 255, 0.2) !important;
}
.inputbar-container textarea { color: var(--text-primary-dark) !important; }
body[theme-mode="light"] .inputbar-container textarea { color: var(--text-primary-light) !important; }
/* --- 🍎 Code Blocks (Centered Title) --- */
.cherry-code-wrapper { margin: 1.5em 0; }
.markdown pre [class^="CodeHeader-"] { position: relative; display: block; text-align: center; line-height: 42px; height: 42px; padding: 0 80px !important; background-color: rgba(0, 0, 0, 0.25) !important; border-bottom: 1px solid var(--border-material-dark) !important; color: var(--text-secondary-dark); }
body[theme-mode="light"] .markdown pre [class^="CodeHeader-"] { background-color: rgba(255, 255, 255, 0.3) !important; border-bottom: 1px solid var(--border-material-light) !important; color: var(--text-secondary-light); }
.markdown pre [class^="CodeHeader-"]::before { content: ' '; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: #FF5F56; box-shadow: 20px 0 #FFBD2E, 40px 0 #27C93F; }
.markdown pre [class^="CodeContent-"] { padding: 16px !important; margin: 0 !important; }
/* --- Lists & Menu Items --- */
.cherry-menu-item, .cherry-list-item { border-radius: var(--radius-m) !important; color: var(--text-secondary-dark); transition: var(--transition-fast); border: none !important; background: transparent !important; margin: 2px 4px !important; padding: 8px 12px !important; }
body[theme-mode="light"] .cherry-menu-item, body[theme-mode="light"] .cherry-list-item { color: var(--text-secondary-light); }
.cherry-menu-item:hover, .cherry-list-item:hover { background: rgba(255, 255, 255, 0.1) !important; color: var(--text-primary-dark) !important; }
body[theme-mode="light"] .cherry-menu-item:hover, body[theme-mode="light"] .cherry-list-item:hover { background: rgba(0, 0, 0, 0.08) !important; color: var(--text-primary-light) !important; }
.cherry-menu-item.active, .cherry-list-item.active { background: var(--color-accent-dark) !important; color: #fff !important; font-weight: 500; }
body[theme-mode="light"] .cherry-menu-item.active, body[theme-mode="light"] .cherry-list-item.active { background: var(--color-accent-light) !important; color: #fff !important; }
/* --- Buttons & Controls --- */
.ant-btn { border-radius: var(--radius-m) !important; border: none !important; background-color: rgba(255, 255, 255, 0.12) !important; color: var(--text-primary-dark) !important; transition: var(--transition-fast); }
.ant-btn:hover { background-color: rgba(255, 255, 255, 0.2) !important; transform: scale(1.03); }
body[theme-mode="light"] .ant-btn { background-color: rgba(0, 0, 0, 0.08) !important; color: var(--text-primary-light) !important; }
body[theme-mode="light"] .ant-btn:hover { background-color: rgba(0, 0, 0, 0.12) !important; }
/* --- Selection --- */
::selection { background-color: rgba(10, 132, 255, 0.4); color: var(--text-primary-dark); }
body[theme-mode="light"] ::selection { color: var(--text-primary-light); }
/* --- Cleanup & Reset --- */
.cherry-3d-enhanced::before, .cherry-3d-enhanced::after, [class*="ListItemContent-"]::before, [class*="ListItemContent-"]::after, [class*="TitleText-"]::before, [class*="TitleText-"]::after,
.markdown pre [class^="CodeHeader-"] .iconfont.icon-copy.copy {
display: none !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment