Collapse Discourse boosts: show first two by default, expand on hover, and display an “N+” counter when there are more.
/* ==UserStyle==
@name:zh-CN Discourse - 自动折叠 boost
@name Discourse - Collapse Boosts
@namespace https://github.com/utags
@version 5.0.0
@description Collapse Discourse boosts: show first two by default, expand on hover, and display an “N+” counter when there are more.
@description:zh-CN 折叠 Discourse Boost：默认仅显示前两个，悬停展开其余，超过 2 个时显示“N+”计数。
@author Pipecraft
@license MIT
@icon https://www.google.com/s2/favicons?sz=64&domain=meta.discourse.org
==/UserStyle== */
@-moz-document domain("meta.discourse.org"), domain("linux.do"), domain("idcflare.com") {
.discourse-boosts__list {
max-width: fit-content;
/* 初始化计数器 */
counter-reset: boosts;
}
.discourse-boosts__bubble {
/* 计数器累加 */
counter-increment: boosts;
/*如果想尽可能减少 boosts 对信息流干扰，可开启下方透明度*/
/*opacity: 70%;*/
transition: opacity 180ms ease;
}
/* boosts 列表后添加数值 */
.discourse-boosts__list::after {
/*减去默认显示数量*/
counter-increment: boosts -2;
content: counter(boosts) "+";
opacity: 0%;
display: inline-flex;
pointer-events: none;
max-inline-size: 0;
max-block-size: 0;
overflow: hidden;
font-size: var(--font-down-2);
line-height: 1;
transition-property: opacity, max-inline-size, max-block-size;
transition-duration: 180ms, 0ms, 0ms;
transition-timing-function: ease, linear, linear;
transition-delay: 0ms, 0ms, 0ms;
}
@supports not selector(.x:has(.y)) {
/* 第二个 boost */
.discourse-boosts__list > .discourse-boosts__bubble:nth-of-type(2) {
/* opacity: 50%; */
position: relative;
margin-right: 50px;
transition-property: opacity, margin-right;
transition-duration: 180ms, 0ms;
transition-timing-function: ease, linear;
transition-delay: 0ms, 0ms;
}
.discourse-boosts__list
> .discourse-boosts__bubble:nth-of-type(2):not(:last-of-type)::after {
content: "+ more";
opacity: 50%;
position: absolute;
inset-inline-start: calc(100% + var(--space-1));
inset-block-start: 50%;
transform: translateY(-50%);
white-space: nowrap;
pointer-events: none;
}
/* 鼠标移到第二个 boost 上面时，延迟收起右侧空白，避免 hover 抖动 */
.discourse-boosts__list:hover > .discourse-boosts__bubble:nth-of-type(2),
.discourse-boosts__list:focus-within
> .discourse-boosts__bubble:nth-of-type(2) {
opacity: 100%;
margin-right: 0;
transition-delay: 0ms, 120ms;
}
/* 仅有两个 boost 时，立即收起右侧空白 */
.discourse-boosts__list
> .discourse-boosts__bubble:nth-of-type(2):last-of-type {
opacity: 100%;
margin-right: 0;
transition-delay: 0ms, 0ms;
}
.discourse-boosts__list:hover
> .discourse-boosts__bubble:nth-of-type(2)::after,
.discourse-boosts__list:focus-within
> .discourse-boosts__bubble:nth-of-type(2)::after {
display: none;
}
}
.discourse-boosts__list:has(> .discourse-boosts__bubble:nth-child(3))::after,
.discourse-boosts__list:has(
> .discourse-boosts__bubble:nth-of-type(3)
)::after {
opacity: 50%;
max-inline-size: 999px;
max-block-size: 999px;
transition-delay: 0ms, 0ms, 0ms;
}
/* 鼠标悬停时隐藏数值*/
.discourse-boosts__list:hover:has(
> .discourse-boosts__bubble:nth-child(3)
)::after,
.discourse-boosts__list:focus-within:has(
> .discourse-boosts__bubble:nth-child(3)
)::after,
.discourse-boosts__list:hover:has(
> .discourse-boosts__bubble:nth-of-type(3)
)::after,
.discourse-boosts__list:focus-within:has(
> .discourse-boosts__bubble:nth-of-type(3)
)::after {
opacity: 0%;
max-inline-size: 0;
max-block-size: 0;
/* 延迟变小，使数值隐藏更平滑，防止 hover 抖动现象 */
transition-delay: 0ms, 120ms, 120ms;
}
/* 第三个和它后面的 boost */
.discourse-boosts__bubble:nth-child(n + 3) {
opacity: 0%;
display: inline-flex;
max-inline-size: 0;
max-block-size: 0;
padding: 0;
margin-inline-start: calc(var(--space-1) * -1);
overflow: hidden;
pointer-events: none;
transition-property:
opacity, max-inline-size, max-block-size, padding, margin-inline-start;
transition-duration: 180ms, 0ms, 0ms, 0ms, 0ms;
transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms;
transition-timing-function: ease, linear, linear, linear, linear;
}
/* 鼠标移到 boost 上面时 */
.discourse-boosts__list:hover .discourse-boosts__bubble,
.discourse-boosts__list:focus-within .discourse-boosts__bubble {
opacity: 100%;
max-inline-size: 999px;
max-block-size: 999px;
padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
margin-inline-start: 0;
pointer-events: auto;
transition-delay: 120ms, 120ms, 120ms, 120ms, 120ms;
}
.discourse-boosts-trigger {
order: -1;
}
@media (max-width: 560px) or (max-height: 560px) {
.discourse-boosts__list {
max-block-size: 30dvh;
overflow-y: auto;
}
}
}