Nuevo estilo de navegación predeterminado y esquema de color simplificado

[awesomerobot (Kris)]

Qué está cambiando

Pronto, nuestro “menú superior” y la navegación de estilo similar (a veces denominada pastillas de navegación) tendrán un estilo actualizado y más consistente en todo Discourse.

Menú superior

Antes:

Después:

Menú de perfil

Antes:

Después:

¿Por qué está cambiando?

Esto nos permite simplificar nuestro CSS predeterminado y eliminar el uso del color “cuaternario” en el tema predeterminado de Discourse. Este color ha sido utilizado por muchos temas a lo largo de los años, por lo que seguirá estando disponible para su uso en CSS personalizado.

El uso de este color, que por defecto es muy similar al “rojo peligro”, dificultaba cosas como resaltar un filtro activo… porque en este estado parece un error:

Antes:

Después:

¿Cómo lo cambio en los temas?

Junto con esta actualización, también hemos facilitado el cambio de estos colores de navegación en los temas utilizando propiedades personalizadas de CSS. Tenemos algunas variables nuevas:

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

Así que, en lugar de añadir múltiples conjuntos de CSS personalizados para cambiar cada instancia de navegación, puedes cambiar las variables según sea necesario. Por ejemplo:

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

La aplicación de este CSS resultaría en:

¿De dónde viene esta línea debajo?

Es posible que notes que la “línea debajo” del elemento de navegación activo no utiliza la propiedad CSS border-bottom. En su lugar, se aplica utilizando un pseudo-elemento ::after.

Los temas existentes pueden utilizar ya la propiedad border, por lo que este método, esperamos, facilitará la eliminación de nuestra línea debajo si choca con estilos existentes. Para eliminarla:

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

¿Y si prefería el estilo antiguo?

Usar las nuevas variables CSS hace que esto sea bastante fácil de recuperar. En tu tema puedes aplicar:

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

Si solo quieres cambiar una instancia de esta navegación, puedes limitar los cambios de variables a un ID o clase, por ejemplo #navigation-bar en lugar 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;
}

otro ejemplo:

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

¿No estás seguro de cómo cambiar el CSS? consulta Making custom CSS changes on your site

¡Eso es todo por ahora! Como siempre, háznos saber si tienes alguna pregunta o encuentras algún problema en el camino.

[Arkshine]

¡Me gusta! Es moderno, menos intrusivo visualmente y, además, simplifica el CSS. ¡Buen trabajo!

[nobrowser (Ian Zimmerman)]

En sus ejemplos, el color no es la única diferencia entre lo “antiguo” y lo “nuevo”. El tamaño de la fuente parece más pequeño en los ejemplos “nuevos”. ¿Está previsto o es accidental?

Siento que ya ha habido demasiados cambios con el tamaño de fuente predeterminado

[Firepup650 (Firepup Sixfifty)]

No me parece diferente en tamaño, ¿podrías decir en qué imagen se ve diferente?

[NateDhaliwal]

Creo que es esto (tomado de ask.replit.com):

Parece que el texto es más pequeño.

[dsims (Daniel)]

@nobrowser

El tamaño de fuente parece más pequeño

@NateDhaliwal

Parece que el texto es más pequeño.

Parece que el tamaño de la fuente cambió en esta línea aquí cuando se eliminó el tamaño de fuente --font-up-1 y ahora, por defecto, usa --base-font-size. Y en el caso de la navegación desplegable móvil, todavía se aplica --font-down-1 pero sin --font-up-1.

estilo anterior:

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

[Moin]

Yo también lo noté. La fuente de los menús desplegables de categorías y etiquetas es más grande que la de “Más reciente” al lado. Y “Más reciente” es incluso más pequeño que el extracto del tema fijado cuando no ocultas la barra lateral.

[awesomerobot (Kris)]

Sí, el ajuste del tamaño de fuente fue intencional (también hubo algunos pequeños ajustes de espaciado). Cuando aumentamos el tamaño de fuente general, los filtros se hicieron más grandes junto con todo lo demás, pero ahora los menús desplegables, los filtros y el texto del botón de nuevo tema son todos del mismo tamaño.

Si desea que el texto sea más grande de nuevo, puede agregar algo de CSS…

Todo en la navegación (menús desplegables, filtros, botones):

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

Solo filtros:

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

@nobrowser

Ya siento que ha habido demasiados cambios con el tamaño de fuente predeterminado

Si tiene algún problema o sugerencia específica, ¡háganoslo saber y podremos ayudarle!