openusercss / openusercss-deepdark Goto Github PK
View Code? Open in Web Editor NEWHost your code in the dark. May the dark be kinder on thine eyes. (openusercss.org dark theme)
License: GNU General Public License v3.0
Host your code in the dark. May the dark be kinder on thine eyes. (openusercss.org dark theme)
License: GNU General Public License v3.0
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!
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;
}
@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.
I only fixed it for the seen notifications.
Also fix #14.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.