Tiny Tiny RSS: Community

Custom CSS to change color of Favorite Star


#1

Hi

Tiny Tiny RSS is terrific software. However, the color difference when a Favorite Star is clicked is not very obvious for those who are color-blind.

How would I use custom CSS (or some other technique) to change the colors for when a Favorite star is selected vs not selected?


#2

something like that should work (user css)

	#floatingTitle.marked i.marked-pic,
	.cdm.marked .left i.marked-pic,
	.hl.marked .left i.marked-pic {
		color : red ! important;
	}

#3
body.ttrss_main #feeds-holder #feedTree i.icon.icon-star, /* left pane */
body.ttrss_main .hl.marked .left i.marked-pic /* body */{
    color: magenta;
}

#4

Both of those work great

Thanks!


#5

Instead of, or in addition to, using a different color, I would add another change that doesn’t involve color. Keeping it strictly in the realm of CSS properties, something like this:

transform: rotate(35deg);

#6
body.ttrss_main #feeds-holder #feedTree i.icon.icon-star,
body.ttrss_main .hl.marked .left i.marked-pic {
  animation-name: spin;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#7

lol. I thought about throwing in a more reasonable animation transition but I couldn’t be arsed to look up the right syntax.


#8

The rotate suggestion works great - thanks!

The “spin” suggestion does not seem to have any effect - what else would be needed other than literally inserting that in the custom CSS section?


#9

alright what if we make them rotate constantly if checked

that would be cool right

e: oh nvm i guess that’s pretty much what is described above already


#10

Maybe these two selectors would apply a more reasonable animation? I’m a little unsure of the first one, I just removed “.marked”.

body.ttrss_main #feeds-holder #feedTree i.icon.icon-star,
body.ttrss_main .hl .left i.marked-pic {
  transition: transform 0.2s linear;
}

body.ttrss_main #feeds-holder #feedTree i.icon.icon-star,
body.ttrss_main .hl.marked .left i.marked-pic {
  transform: rotate(35deg);
}

#11

yeah i need to learn how to read :man_facepalming:

e: what if we make the entire ui rotate while the star stays static #whoa