К сведению: вход в безопасный режим для выполнения массовых действий может быть альтернативой отключению компонента темы для всех. Очевидно, это всё ещё лишние хлопоты, но, возможно, с меньшим влиянием на остальных?
Да, я так и понял, узнав о безопасном режиме…
Но я бы всё же предпочёл, чтобы виджет был доступен.
1 лайк
Здравствуйте,
Спасибо за ваш компонент! Мы заметили проблему при использовании вашего компонента на форуме https://community.escapecollective.com/. Если нажать на заголовок темы, SPA перезагружается (я прикрепил GIF с этой проблемой), но если нажать на карточку вне заголовка, всё работает корректно. Проблема была обнаружена из-за того, что компонент Guest Gate не работал должным образом из-за перезагрузки страницы.
Вот предложение: Guest Gate Theme Component - #154 by Don
Не могли бы вы взглянуть на эту проблему?
Спасибо,
Денис Д.
2 лайка
Похоже, что с последним обновлением Discourse что-то изменилось.
Теперь только самый левый край моих карточек тем подчиняется этому CSS-коду. Я пытаюсь разобраться, чтобы найти решение, но пока безрезультатно.
Может ли кто-то другой подтвердить это и попытаться найти необходимые изменения?
Проблема заключается в недавно добавленной переменной для цвета фона тем, которые вы уже прочитали.
Я не думаю, что об этом изменении есть публикация в dev-news. Однако вы можете найти некоторую информацию здесь:
Значит, есть способ отключить этот CSS? Это полностью испортило внешний вид моего сайта, а я не очень разбираюсь в программировании, поэтому не знаю, как это исправить.
Я посмотрел в инспекторе элементов и увидел слово ‘visited’ на всех сломанных темах, а на той, которая выглядит правильно, его нет.
Как это исправить?
Тема, которую я ещё не посещал (без наведения):
А при наведении курсора:
А остальные сломаны.
Это оказалось сложнее отыскать, чем следовало бы. (Я вполне уверен, что это из-за моих недостатков, но всё же…)
Похоже, что добавление:
.topic-list-item-background-color--visited {
background: none
}
исправило проблему без каких-либо нежелательных побочных эффектов.
В ваших стилях теперь нужно изменить только эти две переменные:
--topic-list-item-background-color
--topic-list-item-background-color--visited
Так что что-то вроде этого должно сработать:
:root {
--topic-list-item-background-color: ВАШ ЦВЕТ ЗДЕСЬ;
--topic-list-item-background-color--visited: ВАШ ЦВЕТ ЗДЕСЬ;
}
Как это объяснит различия при переключении между светлой и тёмной темой?
Также мне не нужно, чтобы цвет менялся после посещения ссылки, и это не учитывает изменение цвета при наведении.
Вы можете использовать CSS-функцию light-dark()
--variable-name: light-dark(#efedea, #223a2c);
{quote=“tknospdr, пост:92, тема:296048”]
Я не хочу, чтобы цвет менялся после посещения
[/quote]
Вы можете установить оба значения одинаковыми.
В ядре ничего не сделано для :hover. Вам просто нужно убедиться, что переменная устанавливается в нужное значение при наведении.
1 лайк
У меня всё ещё не работает.
Вот что изначально работало:
// Смешивание цветов карточек тем с темой
@media (prefers-color-scheme: dark) {
.topic-card.has-max-height {
background: #223c44 !important;
}
.topic-card.has-max-height:hover {
background: #163d51 !important;
}
}
@media (prefers-color-scheme: light) {
.topic-card.has-max-height {
background: #e6ecf2 !important;
}
.topic-card.has-max-height:hover {
background: #ddecf7 !important;
}
}
Затем после последнего обновления я добавил это, и сначала всё работало, но потом перестало:
.topic-list-item-background-color--visited {
background: none
}
После этого, основываясь на ваших словах, я попробовал как добавить к текущему, так и полностью заменить всё на это:
:root {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);
}
Должна быть ещё одна переменная, которую мне нужно охватить для hover-visited, потому что непрочитанные темы отображаются правильно, а прочитанные — сломаны.
Эта переменная не существует.
.topic-card.has-max-height:hover {
--topic-list-item-background-color: ВСТАВЬТЕ ЦВЕТ ЗДЕСЬ
--topic-list-item-background-color--visited: ВСТАВЬТЕ ЦВЕТ ЗДЕСЬ
}
Вот что вам нужно, надеюсь, это поможет!
Это минимальное количество строк, которое я смог придумать, и оно, похоже, работает корректно.
// Смешивание цветов карточки темы с темой
.topic-card.has-max-height {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(none, none);
}
.topic-card.has-max-height:hover {
--topic-list-item-background-color: light-dark(#ddecf7, #163d51);
--topic-list-item-background-color--visited: light-dark(none, none);
}
@media (prefers-color-scheme: dark) {
.topic-card.has-max-height {
background: #223c44 !important;
}
.topic-card.has-max-height:hover {
background: #163d51 !important;
}
}
@media (prefers-color-scheme: light) {
.topic-card.has-max-height {
background: #e6ecf2 !important;
}
.topic-card.has-max-height:hover {
background: #ddecf7 !important;
}
}
Я создал PR для этого компонента темы с двумя дополнениями:
Функция: Переключатель для рекомендуемых тем
Добавляет настройку Показывать для рекомендуемых тем
Делает использование карточек тем для рекомендуемых тем опциональным (как описано в этом запросе на добавление функции)
Функция: Ограничение по категориям
Добавляет настройку Показывать в категориях
Если поле не пустое, карточки тем отображаются только в выбранных категориях.
6 лайков
Отличное дополнение, @RGJ! Мы протестировали его на нашем экземпляре, и оно работает безупречно. На мой взгляд, его обязательно нужно слить в основную ветку.
1 лайк
Обнаружена ещё одна небольшая ошибка в CSS в этой теме на Discourse 3.5.0:
Вокруг нескольких элементов интерфейса, таких как история редактирования и элементы разворачивания цитаты, добавлена рамка.
Это связано с отсутствием классов btn no-text у кнопочных элементов
Проверено и слито, спасибо за добавление!
3 лайка
Честно говоря, у меня не получилось заставить это работать; выглядит это очень некрасиво. Я использую тему Horizon, помогите, пожалуйста.
Этот компонент не указан как совместимый с темой Horizon.
Я не думаю, что это будет легко исправить, поскольку и то, и другое настраивает список тем, и, как указано в первом сообщении:
2 лайка
Как мне добавить CSS, который я вижу здесь в теме, слишком много CSS