initial commit

README.md

@@ -0,0 +1,5 @@
+this is where the user styles live if i ever make any
+
+idk not much to say about this
+
+use the theme via https://github.com/openstyles/stylus or any other css injector

mastodon/mastodon4.user.css

@@ -0,0 +1,84 @@
+/* ==UserStyle==
+@name           mastodon 4 ui tweaks
+@namespace      mastodon4
+@version        1.0.0
+@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.
+@author         xenua
+@license        CNPLv7+
+==/UserStyle== */
+
+@-moz-document domain("chaos.social") {
+    /* compact, space-optimized timeline look */
+    .status__prepend {
+        padding-top: 8px;
+    }
+    .status, .detailed-status {
+        padding: 8px 0;
+    }
+    .status > *, .detailed-status > * {
+        padding: 0 12px;
+    }
+    .status > .status__content, .detailed-status > .status__content {
+        padding: 0 16px;
+    }
+    .status > .media-gallery, .detailed-status > .media-gallery {
+        padding: 0 !important;
+    }
+    .media-gallery {
+        margin-top: 12px !important;
+    }
+    .status__action-bar {
+        margin-top: 8px;
+        padding: 0 20px;
+    }
+    .conversation .status__action-bar {
+        padding: 0;
+    }
+    .detailed-status > .detailed-status__meta {
+        margin-top: 12px;
+        padding: 0 16px;
+    }
+    .status__info {
+        margin-bottom: 12px;
+    }
+    .detailed-status__display-name {
+        margin-bottom: 12px;
+    }
+    .notification > .notification__message {
+        padding: 8px 8px 0 8px;
+    }
+    
+    /* it's the toot button and it never will change */
+    .compose-form__publish-button-wrapper > button::before {
+        content: "Toot";
+        font-size: 15px;
+    }
+    .compose-form__publish-button-wrapper > button {
+        font-size: 0px;
+        padding-bottom: 2px;
+    }
+    
+    /* consistent spacing in some ui elements */
+    .compose-form, .navigation-bar, .reply-indicator, .search-input, .link-footer {
+        padding: 8px;
+    }
+    
+    /* spoiler image button less intrusive */
+    .icon-button.overlayed {
+        background: rgba(0,0,0,.4) /* default rgba(0,0,0,.6) */
+    }
+    
+    /* rainbow boost button */
+    .icon-button.active i.fa-retweet {
+        animation: 4s linear 0s infinite rainbowrt;
+    }
+    
+    @keyframes rainbowrt {
+        from {
+            filter: hue-rotate(0deg) saturate(1) brightness(1.1);
+        }
+        to {
+            filter: hue-rotate(360deg) saturate(1) brightness(1.1);
+        }
+    }
+}