tech.lgbt notification tweaks by MonoidMusician

/* ==UserStyle==
@name         tech.lgbt notification tweaks
@version      20241108.21.48
@namespace    https://userstyles.world/user/MonoidMusician
@description  Tweaks for the new glitch-soc/mastodon grouped notifications
@author       MonoidMusician
@license      CC Zero
==/UserStyle== */

@-moz-document domain("tech.lgbt") {
/* Show more content from a post whose initial paragraph is just mentions */
/* Actually, we cannot really detect that (cannot detect text in CSS),
   so this ends up selecting most replies
*/
.notification-group__embedded-status__content > p:first-child:has(> *):not(:has(> :not(.h-card))) {
    display: contents;
    white-space-collapse: collapse;
    &::after {
        content: " "; /* Make sure it has a space, collapsed if there is already space */
    }
    /* Show the second <p> tag, since the first was just mentions */
    & + p {
        display: initial;
    }
}
/* Or just show all content */
.notification-group__embedded-status__content > p {
    display: block !important;
}
/* The whole content is limited to this height anyways */
.notification-group__embedded-status__content {
    /* max-height: 88px; */ /* default: 88px */
}



/* Display a notification that has only one user avatar on a single line */
.notification-group__main__header:has(.notification-group__avatar-group > a:only-child) {
    flex-direction: row;
    align-items: center;
}
/* ... except if it is a follow */
.notification-group--follow .notification-group__main__header:has(.notification-group__avatar-group > a:only-child) {
    flex-direction: column;
    align-items: initial;
}



/* Collapse some info in embedded posts */
.notification-ungrouped {
    /* Show display name and username on same line */
    .status__info .status__display-name .display-name__account {
        display: inline;
    }
    .status__info .status__display-name {
        align-items: start;
        overflow: visible;
    }
    /* Allow content to tuck up beside the pfp */
    .status__info {
        align-items: center;
        padding-bottom: 2px; /* Decrease */
    }
    .status__avatar {
        margin-bottom: -20px;
        transform: translateY(4px);
    }
}


/* Make your own posts appear like blockquotes instead of content with a border */
.notification-group__embedded-status {
    border-inline-start: 3px solid #9c9cc9;
    /* color: #9c9cc9; */
    padding-inline-start: 10px;
}

.notification-group__main__status {
    border: none;
    padding: 0;
    padding-bottom: 4px;
}


/* I think this is always? mostly? yourself, and you probably do not need to see your own account name ... */
.notification-group__embedded-status__account {
    display: none;
}

/* Smaller */
.notification-group__embedded-status p {
    font-size: 14px;
}



/* I just want posts to show up verbatim, because I color their background colors differently, etc. */
.notification-ungrouped__header {
    display: none;
}
.notification-ungrouped {
    display: contents;
}
.notification-ungrouped > div > div.status__wrapper {
    border-bottom: 1px solid var(--background-border-color);
}

/* idk it looks out of place in my style */
.notification-group__embedded-status__content {
    /*     font-family: "Libertinus Sans"; */
    color: #bbbbcb;
}



/* Spacing tweaks */
.notification-ungrouped > div > div.status__wrapper {
    padding: 14px 10px 10px;
}

.notification-group {
    padding: 14px 10px 10px;
}

.status {
    padding: 14px 12px 10px;
}

.notification-group__icon {
    width: 28px;
}

.notification-ungrouped .status__action-bar {
    /* display: none; */
    margin-bottom: -4px;
}
.status__action-bar {
    margin-bottom: -4px;
}

.status__content--with-spoiler > p:first-child {
    margin-bottom: 14px;
}

.notification-group__main__header {
    gap: 6px;
}
}