כרטיסי נושא

[JammyDodger]

למען האמת, כניסה למצב בטוח לביצוע הפעולות ההמוניות עשויה להיות חלופה להשבתת רכיב הנושא עבור כולם. כמובן שזו עדיין התעסקות נוספת, אך אולי עם פחות השפעה על כל השאר?

[tknospdr (David Muszynski)]

כן, זה מה שהבנתי אחרי שלמדתי על מצב בטוח…

[DenisDoroshchuk]

Hello,

Thank you for your component! We noticed a problem when using your component on the forum https://community.escapecollective.com/. If you click on the topic title, the SPA reloads (I attached gif with this problem), but if you click on the card outside the title, everything works fine. The problem was discovered because the Guest Gate component was not working properly due to the page reloading.
Here is a suggestion: Guest Gate Theme Component - #154 by Don
Could you please take a look at this issue?

Thank you,
Denis D.

[tknospdr (David Muszynski)]

@tknospdr

Thanks, I added:

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

And it works perfectly with stock ‘Shades of Blue’ palette.

Alright, part 2. How do I edit it to work with 2 color palettes? Looked good till the browser switched to dark mode.

Answering my own question again…

I learned about @media (prefers-color-scheme: light/dark) last night, so all good.

So it appears something has changed with the last round of Discourse updates.
Only the very left edge of my topic cards are now respecting this CSS, I’ve been poking around to try and find what will fix it but so far have been unsuccessful.
Can anyone else confirm and see if they can track down the needed changes?

[Moin]

The problem is the recently added variable for the background color on topics you have read.

I don’t think there is a dev-news about this change. But you can find some information here:

Styling Discourse with variables: Show & Tell

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 …

[tknospdr (David Muszynski)]

So is there a way to suppress that CSS? This has destroyed the way my site looks and as I’m not really a coder in any sense of the word, I don’t know how to get around it.
I looked through the element inspector, and I see the word ‘visited’ on all the broken topics and I see that it’s missing on the one that still looks right.
How do I fix this?

Topic I have not visited yet (no hover):

And with a mouseover:

And the others are broken.

[tknospdr (David Muszynski)]

זה היה קשה יותר לאיתור ממה שהיה צריך להיות. (אני די בטוח שזה נובע מחסרונותיי, אבל עדיין…)

נראה שהוספת:

.topic-list-item-background-color--visited {
    background: none
}

תיקנה את זה ללא תופעות לוואי לא רצויות.

[jordan.vidrine]

בסגנונות שלך, כעת עליך לשנות רק את שני המשתנים הללו:

--topic-list-item-background-color
--topic-list-item-background-color--visited

לכן משהו כזה אמור לעבוד:

:root {
--topic-list-item-background-color: YOUR COLOR HERE;
--topic-list-item-background-color--visited: YOUR COLOR HERE;
}

[tknospdr (David Muszynski)]

כיצד החשבון הזה יתחשב בהבדלים בעת מעבר בין אור לחושך?

[jordan.vidrine]

@tknospdr

How would that account for the differences when changing between light and dark?

You can use the css function light-dark()

--variable-name: light-dark(#efedea, #223a2c);

@tknospdr

I don’t want it to be different once visited

You can set them both to the same thing.

@tknospdr

doesn’t cover the hover color change.

Nothing has been done to :hover in core. You’ll just need to make sure to set the variable to what you want when hovering.

[tknospdr (David Muszynski)]

This still isn’t working for me.
This is what originally worked:

// Blend topic card colors with theme
@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;
    }
}

Then after the latest update I added this is it seemed to work, but then stopped:

.topic-list-item-background-color--visited {
    background: none
}

Then, based on what you said here I tried both adding to the current and replacing everything with this:

: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);
}

There must be another variable that I need to cover hover-visited, because unread threads work right, but visited ones are busted.

[jordan.vidrine]

@tknospdr

--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);

This variable does not exist.

.topic-card.has-max-height:hover {
--topic-list-item-background-color: ADD COLOR HERE
--topic-list-item-background-color--visited: ADD COLOR HERE
}

This should be what you need, hope that helps!

[tknospdr (David Muszynski)]

זהו המספר המועט ביותר של שורות שיכולתי להמציא שנראה שעובד כראוי.

// Blend topic card colors with theme
.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;
    }
}

[RGJ (Richard - Communiteq)]

I have made a PR to this theme component with two additions:

Feature: Suggested topics switch

Adds the setting Show for suggested topics

Makes use of topic cards for suggested topics optional (as described in this feature request)

Feature: Limit to categories

Adds the setting Show on categories

If non-empty, uses topic cards on selected categories only.

[jrgong]

תוספת פנטסטית @RGJ, בדקנו אותה על המופע שלנו והיא עובדת כמו קסם, לדעתי צריך למזג אותה בהחלט.

[jrgong]

Found another small CSS bug with this tc on discourse 3.5.0:

A border is added around several UI elements such as edit history and expand quote elements.

This is due to classes btn no-text missing from the button elements

[chapoi]

נבדק ומוזג, תודה על התוספת!

[Picho_Pelis (Carlos Andres)]

I honestly haven’t been able to make it work, look how ugly it turns out, I use the Horizon theme, help me.

[Moin]

This component is not listed as compatible with the Horizon theme.

I don’t think it will be easy to change that because both customize the topic list, and as stated in the first post:

@Discourse

This theme component may cause conflicts with other customisations to the topic list

[Picho_Pelis (Carlos Andres)]

@tknospdr

.topic-card.has-max-height {
    background: #e6ecf2
}
.topic-card.has-max-height:hover {
    background: #ddecf7
}

How can I add the CSS, which I see here in the threads, a lot of CSS