blivechat样式小技巧

CSS-tricks
2.3k 词

小撇步

更换礼物价格单位

礼物单位在html定死了是CN￥，但是甲方稿子里又是RMB，这时候我们可以：

  • 对不起，做不到
  • 魔改blivechat客户端

可以使用attr()获取礼物弹幕根元素里的price属性，创建content: "RMB"attr的伪元素。
但是，这个伪元素不像原来的价格元素一样，在html中处于期望的层级，如果只需要绝对定位还好，要是想用flex布局，与昵称等共处，就有点麻烦了。
思路：

  • 定义根元素为flex，但原来的整个元素都在左边了。
  • 使用根元素的伪元素做一个背景，但message里的内容右边距不对。
  • 根元素有一个属性为price-level，可以依靠它获取新价格元素的的位数，计算宽度（等宽字体），使message或其父元素content加长。
  • 昵称可以使用绝对定位后限定宽度。

完整关键设置： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
yt-live-chat-paid-message-renderer:not([show-only-header]) {
    display:flex;
    justify-content:left;
}

yt-live-chat-paid-message-renderer:not([show-only-header])::before {
    content:"RMB"attr(price);
}

yt-live-chat-paid-message-renderer:not([show-only-header])::after {
}

yt-live-chat-paid-message-renderer:not([show-only-header]) #card {
    flex-grow:1;
}

yt-live-chat-paid-message-renderer:not([show-only-header]) #author-name {
    position: absolute;
    color: transparent !important;
    white-space:nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

yt-live-chat-paid-message-renderer:not([show-only-header]) #author-name::first-line {
    color:#000;
}

yt-live-chat-paid-message-renderer:not([show-only-header]) #content {
    --prefix-width: 80px;
    --char-width: 20px;
    width:calc(100% + var(--prefix-width) + 1 * var(--char-width));
}

yt-live-chat-paid-message-renderer:not([show-only-header])[price-level="1"] #content {
    width:calc(100% + var(--prefix-width) + 1 * var(--char-width));
}

yt-live-chat-paid-message-renderer:not([show-only-header]):is([price-level="0.1"][price-level="30"],[price-level="50"]) #content {
    width:calc(100% + var(--prefix-width) + 2 * var(--char-width));
}

yt-live-chat-paid-message-renderer:not([show-only-header])[price-level="100"] #content {
    width:calc(100% + var(--prefix-width) + 3 * var(--char-width));
}

yt-live-chat-paid-message-renderer:not([show-only-header])[price-level="1000"] #content {
    width:calc(100% + var(--prefix-width) + 4 * var(--char-width));
}
遗憾的是，10到30元以及10000元以上没有对应的可区分属性。（真有人送10000啊，不如给我呢。）

（另一篇里有另一种方法，但只能从左侧定位。）

礼物名称高亮

同样可以使用content: attr()的伪元素，根元素有个属性giftname。 如果只要从左侧定位，那调一下text- indent就好。 如果要居中，则只能单行或者不撑满容器。

  • 单行：根元素、#card使用static定位，根元素fit-content，定高伪元素作为边框相对容器定位，宽度\(100\% - margin\)，translateY()调Y轴位置。
  • 不撑满容器：不用static就完了。