Nouveau style de navigation par défaut et schéma de couleurs simplifié

Annonces
1

Ce qui change

Bientôt, notre « menu supérieur » et la navigation de style similaire (parfois appelés pilules de navigation) auront un style mis à jour et plus cohérent dans tout Discourse.

Menu supérieur

Avant :
image

Après :
image

Menu de profil

Avant :

image
image1010×131 14.3 KB

Après :

image
image1074×100 12.3 KB

Pourquoi ça change ?

Cela nous permet de simplifier notre CSS par défaut et de supprimer l’utilisation de la couleur « quaternaire » dans le thème Discourse par défaut. Cette couleur a été utilisée par de nombreux thèmes au fil des ans, elle sera donc toujours disponible pour une utilisation dans le CSS personnalisé.

L’utilisation de cette couleur, qui est par défaut très similaire au « rouge danger », rendait difficile, par exemple, la mise en surbrillance d’un filtre actif… car dans cet état, cela ressemble à une erreur :

Avant :
image

Après :
image

Comment puis-je changer cela dans les thèmes ?

Avec cette mise à jour, nous avons également rendu plus facile le changement de ces couleurs de navigation dans les thèmes à l’aide de propriétés CSS personnalisées. Nous avons de nouvelles variables :

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

Ainsi, plutôt que d’ajouter plusieurs ensembles de CSS personnalisés pour changer chaque instance de navigation, vous pouvez changer les variables selon vos besoins. Par exemple :

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

L’application de ce CSS donnerait :

image

image
image1102×109 12.4 KB

D’où vient ce soulignement ?

Vous remarquerez peut-être que le « soulignement » de l’élément de navigation actif n’utilise pas la propriété CSS border-bottom. Il est plutôt appliqué à l’aide d’un pseudo-élément ::after pseudo-élément.
Les thèmes existants peuvent déjà utiliser la propriété border, donc cette méthode devrait, espérons-le, faciliter la suppression de notre soulignement s’il entre en conflit avec les styles existants. Pour supprimer :

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

image

Et si je préférais l’ancien style ?

L’utilisation des nouvelles variables CSS rend cela assez facile à retrouver. Dans votre thème, vous pouvez appliquer :

: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

Si vous ne souhaitez modifier qu’une seule instance de cette navigation, vous pouvez limiter les modifications de variables à un ID ou une classe, par exemple #navigation-bar au lieu de :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

un autre exemple :

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

image

Vous ne savez pas comment modifier le CSS ? Consultez Making custom CSS changes on your site

C’est tout pour le moment ! Comme toujours, faites-nous savoir si vous avez des questions ou si vous rencontrez des problèmes en cours de route. :rocket:

27 « J'aime »
2

J’aime ça ! C’est moderne, moins intrusif visuellement et en plus, ça simplifie le CSS. Bon travail ! :chefs_kiss:

9 « J'aime »
3

Dans vos exemples, la couleur n’est pas la seule différence entre « l’ancien » et le « nouveau ». La taille de la police semble plus petite dans les exemples « nouveaux ». Est-ce intentionnel ou accidentel ?

J’ai l’impression qu’il y a déjà eu beaucoup trop de changements avec la taille de police par défaut :frowning:

2 « J'aime »
4

Il ne me semble pas différent en taille, pourriez-vous peut-être dire quelle image semble différente ?

1 « J'aime »
5

Je pense que c’est ceci (extrait de ask.replit.com) :

Screenshot_20240625_193539_One UI Home
Screenshot_20240625_193539_One UI Home1080×245 23.5 KB

Il semble que le texte soit plus petit.

2 « J'aime »
6

Il semble que la taille de la police ait changé sur cette ligne ici lorsque la taille de police --font-up-1 a été supprimée et qu’elle utilise maintenant par défaut la --base-font-size. Et dans le cas de la navigation déroulante mobile, --font-down-1 est toujours appliqué mais sans --font-up-1.

Style précédent :

.nav-pills {
  > li {
    > a,
    button {
      font-size: var(--font-up-1);
1 « J'aime »
7

J’ai remarqué ça aussi. La police des listes déroulantes de catégories et d’étiquettes est plus grande que « Latest » à côté. Et « Latest » est encore plus petit que l’extrait du sujet épinglé lorsque vous ne masquez pas la barre latérale.

Screenshot_20240625_152331_Chrome
Screenshot_20240625_152331_Chrome1205×446 111 KB

1 « J'aime »
8

Oui, l’ajustement de la taille de la police était intentionnel (il y a eu aussi quelques légers ajustements d’espacement). Lorsque nous avons augmenté la taille générale de la police, les filtres sont devenus plus grands, ainsi que tout le reste — mais maintenant, les listes déroulantes, les filtres et le texte du bouton « Nouveau sujet » ont tous la même taille.

Si vous souhaitez que le texte soit à nouveau plus grand, vous pouvez ajouter du CSS…

Tout dans la navigation (listes déroulantes, filtres, boutons) :

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

Filtres uniquement :

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

Si vous avez des problèmes ou des suggestions spécifiques, faites-le nous savoir et nous pourrons vous aider !

3 « J'aime »