@phenomlab yes, it is 🙂 thanks a lot…
fading in /tags page
Solved
Customisation
-
@crazycells just for you…
-
@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
-
@phenomlab can you please share the CSS codes?
-
@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; }
-
And the magic happens
Same effect as on the V2 but I love it ^^
-
@DownPW Thanks, and welcome to “Grand Master” status
-
Ohhh yes
-
hi mark
just a small note
seems to that code break tags on topic header :
-
@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
-
Fix working perfectly
Did this solution help you?
Related Topics
-
-
-
-
-
-
-
-
nodebb dropdown menu
Solved Configure