Browse Source

initial commit

main
xenua 2 years ago
commit
24cdbc3ba2
  1. 5
      README.md
  2. 84
      mastodon/mastodon4.user.css

5
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

84
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);
}
}
}
Loading…
Cancel
Save