# Тематические карточки
**URL:** https://meta.discourse.org/t/topic-cards/296048
**Category:** Theme component
**Tags:** official, topic-cards
**Created:** [20.Февраль.2024 12:04:45 UTC](https://meta.discourse.org/t/topic-cards/296048 "2024-02-20T12:04:45Z")
**Posts on this page:** 20
**Page:** 5
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [08.Июль.2025 17:38:39 UTC](https://meta.discourse.org/t/topic-cards/296048/84 "2025-07-08T17:38:39Z")
К сведению: вход в безопасный режим для выполнения массовых действий может быть альтернативой отключению компонента темы для всех. Очевидно, это всё ещё лишние хлопоты, но, возможно, с меньшим влиянием на остальных?
---
### Author:  [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [08.Июль.2025 18:49:14 UTC](https://meta.discourse.org/t/topic-cards/296048/85 "2025-07-08T18:49:14Z")
Да, я так и понял, узнав о безопасном режиме…
Но я бы всё же предпочёл, чтобы виджет был доступен.
---
### Author:  [@DenisDoroshchuk](https://meta.discourse.org/u/DenisDoroshchuk)
#### Post date: [05.Август.2025 12:23:20 UTC](https://meta.discourse.org/t/topic-cards/296048/86 "2025-08-05T12:23:20Z")
Здравствуйте,
Спасибо за ваш компонент! Мы заметили проблему при использовании вашего компонента на форуме [https://community.escapecollective.com/](https://community.escapecollective.com/). Если нажать на заголовок темы, SPA перезагружается (я прикрепил GIF с этой проблемой), но если нажать на карточку вне заголовка, всё работает корректно. Проблема была обнаружена из-за того, что компонент Guest Gate не работал должным образом из-за перезагрузки страницы.
Вот предложение: [Guest Gate Theme Component - #154 by Don](https://meta.discourse.org/t/guest-gate-theme-component/225107/154?u=denisdoroshchuk)
Не могли бы вы взглянуть на эту проблему?
Спасибо,
Денис Д.
---
### Author:  [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [05.Август.2025 17:50:46 UTC](https://meta.discourse.org/t/topic-cards/296048/87 "2025-08-05T17:50:46Z")
> [@tknospdr](#):
>
> Спасибо, я добавил:
>
> ```plaintext
> .topic-card.has-max-height {
> background: #e6ecf2
> }
> .topic-card.has-max-height:hover {
> background: #ddecf7
> }
>
> ```
>
> И это отлично работает со стандартной палитрой «Оттенки синего».
>
> Ладно, часть 2. Как отредактировать это, чтобы оно работало с двумя цветовыми палитрами? Выглядело хорошо, пока браузер не переключился в тёмный режим.
>
> Снова отвечаю на свой собственный вопрос…
>
> Вчера я узнал про `@media (prefers-color-scheme: light/dark)`, так что теперь всё в порядке.
Похоже, что с последним обновлением Discourse что-то изменилось.
Теперь только самый левый край моих карточек тем подчиняется этому CSS-коду. Я пытаюсь разобраться, чтобы найти решение, но пока безрезультатно.
Может ли кто-то другой подтвердить это и попытаться найти необходимые изменения?
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [05.Август.2025 18:01:09 UTC](https://meta.discourse.org/t/topic-cards/296048/88 "2025-08-05T18:01:09Z")
Проблема заключается в недавно добавленной переменной для цвета фона тем, которые вы уже прочитали.
Я не думаю, что об этом изменении есть публикация в #dev-news. Однако вы можете найти некоторую информацию здесь:
> [@Styling Discourse with variables: Show & Tell](https://meta.discourse.org/t/styling-discourse-with-variables-show-tell/376614?u=moin):
>
> We’ve recently added a lot of css variables to Discourse. These variables make theming and customizing aspects of the UI much easier. For many changes, you will no longer need to target super specific elements in the html, and instead only change a variable. If you are curious about what variables are able to be changed, I suggest you look through the app using this regex → --([a-zA-Z0-9\-\_]+): If using a code editor and searching for all instances of the above regex, you should see something …
---
### Author:  [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [05.Август.2025 18:23:14 UTC](https://meta.discourse.org/t/topic-cards/296048/89 "2025-08-05T18:23:14Z")
Значит, есть способ отключить этот CSS? Это полностью испортило внешний вид моего сайта, а я не очень разбираюсь в программировании, поэтому не знаю, как это исправить.
Я посмотрел в инспекторе элементов и увидел слово ‘visited’ на всех сломанных темах, а на той, которая выглядит правильно, его нет.
Как это исправить?
Тема, которую я ещё не посещал (без наведения):
А при наведении курсора:
А остальные сломаны.
---
### Author:  [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [05.Август.2025 20:23:37 UTC](https://meta.discourse.org/t/topic-cards/296048/90 "2025-08-05T20:23:37Z")
Это оказалось сложнее отыскать, чем следовало бы. (Я вполне уверен, что это из-за моих недостатков, но всё же…)
Похоже, что добавление:
```plaintext
.topic-list-item-background-color--visited {
background: none
}
```
исправило проблему без каких-либо нежелательных побочных эффектов.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [05.Август.2025 21:30:55 UTC](https://meta.discourse.org/t/topic-cards/296048/91 "2025-08-05T21:30:55Z")
В ваших стилях теперь нужно изменить только эти две переменные:
```css
--topic-list-item-background-color
--topic-list-item-background-color--visited
```
Так что что-то вроде этого должно сработать:
```css
:root {
--topic-list-item-background-color: ВАШ ЦВЕТ ЗДЕСЬ;
--topic-list-item-background-color--visited: ВАШ ЦВЕТ ЗДЕСЬ;
}
```
---
### Author:  [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [05.Август.2025 22:05:08 UTC](https://meta.discourse.org/t/topic-cards/296048/92 "2025-08-05T22:05:08Z")
Как это объяснит различия при переключении между светлой и тёмной темой?
Также мне не нужно, чтобы цвет менялся после посещения ссылки, и это не учитывает изменение цвета при наведении.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [06.Август.2025 13:55:30 UTC](https://meta.discourse.org/t/topic-cards/296048/93 "2025-08-06T13:55:30Z")
> [@tknospdr](#):
>
> Как это объяснит различия при переключении между светлой и тёмной темой?
Вы можете использовать CSS-функцию [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)
`--variable-name: light-dark(#efedea, #223a2c);`
{quote=“tknospdr, пост:92, тема:296048”]
Я не хочу, чтобы цвет менялся после посещения
[/quote]
Вы можете установить оба значения одинаковыми.
> [@tknospdr](#):
>
> Это не покрывает изменение цвета при наведении.
В ядре ничего не сделано для `:hover`. Вам просто нужно убедиться, что переменная устанавливается в нужное значение при наведении.
---
### Author:  [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [07.Август.2025 14:35:11 UTC](https://meta.discourse.org/t/topic-cards/296048/94 "2025-08-07T14:35:11Z")
У меня всё ещё не работает.
Вот что изначально работало:
```plaintext
// Смешивание цветов карточек тем с темой
@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;
}
}
```
Затем после последнего обновления я добавил это, и сначала всё работало, но потом перестало:
```plaintext
.topic-list-item-background-color--visited {
background: none
}
```
После этого, основываясь на ваших словах, я попробовал как добавить к текущему, так и полностью заменить всё на это:
```plaintext
: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** , потому что непрочитанные темы отображаются правильно, а прочитанные — сломаны.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [07.Август.2025 21:12:20 UTC](https://meta.discourse.org/t/topic-cards/296048/95 "2025-08-07T21:12:20Z")
> [@tknospdr](#):
>
> `--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);`
Эта переменная не существует.
```plaintext
.topic-card.has-max-height:hover {
--topic-list-item-background-color: ВСТАВЬТЕ ЦВЕТ ЗДЕСЬ
--topic-list-item-background-color--visited: ВСТАВЬТЕ ЦВЕТ ЗДЕСЬ
}
```
Вот что вам нужно, надеюсь, это поможет!
---
### Author:  [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### Post date: [08.Август.2025 18:55:41 UTC](https://meta.discourse.org/t/topic-cards/296048/96 "2025-08-08T18:55:41Z")
Это минимальное количество строк, которое я смог придумать, и оно, похоже, работает корректно.
```plaintext
// Смешивание цветов карточки темы с темой
.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;
}
}
```
---
### Author:  [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [15.Август.2025 10:43:17 UTC](https://meta.discourse.org/t/topic-cards/296048/97 "2025-08-15T10:43:17Z")
Я создал [PR для этого компонента темы](https://github.com/discourse/discourse-topic-cards/pull/53) с двумя дополнениями:
### Функция: Переключатель для рекомендуемых тем
Добавляет настройку **Показывать для рекомендуемых тем**
Делает использование карточек тем для рекомендуемых тем опциональным (как описано в [этом запросе на добавление функции](https://meta.discourse.org/t/dont-show-topic-cards-style-in-the-suggested-topics/312501))
### Функция: Ограничение по категориям
Добавляет настройку **Показывать в категориях**
Если поле не пустое, карточки тем отображаются только в выбранных категориях.
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [06.Сентябрь.2025 12:03:19 UTC](https://meta.discourse.org/t/topic-cards/296048/98 "2025-09-06T12:03:19Z")
Отличное дополнение, @RGJ! Мы протестировали его на нашем экземпляре, и оно работает безупречно. На мой взгляд, его обязательно нужно слить в основную ветку.
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [11.Сентябрь.2025 13:24:40 UTC](https://meta.discourse.org/t/topic-cards/296048/99 "2025-09-11T13:24:40Z")
Обнаружена ещё одна небольшая ошибка в CSS в этой теме на Discourse 3.5.0:
Вокруг нескольких элементов интерфейса, таких как история редактирования и элементы разворачивания цитаты, добавлена рамка.
Это связано с отсутствием классов `btn no-text` у кнопочных элементов
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [22.Сентябрь.2025 14:34:48 UTC](https://meta.discourse.org/t/topic-cards/296048/100 "2025-09-22T14:34:48Z")
Проверено и слито, спасибо за добавление!
---
### Author:  [@Picho\_Pelis](https://meta.discourse.org/u/Picho_Pelis)
#### Post date: [08.Октябрь.2025 17:47:48 UTC](https://meta.discourse.org/t/topic-cards/296048/101 "2025-10-08T17:47:48Z")
Честно говоря, у меня не получилось заставить это работать; выглядит это очень некрасиво. Я использую тему Horizon, помогите, пожалуйста.
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [08.Октябрь.2025 18:02:03 UTC](https://meta.discourse.org/t/topic-cards/296048/102 "2025-10-08T18:02:03Z")
Этот компонент не указан как совместимый с [темой Horizon](https://meta.discourse.org/t/horizon-theme/360486?u=moin).
Я не думаю, что это будет легко исправить, поскольку и то, и другое настраивает список тем, и, как указано в первом сообщении:
> [@Discourse](#):
>
> ℹ Этот компонент темы может вызывать конфликты с другими настройками списка тем
---
### Author:  [@Picho\_Pelis](https://meta.discourse.org/u/Picho_Pelis)
#### Post date: [08.Октябрь.2025 18:08:25 UTC](https://meta.discourse.org/t/topic-cards/296048/103 "2025-10-08T18:08:25Z")
> [@tknospdr](#):
>
> ```plaintext
> .topic-card.has-max-height {
> background: #e6ecf2
> }
> .topic-card.has-max-height:hover {
> background: #ddecf7
> }
>
> ```
Как мне добавить CSS, который я вижу здесь в теме, слишком много CSS
[Предыдущая страница](https://meta.discourse.org/t/topic-cards/296048.md?page=4)
[Следующая страница](https://meta.discourse.org/t/topic-cards/296048.md?page=6)