分享一下Cherry Studio美化CSS样式

[Ge0metry]

其实也是用R1写的，已经用了一个礼拜了，感觉还不错，分享给大家

:root {
  /* 原子化设计令牌 */
  --duration-quick: 0.15s;
  --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --radius-dynamic: clamp(12px, (100% - 60px) * 0.02, 24px);
  
  /* OKLCH色彩空间 */
  --color-brand-primary: oklch(62.8% 0.25 29.2);
  --color-brand-hover: color-mix(in oklch, var(--color-brand-primary) 90%, black);
  
  /* 动态主题参数 */
  --theme-lightness: 1; /* 1=light, -1=dark */
  --shadow-intensity: 0.04;
}

/* 基础架构 */
* {
  font-family: 'MiSans Normal', system-ui;
  line-height: 1.7;
  letter-spacing: 0.018em;
}

.message-content-container {
  /* 物理渲染层 */
  transform: translateZ(0);
  will-change: transform, box-shadow;
  contain: layout paint style;

  /* 动态样式 */
  background: hsl(
    calc(240 * var(--theme-lightness)),
    calc(5% * abs(var(--theme-lightness))),
    calc(98% - 76% * var(--theme-lightness))
  ) !important;
  
  border: 1px solid color-mix(
    in oklch, 
    var(--color-brand-primary), 
    transparent 92%
  );
  border-radius: var(--radius-dynamic);
  
  /* 增量过渡 */
  transition: 
    transform var(--duration-quick) var(--easing-emphasized),
    box-shadow 0.4s var(--easing-decelerate),
    background-color 1s linear;

  /* 逻辑属性 */
  margin-block: 8px;
  padding-inline: 10px;
  padding-block-start: 10px;
}

/* 阴影系统 */
.message-content-container {
  box-shadow: 
    0 4px 16px -8px hsl(0 0% 0% / calc(var(--shadow-intensity) * 10)),
    0 8px 32px -12px hsl(0 0% 100% / calc(0.03 - var(--shadow-intensity)));
}

/* 输入栏优化 */
#inputbar {
  background: color-mix(
    in oklab,
    var(--chat-background-white),
    transparent 4%
  ) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  margin: -15px 10px 15px 0;
}

/* 暗色主题 */
body[theme-mode='dark'] {
  --theme-lightness: -1;
  --shadow-intensity: 0.4;
  
  .message-content-container {
    background: hsl(
      calc(200 + 40 * var(--theme-lightness)),
      calc(8% * abs(var(--theme-lightness))),
      calc(16% + 6% * var(--theme-lightness))
    ) !important;
    
    border-color: color-mix(
      in oklch, 
      var(--color-brand-primary), 
      transparent 88%
    );
  }
  
  #inputbar {
    background: color-mix(
      in oklab,
      var(--chat-background-white),
      black 6%
    ) !important;
  }
}

/* 触摸设备适配 */
@media (pointer: coarse) {
  .message-content-container {
    min-block-size: 44px;
    --shadow-intensity: calc(var(--shadow-intensity) * 2);
    
    transition: 
      transform var(--duration-quick) var(--easing-emphasized),
      box-shadow 0.3s linear;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: more) {
  .message-content-container {
    border-width: 2px;
    
    &::after {
      content: "";
      display: block;
      border: 1px solid CanvasText;
      border-radius: inherit;
    }
  }
}

[crushllys (Yong’s)]

插个眼先

[qinanmail (中气爱)]

感谢佬的分享

[yzgolden]

看着还不错，感谢老友分享

[baipiaodang]

可以可以，我喜欢黑黑的

[chris310 (chris xin)]

你指的到底是啥

[Itachi]

感谢分享

[handsome (大帅哥)]

感谢大佬

[Todddiana]

贴一个我自己在用的

建议可以加上字体的部分。我用R1写了一个，中文用思源宋体（需要自己先下载安装好字体），西文/代码用Consolas
CSS里面加上这一段即可

* {
  font-family: 
    "Consolas", monospace,
    "思源宋体", 
    serif !important;
}

[zhang.aladdin (阿拉丁神灯)]

确实不错

[Todddiana]

另外，如果采用气泡模式，直接填这个CSS，在夜间模式下，用户发出的消息的字体是黑的，完全看不清，

可以加上这一段：

/* 用户消息气泡样式 */
.bubble .message-user {
  color: var(--message-user-color);
}

消息可以看清了，颜色可以自己改，但是tokens的颜色我没找到怎么改来着

[Howel (褪黑两下)]

插个眼 看着更舒服了

[abluepotato]

[pf123120 (Nick Patrick)]

是这些吧

[pf123120 (Nick Patrick)]

/* 用户消息气泡样式 */
.bubble .message-user {
  color: var(--message-user-color);
  .markdown,
  .anticon,
  .iconfont,
  .message-tokens {
    color: var(--message-user-color) !important;
  }
  .message-action-button:hover {
    background-color: var(--color-black-soft);
  }
}

[tuantuan (仟寻)]

哪里搞的能联网的模型

[tuantuan (仟寻)]

佬，这个得css是啥，看着挺舒服的

[abluepotato]

OpenRouter可以联网，CSS可以去看之前有个大佬分享的国风系列。

[siven (Finder)]

好看，感谢分享

[run-cao (浮世游)]

感谢分享哦 佬