新的默认导航样式和简化的配色方案

公告
1

变更内容

不久之后，我们的“顶部菜单”以及类似的导航（有时称为导航胶囊）将在整个 Discourse 中拥有更新、更一致的样式。

顶部菜单

之前：
image

之后：
image

个人资料菜单

之前：

image
image1010×131 14.3 KB

之后：

image
image1074×100 12.3 KB

为什么会改变？

这使我们能够简化默认 CSS 并移除默认 Discourse 主题中“四级”颜色的使用。多年来，许多主题都使用了这种颜色，因此它仍然可用于自定义 CSS。

默认情况下，这种颜色与“危险红色”非常相似，这使得像突出显示活动过滤器这样的事情变得困难……因为在这种状态下，它看起来像一个错误：

之前：
image

之后：
image

如何在主题中更改？

随着这次更新，我们还通过 CSS 自定义属性使在主题中更改这些导航颜色变得更加容易。我们有一些新变量：

:root {
  --d-nav-color: var(--primary);
  --d-nav-bg-color: transparent;
  --d-nav-color--hover: var(--primary);
  --d-nav-bg-color--hover: var(--d-hover);
  --d-nav-color--active: var(--tertiary);
  --d-nav-bg-color--active: transparent;
  --d-nav-border-color--active: var(--d-nav-color--active);
  --d-nav-underline-height: 0.125em;
}

因此，您无需添加多组自定义 CSS 来更改每个导航实例，而是可以根据需要更改变量。例如：

:root {
  --d-nav-color--active: mediumorchid;
}

应用此 CSS 将产生：

image

image
image1102×109 12.4 KB

这个下划线来自哪里？

您可能会注意到，活动导航项的“下划线”没有使用 border-bottom CSS 属性。而是使用 ::after 伪元素 应用的。
现有主题可能已在使用 border 属性，因此此方法有望使删除我们的下划线变得更容易，如果它与现有样式冲突。要删除：

:root {
  --d-nav-underline-height: 0;
}

image

如果我更喜欢旧样式怎么办？

使用新的 CSS 变量可以很容易地恢复到以前的样式。在您的主题中，您可以应用：

:root {
  --d-nav-color--hover: var(--quaternary);
  --d-nav-bg-color--hover: var(--quaternary-low);
  --d-nav-color--active: var(--secondary);
  --d-nav-bg-color--active: var(--quaternary);
  --d-nav-border-color--active: var(--primary-medium);
  --d-nav-underline-height: 0;
}

image

如果您只想更改此导航的一个实例，可以将变量更改范围限定为 ID 或类，例如 #navigation-bar 而不是 :root：

#navigation-bar {
  --d-nav-color--hover: var(--quaternary);
  --d-nav-bg-color--hover: var(--quaternary-low);
  --d-nav-color--active: var(--secondary);
  --d-nav-bg-color--active: var(--quaternary);
  --d-nav-underline-height: 0;
}

image

另一个例子：

.user-navigation {
  --d-nav-bg-color--active: lightcyan;
}

image

不确定如何更改 CSS？请查看 Making custom CSS changes on your site

目前就这些！一如既往，如果您有任何问题或在此过程中遇到任何问题，请告知我们。 :rocket:

27 个赞
2

我喜欢它！它很现代，视觉干扰更少，而且最重要的是，它简化了 CSS。干得好！:chefs_kiss:

9 个赞
3

在您的示例中，颜色并非“旧”与“新”之间的唯一区别。在“新”示例中，字体大小看起来更小。这是故意的还是偶然的？

我觉得默认字体大小已经有过太多变动了 :frowning:

2 个赞
4

在我看来，它的大小看起来没有区别，你能具体指出是哪张图片看起来不一样吗？

1 个赞
5

我认为是这个（来自 ask.replit.com）：

Screenshot_20240625_193539_One UI Home
Screenshot_20240625_193539_One UI Home1080×245 23.5 KB

文本似乎变小了。

2 个赞
6

字体大小似乎改变了在这里的这一行，因为移除了 --font-up-1 字体大小，现在默认使用 --base-font-size。对于移动下拉导航，仍然应用了 --font-down-1，但没有 --font-up-1。

先前的样式：

.nav-pills {
  > li {
    > a,
    button {
      font-size: var(--font-up-1);
1 个赞
7

我也注意到了。类别下拉菜单和标签下拉菜单的字体比旁边的“最新”要大。而且，“最新”的字体比未隐藏侧边栏时置顶帖子的摘要还要小。

Screenshot_20240625_152331_Chrome
Screenshot_20240625_152331_Chrome1205×446 111 KB

1 个赞
8

是的，字体大小的调整是故意的（也进行了一些细微的间距调整）。当我们整体增大字体大小时，过滤器和其他所有元素都变大了——但现在下拉菜单、过滤器和新建主题按钮的文本大小都相同了。

如果您希望文本再次变大，可以添加一些 CSS……

导航中的所有内容（下拉菜单、过滤器、按钮）：

.navigation-container {
 font-size: var(--font-up-1);
}

仅过滤器：

#navigation-bar {
 font-size: var(--font-up-1);
}

如果您有任何具体问题或建议，请告知我们，我们可以提供帮助！

3 个赞