Новый стиль навигации по умолчанию и упрощённая цветовая схема

[awesomerobot (Kris)]

Что меняется

Вскоре наше «верхнее меню» и аналогичные элементы навигации (иногда называемые «навигационными вкладками») получат обновлённый и более последовательный стиль во всём Discourse.

Верхнее меню

До:

После:

Меню профиля

До:

После:

Почему это меняется?

Это позволяет нам упростить CSS по умолчанию и отказаться от использования «четвертичного» цвета в стандартной теме Discourse. Этот цвет на протяжении многих лет использовался во многих темах, поэтому он останется доступным для использования в пользовательском CSS.

Использование этого цвета, который по умолчанию очень похож на «красный цвет опасности», затрудняло такие действия, как подсветка активного фильтра, поскольку в этом состоянии он выглядел как ошибка:

До:

После:

Как изменить это в темах?

Вместе с этим обновлением мы также упростили изменение цветов навигации в темах с помощью пользовательских свойств CSS. У нас появились новые переменные:

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

Таким образом, вместо добавления множества наборов пользовательского CSS для изменения каждого экземпляра навигации, вы можете при необходимости изменять переменные. Например:

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

Применение этого CSS приведёт к следующему результату:

Откуда берётся это подчеркивание?

Вы могли заметить, что «подчеркивание» активного элемента навигации не использует CSS-свойство border-bottom. Вместо этого оно применяется с помощью псевдоэлемента ::after псевдоэлемент.

Существующие темы уже могут использовать свойство border, поэтому этот метод, вероятно, упростит удаление подчеркивания, если оно конфликтует с существующими стилями. Чтобы удалить:

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

А что, если мне нравился старый стиль?

Использование новых переменных CSS делает возвращение к старому стилю довольно простым. В вашей теме вы можете применить:

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

Если вы хотите изменить только один экземпляр этой навигации, вы можете ограничить изменение переменных конкретным ID или классом, например #navigation-bar вместо :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;
}

ещё один пример:

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

Не знаете, как изменить CSS? Посетите Making custom CSS changes on your site

На этом пока всё! Как всегда, дайте нам знать, если у вас возникнут вопросы или вы столкнётесь с какими-либо проблемами.

[Arkshine]

Мне нравится! Это современно, меньше отвлекает визуально и, кроме того, упрощает CSS. Отличная работа!

[nobrowser (Ian Zimmerman)]

В ваших примерах цвет — не единственное отличие между «старым» и «новым». Размер шрифта в «новых» примерах кажется меньше. Это намеренно или случайно?

Мне кажется, что с размером шрифта по умолчанию уже слишком много изменений

[Firepup650 (Firepup Sixfifty)]

Мне не кажется, что они отличаются по размеру. Не могли бы вы указать, на каком именно изображении видна разница?

[NateDhaliwal]

Я думаю, это вот это (взято с ask.replit.com):

Кажется, текст здесь меньше.

[dsims (Daniel)]

@nobrowser

Размер шрифта выглядит меньше

@NateDhaliwal

Кажется, текст стал меньше.

Похоже, что размер шрифта изменился в этой строке, когда было удалено свойство font-size: var(--font-up-1), и теперь оно по умолчанию принимает значение --base-font-size. В случае с мобильным выпадающим меню навигации всё ещё применяется --font-down-1, но без --font-up-1.

предыдущий стиль:

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

[Moin]

Я тоже это заметил. Шрифт в выпадающих списках категорий и тегов крупнее, чем надпись «Latest» рядом с ними. А «Latest» ещё меньше, чем краткое описание закреплённой темы, когда боковая панель не скрыта.

[awesomerobot (Kris)]

Да, изменение размера шрифта было сделано намеренно (также были внесены небольшие корректировки в интервалы). Когда мы увеличили общий размер шрифта, фильтры тоже стали крупнее вместе со всеми остальными элементами — но теперь текст в выпадающих списках, фильтрах и кнопке «Новая тема» имеет одинаковый размер.

Если вы хотите снова увеличить размер текста, вы можете добавить немного CSS…

Для всего в навигации (выпадающие списки, фильтры, кнопки):

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

Только для фильтров:

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

@Ian Zimmerman

Мне кажется, с размером шрифта по умолчанию уже слишком много изменений

Если у вас есть конкретные проблемы или предложения, дайте нам знать, и мы поможем!