Novo estilo de navegação padrão e esquema de cores simplificado

[awesomerobot (Kris)]

O que está mudando

Em breve, nosso “menu superior” e navegação com estilo semelhante (às vezes referidos como “nav pills”) terão um estilo atualizado e mais consistente em todo o Discourse.

Menu Superior

Antes:

Depois:

Menu de Perfil

Antes:

Depois:

Por que está mudando?

Isso nos permite simplificar nosso CSS padrão e remover o uso da cor “quaternária” no tema padrão do Discourse. Essa cor foi usada por muitos temas ao longo dos anos, portanto, ainda estará disponível para uso em CSS personalizado.

O uso dessa cor, que por padrão é muito semelhante ao “vermelho de perigo”, dificultou a realização de tarefas como destacar um filtro ativo… pois nesse estado parece um erro:

Antes:

Depois:

Como altero isso nos temas?

Juntamente com esta atualização, também facilitamos a alteração dessas cores de navegação nos temas usando propriedades CSS personalizadas. Temos algumas novas variáveis:

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

Portanto, em vez de adicionar vários conjuntos de CSS personalizado para alterar cada instância de navegação, você pode alterar as variáveis conforme necessário. Por exemplo:

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

Aplicar este CSS resultaria em:

De onde vem esse sublinhado?

Você pode notar que o “sublinhado” do item de navegação ativo não utiliza a propriedade CSS border-bottom. Em vez disso, ele é aplicado usando um pseudo-elemento ::after.

Temas existentes podem já usar a propriedade border, então este método, esperamos, tornará mais fácil remover nosso sublinhado se ele entrar em conflito com estilos existentes. Para remover:

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

E se eu preferisse o estilo antigo?

Usar as novas variáveis CSS torna isso bastante fácil de recuperar. Em seu tema, você pode 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;
}

Se você quiser alterar apenas uma instância dessa navegação, pode limitar as alterações de variáveis a um ID ou classe, por exemplo, #navigation-bar em vez 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;
}

outro exemplo:

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

Não tem certeza de como alterar o CSS? Confira Making custom CSS changes on your site

É tudo por agora! Como sempre, avise-nos se tiver alguma dúvida ou encontrar algum problema ao longo do caminho.

[Arkshine]

Gostei! É moderno, menos intrusivo visualmente e, além disso, simplifica o CSS. Bom trabalho!

[nobrowser (Ian Zimmerman)]

Nos seus exemplos, a cor não é a única diferença entre o “antigo” e o “novo”. O tamanho da fonte parece menor nos exemplos “novos”. Isso foi intencional ou acidental?

Sinto que já houve muita instabilidade com o tamanho de fonte padrão

[Firepup650 (Firepup Sixfifty)]

Para mim, não parece diferente em tamanho, você poderia dizer em qual imagem parece diferente?

[NateDhaliwal]

Eu acho que é isso (tirado do ask.replit.com):

Parece que o texto está menor.

[dsims (Daniel)]

@nobrowser

O tamanho da fonte parece menor

@NateDhaliwal

Parece que o texto está menor.

Parece que o tamanho da fonte mudou nesta linha aqui quando o --font-up-1 foi removido e agora ele usa o --base-font-size como padrão. E no caso do menu dropdown móvel, o --font-down-1 ainda é aplicado, mas sem o --font-up-1.

estilo anterior:

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

[Moin]

Eu também notei isso. A fonte dos menus suspensos de categoria e tag é maior do que “Mais recente” ao lado dela. E “Mais recente” é ainda menor que o trecho do tópico fixado quando você não oculta a barra lateral.

[awesomerobot (Kris)]

Sim, o ajuste do font-size foi intencional (houve também alguns pequenos ajustes de espaçamento). Quando aumentamos o font-size geral, os filtros ficaram maiores junto com todo o resto — mas agora os dropdowns, filtros e o texto do botão “novo tópico” estão todos do mesmo tamanho.

Se você quiser que o texto seja maior novamente, pode adicionar algum CSS…

Tudo na navegação (dropdowns, filtros, botões):

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

Apenas filtros:

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

@nobrowser

Sinto que já houve muita instabilidade com o font-size padrão

Se você tiver algum problema ou sugestão específica, nos avise e poderemos ajudar!