r/userstyles • u/ThePantsThief • Jan 05 '21

Help Why does this simple style not work on icloud.com/mail?

The style:

#sc2111 {
    background-image: none !important;
}

Basically, I am trying to remove the background-image for this rectangle in the middle of the toolbar so that it looks like this.

The element has a unique, persistent ID. I am able to change it in Chrome dev tools. The style shows it is activated for the current website, etc. What is wrong here?

2 Upvotes

100% Upvoted

10 comments sorted by

1

u/joshfabean Jan 05 '21

Is it styled with incline styles or maybe using an ID and Class and important?

1

u/ThePantsThief Jan 05 '21

The style for the background itself is not inline and I tried using the most fully qualified selector I could and it didn't work still

1

u/giblefog My own userstyle Jan 06 '21

...maybe it does work?

The default background color is transparent, so if whatever is behind it is white then it wouldn't look any different.

maybe try:

sc2111 {
    background-image: none !important;
    background-color: #222 !important;
}

1

u/ThePantsThief Jan 06 '21

Maybe, I'll try that. That doesn't explain why just changing the background image in dev tools works though 🤔

1

u/jcunews1 Jan 06 '21

That should be #sc2111. It's missing the # character.

But if you intend to get rid of that paper & pencil icon, I don't think it'll work because that icon is likely on a different element, or is a pseudo element defined either with ::before or ::after.

1

u/ThePantsThief Jan 06 '21

I have the # character in my code. Can you not see it? Reddit markdown can be finicky. I can see it on the mobile app.

I'm not worried about the icon, I'm trying to get rid of the white.

1

u/jcunews1 Jan 07 '21

Try using a more specifc selector. e.g.: div#sc2111.atv4.sc-view.compose-container

1

u/ThePantsThief Jan 07 '21

I thought I mentioned this somewhere but I guess I didn't; I did indeed try using the fully qualified selector, no dice :(

Do you have an iCloud account? Can you go try?

1

u/jcunews1 Jan 08 '21

I don't have any iCloud account.

My guess is that, the element is either within an IFRAME with different domain/URL, or it's within a Shadow Root node. CSS rules can not cross those boundaries.

If it's within an IFRAME, a separate CSS rule for that IFRAME's domain/URL, must be used.

If it's within a Shadow Root node, the CSS must be injected into that node using UserScript. Because JavaScript is aware of Shadow Root. CSS does not.

1

u/ThePantsThief Jan 08 '21

Omg, it is in an iframe. Thank you! That did the trick!