CSS回归:.navigation-container的border-bottom在最新更新后没有间距

您好,Discourse 团队 :waving_hand:

在最近一次更新后,我注意到与分类页面中 .navigation-container 元素相关的 CSS 回归问题。

以前,.navigation-container 的底部边框与下方的内容(如分类框)之间有自然的间距或边距。现在,边框紧贴着下一个元素,没有边距或内边距,这看起来在视觉上很拥挤且不一致。

这个问题是在最近一次更新后才开始出现的。它似乎源于:

.navigation-categories .navigation-container,
.categories-list .navigation-container {
  border-bottom: 3px solid var(--primary-low-mid-or-secondary-high);
}

我手动添加了以下内容进行了修复:

margin-bottom: 24px;

这恢复了间距,但理想情况下,这应该由核心或默认主题来处理。


之前:

之后:


此致,

3 个赞

您好,

我无法重现此问题。您是在 Meta 上看到同样的情况,还是只在您自己的网站上看到?

您能否分享具体在哪些页面上看到此问题?例如,我在此处 Meta 上查看了 https://meta.discourse.org/categories,在我看来一切正常。

我认为我可以在 Meta 上使用“air”主题重现这一点

3 个赞

谢谢,这很有帮助。

@jordan.vidrine 也许是新的全局变量导致的?

.container.list-container.--categories {
  padding: 0 var(--list-container-categories-padding-x);
}

Air 主题使用自定义组件 custom-category-boxes-container,所以我认为没有通用的核心修复。据我所知,我们自己的类别页面布局都已根据它进行了调整:正常的框视图看起来还可以。

@xkhalid 你在那页上使用了任何自定义组件吗?

1 个赞

您好,


我正在使用 Air-Theme


这是我的插件:

好的,这解释了原因,谢谢。我们很快就会修复航空主题。

1 个赞

感谢 @chapoi 快速响应!

我已将以下内容添加到 CSS 中进行临时修复:

.navigation-categories .navigation-container,
.categories-list .navigation-container {
    border-bottom: 3px solid var(--primary-low-mid-or-secondary-high);
    margin-bottom: 24px;
}
1 个赞

已修复

感谢您的报告!

4 个赞

此主题已在 4 天后自动关闭。不再允许回复。