主题卡片

[JammyDodger]

话说回来，进入安全模式执行批量操作，可能是禁用主题组件对所有人的替代方案。显而易见，这仍然是额外的麻烦，但可能对其他人的影响更小？

[tknospdr (David Muszynski)]

是的，在我了解了安全模式之后，我才弄明白。

[DenisDoroshchuk]

您好，

感谢您的组件！我们在 https://community.escapecollective.com/ 论坛上使用您的组件时发现了一个问题。如果您点击主题标题，SPA 会重新加载（我附上了此问题的 gif），但如果您点击标题以外的卡片，一切都会正常工作。发现此问题是因为页面重新加载导致访客入口组件无法正常工作。
这里有一个建议：Guest Gate Theme Component - #154 by Don
您能否看一下这个问题？

谢谢，
Denis D.

[tknospdr (David Muszynski)]

@tknospdr

谢谢，我添加了：

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

并且它与原版“Shades of Blue”调色板完美配合。

好了，第二部分。我该如何编辑它以使其与两种调色板配合使用？直到浏览器切换到暗模式为止看起来都不错。

又自己回答了自己的问题……

我昨晚了解了 @media (prefers-color-scheme: light/dark)，所以一切都好。

所以，似乎在上一轮 Discourse 更新后，某些东西发生了变化。
现在只有我的主题卡片的非常左侧边缘才遵循此 CSS，我一直在尝试寻找可以修复它的方法，但到目前为止尚未成功。
其他人可以确认并看看是否能找到所需的更改吗？

[Moin]

问题在于最近为已读主题添加的背景颜色变量。

我不认为有关于此更改的 #dev-news。但你可以在这里找到一些信息：

Styling Discourse with variables: Show & Tell

We’ve recently added a lot of css variables to Discourse. These variables make theming and customizing aspects of the UI much easier. For many changes, you will no longer need to target super specific elements in the html, and instead only change a variable. If you are curious about what variables are able to be changed, I suggest you look through the app using this regex → --([a-zA-Z0-9\-_]+): If using a code editor and searching for all instances of the above regex, you should see something …

[tknospdr (David Muszynski)]

有什么方法可以阻止该 CSS 吗？这破坏了我网站的外观，而且我根本不是程序员，所以我不知道该如何解决。
我查看了元素检查器，在所有损坏的主题上都看到了“visited”一词，而在仍然看起来正确的主题上则没有看到。
我该如何解决这个问题？

我尚未访问的主题（无悬停效果）：

鼠标悬停时：

其他的都损坏了。

[tknospdr (David Muszynski)]

这比应该的要难追踪。（我很确定这是我能力不足造成的，但还是……）

似乎添加：

.topic-list-item-background-color--visited {
    background: none
}

解决了这个问题，没有产生任何不良副作用。

[jordan.vidrine]

在你的样式中，你现在只需要更改这两个变量：

--topic-list-item-background-color
--topic-list-item-background-color--visited

所以像这样应该可以工作：

:root {
--topic-list-item-background-color: 你的颜色;
--topic-list-item-background-color--visited: 你的颜色;
}

[tknospdr (David Muszynski)]

当在浅色和深色之间切换时，那将如何解释这些差异？

[jordan.vidrine]

@tknospdr

那如何解释明暗模式切换时的差异？

您可以使用 CSS 函数 light-dark()

--variable-name: light-dark(#efedea, #223a2c);

@tknospdr

我不希望它在访问后有所不同

您可以将它们都设置为相同的值。

@tknospdr

不包括悬停颜色更改。

核心中没有对 :hover 进行任何处理。您只需确保在悬停时将变量设置为您想要的值。

[tknospdr (David Muszynski)]

这对我来说仍然不起作用。
这最初是有效的：

// Blend topic card colors with theme
@media (prefers-color-scheme: dark) {
    .topic-card.has-max-height {
        background: #223c44 !important;
    }
    .topic-card.has-max-height:hover {
        background: #163d51 !important;
    }
}

@media (prefers-color-scheme: light) {
    .topic-card.has-max-height {
        background: #e6ecf2 !important;
    }
    .topic-card.has-max-height:hover {
        background: #ddecf7 !important;
    }
}

然后在最新更新后，我添加了这个，它似乎起作用了，但后来又停止了：

.topic-list-item-background-color--visited {
    background: none
}

然后，根据你在这里所说的，我尝试了添加当前内容和用这个替换所有内容：

:root {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);
}

一定还有另一个变量我需要覆盖 hover-visited，因为未读帖子的颜色是正确的，但已读帖子的颜色却坏了。

[jordan.vidrine]

@tknospdr

--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);

此变量不存在。

.topic-card.has-max-height:hover {
--topic-list-item-background-color: ADD COLOR HERE
--topic-list-item-background-color--visited: ADD COLOR HERE
}

这应该是您需要的，希望有所帮助！

[tknospdr (David Muszynski)]

这是我能想到的最少能正常工作的行数。

// Blend topic card colors with theme
.topic-card.has-max-height {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(none, none);
}

.topic-card.has-max-height:hover {
--topic-list-item-background-color: light-dark(#ddecf7, #163d51);
--topic-list-item-background-color--visited: light-dark(none, none);
}

@media (prefers-color-scheme: dark) {
    .topic-card.has-max-height {
        background: #223c44 !important;
    }
    .topic-card.has-max-height:hover {
        background: #163d51 !important;
    }
}

@media (prefers-color-scheme: light) {
    .topic-card.has-max-height {
        background: #e6ecf2 !important;
    }
    .topic-card.has-max-height:hover {
        background: #ddecf7 !important;
    }
}

[RGJ (Richard - Communiteq)]

我已向此主题组件提交了一个 PR，其中包含两项新增功能：

功能：推荐话题开关

添加了设置 在推荐话题中显示

使话题卡片可用于推荐话题（如此功能请求中所述）

功能：限制到分类

添加了设置 在分类中显示

如果非空，则仅在选定的分类中使用话题卡片。

[jrgong]

太棒了，@RGJ，我们在自己的实例上测试了它，效果非常好，依我看应该合并。

[jrgong]

在 discourse 3.5.0 中发现了另一个小的 CSS 错误：

边框被添加到多个 UI 元素周围，例如编辑历史记录和展开引用元素。

这是由于按钮元素缺少 btn no-text 类

[chapoi]

已审核并合并，感谢您的贡献！

[Picho_Pelis (Carlos Andres)]

说实话，我没法让它正常工作，它看起来太丑了，我正在使用 horinzon 主题，请帮帮我。

[Moin]

此组件未列为与 Horizon 主题 兼容。

我认为更改起来并不容易，因为两者都会自定义主题列表，并且如第一篇帖子所述：

@Discourse

此主题组件可能与其他主题列表自定义设置产生冲突

[Picho_Pelis (Carlos Andres)]

@tknospdr

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

我该如何添加这里的 CSS，我看到很多主题都有 CSS