Notification Menu: The Complete Template [UPDATED]

<style>

/* ★ — The complete template for the new Notification 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: */
/* - THERE'S CURRENTLY A BUG, which causes the menu to not show up for mobile in certain instances, this happens when the 'backdrop-filter:' property is removed from '.pp-top-bar'. A fix for it is provided in this template. */
/* - 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. However, I can't guarantee it will work 100% since the devs can change them in any way they want, but I tried my best. */
/* - 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! */



/* ★ — Rework start! — ★ */

/* ★ — Notifications button */
/* This section includes everything needed to fully style the notification button, the bell, and the notification number. */

/* ✩ — Notifications button container */
/* Aside from containing the button, it also helps to anchor the menu. Best to not modify. */
[class*="notificationsContainer"] { }


/* ✩ — Actual Button */
/* For accesibility purposes, please make your button easily noticeable, avoid low contrast colors so people can distinguish it without issue. */
[class*="notificationsButton"] {
  background: #111;
  color: #f9f9f9;
  border: 1px solid;
  border-radius: 999px;
  transition: all 500ms;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0rem; /* Default value is 0.5rem */
}

/* ✩ — Button pointer events */
/* Remember that there is no hover state on mobile and tablet. Please don't go overboard with effects. */
/* On hover */
[class*="notificationsButton"]:hover {
  background: #f9f9f9;
}

/* On active click */
[class*="notificationsButton"]:active {
  background: #f9f9f9;
  transform: scale(0.9);
}


/* ✩ — Notification bell Icon */
/* For Accesibility make sure there is enough contrast to make the bell visible. */
[class*="notificationIcon"] {
  font-size: 1.5rem; /* controls bell size */
  color: #f9f9f9;
  transition: all 500ms;
}

/* On hover & active click */
[class*="notificationsButton"]:is(:hover, :active) [class*="notificationIcon"] {
  color: #111;
}

/* Notification number */
[class*="notificationsBadge"] {
  display: flex;
  align-items: center;
  justify-content: center;
  /* ↑ center the number */

  top: 0; /* controls the position */
  right: 0;
  background: #ef4444;
  color: #f9f9f9;
  font: 600 0.75rem/0.7 Poppins, sans-serif;
  padding: 0 0.25rem;
  width: auto;
  min-width: 1.25rem;
  aspect-ratio: 1; /* ensures a perfect circle */
  height: auto;
  border-radius: 999px;
  box-shadow: unset;
  border: unset;
}



/* ★ — Notification Menu — ★ */
/* In this section I will list EVERYTHING pertaining to the actual menu. This will include the different states of it (Empty, loading, having notifications). */

/* ★ — Main container of menu — ★ */
/* This container acts as the rounded box that holds everything that makes up the menu. It controls the main background, the border-radius, the popup animation, etc. */
[class*="notificationsPopover"] {
  max-width: 400px; /* avoid making it too wide. Default width value is 380px */
  background: #111;
  border: unset;
  box-shadow: 0 0 0.625rem #111111;
  /* animation: _slideIn_fdp8b_1 .25s cubic-bezier(.34,1.56,.64,1); */
  /* You can make your own intro animation with @keyframes, but PLEASE don't make it annoying, think about Accesibility. */
}

/* ✩ — Fix for menu on mobile/tablets in case 'backdrop-filter' has been removed. */
@media only screen and (max-width: 768px),
                only screen and (max-width: 480px) {
  [class*="notificationsPopover"] {
    top: 3rem; /* Your header size + 0.5rem */
  }
}

/* ✩ — Removing the gradient from the background of the container */
[class*="notificationsPopover"]::before { content: unset; }



/* ★ — Loading state — ★ */
/* ✩ — Loading section main container */
[class*="_loadingState_"] {
  /* No reason to modify this. */
}

/* ✩ — Loading section spinner */
[class*="_loadingSpinner_"] {
  border: 3px solid #f9f9f940;
  border-top: 3px solid #f9f9f9; /* lighter color */
}

/* ✩ — Loading section text (if applicable) */
[class*="_loadingMessage_"] {
  color: #f9f9f9;
  font-family: 'DM Sans';
}



/* ★ — Empty state — ★ */
/* ✩ — Empty section main container + text style */
[class*="_emptyState_"] {
  font: 400 1rem Poppins, sans-serif;
  color: #f9f9f980
}

[class*="_emptyState_"]::first-letter {
  text-transform: uppercase;
}



/* ★ — Menu header */
/* This section includes: The title of the menu, the container of the buttons, the buttons themselves, and the popup to delete notifications. */

/* ✩ — Main container for header */
[class*="popoverHeader"] {
  padding: 1rem;
  border-bottom: 1px solid #f9f9f980;
  background: unset;
  box-shadow: unset;
}

/* ✩ — Header text */
[class*="popoverTitle"] {
  font: italic 100 2rem/0.7 'DM Serif Text', serif;
  color: #f9f9f9;
  letter-spacing: unset;
  text-transform: capitalize;
}


/* ★ — Header buttons */
/* ✩ — Button container */
[class*="headerActions"] {
  gap: 0.25rem;
}

/* ✩ — General button style */
/* For accesibility purposes, please make sure the buttons--and the icons--are easily noticeable. */
[class*="headerActions"] button {
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  font-size: 1.5rem;
  background: #111;
  border-color: unset;
  box-shadow: unset;
  color: #f9f9f9;
  border: 1px solid;
  border-radius: 999px;
  transition: all 500ms;
}

/* On hover */
[class*="headerActions"] button:hover {
  background: #f9f9f9;
  color: #111;
  border: 1px solid #0000;
  box-shadow: unset;
  /* Extra transform */
}

/* ✩ — Per button adjustments */
/* Delete All */
button[class*="deleteAllButton"] {
  color: #ef4444;
}
/* On hover */
button[class*="deleteAllButton"]:hover {
  background: #ef4444;
}

/* Mark all as read */
button[class*="markAllReadButton"] {
  color: #4ade80;
}
/* On hover */
button[class*="markAllReadButton"]:hover {
  background: #4ade80;
}

/* Close popup */
button[class*="closeButton"] {
  padding: 0.25rem;
  font-size: 2rem;
}
/* On hover */
button[class*="closeButton"]:hover {

}


/* ★ — Delete All Notifications Popup — ★ */
/* When deleting all notifications, a little window appears asking you to confirm the choice. I hate this thing. But oh well, here's all the necessary things to style it. */
/* ✩ — Popup Dim */
[class*="modalOverlay"] {
  background: #11111180;
  backdrop-filter: blur(8px); /* using 'unset' can help with improving perfomance. Backdrop-filter sucks. */
  animation: unset; /* has a fade in that does nothing except cause lag. Please don't animate backdrop-filter. */
}

/* ✩ — Popup main container */
[class*="modalContainer"] {
  max-width: 400px; /* avoid making this too wide. Default value is 360px. */
}

/* ✩ — Popup box */
/* This includes the first styled box for the popup. It controls: background, border, radius, etc. */
[class*="modalContent"] {
  background: #111;
  border-radius: 1.5rem;
  box-shadow: unset;
  border: unset;
  min-width: 300px;
  overflow: hidden;
  animation: unset; /* another useless animation */
}

/* ✩ — Popup header */
/* Box */
[class*="modalHeader"] {
  padding: 1rem;
  border-bottom: 1px solid #f9f9f980;
}

/* Popup header text */
[class*="modalTitle"] {
  font: italic 100 1.5rem/0.7 'DM Serif Text', serif;
  color: #f9f9f9;
  letter-spacing: unset;
}
[class*="modalTitle"]::first-letter { text-transform: uppercase; }
[class*="modalTitle"]::after { content: "?"; }

/* Close button */
[class*="modalClose"] {
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  font-size: 2rem;
  background: #111;
  border-color: unset;
  box-shadow: unset;
  color: #f9f9f9;
  border: 1px solid;
  border-radius: 999px;
  transition: all 500ms;
}

[class*="modalClose"]:hover {
  background: #f9f9f9;
  color: #111;
  border: 1px solid #0000;
  transform: scale(1.05);
}


/* ✩ — Popup body */
/* This is the container prior to that red box with the warning. */
[class*="modalBody"] {
  padding: 1rem;
}

/* ✩ — Popup warning */
/* Box */
[class*="modalWarning_"] {
  color: #ef4444;
  border: 1px solid;
  background: unset;
  border-radius: 999px;
  padding: 0.5rem 0.625rem;
  gap: 0.5rem;
  align-items: center;
}

/* Icon */
[class*="modalWarningIcon"] {
  margin: 0;
  color: #ef4444;
  font-size: 1rem; /* Controls size. Default is 1rem */
}

/* Text */
[class*="modalWarningText"] {
  color: #f9f9f9;
  font: 400 0.875rem/0.7 Poppins, sans-serif;
}

/* ✩ — Popup footer (button container) */
/* Main container */
[class*="modalFooter"] {
  padding: 0 1rem 1rem 1rem;
  border: unset; /* has a border-top: value otherwise */
  gap: 0.75rem;
}

/* Footer general button style */
[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"] {
  height: auto;
  padding: 0.75rem;
  font: 600 1rem/0.7 Poppins, sans-serif;
  background: #111;
  border-color: unset;
  box-shadow: unset;
  color: #f9f9f9;
  border: 1px solid;
  border-radius: 999px;
  transition: all 500ms;
}

[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"]::first-letter { text-transform: uppercase; }

[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"]:hover {
  background: #f9f9f9;
  color: #111;
  border: 1px solid #0000;
  box-shadow: unset;
  transform: unset;
}

/* ✩ — Per footer button styling */
/* Cancel */
[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"][class*="secondary"] {

}
/* On hover */
[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"][class*="secondary"]:hover {

}

/* Delete All */
[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"][class*="danger"] {
  color: #ef4444;
}
/* On hover */
[class*="modalContent"] [class*="modalFooter"] button[type="button"][class*="modalButton"][class*="danger"]:hover {
  background: #ef4444;
  color: #111;
}



/* ★ — NOTIFICATIONS LIST — ★ */
/* Finally, after all that filler, this is the section that includes everything related to the actual notification boxes. */
/* ✩ — Notification list main container */
[class*="notificationsList"] {
  max-height: 550px; /* don't make this too tall because phones exist. Default value is 450px */
}


/* ✩ — Scrollbar */
/* It's highly advised to not modify scrollbars, if you do, make sure they are easily noticeable, avoid low contrast colors, and specially avoid hiding them, it's bad practice, most people need the visual to know something can be scrolled. */
/* Important to note that -webkit- scrollbars are non-standard, some browsers will NOT show the style you input below. */
[class*="notificationsList"]::-webkit-scrollbar {

}

[class*="notificationsList"]::-webkit-scrollbar-thumb {
  background: #f9f9f9;
}

[class*="notificationsList"]::-webkit-scrollbar-track {

}



/* ★ — Notification Item */
/* ✩ — Main box */
#root [class*="notificationItem"] {
  background: unset;
  padding: 0.5rem;
  gap: 0.5rem;
  border-bottom: 1px solid #f9f9f980;
  align-items: center;
  transition: unset;
}
#root [class*="notificationItem"]:last-child,
#root [class*="notificationItem"]:nth-last-child(2):has(+ [class*="loadMoreWrapper"]) { border-bottom: unset; }

/* ✩ — Unread Indicator */
[class*="unreadIndicator"] {
  width: 6rem; /* default is 3px. Don't make this too wide if you're going to use a solid color. */
  background: radial-gradient(circle at 6rem 50%, #0000 62.5%, #f9f9f940) 200% 200%;
  box-shadow: unset;
  border-radius: unset;
}

/* ✩ — Avatar section */
/* Fix */
[class*="avatarSection"] { display: contents; }

/* Actual avatar section */
[class*="avatarContainer"] {
  min-width: 5rem;
  height: auto;
  aspect-ratio: 1;
  transition: transform 500ms, filter 500ms;
}

/* Character avatar */
[class*="characterAvatar"] {
  width: 4rem; /* can't be wider than previous selector */
  height: auto;
  aspect-ratio: 1;
  border-radius: 999px;
  object-position: top;
  box-shadow: unset;
  border: unset;
}

/* User avatar */
[class*="userAvatar"] {
  bottom: 0;
  right: 0; /* controls position */
  min-width: unset;
  width: 2rem;
  aspect-ratio: 1;
  height: auto;
  object-position: top;
  border-radius: 999px;
  box-shadow: unset;
  border: unset;
}

/* ★ — Dogshit hover effects for avatar section */
/* I REALLY can't stress enough how bad these effects are. Please leave this section as is. I only left the one for the clickable section since it is actually useful to convey it's clickable. */
/* When hovering the notification item class */
[class*="notificationItem"]:hover *:is([class*="characterAvatar"], [class*="userAvatar"]) {
  box-shadow: unset;
  transform: unset;
}

/* When hovering clickable avatar container */
a[class*="avatarContainer"]:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 0.5rem #f9f9f940);
}



/* ★ — Notification content */
/* Fix */
[class*="contentWrapper"] [class*="content"] { display: contents; }

/* ✩ — Main container for notification content */
/* General style, this will act as the "default style" meaning, the seen notifications. The unread variant will overwrite any styling you add to this. */
[class*="contentWrapper"] {
  flex-flow: column;
  padding: 0.5rem 0.75rem;
  gap: 0.5rem;
  border-radius: 1rem;
}
/* Variant for unread notifications */
[class*="contentWrapperUnread"] {
  background: #f9f9f908;
}

/* ✩ — Pointer effects for Main Container */
[class*="contentWrapper"]:hover {
  background: #f9f9f916;
}

/* Custom effect to dim read notifications */
[class*="notificationItem"]:not(:has([class*="unreadIndicator"])) *:is([class*="avatarContainer"], [class*="contentWrapper"]) { filter: grayscale(0.75) opacity(0.5); }



/* ★ — Notification content text styling */
/* ✩ — Notification title */
/* General style, this will act as the "default style" meaning, the seen notifications. The unread variant will overwrite any styling you add to this. */
[class*="_subject_"] {
  font: 600 0.875rem 'Poppins', sans-serif;
  color: #f9f9f9;
}

/* Unread variant */
[class*="subjectUnread"] {
  background-color: salmon;
}


/* ✩ — Notification body */
/* General style, this will act as the "default style" meaning, the seen notifications. The unread variant will overwrite any styling you add to this. */
[class*="_body_"] {
  font: 400 0.75rem 'Poppins', sans-serif;
  color: #f9f9f9;
}

/* Unread variant */
[class*="subjectUnread"] + [class*="_body_"] {
  /* No clue what use case this could have. */
}


/* ✩ — Notification title */
/* General style, this will act as the "default style" meaning, the seen notifications. The unread variant will overwrite any styling you add to this. */
[class*="_timestamp_"] {
  font: 400 0.75rem 'Poppins', sans-serif;
  color: #f9f9f980;
}

/* Unread variant */
[class*="subjectUnread"] ~ [class*="_timestamp_"] {
  /* No clue what use case this could have. */
}



/* ★ — Archive button section */
/* This is a floating button that only appears when you hover over the notification. */
[class*="archiveSection"] {
  padding: 1rem;
  top: unset;
  bottom: 0;
}

/* Section pointer effect */
[class*="notificationItem"]:hover [class*="archiveSection"] {
  /* This is just a transition between opacity: 0 & 1 */
}


/* ✩ — Archive button */
 [class*="archiveButton"] {
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  font-size: 1rem;
  background: #111;
  border-color: unset;
  box-shadow: unset;
  color: #ef4444;
  border: 1px solid;
  border-radius: 999px;
  transition: all 500ms;
}
/* On hover */
[class*="archiveButton"]:hover {
  background: #ef4444;
  color: #111;
  border: 1px solid #0000;
  box-shadow: unset;
  transform: scale(1.05);
}



/* ★ — Load More Section */
/* ✩ — Main container */
[class*="loadMoreWrapper"] {
  padding: 0.5rem;
  border-top: 1px solid #f9f9f980;
}


/* ✩ — Load More Button */
[class*="loadMoreButton"] {
  width: 100%;
  height: auto;
  padding: 0.75rem 0.875rem;
  font: 600 1rem/0.7 Poppins, sans-serif;
  background: #111;
  border-color: unset;
  box-shadow: unset;
  color: #f9f9f9;
  border: 1px solid;
  border-radius: 999px;
  transition: all 500ms;
}

[class*="loadMoreButton"]::first-letter { text-transform: uppercase; }

#root [class*="loadMoreButton"]:hover {
  background: #f9f9f9;
  color: #111;
  border: 1px solid #0000;
  box-shadow: unset;
  transform: unset;
}


/* ★ — END OF TEMPLATE — ★ */

</style>