From 11ae77875a604f591cbc1eb1ee470c8451275d9f Mon Sep 17 00:00:00 2001
From: xenua <git@xenua.me>
Date: Thu, 24 Oct 2024 22:37:03 +0200
Subject: [PATCH] update for mastodon 4.3

---
 mastodon/mastodon4.user.css | 571 ++++++++++++++++++++++++------------
 1 file changed, 376 insertions(+), 195 deletions(-)

diff --git a/mastodon/mastodon4.user.css b/mastodon/mastodon4.user.css
index 63b2a54..7e8ea3d 100644
--- a/mastodon/mastodon4.user.css
+++ b/mastodon/mastodon4.user.css
@@ -1,265 +1,446 @@
 /* ==UserStyle==
-@name           mastodon 4 ui tweaks
-@namespace      mastodon4
-@version        1.0.12
-@description    fixes the weird spacing on the new mastodon web ui. intended for the advanced user interface, may also work with the single column one.
+@name           xenua's mastodon 4 frontend tweaks
+@namespace      git.xenua.me/xenua
+@version        1.1.0
+@description    makes the mastodon *advanced* webinterface more compact and pleasant to look at
 @author         xenua
 @license        CNPLv7+
+@homepageURL    https://git.xenua.me/xenua/userstyles/
+@supportURL     https://chaos.social/@julialuna
+@updateURL      https://git.xenua.me/xenua/userstyles/raw/branch/main/mastodon/mastodon4.user.css
 ==/UserStyle== */
-
 @-moz-document domain("chaos.social") {
-    /* mastodon 4 ui tweaks that go hard maybe */
-    /* optional features at the bottom */
-    
-    /* compact, space-optimized timeline look */
-    .status__prepend {
-        padding-top: 8px;
-    }
-    .status, .detailed-status {
-        padding: 8px 0;
+
+    /* narrower, flexibly sized columns */
+    @media screen and (min-width: 1025px) {
+
+        .layout-multiple-columns .column,
+        .layout-multiple-columns .drawer {
+            flex: 1 1 auto;
+            min-width: 300px;
+            max-width: 400px;
+        }
     }
-    .status > *, .detailed-status > * {
-        padding: 0 12px;
+
+    /* fix up content warnings and filters */
+    .content-warning {
+        border-width: 0px 5px 0px 5px;
+        border-radius: 4px;
+        border-color: #9baec8;
+        border-style: solid;
+
+        &:after,
+        &:before {
+            content: unset;
+        }
+
+        p {
+            margin-top: 1.5em;
+            margin-bottom: 0px;
+        }
+
+        button.link-button {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+
+            &:hover {
+                text-decoration: none;
+            }
+
+            span {
+                position: absolute;
+                top: 8px;
+                left: 0;
+                text-indent: 13px;
+                color: #9baec8;
+                visibility: hidden;
+                height: 20px;
+                width: 100%;
+                overflow: hidden;
+                text-align: left;
+
+                &:before {
+                    content: "Show post with CN:";
+                    display: block;
+                    visibility: visible;
+                }
+            }
+        }
+
+        &:has(+ .status__content, notification-group__embedded-status__content) {
+            button.link-button span {
+                &:before {
+                    content: "Hide post with CN:";
+                    display: block;
+                    visibility: visible;
+                }
+            }
+        }
+
+        &:has(+ .notification-group__embedded-status__content) {
+            button.link-button span {
+                &:before {
+                    content: "Hide post with CN:";
+                    display: block;
+                    visibility: visible;
+                }
+            }
+        }
     }
-    .status > .status__content, .detailed-status > .status__content {
-        padding: 0 16px;
+
+    .content-warning--filter {
+        border-color: #ff4253;
+
+        button.link-button span {
+            &:before {
+                content: "Show filtered post:";
+                display: block;
+                visibility: visible;
+            }
+        }
+
+        &:has(+ .status__content, notification-group__embedded-status__content) {
+            button.link-button span {
+                &:before {
+                    content: "Hide filtered post:";
+                    display: block;
+                    visibility: visible;
+                }
+            }
+        }
+
+        &:has(+ .notification-group__embedded-status__content) {
+            button.link-button span {
+                &:before {
+                    content: "Hide filtered post:";
+                    display: block;
+                    visibility: visible;
+                }
+            }
+        }
     }
-    .status > .media-gallery, .detailed-status > .media-gallery {
-        padding: 0 !important;
-        margin-left: 4px;
-        margin-right: 4px;
-        width: calc(100% - 8px);
+
+    /* much more compact general spacing */
+    .status__prepend {
+        padding: 8px 8px 0;
     }
-    .status--in-thread > .status__line {
-        inset-inline-start: 4px;
-        height: 100%;
+
+    .status {
+        padding: 8px 0;
+
+        .poll {
+            padding: 0 8px;
+            margin-top: 6px;
+        }
+
+        .media-gallery {
+            margin-top: 6px;
+        }
+
+        .hashtag-bar {
+            padding: 0 8px;
+            margin-top: 6px;
+
+            a {
+                padding: 4px;
+            }
+        }
     }
-    .status--in-thread > .status__line::before {
-        display: none;
+
+    .status__info {
+        padding: 0 12px 8px;
     }
-    .status__line--first {
-        top: 0;
+
+    .status__content {
+        padding: 0;
     }
-    .status__line {
-        border-inline-start: 2px solid #565e76;
-        padding: 0
+
+    .status__content__text {
+        padding: 0 8px;
     }
-    .status--in-thread > .status__content {
-        padding: 0;
-        margin-inline-start: 16px;
+
+    .reply-indicator__content p,
+    .status__content p {
+        line-height: 21px;
+        margin-bottom: 12px;
     }
-    .status--in-thread .video-player {
-        margin-inline-start: 8px;
-        width: calc(100% - 8px);
+
+    .status__content__text blockquote {
+        padding-inline-start: 8px;
     }
-    .status--in-thread .hashtag-bar {
-        margin-inline-start: 8px;
-        width: calc(100% - 32px);
+
+    .status__content__read-more-button {
+        padding: 0 8px;
     }
+
     .status-card {
-        margin-inline-start: 0 !important;
-        width: calc(100% - 24px) !important;
-        margin: 12px 12px 0 12px !important;
-        padding: 0;
-        border: 2px solid #565e76;
+        margin: 8px 8px 0;
     }
-    .status-card__content {
-        padding: 8px;
+
+    .status-card,
+    .status-card__actions>div {
+        border-radius: 4px;
+    }
+
+    .status-card__title {
+        font-size: 16px;
+        line-height: 18px;
     }
-    .status-card__content > .status-card__host {
-        margin-bottom: 4px;
-        border-bottom: 2px solid #565e76;
+
+    .status-card__content {
+        padding: 8px 12px;
     }
-    .status-card__content > .status-card__title {
-        font-size: 110%;
-        line-height: 20px;
 
+    .status-card__image {
+        flex: 0 0 auto;
     }
-    .status-card__content > .status-card__description {
-        display: inline-block;
-        line-height: 16px;
-        max-height: 48px;
-        white-space: unset;
+
+    .status-card__image,
+    .status-card__image-image,
+    .status-card__image-preview {
+        border-start-start-radius: 4px;
     }
-    .media-gallery {
-        margin-top: 12px !important;
+
+    .status-card.expanded .status-card__image,
+    .status-card.expanded .status-card__image-image,
+    .status-card.expanded .status-card__image-preview {
+        border-start-end-radius: 4px;
     }
+
     .status__action-bar {
-        margin-top: 8px;
-        padding: 0 20px;
+        margin-top: 12px;
+        padding: 0 12px 0;
     }
-    .conversation .status__action-bar {
-        padding: 0;
+
+    .layout-multiple-columns .compose-form {
+        gap: 12px;
+        padding: 8px;
+
+        textarea {
+            padding: 8px;
+        }
+
+        .compose-form__footer {
+            padding: 0px 8px 8px;
+        }
+
+        .compose-form__highlightable {
+            border-radius: 8px;
+        }
     }
-    .status--in-thread .status__action-bar {
-        padding: 0 20px;
-        margin-inline-start: 0;
-        width: calc(100% - 40px);
+
+    .notification-ungrouped {
+        padding: 8px 0;
+
+        .status__action-bar {
+            margin-inline-start: 0;
+            width: calc(100% - 24px);
+        }
+
+        .status__content {
+            margin-inline-start: 0;
+            width: 100%;
+        }
+
+        .media-gallery,
+        .content-warning {
+            margin-inline-start: 0;
+            width: 100%;
+        }
     }
-    .detailed-status > .detailed-status__meta {
-        margin-top: 12px;
-        padding: 0 16px;
+
+    .notification-ungrouped__header {
+        margin-bottom: 6px;
     }
-    .status__info {
-        margin-bottom: 12px;
+
+    .notification-group {
+        padding: 8px;
     }
-    .detailed-status__display-name {
-        margin-bottom: 12px;
+
+    .notification-group__main {
+        margin-left: -48px;
     }
-    .notification > .notification__message {
-        padding: 8px 8px 0 8px;
+
+    .notification-group__avatar-group {
+        margin-left: 48px;
     }
-    .detailed-status > .status__prepend {
-        margin-bottom: 8px;
-        padding-left: 12px;
+
+    .notification-group__main__header__label {
+        padding: 0 8px;
     }
-    .status__prepend {
-        padding-left: 12px;
+
+    .scrollable:has(> .item-list > .account-timeline__header) {
+        margin-top: -50px;
     }
 
-    /* change the pm symbol back to what it should be */
-    .fa-at::before {
-        content: "";
+    .account__header__bar {
+        padding: 0 12px;
     }
 
-    /* it's the toot button and that will never ever change */
-    .compose-form__publish-button-wrapper > button::before {
-        content: "Toot";
-        font-size: 15px;
+    .column-back-button {
+        background: rgba(0, 0, 0, 0.5);
+        backdrop-filter: blur(1px);
     }
-    .compose-form__publish-button-wrapper > button {
-        font-size: 0px;
-        padding-bottom: 2px;
+
+    .account__header__image {
+        height: 165px;
     }
-    
-    /* speaking of toot button, it might as well be wide */
-    .compose-form__publish-button-wrapper {
-        width: 100%;
+
+    .media-gallery__actions {
+        inset-inline-end: 4px;
+        top: 4px;
     }
-    
-    /* consistent spacing in some ui elements */
-    .compose-form, .navigation-bar, .reply-indicator, .search-input, .link-footer {
-        padding: 8px;
+
+    .media-gallery__item__badges {
+        bottom: -1px;
+        inset-inline-end: -1px;
     }
-    
-    /* spoiler image button less intrusive */
-    .icon-button.overlayed {
-        background: rgba(0,0,0,.4) /* default rgba(0,0,0,.6) */
+
+    .column>.scrollable {
+        border: none;
     }
-    
-    /* rainbow toot button on hover because you're about to send something incredible */
-    .compose-form__publish-button-wrapper:hover {
-        animation: 4s linear 0s infinite rainbowfade;
+
+    .column-header,
+    .notification__filter-bar,
+    .column-back-button {
+        border: none;
+        border-bottom: 1px solid var(--background-border-color);
     }
-    
-    /* rainbow boost button */
-    .icon-button.active i.fa-retweet {
-        animation: 4s linear 0s infinite rainbowfade;
+
+    .column-back-button {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.8);
     }
-    
-    @keyframes rainbowfade {
-        from {
-            filter: hue-rotate(0deg) saturate(1) brightness(1.1);
+
+    .status--in-thread {
+
+        .content-warning,
+        .status__content,
+        .status__action-bar,
+        .media-gallery,
+        .status-card {
+            margin-inline-start: 16px;
+            width: calc(100% - 16px);
         }
-        to {
-            filter: hue-rotate(360deg) saturate(1) brightness(1.1);
+
+        .status__action-bar {
+            margin-top: 8px;
+            padding: 0;
+            padding-left: 12px;
+            width: calc(100% - 44px);
+        }
+
+        .status-card {
+            width: calc(100% - 20px);
+        }
+
+        .status__content__text {
+            padding-left: 4px;
+        }
+    }
+
+    .detailed-status {
+        padding: 8px 0;
+
+        .media-gallery {
+            margin-top: 8px;
         }
     }
 
-    /*========
-    misc stuff
-    ========*/
+    .detailed-status__display-name {
+        margin-bottom: 8px;
+        padding: 0 12px;
+    }
 
-    /* compact dropdown menu */
-    /*
-    .dropdown-menu__container a {
-        padding: 6px 8px;
-        font-size: 14px;
+    .detailed-status__meta {
+        margin-top: 12px;
     }
-    */
 
-    /* get rid of images in fav/boost notifs */
-    /*
-    .notification .media-gallery {
-        display: flex;
-        flex-flow: column nowrap;
-        aspect-ratio: unset !important;
-        margin-top: 4px !important;
-        min-height: 0;
+    .detailed-status__meta__line {
+        padding: 8px;
     }
-    .notification .media-gallery > .spoiler-button {
-        display: none;
+
+    .detailed-status__action-bar {
+        padding: 6px 0;
     }
-    .notification .media-gallery > .media-gallery__preview {
-        display: none;
+
+    .status__line {
+        inset-inline-start: 12px;
     }
-    .notification .media-gallery > .media-gallery__item img {
-        display: none;
+
+    /* enlarge emoji on hover */
+    .emoji-mart-emoji:hover>* {
+        transform: scale(2);
     }
-    .notification .media-gallery > .media-gallery__item > .media-gallery__item__badges {
-        display: none;
+
+    .emojione:hover {
+        transform: scale(1.5);
+        overflow: visible;
     }
-    .notification .media-gallery > .media-gallery__item > .media-gallery__item-thumbnail::after {
-        content: "🖼️ Image.";
-        padding: 0 16px;
-        font-size: 110%;
-        line-height: 125%
+
+    /* make the toot button say toot again */
+    .compose-form__submit>button::before {
+        content: "Toot!";
+        font-size: 15px;
     }
-    */
 
-    /* hide pm notice about e2ee */
-    /*
-    .follow_requests-unlocked_explanation {
-        display: none;
+    .compose-form__actions>.compose-form__submit>button {
+        font-size: 0;
     }
-    */
-    
-    /* hide follow request indicator */
-    /*
-    .column-link[title="Follow requests"] > .column-link__badge {
+
+    /* rainbow toot button on hover because you're about to send something incredible */
+    .compose-form__submit>button:hover,
+    /* rainbow boost button */
+    .icon-button.active svg.icon-retweet {
+        animation: 4s linear 0s infinite rainbowfade;
+    }
+
+    @keyframes rainbowfade {
+        from {
+            filter: hue-rotate(0deg) saturate(1) brightness(1.15);
+        }
+
+        to {
+            filter: hue-rotate(360deg) saturate(1) brightness(1.15);
+        }
+    }
+
+    /* hide the "posts on mastodon aren't end to end encrypted" warning */
+    .follow_requests-unlocked_explanation {
         display: none;
     }
-    */
-    
-    /* disable clicking on it as well */
-    /*
-    .column-link[title="Follow requests"] {
-        pointer-events: none;
-    }
-    */
-    
-    /*enlarge custom emoji on hover*/
-    /*
-    .emoji-mart-emoji:hover > * {
-        height: 34px !important;
-        width: 34px !important;
-    }
-    .emoji-mart-emoji:hover {
-        width: 34px !important;
-        height: 34px !important;
-        padding: 0 !important;
-    }
-    :not(.emoji-button) > .emojione:hover {
-        width: 34px !important;
-        height: 34px !important;
-    }
-    */
-
-    /* colored visibility icons */
-    /*    
-    .status__visibility-icon > .fa-globe, .detailed-status__meta > .fa-globe {
+
+    /* colorful status visibility icons */
+    .status__visibility-icon .icon-globe,
+    .detailed-status__meta .icon-globe {
         color: #1976d2;
     }
-    .status__visibility-icon > .fa-unlock, .detailed-status__meta > .fa-unlock {
-        color: #388e3c;
+
+    .status__visibility-icon .icon-unlock,
+    .detailed-status__meta .icon-unlock {
+        color: #43aa48;
     }
-    .status__visibility-icon > .fa-lock, .detailed-status__meta > .fa-lock {
+
+    .status__visibility-icon .icon-lock,
+    .detailed-status__meta .icon-lock {
         color: #ffa000;
     }
-    .status__visibility-icon > .fa-at, .detailed-status__meta > .fa-at {
+
+    .status__visibility-icon .icon-at,
+    .detailed-status__meta .icon-at {
         color: #d32f2f;
     }
-    */
-}
 
+    /* lighten the columns to be able to distinguish them from the background */
+    @supports (color: hsl(from white h s l)) {
+        .columns-area>*>* {
+            background: hsl(from var(--background-color) h calc(s + 4) calc(l + 4));
+        }
 
+        .column-back-button {
+            background: rgba(0, 0, 0, 0.5);
+        }
+    }
+}
\ No newline at end of file