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.
467 lines
10 KiB
467 lines
10 KiB
/* ==UserStyle== |
|
@name xenua's mastodon 4 frontend tweaks |
|
@namespace git.xenua.me/xenua |
|
@version 1.1.5 |
|
@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, |
|
.notification-group__main__additional-content { |
|
padding: 0 8px; |
|
} |
|
|
|
.scrollable:has(> .item-list > .account-timeline__header) { |
|
margin-top: -50px; |
|
|
|
.follow-request-banner { |
|
margin-top: 40px; |
|
} |
|
} |
|
|
|
.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, |
|
.hashtag-bar, |
|
.video-player, |
|
.status__content__read-more-button { |
|
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; |
|
} |
|
|
|
.video-player { |
|
margin-top: 12px; |
|
} |
|
|
|
.status__content__read-more-button { |
|
margin-top: 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); |
|
} |
|
} |
|
} |