Neuer Standard-Navigationsstil und vereinfachtes Farbschema

[awesomerobot (Kris)]

Was sich ändert

Bald werden unser „oberes Menü“ und ähnlich gestaltete Navigationen (manchmal auch Navigations-Pills genannt) einen aktualisierten und konsistenteren Stil in ganz Discourse erhalten.

Oberes Menü

Vorher:

Nachher:

Profilmenü

Vorher:

Nachher:

Warum ändert es sich?

Dies ermöglicht uns, unser Standard-CSS zu vereinfachen und die Verwendung der „quaternären“ Farbe im Standard-Discourse-Theme zu entfernen. Diese Farbe wurde im Laufe der Jahre von vielen Themes verwendet, daher wird sie weiterhin für benutzerdefiniertes CSS verfügbar sein.

Die Verwendung dieser Farbe, die standardmäßig „Danger Red“ sehr ähnlich ist, erschwerte Dinge wie das Hervorheben eines aktiven Filters … da sie in diesem Zustand wie ein Fehler aussieht:

Vorher:

Nachher:

Wie ändere ich das in Themes?

Zusammen mit diesem Update haben wir es auch einfacher gemacht, diese Navigationsfarben in Themes mithilfe von CSS-Custom-Properties zu ändern. Wir haben einige neue Variablen:

: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;
}

Anstatt also mehrere Sätze benutzerdefinierten CSS hinzuzufügen, um jede Navigationsinstanz zu ändern, können Sie Variablen nach Bedarf ändern. Zum Beispiel:

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

Die Anwendung dieses CSS würde zu Folgendem führen:

Woher kommt diese Unterstreichung?

Sie bemerken vielleicht, dass die „Unterstreichung“ des aktiven Navigationspunkts nicht die CSS-Eigenschaft border-bottom verwendet. Stattdessen wird sie mithilfe eines ::after Pseudo-Elements angewendet.
Vorhandene Themes verwenden möglicherweise bereits die border-Eigenschaft. Diese Methode sollte es hoffentlich einfacher machen, unsere Unterstreichung zu entfernen, wenn sie mit vorhandenen Stilen kollidiert. Zum Entfernen:

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

Was, wenn ich den alten Stil bevorzugt habe?

Die Verwendung der neuen CSS-Variablen macht dies ziemlich einfach wiederherzustellen. In Ihrem Theme können Sie Folgendes anwenden:

: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;
}

Wenn Sie nur eine Instanz dieser Navigationsleiste ändern möchten, können Sie die Variablenänderungen auf eine ID oder Klasse beschränken, z. B. #navigation-bar anstelle von :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;
}

Ein weiteres Beispiel:

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

Sie wissen nicht, wie Sie CSS ändern können? Schauen Sie unter Making custom CSS changes on your site nach.

Das ist alles für jetzt! Wie immer, lassen Sie uns wissen, wenn Sie Fragen haben oder auf Probleme stoßen.

[Arkshine]

Ich mag es! Es ist modern, weniger aufdringlich und vereinfacht darüber hinaus das CSS. Gute Arbeit!

[nobrowser (Ian Zimmerman)]

In Ihren Beispielen ist Farbe nicht der einzige Unterschied zwischen „alt“ und „neu“. Die Schriftgröße scheint in den „neuen“ Beispielen kleiner zu sein. Ist das beabsichtigt oder zufällig?

Ich finde, dass es mit der Standardschriftgröße bereits viel zu viel Wechsel gab

[Firepup650 (Firepup Sixfifty)]

Für mich sieht sie von der Größe her nicht anders aus. Könnten Sie vielleicht sagen, bei welchem Bild sie anders aussieht?

[NateDhaliwal]

Ich glaube, es ist das (auf ask.replit.com aufgenommen):

Es scheint, dass der Text kleiner ist.

[dsims (Daniel)]

@nobrowser

Schriftgröße sieht kleiner aus

@NateDhaliwal

Es scheint, dass der Text kleiner ist.

Es sieht so aus, als ob sich die Schriftgröße auf dieser Zeile hier geändert hat, als --font-up-1 Schriftgröße entfernt wurde und sie jetzt standardmäßig auf --base-font-size gesetzt ist. Und im Fall der mobilen Dropdown-Navigation wird weiterhin --font-down-1 angewendet, aber ohne --font-up-1.

vorheriger Stil:

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

[Moin]

Das ist mir auch aufgefallen. Die Schriftart der Dropdown-Menüs für Kategorien und Tags ist größer als die danebenstehende „Neueste“. Und „Neueste“ ist sogar kleiner als der Auszug des angepinnten Themas, wenn man die Seitenleiste nicht ausblendet.

[awesomerobot (Kris)]

Ja, die Anpassung der Schriftgröße war beabsichtigt (es gab auch einige geringfügige Anpassungen des Abstands). Als wir die allgemeine Schriftgröße erhöhten, wurden die Filter zusammen mit allem anderen größer – aber jetzt sind die Dropdowns, Filter und der Text des neuen Themenbuttons alle gleich groß.

Wenn Sie möchten, dass der Text wieder größer wird, können Sie etwas CSS hinzufügen…

Alles in der Navigation (Dropdowns, Filter, Buttons):

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

Nur Filter:

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

@nobrowser

Ich finde, dass es mit der Standard-Schriftgröße schon viel zu viel Aufruhr gab

Wenn Sie spezielle Probleme oder Vorschläge haben, lassen Sie es uns wissen und wir helfen Ihnen gerne weiter!