分享自定义的译文样式

[lmk123]

划词翻译 v9.7.0 添加了一个新的选项“自定义译文样式”，可以使用 CSS 自定义全文翻译功能中译文的样式。欢迎大家在这个帖子里分享自己的自定义样式，好看的样式我会考虑直接加入到划词翻译当中。

[ixxc]

简单的调了下颜色，在黑色主题下也方便阅读

.__hcfy-result-comparison__ {
}
.__hcfy-result-comparison__ hcfy-result-content {
  /* 译文内容样式 */
  color: #ffffff;
  background: linear-gradient( to right, rgba(0, 128, 128, 0.6), rgba(0, 140, 128, 0.8) 2%, rgba(0, 128, 135, 0.9) 35%, rgba(0, 150, 128, 0.9) 70%, rgba(0, 128, 100, 0.8) 95%, rgba(0, 128, 128, 0.6) );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.__hcfy-result-editing__ {
}
.__hcfy-result-comparison-block__ {
}
.__hcfy-result-comparison-inline__ {
}

[FuuuOverclocking]

推荐下我的样式：

.__hcfy-result-comparison__ {
  /* 译文外框样式 */
}
.__hcfy-result-comparison__ hcfy-result-content {
  background: #DEDEDF;
  border-radius: 6px;
  padding: .1em .25em;
  color: black;
}
.__hcfy-result-editing__ {
  /* 译文处于编辑状态时的样式 */

  /* 我禁止了编译译文*/
}
.__hcfy-result-comparison-block__ {
  /* 译文跟原文是换行显示时的样式 */
}
.__hcfy-result-comparison-inline__ {
  /* 译文跟原文是同一行显示时的样式 */
}

效果：

[yhm-amber]

一个（在 CSS 代码以及它的效果上都）尽可能简洁的样式。

hcfy-result{--hcfy-result-main-color:#cf77ff;}
.__hcfy-result-comparison__ 
{
  border-left: 5px solid var(--hcfy-result-main-color);
  padding-left: 6px;
}
.__hcfy-result-comparison-block__ { padding: 6px 0 6px 12px; }
.__hcfy-result-comparison-inline__ { margin-left: 0.4em; }

翻译块使用了引用样式。

尽可能减少不必要的代码。删掉了默认文字颜色的设定，因此文字颜色会自动跟随相应段落文字的颜色。没有编辑时的样式。适合用于页面离线保存（比如与 SingleFile 一起）。

其中的 cf77ff 是一个很骚（指醒目）的紫色。你也可以替换为你想要的颜色。

[loveloki]

提供一个默认隐藏，浮动和编辑状态下再显示的方案。

/* 根元素样式 */
hcfy-result {
  --hcfy-highlight-color: #f2ae49;
  --hcfy-tip-color: f3f4f5;
  --hcfy-left: 16px;
  border-radius: 8px;
}

/* 译文外框样式 */
.__hcfy-result-comparison__ {
  border-left: 5px solid var(--hcfy-highlight-color);
  border-right: 5px solid var(--hcfy-highlight-color);
  padding: 10px 8px;
  margin-top: 4px;
  margin-left: var(--hcfy-left);
}

/* 译文处于编辑状态时的样式 */
.__hcfy-result-editing__ {
  border-color: #ffff;
  outline: 5px solid var(--hcfy-highlight-color);
}


/* 译文内容样式，默认隐藏  */
.__hcfy-result-comparison__ hcfy-result-content {
  opacity: 0;
  outline: none;
  transition: opacity 0.15s ease;
}

/* 鼠标悬浮和编辑模式取消隐藏*/
hcfy-result:hover hcfy-result-content, .__hcfy-result-editing__ hcfy-result-content  {
  opacity: 1;
}

默认情况下：

鼠标浮动上去：

编辑状态：

[fixcode-h]

.__hcfy-result-comparison__ {
  border-left: 4px solid #d3d3d3;  /* 左侧的灰色边框 */
  padding: 4px 8px;  /* 减少内边距，使高度降低 */
  background-color: #f7f7f7;  /* 背景色，淡淡的灰色 */
  font-family: 'Arial', sans-serif;  /* 字体 */
  font-size: 15px;  /* 字体大小 */
  color: #555;  /* 文本颜色 */
  line-height: 1.4;  /* 调低行高，减少文本的上下空间 */
  margin-bottom: 8px;  /* 减少底部间距 */
  border-radius: 0px;  /* 让背景和边框有一点圆角 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);  /* 轻微阴影，减少厚重感 */
}

.__hcfy-result-comparison__:hover {
  background-color: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.__hcfy-result-comparison__ hcfy-result-content {
  font-size: 15px;  /* 字体大小略微缩小 */
  line-height: 1.4;  /* 调低行高，减少文本的上下空间 */
  margin-bottom: 8px;  /* 减少文本与下方元素的间距 */
  color: #4a4a4a;
}

.__hcfy-result-editing__ {
  background-color: #e7f1ff;
  border-left: 3px solid #007bff;
  padding: 4px;  /* 减少编辑状态下的填充 */
  font-style: italic;
  color: #2a2a2a;
  font-size: 13px;  /* 字体略微缩小 */
}

.__hcfy-result-comparison-block__ {
  display: block;
  margin-top: 4px;  /* 减少顶部间距 */
  padding-top: 4px;  /* 减少内边距 */
  border-top: 1px dashed #d0d0d0;
}

.__hcfy-result-comparison-inline__ {
  display: inline-block;
  color: #007bff;
  font-weight: 500;
  margin-left: 4px;  /* 减少同行显示的间距 */
  font-size: 15px;  /* 字体略微缩小 */
  vertical-align: middle;  /* 保持同行的元素垂直居中 */
}

[PipeYume]

简单但有效。透明度0.5，编辑时透明度1.

.__hcfy-result-comparison__ {opacity: 0.5;}
.__hcfy-result-editing__ {opacity: 1;}