#How do I set Timeless's Icons to make it suitable for a dark color scheme?
18 messages · Page 1 of 1 (latest)
[[mh:fisch]] I think puts backgrounds behind each of these to make them visible
oh that fix is nice and clean. Just filter: invert(1) hue-rotate(180deg) brightness(100); applied to the elements with the icons.
or just use citizen 🔥
I'm killing it today with "have an issue with Windows? just use Linux instead" advice
No
only valid answer tbh
Thanks! It's kinda hacky and not really the best, but it'll do.. Seems like I'll also have to invert back a few things like the text colors, watchlist, and "button" styling too :/
there does seem to be one issue though with how i want to style it?..
and that is that there seems to be this weird ugly gap only on the each other side of .tools-inline ul for some reason (notice the message button having even gaps on each side?)
i can't seem to find the cause and i don't think it's coming from a margin or padding property
i already set the margins and padding to 0 first before adding a custom one..
these link header things are lowkey kinda ahh to style
here's the code if needed
/* -- SPACINGS -- */
.tools-inline div, .tools-inline ul, .tools-inline li { /* reset margin FIRST */
margin: 0;
}
/* -- BACKGROUND -- */
.tools-inline div {
padding: 6px 10px 6px 10px;
border-top: 2px solid rgba(0, 0, 0, 0.6) !important;
border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important;
background: var(--sidebar-gradient);
box-shadow: var(--sidebar-shadow);
}
.tools-inline li.selected {
background:#FFF;
padding:3px;
}
/* -- LIGHT ICONS (invert!) and STYLING -- */
.tools-inline li, .tools-inline ul > span {
border: none;
filter: invert(1);
}```
okay i think i found it out
the ugly gap seems to be coming from .tools-inline ul but nothing i try is removing it somehow
it's not a padding or a margin
??
Are you able to share a link to your wiki?
slr, i was editing a few things .. here you go https://roduality.miraheze.org/wiki/Main_Page