Acceder al color de la categoría en SCSS

Soporte
1

Hola,

esta es mi primera vez creando un tema personalizado, así que por favor sean comprensivos.

Estoy intentando personalizar la página de lista de categorías, para que se vea así:

image
image614×319 40.7 KB

La idea es eliminar el borde izquierdo y agregar “píldoras”.
El SCSS para agregar píldoras es bastante sencillo:

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

pero no puedo acceder al color de la categoría que está disponible aquí: discourse/app/views/categories/index.html.erb at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

image
image610×176 10.2 KB

¿Existe una manera sencilla de acceder a ese color desde CSS?

2

Por ahora no hay una forma sencilla de hacerlo.

Lo que podríamos hacer es mover estos colores a propiedades personalizadas de CSS en lugar de establecerlos en línea, lo que haría que los colores fueran fácilmente accesibles en cualquier CSS/SCSS. No sé cuándo podremos hacerlo, pero lo mantendré en mi lista de tareas pendientes.

3

¡Eso sería genial :slight_smile:!
Por cierto, ¿hay alguna otra forma de lograr la vista que busco?
He leído que puedo sobrescribir plantillas para partes específicas de Discourse. ¿Qué archivo de plantilla debo sobrescribir y cómo debería hacerlo en mi tema personalizado?

4

Mi solución temporal actual es sobrescribir la plantilla components/parent-category-row.
Estoy agregando un elemento div adicional de esta manera:

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

image
image1153×653 49 KB

Me gustaría evitar sobrescribir plantillas porque podrían cambiar en el futuro.

@awesomerobot una forma integrada para acceder al color de la categoría sería genial :slight_smile:

5

@tjot,

Es posible hacer un truco de CSS con el borde del pseudo-elemento ::after para obtener el efecto que deseas.

.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

Ten en cuenta que he aplicado el estilo directamente al elemento h3 del título porque es un hijo directo del td en el que se aplicó el estilo en línea. Por lo tanto, si la plantilla alguna vez se deshace de él, tendrás que ajustar tu CSS.

Pero puedes omitir la anulación de components/parent-category-row como querías.