Tag Filter menu: The Complete Template

<style>

/* ✮ — The Complete Template for the new Tag filter menu in janitor.ai! — ✮ */
/* ✮ Made by: @tigerdropped! */
/* ✮ Credits optional but highly appreciated, just share the link to this pastebin so more people can benefit from it. */

/* ✮ — NOTES: */
/* - THE MENU IS STILL BEING WORKED ON BY THE DEVS, if you see something break in the following days after this was posted, now you know why. If anything chanfes, I will update it as soon as I can. */
/* - This template is specifically designed to avoid the randomly generated numbers of the new elements, in an attempt to minimize instances of code breaking due to sudden class changes. */
/* - I can't guarantee it's 100% secure against changes since it's a recent implementation. The devs can change them in any way they want, but I'm confident it will not break unless they do a massive overhaul. */
/* - Since the menu has some parts that are currently irrelevant (they don't do anything) I did not include them, if said parts become relevant later, I will update the template to reflect said changes. */
/* - I tried labelling and explaining to the best of my capacity, if you have any questions, don't be afraid to reach out to me on discord: .radicaloptimism */
/* - If you find any errors, let me know through discord too! */


/* LAST UPDATE: 11th of October, 2025 */



/* ✩ — Background used for dim */
/* This appears behind the menu popup and darkens the profile while it's open. */
.profile-filter-modal-modal-overlay {
  background: #00000080;
}


/* ✩ — Loading spinner */
.chakra-spinner {
  color: #f9f9f9 !important;
}


/* ✮ — MENU POPUP */
/* ✩ — Main container */
/* This doesn't do much other than position the menu. Best to not modify. You can add padding to separate it from the edges of the screen on mobile, but be careful with smaller ones. */
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * {
  padding: 0.5rem;
}


/* ✩ — Main box for menu */
/* This controls the background color, padding, the border radius, and the position of the header, close button and tag display. It also controls the max-width for desktop. */
#root ~ *:has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > * > * {
  background: #171717;
  border-radius: 1rem;
  padding: 1rem; /* default value is '0 1.5rem' */
  gap: 1rem; /* default is 0 */
  max-width: 40rem; /* default value is 36rem */
  /* Do not use width. It is already 100%. */
}


/* ✩ — Menu title ('Filters' text) */
/* This controls the Filters text at the top, you can modify the font-family, the font-weight, and font-size, as well as the padding. */
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header {
  padding: 0; /* default value is '2rem 1.5rem 0.5rem 1.5rem' */
  font: 100 0rem/0.7 'DM Serif Text', serif;
  text-transform: uppercase;
  color: #f9f9f9;
}

/* ✩ — 'Filters' text replacement */
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header::after {
  content: "Filters";
  font-size: clamp(2rem, 5vw, 3rem);
  /* To control styling of the text, modify the selector before this. Only use this to change the text and size.*/
}


/* ✩ — Close button for menu */
/* The button has position absolute, so you need to use top: and right: to position it. Be careful to ensure it's usable by everyone. You can also modify the appearance of the button, but for accesibility reasons always make sure it is easily noticeable. */
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button {
  top: 1rem;
  right: 1rem;
  margin: 0;
  border-radius: 999px;
  background: #171717;
  border: 1px solid;
  color: #f9f9f9; /* Controls both the border color and the Icon color. */
  transition: background 500ms, color 500ms, border 500ms;
}

/* Button pointer effects */
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button:is(:hover, :focus, :active) {
  background: #f9f9f9;
  color: #171717;
  border: 1px solid #f9f9f9;
}



/* ✮ — TAGS DISPLAY ARRANGEMENT */
/* ✩ — Main container */
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button + * {
  padding: 0; /* default value is '0.5rem 1.5rem 1.5rem 1.5rem' */
}

/* ✩ — Flex box */
/* This controls the position and spacing of the tags text and the container of the tags and other buttons. */
.profile-filter-modal-body-flex {
  gap: 1rem; /* default is 2rem */
}

/* Fixes */
.profile-filter-modal-body-flex .css-0 { display: contents; }

/* ✩ — Tag display title ('Tags' text) */
.profile-filter-modal-body-tags-flex-box-heading {
  margin: 0;
  font: 600 0rem Poppins, sans-serif;
  color: #f9f9f9;
}

/* ✩ — 'Tags' text replacement */
.profile-filter-modal-body-tags-flex-box-heading::after {
  content: "Select tags.";
  font-size: 1rem;
  /* To control styling of the text, modify the selector before this. Only use this to change the text and size.*/
}



/* ✮ — TAG DISPLAY WRAPPER */
/* ✩ — Main box */
/* This controls the position and spacing between: The panel button (that currently doesn't work), the tag container alongside the scroll buttons, and the button to expand the list of tags. */
*:has(> [class*="_tagsContainer_"]) {
  margin: 0;
  padding: 0;
  gap: 1rem;
  flex-flow: column; /* makes everything stack vertically. */
  align-items: center;
}


/* ✩ — Filter button container */
/* The button currently does nothing, and it is NOT confirmed if it will do anything inside profiles, as such, disabling it does no harm. Just bear in mind this could change in the future, but for now, I will avoid styling it altogether. */
[class*="_filterButton_"] {
  display: none;
}

/* ✩ — Expand tags button */
/* For accesibility reasons always make sure your button is easily noticeable. */
[class*="_expandButton_"] {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  gap: 0.5rem;
  width: auto;
  border-radius: 999px;
  background: #171717;
  border: 1px solid;
  color: #f9f9f9; /* Controls both the border color and Icon color */
  transition: background 500ms, color 500ms, border 500ms;
}

/* Button Icon color */
[class*="_expandButton_"] *:is(svg, path) {
  stroke: currentColor !important; /* will use the color specified in the selector before this. */
}

/* Button pointer effects */
[class*="_expandButton_"]:is(:hover, :focus, :active) {
  background: #f9f9f9;
  color: #171717;
  border: 1px solid #f9f9f9;
}

/* ✩ — Expand tags additional text */
[class*="_expandButton_"]::before {
  content: "Show All Tags"; /* when collapsed */
  font: 600 1rem Poppins, sans-serif;
}

[class*="_tagsContainer_"]:has([class*="_expanded"]) + [class*="_expandButton_"]::before {
  content: "Hide Tags"; /* when expanded */
}



/* ✮ — THE ACTUAL TAG CONTAINER */
/* THIS element is the main box that holds everything related to the tags. You can style it as a separate box, but by default it only controls the width. */
/* ✩ — Main wrapper */
[class*="_tagsContainer_"] {
  width: 100%;
  /* The following is optional. */
  padding: 0.5rem;
  border: 1px solid #f9f9f9;
  border-radius: 2rem;
  transition: border-radius 500ms;
}


/* ✩ — Additional wrapper */
/* This wrapper is used to anchor the navigation buttons and the gradients that appear to give the fade effect. Best to not modify. */
[class*="collapsedContainerWrapper"] {

}


/* ✩ — Wrapper gradients */
[class*="_gradientLeft_"] {
  background: linear-gradient(to left, transparent, #171717 50% 100%);
}

[class*="_gradientRight_"] {
  right: 0 !important;
  background: linear-gradient(to right, transparent, #171717 50% 100%);
}


/* ✩ — Scroll buttons */
/* For accesibility reasons always make sure your buttons are easily noticeable. */
[class*="_navigationButton"] {
  padding: 0;
  border-radius: 999px;
  background: #171717;
  border: 1px solid;
  color: #f9f9f9; /* Controls both the border color and the Icon color. */
  transition: background 500ms, color 500ms, border 500ms;
}

/* Fixes */
[class*="_navigationButton"] path { opacity: 1; stroke: currentColor; }
[class*="_navigationButton"] svg { position: relative; top: -1px; }
[class*="_navigationButtonLeft"] svg { left: -2px; }

/* Button pointer effects */
[class*="_navigationButton"]:is(:hover, :focus, :active) {
  background: #f9f9f9;
  color: #171717;
  border: 1px solid #f9f9f9;
}



/* ✮ — THE ACTUAL TAG FLEXBOX */
/* THIS is the actual box that controls the tags, both in the collapsed and expanded states. It controls the gap between tags, their alignment, and the general disposition. It has two states: The initial (collapsed) state and the expanded state. Any changes you make in the Initial state will also apply to the expanded one, be careful. The expanded state has the ability to overwrite the style of the initial state. */

/* ✩ — Collapsed/Initial style. */
[class*="_collapsedContainer_"] {
  gap: 0.5rem;
  padding: 0;
}

/* ✩ — Expanded state */
[class*="_collapsedContainer_"][class*="_expanded_"] {
  justify-content: center; /* will center the tags horizontally. */
}



/* ✮ — TAG STYLING */
/* ✩ — Wrapper for tags */
/* This doesn't control the style, but the animation the tags have when expanding. */
[class*="_collapsedContainer_"] [class*="_motionDiv_"] { margin: 0; }


/* In this section you will find the individual style for tags, same as before, there are two states, the initial (unselected) state and the selected state. Any changes you make in the initial state will also apply to the selected state. The selected state has the ability to overwrite the style of the initial state. */
/* You can control the font style, the color, background, border, etc. */
/* Try to not go overboard with the styling, the menu is very reliant on JavaScript due to inner workings and animations, it could potentially harm performance for certain users. */


/* ✩ — Initial state */
[class*="_collapsedContainer_"] [class*="_tag_"] {
  color: #f9f9f9;
  border-radius: 999px;
  font: 500 1rem Poppins, sans-serif;
  border: 1px solid;
  background: #171717;
  transition: 500ms;
}

/* ✩ — Selected state */
[class*="_collapsedContainer_"] [class*="_tagSelected_"] {
  color: #171717;
  font-weight: 600;
  border: 1px solid #f9f9f9;
  background: #f9f9f9;
  box-shadow: unset !important;
}

/* ✩ — Unselected tags hover effects */
[class*="_collapsedContainer_"] [class*="_tag_"]:not([class*="_tagSelected_"]):hover {
  background: #f9f9f920;
}

/* ✩ — Tag effect on active click */
[class*="_collapsedContainer_"] [class*="_tag_"]:active {
  transform: scale(0.95);
}


/* ✩ — TAG DIVIDER */
/* After selecting a tag, a divider will appear to separate selected tags from unselected ones. */
[class*="_motionDiv_"][class*="_divider_"] {
  color: #f9f9f9;
  padding: 0 0.25rem;
}


</style>