Support translucency

[LEOYoon-Tsaw]

User can add "style/translucency: true" to enable translucent background. Paired with transparent background color, the effect is as shown here:

[lotem]

Merged via 7e8eeb0

[nevertoday]

请问这个有具体的设置教程么？ ？？

[LEOYoon-Tsaw]

请问这个有具体的设置教程么？ ？？

在 squirrel.custom.yaml 中添加：

patch:
  style/translucency: true

並使用透明度高的背景色（如：back_color: 1AFFFFFF）

[nevertoday]

back_color: 1AFFFFFF 一旦设置就是黑色的了， 真的是奇怪

[nevertoday]

这个磨砂效果这么难以实现么？

我的配置

请问，是不是哪里有设置不对劲？

[LEOYoon-Tsaw]

這是我的：

  "preset_color_schemes/flat-light":
    name: 扁平明／Flat Light
    color_space: display_p3
    translucency: true
    back_color: 0x1AFFFFFF
    candidate_text_color: 0xB3000000
    comment_text_color: 0x80333333
    label_color: 0xBB333333
    hilited_candidate_back_color: 0x4DFFFFFF
    hilited_candidate_text_color: 0x000000
    hilited_comment_text_color: 0xBF333333
    hilited_candidate_label_color: 0x000000
    preedit_back_color: 0x1A000000
    text_color: 0xBF323232
    hilited_back_color: 0x0D000000
    hilited_text_color: 0xBF1A1A1A

  "preset_color_schemes/flat-dark":
    name: 扁平闇／Flat Dark
    color_space: display_p3
    translucency: true
    back_color: 0x1A000000
    candidate_text_color: 0xB3FFFFFF
    comment_text_color: 0x80CCCCCC
    label_color: 0xBBCCCCCC
    hilited_candidate_back_color: 0x4D000000
    hilited_candidate_text_color: 0xFFFFFF
    hilited_comment_text_color: 0xBFCCCCCC
    hilited_candidate_label_color: 0xFFFFFF
    preedit_back_color: 0x1AFFFFFF
    text_color: 0xBFE5E5E5
    hilited_back_color: 0x0D000000
    hilited_text_color: 0xBFFFFFFF

[lianyis]

我在用的，大概有一半透明，去掉了第一个字的背景色和高亮。

patch:
  style/color_scheme: system_blue             # 方案命名，不能有空格
  preset_color_schemes:
    system_blue:
      author: "scomper <scomper@gmail.com>"   # 作者信息
      back_color: 0x7AFFFFFF                  # 候选条背景色，24位色值，16进制，BGR顺序
      border_color: 0xE0B693                  # 边框色
      candidate_text_color: 0x000000          # 预选项文字颜色
      comment_text_color: 0x999999            # 拼音等提示文字颜色
      hilited_back_color: 0x7AFFFFFF          # 第一候选项背景背景色
      hilited_candidate_text_color: 0x424242  # 第一候选项文字颜色
      hilited_candidate_label_color: 0x999999 # 第一候选项编号颜色
      hilited_comment_text_color: 0x999999    # 注解文字高亮
      hilited_text_color: 0x999999            # 高亮拼音 (需要开启内嵌编码)
      name: "系统蓝／System Blue"
      text_color: 0x424242                    # 拼音行文字颜色
      label_color: 0x999999                   # 预选栏编号颜色

      horizontal: true                        # 水平排列
      inline_preedit: true                    # 单行显示，false双行显示
      candidate_format: "%c\u2005%@ \u2005"   # 用 1/6 em 空格 U+2005 来控制编号 %c 和候选词 %@ 前后的空间。
      font_point: 16                          # 候选文字大小
      label_font_point: 14                    # 候选编号大小
      label_font_face: "SFCompactText-Regular"# 候选词编号字体  
      corner_radius: 5                        # 候选条圆角
      border_height: 0                        # 窗口边界高度，大于圆角半径才生效
      border_width: 0                         # 窗口边界宽度，大于圆角半径才生效
      translucency: true                      # 背景透明

[GJRobert]

我在用的，大概有一半透明，去掉了第一个字的背景色和高亮。

@Ripp1e 您用出來的是「透明感」還是「磨砂感」呢？如果看得到背景的細節，那就似乎不是 tranlucency……

我現在還沒試出來，0.16.2

[GJRobert]

喔我知道了，要磨砂效果時，透明度要非常高。像非磨砂的時候可能 opacity 用 0.7 就蠻夠了，
磨砂的話透明度可能要 0.1 吧。

[lianyis]

我在用的，大概有一半透明，去掉了第一个字的背景色和高亮。

@Ripp1e 您用出來的是「透明感」還是「磨砂感」呢？如果看得到背景的細節，那就似乎不是 tranlucency……

我現在還沒試出來，0.16.2
我目前的样式。

[GJRobert]

@Ripp1e 有了，我看您這樣應該是有磨砂感了，因為背後的紅、綠、洋紅有透出來，但卻是一種 blended 的感覺。
但不確定您要的是不是其實是「半透明」（transparency），那樣的話就要把 translucency 關掉，然後只設定有透明度的底色。

我剛弄了 back_color: 0x1A000000 也是有磨砂感了。

[nevertoday]

然来要关闭translucency ，然后设置0x1A000000这种，才会有磨砂之感哈，我两者都同时启用了， 但是个人感觉，中看不中用哈， 还是安静的静态颜色很安全~
peace and love

[nevertoday]

我是实现这个毛玻璃效果了， 确实要关闭transl...
补充一个透明度参考数值：

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

[LEOYoon-Tsaw]

毛玻璃就是translucency，translucency: true是開啓毛玻璃
單純透明請說半透明。
這些人在生活中沒見過毛玻璃嗎？會分不清毛玻璃和半透明……離譜

[nevertoday]

哦， 然来是透明度哈，够用了， 这个新的参数，我感觉鸡肋着，完全用不到！

[nevertoday]

就是遮光戴blur 效果~

[nevertoday]

我的u是黑色，毛玻璃开启，恶心到炸

[GJRobert]

我很肯定 @LEOYoon-Tsaw 開發這個 translucency 毛玻璃效果的貢獻

我發現為了讓它更通透，這樣面板彩度基本上就降低了，不是白毛玻璃就是黑毛玻璃，但好處是背景其他視窗或圖案的任何色彩都能渲染開來，很特別（這本來就是 macOS 的一個 feature），所以目前我是有使用的。

但有人可能還是比較喜歡自己原本設定的面板顏色，只要加上半透明 transparent 而已。

青菜蘿蔔各有所好，再次感謝 @LEOYoon-Tsaw

[nevertoday]

@LEOYoon-Tsaw 当讲不当讲，实际上我觉得这次的translucency不够友好。这个词就是透明度的意思，但又和毛玻璃产生关系！很混淆~ 哈哈哈
燃鹅🦢~
css中不是对于毛玻璃效果是：backdrop-filter 之内的效果，或者 blur 之类的来设置~ 个人体验下来，这个参数也太绕， 不够直观，甚至不能blur ：50px 之类的控制虚化大小~ 很困惑的同时，也觉得如果更清晰，肯定更吊

[LEOYoon-Tsaw]

这个词就是透明度的意思，但又和毛玻璃产生关系！很混淆~

Definitions of translucency. the quality of allowing light to pass diffusely

這個詞就是這個意思，在macOS、windows 11中也都是這麼用的。

你不喜歡可以不用/做你自己喜歡的。我這個用的是系統的API，和系統其他地方的translucency完全一致（如菜單、預覽、spotlight等）。並不覺得模糊大小等有什麼問題。

[nevertoday]

deeply sorry

[nevertoday]

当然，我还是觉得blur 大小很有问题~ 两个参数混一起也有问题~ peace

[LEOYoon-Tsaw]

当然，我还是觉得blur 大小很有问题~ 两个参数混一起也有问题~ peace

你覺得就你覺得吧，不用就是了

[nevertoday]

我偏要用，⚔️着呢~ 菜且爱说，不犯法
https://weibo.com/7381774757/Jx6QkdhnM?sudaref=www.google.com

[Babesun]

不是有alpha参数吗？

[GJRobert]

不是有alpha参数吗？

translucency ≠ transparency