openusercss / openusercss-deepdark Goto Github PK

Also fix #14.

Using the component IDs (the data-v-##### selectors) carries a hidden, backstabbing thorn, because they are automatically generated.
So at some point, the theme will break, because the components will get a different ID and you'll be left pondering why pretty much everything is "unthemed" 👷.

I put classes into the HTML that start with .ouc- specifically for making theme writing for the site easier. If you can, please start switching over to them wherever possible.
If there are classes missing, I'd be happy to add them as needed!

The image speaks for itself

@DecentM Help me out to get this popover element to not disappear. Such elements are really hard to theme, but yours really gets on my nerves XD

*, *:before, *:after {
transition-property: none !important;
transform: none !important;
animation: none !important;
visibility: visible !important;
display: block !important;
}

#vomnibar Also needs theming. I will have to add some url or regexp for the iframe (though even if I theme an iframe with stylus it is still not themed, even if it is on the same domain, for some reason)
Also what is this vomnibar thing? I got it by using the code above. I have no idea how to trigger it.

So this is the HTML https://gist.github.com/the-j0k3r/bd3793aa5dd2d19b421cb296db70434c/2c176470a2d4432331c9a9870795a34c047faf2d

So with the CSS below I get this result.

.card-image .ouc-responsive-image
{
	background-image: none !important;
	/*background-image: url("https://openusercss.org/img/main.bg-x640.png") !important; */
	background: linear-gradient(var(--hover-background), var(--main-background)) !important;
}

The problem is themes with actual screenshots are also affected by this, so Im trying to target the image main.bg-x640.png directly

Ive tried adding img[src$="main.bg-x640.png"] img[src^="main.bg-x640.png"] or img[src*="main.bg-x640.png"] to no avail, Ive tried on it on and adding to selectors that work.

As an amateur this is a head scratcher. Some assist would be nice.

I only fixed it for the seen notifications.

@the-j0k3r

Remember what this was for?

	/* this styles the bio preview pane below and the theme submission preview pane
	Im taking inspiration from the post submission preview well
	commit d021dc9 or https://git.io/vhKn1 */
	.columns > div > div > div:nth-child(4), .box.is-minheight-description
	{
		background: var(--main-background) !important;
		color: var(--main-text) !important;
		opacity: .75;
	}

Because I will have to delete it due to:

• Upvotes svgs > make them main-text and have upvoted/downvoted blue instead
• Edited svg should be blue
• Maybe the spacer in the signature made hover, not sure << Made it dimer instead
• The progress bar as you scroll down > maybe hover instead of white << Made it dimer instead