Nuovo stile di navigazione predefinito e schema di colori semplificato

[awesomerobot (Kris)]

Cosa cambia

Presto il nostro “menu principale” e la navigazione con stile simile (a volte indicata come schede di navigazione) avranno uno stile aggiornato e più coerente in tutto Discourse.

Menu principale

Prima:

Dopo:

Menu del profilo

Prima:

Dopo:

Perché cambia?

Questo ci consente di semplificare il nostro CSS predefinito e rimuovere l’uso del colore “quaternario” nel tema Discourse predefinito. Questo colore è stato utilizzato da molti temi nel corso degli anni, quindi sarà ancora disponibile per l’uso nel CSS personalizzato.

L’uso di questo colore, che per impostazione predefinita è molto simile al “rosso pericolo”, rendeva difficile fare cose come evidenziare un filtro attivo… perché in questo stato sembra un errore:

Prima:

Dopo:

Come posso cambiarlo nei temi?

Insieme a questo aggiornamento, abbiamo anche reso più facile cambiare i colori di questa navigazione nei temi utilizzando le proprietà personalizzate CSS. Abbiamo alcune nuove variabili:

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

Quindi, invece di aggiungere più set di CSS personalizzati per cambiare ogni istanza di navigazione, puoi cambiare le variabili secondo necessità. Ad esempio:

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

L’applicazione di questo CSS si tradurrebbe in:

Da dove viene questa sottolineatura?

Potresti notare che la “sottolineatura” dell’elemento di navigazione attivo non utilizza la proprietà CSS border-bottom. Invece, viene applicata utilizzando un pseudo-elemento ::after.

I temi esistenti potrebbero già utilizzare la proprietà border, quindi questo metodo speriamo renderà più facile rimuovere la nostra sottolineatura se dovesse scontrarsi con gli stili esistenti. Per rimuoverla:

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

E se preferissi il vecchio stile?

Utilizzando le nuove variabili CSS, è abbastanza facile tornare indietro. Nel tuo tema puoi applicare:

: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 vuoi cambiare solo una istanza di questa navigazione, puoi limitare le modifiche alle variabili a un ID o a una classe, ad esempio #navigation-bar invece di :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;
}

un altro esempio:

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

Non sei sicuro di come cambiare il CSS? Dai un’occhiata a Making custom CSS changes on your site

Per ora è tutto! Come sempre, facci sapere se hai domande o incontri problemi lungo il percorso.

[Arkshine]

Mi piace! È moderno, meno invasivo visivamente e, inoltre, semplifica il CSS. Buon lavoro!

[nobrowser (Ian Zimmerman)]

Negli esempi, il colore non è l’unica differenza tra “vecchio” e “nuovo”. La dimensione del carattere sembra più piccola negli esempi “nuovi”. È intenzionale o accidentale?

Sento che c’è già stato troppo cambiamento con la dimensione predefinita del carattere

[Firepup650 (Firepup Sixfifty)]

Per me non sembra diverso per dimensioni, potresti magari dire in quale immagine sembra diverso?

[NateDhaliwal]

Penso che sia questo (preso da ask.replit.com):

Sembra che il testo sia più piccolo.

[dsims (Daniel)]

@nobrowser

La dimensione del carattere sembra più piccola

@NateDhaliwal

Sembra che il testo sia più piccolo.

Sembra che la dimensione del carattere sia cambiata su questa riga qui quando --font-up-1 font-size è stato rimosso e quindi ora viene utilizzato per impostazione predefinita --base-font-size. E nel caso del menu a discesa mobile, viene ancora applicato --font-down-1 ma senza --font-up-1.

stile precedente:

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

[Moin]

L’ho notato anch’io. Il font dei menu a discesa delle categorie e dei tag è più grande di “Latest” accanto ad essi. E “Latest” è ancora più piccolo dell’estratto dell’argomento bloccato quando non nascondi la barra laterale.

[awesomerobot (Kris)]

Sì, la regolazione della dimensione del carattere è stata intenzionale (ci sono stati anche alcuni piccoli aggiustamenti di spaziatura). Quando abbiamo aumentato la dimensione generale del carattere, anche i filtri sono diventati più grandi, insieme a tutto il resto, ma ora i menu a discesa, i filtri e il testo del pulsante “nuovo argomento” hanno tutti la stessa dimensione.

Se desideri che il testo sia di nuovo più grande, puoi aggiungere del CSS…

Tutto nella navigazione (menu a discesa, filtri, pulsanti):

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

Solo filtri:

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

@nobrowser

Penso che ci sia già stato troppo scombussolamento con la dimensione predefinita del carattere

Se hai problemi o suggerimenti specifici, faccelo sapere e possiamo aiutarti!