Firehawk52-backup/Mastodon-Modern
28
0
Fork 0
mirror of https://git.gay/freeplay/Mastodon-Modern.git synced 2026-01-15 16:32:57 -03:00
Code Issues Actions Packages Projects Releases Wiki Activity

1.6.9

Browse Source 
- fix embeds w/ no text
- respect the built-in reduce-motion option
This commit is contained in:
freeplay
2023-08-08 19:33:04 -04:00
parent ed0dda3673
commit a75701f2a8
2 changed files with 93 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
modern.css
View File

@@ -61,76 +61,79 @@ a:focus-visible,
padding-inline: 10px; padding-inline: 10px;
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.load-more, body:not(.reduce-motion) .load-more,
.setting-toggle, body:not(.reduce-motion) .setting-toggle,
.column-header__back-button, body:not(.reduce-motion) .column-header__back-button,
.column-back-button, body:not(.reduce-motion) .column-back-button,
.trends__item, body:not(.reduce-motion) .trends__item,
.story, body:not(.reduce-motion) .story,
.account__avatar, body:not(.reduce-motion) .account__avatar,
.button, body:not(.reduce-motion) .button,
.media-gallery__item, body:not(.reduce-motion) .media-gallery__item,
.column-link, body:not(.reduce-motion) .column-link,
select, body:not(.reduce-motion) select,
.status-card, body:not(.reduce-motion) .status-card,
.audio-player, body:not(.reduce-motion) .audio-player,
.account { body:not(.reduce-motion) .account {
transition: transform 0.4s cubic-bezier(0, 0, 0, 3), background 0.2s !important; transition: transform 0.4s cubic-bezier(0, 0, 0, 3), background 0.2s !important;
} }
.load-more:active, body:not(.reduce-motion) .load-more:active,
.setting-toggle:active, body:not(.reduce-motion) .setting-toggle:active,
.column-header__back-button:active, body:not(.reduce-motion) .column-header__back-button:active,
.column-back-button:active, body:not(.reduce-motion) .column-back-button:active,
.trends__item:active, body:not(.reduce-motion) .trends__item:active,
.story:active, body:not(.reduce-motion) .story:active,
.account__avatar:active, body:not(.reduce-motion) .account__avatar:active,
.button:active, body:not(.reduce-motion) .button:active,
.media-gallery__item:active, body:not(.reduce-motion) .media-gallery__item:active,
.column-link:active, body:not(.reduce-motion) .column-link:active,
select:active, body:not(.reduce-motion) select:active,
.status-card:active, body:not(.reduce-motion) .status-card:active,
.audio-player:active, body:not(.reduce-motion) .audio-player:active,
.account:active, body:not(.reduce-motion) .account:active,
.load-more:focus-visible, body:not(.reduce-motion) .load-more:focus-visible,
.setting-toggle:focus-visible, body:not(.reduce-motion) .setting-toggle:focus-visible,
.column-header__back-button:focus-visible, body:not(.reduce-motion) .column-header__back-button:focus-visible,
.column-back-button:focus-visible, body:not(.reduce-motion) .column-back-button:focus-visible,
.trends__item:focus-visible, body:not(.reduce-motion) .trends__item:focus-visible,
.story:focus-visible, body:not(.reduce-motion) .story:focus-visible,
.account__avatar:focus-visible, body:not(.reduce-motion) .account__avatar:focus-visible,
.button:focus-visible, body:not(.reduce-motion) .button:focus-visible,
.media-gallery__item:focus-visible, body:not(.reduce-motion) .media-gallery__item:focus-visible,
.column-link:focus-visible, body:not(.reduce-motion) .column-link:focus-visible,
select:focus-visible, body:not(.reduce-motion) select:focus-visible,
.status-card:focus-visible, body:not(.reduce-motion) .status-card:focus-visible,
.audio-player:focus-visible, body:not(.reduce-motion) .audio-player:focus-visible,
.account:focus-visible { body:not(.reduce-motion) .account:focus-visible {
transform: scale(0.99); transform: scale(0.99);
transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important;
} }
.column-header__button, body:not(.reduce-motion) .column-header__button,
.column-header__buttons > .column-header__back-button, body:not(.reduce-motion) .column-header__buttons > .column-header__back-button,
.react-toggle-track, body:not(.reduce-motion) .react-toggle-track,
.icon-button, body:not(.reduce-motion) .icon-button,
.floating-action-button { body:not(.reduce-motion) .floating-action-button {
transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important; transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important;
} }
.column-header__button:active, body:not(.reduce-motion) .column-header__button:active,
.column-header__buttons > .column-header__back-button:active, body:not(.reduce-motion) .column-header__buttons > .column-header__back-button:active,
.react-toggle-track:active, body:not(.reduce-motion) .react-toggle-track:active,
.icon-button:active, body:not(.reduce-motion) .icon-button:active,
.floating-action-button:active { body:not(.reduce-motion) .floating-action-button:active {
transform: scale(0.95); transform: scale(0.95);
transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important;
} }
.status__content__spoiler-link span { body:not(.reduce-motion) .status__content__spoiler-link span {
display: inline-block; display: inline-block;
transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important; transition: transform 0.4s cubic-bezier(0, 0, 0, 4) !important;
} }
.status__content__spoiler-link:active span { body:not(.reduce-motion) .status__content__spoiler-link:active span {
transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important; transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important;
transform: translateY(1px); transform: translateY(1px);
} }
.reduce-motion * {
animation-duration: 0s !important;
}
@-moz-keyframes bounceIn { @-moz-keyframes bounceIn {
0% { 0% {
transform: scale(1.1); transform: scale(1.1);
@@ -2262,11 +2265,11 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
border-radius: 0; border-radius: 0;
height: 100%; height: 100%;
} }
.status-card.compact .status-card__image { .status-card.compact:not(.interactive) .status-card__image {
position: relative; position: relative;
aspect-ratio: unset !important; aspect-ratio: unset !important;
} }
.status-card.compact .status-card__image img { .status-card.compact:not(.interactive) .status-card__image img {
position: absolute; position: absolute;
inset: 0; inset: 0;
} }
@@ -3983,5 +3986,5 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
font-size: 1.3em; font-size: 1.3em;
} }
.modal-root__container { .modal-root__container {
animation: bounceIn 0.7s !important; animation: bounceIn 0.7s;
} }

64
modern.user.css
View File

@@ -13,17 +13,14 @@
//////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////
/* Update 1.6.8 /* Update 1.6.9
Glitch-soc - fix embeds w/ no text
- fix unclickable timestamp - respect the built-in reduce-motion option
Vanilla 4.2.0:
- Fix border in nav
- Fix empty space in vertical videos
*/ */
/* ==UserStyle== /* ==UserStyle==
@name Mastodon Modern @name Mastodon Modern
@version 1.6.8 @version 1.6.9
@description Drastically improves the look & feel of Mastodon @description Drastically improves the look & feel of Mastodon
@updateURL https://codeberg.org/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css @updateURL https://codeberg.org/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css
@homepageURL https://codeberg.org/Freeplay/Mastodon-Modern @homepageURL https://codeberg.org/Freeplay/Mastodon-Modern
@@ -156,34 +153,39 @@ Vanilla 4.2.0:
padding-inline 10px padding-inline 10px
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.load-more, .setting-toggle, .column-header__back-button, .column-back-button, body:not(.reduce-motion) {
.trends__item, .story, .account__avatar, .button, .load-more, .setting-toggle, .column-header__back-button, .column-back-button,
.media-gallery__item, .column-link, select, .status-card, .audio-player, .account { .trends__item, .story, .account__avatar, .button,
transition transform .4s cubic-bezier(0,0,0,3), background .2s !important .media-gallery__item, .column-link, select, .status-card, .audio-player, .account {
&:active, &:focus-visible { transition transform .4s cubic-bezier(0,0,0,3), background .2s !important
transform scale(.99) &:active, &:focus-visible {
transition transform .4s cubic-bezier(0,0,0,1) !important transform scale(.99)
transition transform .4s cubic-bezier(0,0,0,1) !important
}
} }
} .column-header__button, .column-header__buttons > .column-header__back-button,
.column-header__button, .column-header__buttons > .column-header__back-button, .react-toggle-track, .icon-button, .floating-action-button {
.react-toggle-track, .icon-button, .floating-action-button {
transition transform .4s cubic-bezier(0,0,0,4) !important
&:active {
transform scale(.95)
transition transform .4s cubic-bezier(0,0,0,1) !important
}
}
.status__content__spoiler-link {
span {
display inline-block
transition transform .4s cubic-bezier(0,0,0,4) !important transition transform .4s cubic-bezier(0,0,0,4) !important
&:active {
transform scale(.95)
transition transform .4s cubic-bezier(0,0,0,1) !important
}
} }
.status__content__spoiler-link {
span {
display inline-block
transition transform .4s cubic-bezier(0,0,0,4) !important
}
&:active span { &:active span {
transition transform .4s cubic-bezier(0,0,0,1) !important transition transform .4s cubic-bezier(0,0,0,1) !important
transform translateY(1px) transform translateY(1px)
}
} }
} }
.reduce-motion * {
animation-duration 0s !important
}
@keyframes bounceIn { @keyframes bounceIn {
0% { transform: scale(1.1); opacity: 0 } 0% { transform: scale(1.1); opacity: 0 }
@@ -1556,7 +1558,7 @@ Vanilla 4.2.0:
height 100% height 100%
} }
} }
&.compact .status-card__image { &.compact:not(.interactive) .status-card__image {
position relative position relative
aspect-ratio unset !important aspect-ratio unset !important
img { img {
@@ -2901,7 +2903,7 @@ Vanilla 4.2.0:
/ .modal-root__container { / .modal-root__container {
animation bounceIn .7s !important animation bounceIn .7s
} }
} }