xenua's userstyles
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

451 lines
9.8 KiB

/* ==UserStyle==
@name xenua's mastodon 4 frontend tweaks
@namespace git.xenua.me/xenua
@version 1.1.1
@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") {
/* 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;
}
}
/* 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;
}
}
}
}
.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;
}
}
}
}
/* much more compact general spacing */
.status__prepend {
padding: 8px 8px 0;
}
.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__info {
padding: 0 12px 8px;
}
.status__content {
padding: 0;
}
.status__content__text {
padding: 0 8px;
}
.reply-indicator__content p,
.status__content p {
line-height: 21px;
margin-bottom: 12px;
}
.status__content__text blockquote {
padding-inline-start: 8px;
}
.status__content__read-more-button {
padding: 0 8px;
}
.status-card {
margin: 8px 8px 0;
}
.status-card,
.status-card__actions>div {
border-radius: 4px;
}
.status-card__title {
font-size: 16px;
line-height: 18px;
}
.status-card__content {
padding: 8px 12px;
}
.status-card__image {
flex: 0 0 auto;
}
.status-card__image,
.status-card__image-image,
.status-card__image-preview {
border-start-start-radius: 4px;
}
.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: 12px;
padding: 0 12px 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;
}
}
.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%;
}
.status-card {
margin-inline-start: 4px;
width: calc(100% - 8px - 2.5px);
}
}
.notification-ungrouped__header {
margin-bottom: 6px;
}
.notification-group {
padding: 8px;
}
.notification-group__main {
margin-left: -48px;
}
.notification-group__avatar-group {
margin-left: 48px;
}
.notification-group__main__header__label {
padding: 0 8px;
}
.scrollable:has(> .item-list > .account-timeline__header) {
margin-top: -50px;
}
.account__header__bar {
padding: 0 12px;
}
.column-back-button {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(1px);
}
.account__header__image {
height: 165px;
}
.media-gallery__actions {
inset-inline-end: 4px;
top: 4px;
}
.media-gallery__item__badges {
bottom: -1px;
inset-inline-end: -1px;
}
.column>.scrollable {
border: none;
}
.column-header,
.notification__filter-bar,
.column-back-button {
border: none;
border-bottom: 1px solid var(--background-border-color);
}
.column-back-button {
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}
.status--in-thread {
.content-warning,
.status__content,
.status__action-bar,
.media-gallery,
.status-card {
margin-inline-start: 16px;
width: calc(100% - 16px);
}
.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;
}
}
.detailed-status__display-name {
margin-bottom: 8px;
padding: 0 12px;
}
.detailed-status__meta {
margin-top: 12px;
}
.detailed-status__meta__line {
padding: 8px;
}
.detailed-status__action-bar {
padding: 6px 0;
}
.status__line {
inset-inline-start: 12px;
}
/* enlarge emoji on hover */
.emoji-mart-emoji:hover>* {
transform: scale(2);
}
.emojione:hover {
transform: scale(1.5);
overflow: visible;
}
/* make the toot button say toot again */
.compose-form__submit>button::before {
content: "Toot!";
font-size: 15px;
}
.compose-form__actions>.compose-form__submit>button {
font-size: 0;
}
/* 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;
}
/* colorful status visibility icons */
.status__visibility-icon .icon-globe,
.detailed-status__meta .icon-globe {
color: #1976d2;
}
.status__visibility-icon .icon-unlock,
.detailed-status__meta .icon-unlock {
color: #43aa48;
}
.status__visibility-icon .icon-lock,
.detailed-status__meta .icon-lock {
color: #ffa000;
}
.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);
}
}
}