新しいデフォルトのナビゲーションスタイルとシンプルなカラースキーム

お知らせ
1

変更点

まもなく、当社の「トップメニュー」および同様のスタイルのナビゲーション（ナビゲーションピルとも呼ばれます）は、Discourse全体で更新され、より一貫性のあるスタイルになります。

トップメニュー

変更前：
image

変更後：
image

プロフィールメニュー

変更前：

image
image1010×131 14.3 KB

変更後：

image
image1074×100 12.3 KB

なぜ変更されるのか？

これにより、デフォルトのCSSを簡素化し、デフォルトのDiscourseテーマでの「4次」色の使用を削除できます。この色は長年にわたり多くのテーマで使用されてきたため、カスタム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

このナビゲーションのインスタンスを1つだけ変更したい場合は、:root の代わりにIDまたはクラスに変数変更をスコープできます。たとえば #navigation-bar です。

#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

フォントサイズが変更されたようです。この行 here の --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