Fix chat-related classes due to class name changes

[mechalynx]

YouTube changed their classes again, seems like they removed the -0 and -1 from some of them and the #label element is under a different parent class, amongst a couple other changes.

[mechalynx]

By the way, I decided to add to the existing selectors instead of rewriting them because it seemed like that's the way you've been doing it thus far - tried to keep the style consistent, small as the changes may be. Feel free to change the PR any way you want, it's explicitly marked as modifiable.

[RaitaroH]

This is my first ever pull-request. Thank you for this. And, if you can, report issues in the future as well.

YouTube seems to change the f chat every month or so. This is the 5th time I have to retheme it. And the reason why I keep the older code is because sometimes youtube goes back to it, like they have done since yesterday with the big-red-button going back to an svg instead of a png file. At least for the material design. The button appears when auto-playback is stopped (say, with Iridium).

Also, I never watch streams so I almost never catch the chat changing myself. I might have noticed myself later, but it would have been after a longer period of time.

[RaitaroH]

There was more to do. I have done the changes in the 2.2.5 release d9d3987

[mechalynx]

Wow that was a lot of stuff I missed. I don't really watch streams either, I just stumbled across this.

If they're just playing with the class names, an attribute selector might be useful, like

yt-very-long-name-here[class^='yt-same-very-long-name-here'] {}
[id^='yt-we-decided-to-change-this-again'] {}

which would be a catch-all. Could match on prefix or included string. Yeah they're slower, but the consensus is that optimizing this stuff isn't worth it, plus the style already has so many selectors on elements and children elements, if this stuff was slowing anything down it would be a lot more noticeable. They also don't seem to be changing their custom element names, so that's not getting in the way.

Granted, this does nothing if selectors need to be expanded with new names and it's almost certainly not worth going over the style and changing all of them to this form, but whenever the style needs to be updated, it might save some time and effort in the future.

Might be a good or bad idea, just putting it here for consideration.

also GitHub seems to not like remembering 'Allow edits from maintainers.'...

[RaitaroH]

Now, here is the thing with being a "catch-all": you end up in trouble.
The problem with selecting the parents is that the children get the theming, which is a good thing for the most part, until it causes issues. Yeah, I can overwrite those, as long as I add the code lower in the script not above. Sometimes I don't do that because I have sections in my code and such (to some extent). As an example look at the go down button in the chat (line 972). You know why I had to add some code for the svg fill? Because it will fill with the main-color from above, the same as the background and become invisible, so I had to add an exception. The reason why this appeared is because I added a global hover paper-icon-button:hover .style-scope.iron-icon for svgs inside buttons in the chat thus causing this exact issue, you see.

I like being more granular with things. Takes more time to script, takes more space, it may take longer to implement on the page BUT it works really well.

Also, you didn't miss that much. The main stuff you missed was removing this ugly gradient for the 3dots button that appears next to a comment, the color in the input field, it's un/focused bar and some emoji stuff (the bar and the emoji were not that important anyway). I also like to have hover effects for stuff so I added that, I also made the #author name main-color just to make it more visible etc. So basically just some improvements that are not essential. But these improvements is what makes my themes what they are :)

If you can, I would really appreciate future additions from you. It may be either for youtube material or some of my other themes. You can see all bugs reported from userstyles here. Most of the time a bug can be fixed in around 10min or so. New color palettes are also appreciated. Or heck, if you feel like it, you may even make your very own DeepDark theme 👍 I made a template for this sort of thing here.

[mechalynx]

The funny thing is, I didn't miss that stuff in the quick fix I drafted in Stylish while the stream was still on. I forgot about it later xD.

I generally fix userstyles as I come across bugs in them so I'll definitely be contributing if I encounter something I can fix. That said, I only use 2-3 of the websites your themes support and this is the only one of your styles I use, so as much I can't resist messing with styles, I can't promise anything other than keeping an eye out for bugs on this style.

On a related note, I've been working on a bash script that can take a website's style and convert it to a format where all the colors are turned into variables, specifically to help in quickly theming websites (especially to turn them dark, which my eyes definitely appreciate). It's still very rough so I haven't uploaded it but since this came up I'll try to get an alpha version posted on GitHub as soon as possible, but that might be weeks from now.

[RaitaroH]

I do pride myself in having themes with as few bugs as possible, but you know, they still appear so thanks for keeping an eye out.

You are a linux user too huh? :) Nice. I hope you appreciate the color palettes I add in my themes. I do that for linux alone really. Maybe I should add the ubuntu colors at some point. I will see. Also, if you come across color palettes let me know.

You could also take a look at pywal and a video about it here. Obviously not the same thing, but imagine if you could link the two together. And no, I don't use pywal myself but just pointing it out.
I am not sure how well your script would do actually. From experience I can tell you that even if you try to modify the colors, many websites have images for stuff, either backgrounds or icons (would be great to have svgs but... and not to mention sites like vidme have svgs but as background img instead of being embeded in so fill won't work). Take a look at my myanimelist repo to see just how many images I had to make white.

On another note, here's a little snippet of code I made a long time ago for youtube. You might find it useful.

[mechalynx]

Since we're exchanging snippets, here's a userscript I wrote: https://github.com/MechaLynx/yt-url-at-time - it's on OpenUserJs as well.

I'm not exactly a Linux or Windows user. I use Windows as a host machine (so that I can play Windows-only games and test Windows stuff) and I run Linux in a VM practically all the time. Doing the reverse is pointless because Windows doesn't behave in a VM properly. I deeply loathe Windows but it's a necessary evil at the moment. My Linux VM runs Arch Linux without a graphical environment, since I use it as a test web server and a tool to preserve my sanity. It's an island of heaven in an ocean of hell.

On pywal: I remember seeing some similar tools by people posting Arch Linux desktop screenshots but I can't seem to find them now. I know it's a common thing people do. My tool is built to emit SCSS at the moment, though I'll add a CSS variable format almost certainly. I used colors a while ago to try and generate a color scheme from the avatar I'm using, to try and replicate it on my github page. There's lots of services online that can do the same so apparently it's not hard to automatically generate a color set off an image (apparently all you need is the histogram), it's just tricky to get the thresholds right and emit the correct code.

Just so there's no confusion, my tool doesn't take an image as an input though: you download the stylesheets of the page you want to re-style, feed them to it and it generates a set of files (depending on input) that have all the colors turned into variables. My plan is to extend it so it can take an arbitrary color scheme and apply it, but it's for the future.

The image stuff is tricky, but when it comes to non-color images (icons, titles, logos in many cases), you can just use filter: invert() through CSS to change it, as you already do in a couple places in this style. The subtle trick here is to not invert to 100%. I usually like a background of #222 with a foreground of #999 or about there. I've found through testing that invert(87.5%) turns any regular black and white image or element to pretty much the same colors, or close enough that it's not noticeable.

You can do further trickery with SVG filters, which are a whole labyrinth in and of themselves until you figure out the details. I used both of these tricks on the SCP-Wiki Night Mode theme, which is unofficially under my foster care for the moment. Check out these pages to see what I did:

• http://www.scp-wiki.net/scpfmmdbc-hub

  • check out the background image at the bottom - toggle the style to see how it gets inverted. That's done using a pseudo-element and invert(). It's not possible to just invert the element because it'll mess with the rest of the styles and filters can't currently be applied to background-image (although it seems it was proposed at some point). Hence this approach.

• http://www.scp-wiki.net/scp-artwork-hub

  • this one I'm particularly proud of: the title text image on this page is a gif with bad transparency. The edges around the text are white, so when the style was applied before this fix, the image was nasty and looked really jarring. I managed to cook a bunch of SVG filters which you can see in the source, that produces the proper effect - took some messing around with GIMP to figure out what would work. You can see what it would look like by removing my fix from the source (it's commented with the page title in the comment) and making the parent div's background black.

• http://www.scp-wiki.net/a-wandsman-in-the-court-of-the-hanged-king

  • this is just typical use of partial inversion. The images are mercifully simple so this works perfectly here, with the tiny flaw of not matching the textured background of the userstyle. But if one was brave enough, they could apply an SVG filter to replace the background with transparency :P which is possible as you can see, but kind of unsightly in the code.

I still have a huge backlog of fixes for that style, including changes I've made locally and haven't pushed yet. No idea when I'll get around to it...

[RaitaroH]

I gave you that snippet because I saw the youtube repo you have :)

I am 100% linux btw. I don't play games that much, though there are some things I would like to play in the future. I might get a separate machine or separate ssd just with windows on it for gaming. Not going to bother with virtualization or passthrough, though I might.

Also filter: invert(%) may not me enough. Nor it may be a good idea some times. Sometimes I also add a grayscale(100%). Sometimes using brightness(300%) can also be needed. I used many combinations of these. I can see you understand why, looking through your scp-night code. Check out my Stylus script (works with Stylish on chrome) where I managed to recolor the entire code with filters and have the code colors match the theme itself. Keep in mind that Stylus doesn't work that well in Firefox<57.

Many times I prefer to just use gimp or inkscape and make another image, if filtering doesn't cut it. Examples of this include: myanimelist, joshi, even youtube. (logos and icons)

What I would love to be able to do is simply replace an bitmap image with an svg one with CSS alone, but sadly it can't be done. In the case of youtube, I made a 404.svg file and simply converted that to png, but yeah not the same thing. I also made sprites for my mal style with svgs. Sadly color picking won't work unless I either choose the white variant for hover or I make more colors.

[mechalynx]

Yeah I just found out that Stylus doesn't work well with FF56... Dev edition updated to 57 today and I had to downgrade because I depend on so many extensions that don't work on 57. I did install it on Chrome though, but IIRC Chrome doesn't support inline SVG filters, only those you reference from a file and I'm unsure if a base64 data-uri can be used instead (I assume not). It's really sad how Google doesn't care much about SVG (much like how they scorn Math-ML...). I hope Stylus can work as a replacement for Stylish but I have no experience with it, only found out about it today - I wasn't even aware Stylish has analytics now...

I've decided to use data-uris for a page on the scp-wiki just because filtering that stuff would be like trying to build a ladder to the Moon, while standing on your nose (I'll probably try it anyway). So yeah, there's clearly cases where just making an image is better.

I'm not sure I understand what you mean when you say you can't replace an image with SVG using CSS. You can use a data-uri with an svg mime type and you can embed the SVG straight into the CSS and if that doesn't work, you can use base64. I can vaguely recall that Chrome is a bit constipated about SVG, but I don't think it resists svg in url(). When you say color picking, do you mean through the developer tools?

[RaitaroH]

Not sure about Stylus tho. I develop with it on F57 just to have it theme everything. As an ex it also doesn't affect iframes in F<57. I might even move to something like Waterfox in the future. Not sure.

I personally like to import images from github. It allows me to easily know the url and I can also just replace the image on github later without changing the code. Yeah, I know the advantages of data url tho.

I know you can change images like that. What I would like is to be able to have fill: color; like you can do with svgs. From what I was able to gather even if you add an svg with css you can't really affect it that much afterwards. I also tried on vidme to see if this works (not sure why they have svgs as background images but...) Maybe I am missing something?

[mechalynx]

A note on using github as a CDN: there's RawGit that is designed to actually work as a production CDN by fetching files from github repos and caching them actively. The caveat with using raw.githubusercontent is the mime types, but if that's not an issue, then you don't need RawGit. I still used it for the supplementary styles on scp-wiki-night-mode because raw.githubusercontent doesn't use mime types properly which means if you click it, Stylish wouldn't pick it up as a style. I felt it was more user-friendly (which I was concerned about since it's the kind of situation where, if it's not easy to use, people just won't use it) to use RawGit which lets you make a link that installs directly.

I see what you mean about CSS modifying SVG. You're correct on that - I forked a fiddle (got it from here) and tested it. The original fiddle approaches it differently though, by re-embedding the modified SVG in the :hover pseudo-class. It's ugly and the equivalent of cleaning a table with a grenade but it works. It can be made more palatable by putting the url() in a css variable instead.

Big images will obviously increase the size of the style, but since you can embed SVG with an svg mime type, compression can reduce the two instances to just their differences. Would be uncomfortable to maintain though. Remotely linking to the image through CSS is the same as a data-uri so it can't be worked around that way.

Not sure if raw.githubusercontent actually caches requests like a CDN though, so it might actually be more performant to embed them or use RawGit, I don't know.

[RaitaroH]

So I thought... about svgs. I really tried to find something about that, but yeah. And having it in :hover defeats the purpose I want for it. I'm sure you noticed how I always have hover for, well, a lot of stuff.

I know about rawgit. I mainly use it when importing. I found out about it when raw.githubusercontent would not work, I looked it up, and... duh. Stylus/Stylish actually allow importing, but userstyles.org doesn't let you add @import in the code. For easy of use I made this. It simply imports all my themes at once, with rawgit. Like so @import url("https://rawgit.com/RaitaroH/DuckDuckGo-DeepDark/master/DuckDuckGoDeepDark.css");
Not perfect, but easier than adding everything manually, or importing with Stylus.
Oh, and in case you care: you cannot add @import from url in userContent.css. I tried and it gives errors. Obviously, @import from local files would most likely work. Didn't bother to try because it is just easier to use greasemonkey or stylus anyway.

[mechalynx]

Well I put it in :hover as an easy demonstration, there's no limitation there.

Userstyles.org doesn't allow @import for performance reasons, as they say, but it's a shame they couldn't settle for warning the user instead of just cutting the feature entirely.

The reason I'm generally uncomfortable with distributing styles using means other than userstyles.org is because of automatic updates. It's not a problem for some users, but there's lots of people out there who will expect the extension to handle it for them, which isn't unreasonable. Not sure if @import caches anything, which, if not, would be a problem. I can't seem to find any way to add an updateUrl to an imported style in Stylus, nor is there any documentation on how you might embed it in the file itself. Stylish can install a style if you're viewing it directly in the browser with the proper mime type (hence my use of RawGit) but Stylus doesn't have that, so if you copy-paste it or import the file directly, it doesn't have any clue on how to update it.

I'm also uncomfortable with dummy files that just fetch remote content. Besides being kind of awkward, I've seen too many browser extensions do that, so I'm completely turned off by it. It's ok for styles, as there aren't any deep security issues but still, it's weird.

[RaitaroH]

Regarding svgs, it seems that your example doesn't actually change the fill of the svg when hover. It only changes the background color. The other example has a hover effect but with another data so... Still not what I want to do with it. I managed to do the same in thing in the past with the same results.

I only use import on my import-all. That is the point. Also, if updates are pushed to github they will appear as soon as rawgit updates the file. It is a shame Stylus doesn't know where to update from actually. You can leave an issue with this on it's github page.

[mechalynx]

Yeah that's why I said you're correct in that you can't change SVG properties with embedded SVG :P - the second one is a workaround. Unsightly but it seems to be the only way to do it at the moment. To my knowledge, the only way to use SVG presentation attributes in CSS is if you inline the SVG using <svg>, otherwise it doesn't work anyway.

[RaitaroH]

Yeah... sigh.

Anyway, this topic went from a userstyle issue to digressing and sidequesting.

See you around.