xenua
/
userstyles
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update for mastodon 4.3

main
xenua 2 months ago
parent
936303a2c8
commit
11ae77875a
Signed by: xenua
GPG Key ID: 8F93B68BD37255B8
1 changed files with 376 additions and 195 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 571
      mastodon/mastodon4.user.css

571
mastodon/mastodon4.user.css
Unescape View File

@ -1,265 +1,446 @@ @@ -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);
}
}
}
Write Preview
Loading…
Cancel
Save