fading in /tags page

[phenomlab]

@DownPW it’s here
https://sudonix.com/post/3590

The exact CSS I have here is

@keyframes rotate180 {
        from {
          transform: rotate(0deg);
        }
       
        to {
          transform: rotate(180deg);
        }
      }
       
      @keyframes rotate0 {
        from {
          transform: rotate(180deg);
        }
       
        to {
          transform: rotate(0deg);
        }
      }
    .forum-logo:hover {
        transform: rotate(180deg);
    }
    .hover {
        transform: rotate(180deg);
    }

[crazycells]

The tags page looked better before, it does not look good when it is very “ordered”. @phenomlab do you have any intention to change that page in harmony thema?

[phenomlab]

@crazycells I must admit, I’ve neglected the tags page somewhat, but I do agree with you - it’s pretty dull and could do with some magic.

[phenomlab]

@crazycells just for you…

[crazycells]

@phenomlab nice this looks very good…

On a side note, I have been just watching/listening Doc and Marty’s adventures in the background and then I see this

[crazycells]

@phenomlab can you please share the CSS codes?

[phenomlab]

@crazycells Of course… You did ask me for these

.tags:not([component="topic/tags"]) a[href*="/tags/"] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    margin: 8px;
    width: 145px;
    background: var(--bs-body-navbar);
}
/* SIBLING FADE: fade out siblings around a hovered item */

.tag-list { visibility: hidden; }
/* Prevents :hover from triggering in the gaps between items */

.tag-list > * { visibility: visible; }
/* Brings the child items back in, even though the parent is `hidden` */

.tag-list > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }
/* Makes the fades smooth with a slight delay to prevent jumps as the mouse moves between items */

.tag-list:hover > * { opacity: 0.4; transform: scale(0.9); }
/* Fade out all items when the parent is hovered */

.tag-list > *:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }
/* Fade in the currently hovered item */

.tags a[href*="/tags/"] .tag-item {
    border-bottom: 4px solid var(--bs-border-color) !important;
}

[DownPW]

And the magic happens

Same effect as on the V2 but I love it ^^

[phenomlab]

@DownPW Thanks, and welcome to “Grand Master” status

[DownPW]

Ohhh yes

[DownPW]

hi mark

just a small note

seems to that code break tags on topic header :

[phenomlab]

@DownPW Yes, I am aware. Will address shortly.

EDIT - replace

.tags a[href*="/tags/"] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    margin: 8px;
    width: 145px;
    background: var(--bs-body-navbar);
}

With

.tags:not([component="topic/tags"]) a[href*="/tags/"] {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    margin: 8px;
    width: 145px;
    background: var(--bs-body-navbar);
}

Updating original post

[DownPW]

Fix working perfectly