Acessar cor da categoria em SCSS

Suporte
1

Olá,

Esta é minha primeira tentativa de criar um tema personalizado, então, por favor, seja compreensivo.

Estou tentando personalizar a página de lista de categorias, para que ela fique assim:

image
image614×319 40.7 KB

A ideia é remover a borda esquerda e adicionar “pílulas”.

O SCSS para adicionar as pílulas é bastante simples:

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

Mas não consigo acessar a cor da categoria que está disponível aqui: discourse/app/views/categories/index.html.erb at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

image
image610×176 10.2 KB

Existe uma maneira fácil de acessar essa cor a partir do CSS?

2

No momento, não há uma maneira fácil de fazer isso.

O que poderíamos fazer é mover essas cores para propriedades personalizadas do CSS, em vez de defini-las inline, o que tornaria as cores facilmente acessíveis em qualquer CSS/SCSS. Não sei quando conseguiremos fazer isso, mas vou mantê-lo na minha lista de tarefas.

3

Isso seria incrível :slight_smile:
A propósito, existe alguma outra maneira de alcançar a visualização que quero?
Li que posso sobrescrever templates para partes específicas do Discourse. Qual arquivo de template devo sobrescrever e como devo fazer isso no meu tema personalizado?

4

Minha solução alternativa atual é sobrescrever o template components/parent-category-row.
Estou adicionando um elemento div extra assim:

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

image
image1153×653 49 KB

Gostaria de evitar sobrescrever templates, pois eles podem mudar no futuro.

@awesomerobot uma maneira integrada para acessar a cor da categoria seria incrível :slight_smile:

5

@tjot,

É possível fazer um truque de CSS com a borda do pseudo-elemento ::after para obter o efeito que você deseja.

.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

Note que apliquei o estilo diretamente ao elemento h3 do título porque ele é um filho direto do td em que o estilo inline foi aplicado. Portanto, se o template o remover, você terá que ajustar seu CSS.

Mas você pode pular a substituição de components/parent-category-row como desejava.