Доступ к цвету категории в SCSS

Поддержка
1

Привет,

это моя первая попытка создать собственную тему, так что, пожалуйста, отнеситесь с пониманием.

Я пытаюсь настроить страницу списка категорий, чтобы она выглядела так:

image
image614×319 40.7 KB

Идея в том, чтобы убрать левую границу и добавить «пилюли».
SCSS для добавления «пилюль» довольно прост:

.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    &::after {
        content: "";
        width: 20px;
        height: 80%;
        position: absolute;
        background-color: red;
        border-radius: 20px;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
    }
}

но я не могу получить доступ к цвету категории, который доступен здесь: discourse/app/views/categories/index.html.erb at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

image
image610×176 10.2 KB

Есть ли простой способ получить этот цвет из CSS?

2

На данный момент простого способа сделать это нет.

Мы могли бы перенести эти цвета в пользовательские свойства CSS вместо того, чтобы задавать их напрямую, что сделало бы цвета легко доступными в любом CSS/SCSS. Я не знаю, когда у нас появится возможность это реализовать, но я добавлю это в свой список задач.

3

Это было бы здорово :slight_smile:
Кстати, есть ли ещё какой-то способ достичь нужного мне вида?
Я читал, что можно переопределять шаблоны для отдельных частей Discourse. Какой файл шаблона мне нужно переопределить и как это сделать в моей собственной теме?

4

Мой текущий обходной путь — переопределить шаблон components/parent-category-row.
Я добавляю дополнительный элемент div следующим образом:

{{#unless noCategoryStyle}}
<div class="pill" style="background-color:#{{category.color}}"></div>
{{/unless}}

image
image1153×653 49 KB

Я хотел бы избежать переопределения шаблонов, так как они могут измениться в будущем.

@awesomerobot встроенный способ доступа к цвету категории был бы отличным :slight_smile:

5

@tjot,

Возможно реализовать CSS-хак с использованием границы псевдоэлемента ::after, чтобы получить нужный вам эффект.

.category-list tbody .category {
    border-left: none;
    position: relative;
    padding-left: 50px;

    > h3:first-child {
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        
        &::after {
            content: "";
            width: 0px;
            height: 70%;
            position: absolute;
            border-radius: 20px;
            border-width: 10px;
            border-style: solid;
            border-color: inherit;
            top: 50%;
            transform: translateY(-50%);
            left: 10px;
        }        
    }
}

image
image1080×738 130 KB

Обратите внимание, что я применил стиль напрямую к элементу h3 заголовка, так как он является прямым потомком td, к которому был применён встроенный стиль. Поэтому, если в шаблоне когда-либо уберут эту структуру, вам придётся скорректировать свой CSS.

Однако вы можете отказаться от переопределения components/parent-category-row, как вы хотели.