Custom adventure log background colour - Part 2

LordMisha

My first question relating to this was answered by Abersade. This is a follow up question regarding one part. So I have tag that drives a custom lok for specific adventure logs, specifically 'news' changes colours for adventure logs. It  all works except for the one part I haven't gotten to work. The .overflow-fade-out portion.

https://thestarsdontcare.obsidianportal.com/adventure-log

You can check out the logs and see the affect. Not working on the overflow. Here is the code that works for everything:

.adventure-log-index .adventure-log-post .columns:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="news"]) {
background-color:#000 !important;
}

.adventure-log-index .adventure-log-post .columns:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="news"]) + .small-3.columns {
background:#000 !important;
}

.post-header-container:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="news"]) {background-color:#000 !important;
}

.post-header-container:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="news"]) + .row > .small-12.columns > * {
background:#000 !important;
}

Now here are two versions I tried for the overflow that haven't worked:

.adventure-log-index .adventure-log-post .columns:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="news"]) + div.post-content > div.overflow-fade-out {
background:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1)) !important;
}

.adventure-log-index .adventure-log-post .columns:has(ul.tags-list.inline-list.small-list a.tag-link[data-tag="news"]) + .adventure-log-index .post-content > .adventure-log-index .overflow-fade-out {
background:-webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1)) !important;
}

So the parent-child thing and linkage path are stuff I have rarely used so figuring I am just not quite getting the pathing correct. Hopefully one of the smarter people here can fix me up :)

Abersade

Couple of notes.

• The !important tags there don't appear to be needed, using them when it's not strictly necessary can cause problems with other CSS not working later


• Add the following code to your Alternate ADV Logs section in your CSS: div.adventure-log-teasers div.current-posts div.adventure-log-post-container.teaser.tag-news div.adventure-log-post div.row div.small-9.columns.post-column div.post-content div.overflow-fade-out {background:#000;}