Instructure Patches

[lishaduck]

Follow up to #1819.

Closes #1884

[lishaduck]

I'm also not sure how much we want to tie ourselves to Natsumi, the sidebar is completely illegible to me (using stock Zen rn, but Nebula also doesn't have --natsumi-glass-background anymore).

[GeorgeSoryal]

Yeah, sorry that was my first time contributing to this and I wasn't sure what way the blur effect was being achieved or what the protocol was. I'm mapping it to my school's subdomain in the advanced settings. I modeled it on my browser using the "high contrast mode" that's found in the profile sidebar section. Anyways, the reason I was coming was to add this for darkreader since it's required to be on but when it's on the background is not transparent. See if you can review this or if you think it makes sense here, and tell me if you wanna add it to one of your commits since you already have a PR open or if you want me to make another one, thank you.

/* darkreader */
:root {
--darkreader-background-ffffff: transparent !important;
}

[lishaduck]

Yeah, sorry that was my first time contributing to this and I wasn't sure what way the blur effect was being achieved or what the protocol was.

Nah, you're good! Everybody starts somewhere (I think this is honestly my first PR here? I usually just use ubo if I want to override it.)

I'm mapping it to my school's subdomain in the advanced settings.

That shouldn't be necessary? It works fine for me without that. 🤔

I modeled it on my browser using the "high contrast mode" that's found in the profile sidebar section.

Good to know, thanks for the tip!

Anyways, the reason I was coming was to add this for darkreader since it's required to be on but when it's on the background is not transparent.

Yeah, that's what I've been working on. I use BetterCanvas's Dark mode (I do use Dark Reader, but I turned it off for Canvas) but it's AGPL so I can't just steal copy their list.
Having said that, I wonder how high-contrast mode is implemented. Maybe we could piggyback on it?

See if you can review this or if you think it makes sense here, and tell me if you wanna add it to one of your commits since you already have a PR open or if you want me to make another one, thank you.

Just cause it'd conflict I guess I'll go ahead and add it in, but I'll be sure to mark you as the commit author.

[lishaduck]

I'm also not sure how much we want to tie ourselves to Natsumi, the sidebar is completely illegible to me (using stock Zen rn, but Nebula also doesn't have --natsumi-glass-background anymore).

Also, I patched Nebula to fix (most of) the bugs I was hitting in 3.3, so it does work now, although only by accident. Nebula doesn't scope the PDF reader code it borrowed from Natsumi, so --natsumi-glass-background leaks out. Either way, I don't think we should tie it to an internal detail like that.

[GeorgeSoryal]

Could just copy and paste to replace that line with the --natsumi-glass-background value:
color-mix(in srgb, var(--natsumi-colors-secondary) 60%, transparent);
I agree about not including some third-party css value, when I did that I forgot Nebula and zen internet were separate.

[GeorgeSoryal]

I'm mapping it to my school's subdomain in the advanced settings.

Oh, I understand the problem! Issue #1884 has the same problem and the solution is to rename the file to "+instructure.com.css"
Not sure if we can remove a file and add another one in a commit (permissions), though.

[lishaduck]

Could just copy and paste to replace that line with the --natsumi-glass-background?

Yeah, but that depends on --natsumi-colors-secondary, so then we're going down a rabbit hole. But yah, that was my plan.

[lishaduck]

Oh, I understand the problem! Issue #1884 has the same problem and the solution is to rename the file to "+instructure.com.css" Not sure if we can remove a file and add another one in a commit (permissions), though.

Yeah, I figured it was one of the prefixes. 👍🏻

[lishaduck]

Ok, you can set your custom CSS URL to https://raw.githubusercontent.com/lishaduck/my-internet/refs/heads/pub/styles.json to pull in these changes. It'll give you a scary prompt, say no. Then click in the extension popup to fetch the style.

[lishaduck]

Yeah, that's what I've been working on. I use BetterCanvas's Dark mode (I do use Dark Reader, but I turned it off for Canvas) [...]
Having said that, I wonder how high-contrast mode is implemented. Maybe we could piggyback on it?

If you install BetterCanvas, it now piggybacks on its CSS when available. Make sure you install BetterCanvas, not BetterCampus. They took the extension closed-source, made it Chromium exclusive (tho they use WXT so not sure what they're doing?), and rewrote dark mode; I'm not supporting it. I assume you're consuming this via a Firefox fork (e.g., Zen), so probably not an issue, but worth noting.

but it's AGPL so I can't just steal copy their list.

WRT licensing—first off, BetterCanvas is not AGPL, it's MIT. They slapped AGPL on it when they closed-sourced it to make it look scary, but that just retrospectively dual-licenses it. It doesn't remove the fact that it's also MIT.
Second off, I realized it uses a bunch CSS vars, so I just overrode them. If we prefer not to have the dependency, we could also add the list ourselves—again, the list is MIT licensed.

[GeorgeSoryal]

What is stopping this from being merged?

[lishaduck]

What is stopping this from being merged?

At bare minimum, I've found a few more classes after daily-driving this for a few months now.
Other than that, just needs a review from sameerasw.

[sameerasw]

Can you resolve the small conflict in the readme, I did not know that file was updated in this PR so I merged another one.

[lishaduck]

Can you resolve the small conflict in the readme, I did not know that file was updated in this PR so I merged another one.

Yeah, probably should've made a different PR. Rebased it, should be good to go now.