#How do I set Timeless's Icons to make it suitable for a dark color scheme?

18 messages · Page 1 of 1 (latest)

weak mason
#

One more question, how would I be able to change the text color and "accent" (line beneath button of active page) of the edit buttons?

wraith torrent
#

[[mh:fisch]] I think puts backgrounds behind each of these to make them visible

weary sparrowBOT
latent temple
#

oh that fix is nice and clean. Just filter: invert(1) hue-rotate(180deg) brightness(100); applied to the elements with the icons.

wraith torrent
#

or just use citizen 🔥
I'm killing it today with "have an issue with Windows? just use Linux instead" advice

weak mason
#

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);
}```
weak mason
#

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

#

??

latent temple
#

Are you able to share a link to your wiki?

weak mason