mirror of
https://git.gay/freeplay/Mastodon-Modern.git
synced 2026-01-15 08:22:57 -03:00
1.6.10
- Fix jump when loading some media - add transition to dropdowns - unset text transforms in extra info fields - use webkit-scrollbar - fix missing -webkit-mask for glitch collapsed content on chromium - fixes
This commit is contained in:
freeplay
@@ -25,9 +25,10 @@ body.app-body.flavour-glitch > #mastodon .collapsed .status__content {
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .collapsed .status__content .status__content__text {
|
||||
mask: linear-gradient(to bottom, #000 50px, transparent) !important;
|
||||
-webkit-mask: linear-gradient(to bottom, #000 50px, transparent) !important;
|
||||
max-height: 100px;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .collapsed .status__content p:not(:last-of-type) {
|
||||
body.app-body.flavour-glitch > #mastodon .collapsed .status__content p:not(:last-child) {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .collapsed .status__content br {
|
||||
@@ -72,8 +73,13 @@ body.app-body.flavour-glitch > #mastodon .status__action-bar-spacer {
|
||||
min-width: 5px;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .status__relative-time {
|
||||
margin-right: 5px;
|
||||
margin-inline: 5px !important;
|
||||
z-index: 2;
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .reactions-bar {
|
||||
width: unset;
|
||||
margin-top: 8px;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .reactions-bar button {
|
||||
border-radius: 6px !important;
|
||||
@@ -81,7 +87,11 @@ body.app-body.flavour-glitch > #mastodon .reactions-bar button {
|
||||
}
|
||||
@media (pointer: coarse) {
|
||||
body.app-body.flavour-glitch > #mastodon .reactions-bar button {
|
||||
padding: 8px 10px !important;
|
||||
padding: 4px 8px !important;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .reactions-bar button .reactions-bar__item__emoji {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .reactions-bar:empty {
|
||||
|
||||
67
modern.css
67
modern.css
@@ -10,6 +10,21 @@
|
||||
--shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4);
|
||||
--shadow-med: 0 8px 60px -30px rgba(0,0,0,0.1);
|
||||
}
|
||||
:not(body):not(.scrollable)::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
margin-block: 10px;
|
||||
}
|
||||
:not(body):not(.scrollable)::-webkit-scrollbar-track {
|
||||
background: none;
|
||||
}
|
||||
:not(body):not(.scrollable)::-webkit-scrollbar-thumb {
|
||||
border-radius: 100px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
:not(body):not(.scrollable):not(:hover)::-webkit-scrollbar-thumb {
|
||||
background: none;
|
||||
padding-block: 10px;
|
||||
}
|
||||
.rtl textarea {
|
||||
text-align: right;
|
||||
}
|
||||
@@ -395,8 +410,10 @@ a:focus-visible,
|
||||
.search__input {
|
||||
border: 0 !important;
|
||||
}
|
||||
.dropdown-menu {
|
||||
.dropdown-menu,
|
||||
.dropdown-animation {
|
||||
border-radius: var(--radius);
|
||||
animation: scaleIn 0.2s;
|
||||
}
|
||||
.dropdown-menu__container__list {
|
||||
overflow: hidden auto;
|
||||
@@ -489,7 +506,7 @@ a:focus-visible,
|
||||
border-radius: var(--radius);
|
||||
animation: scaleIn 0.2s;
|
||||
box-shadow: var(--shadow-low);
|
||||
margin-top: 4px;
|
||||
margin-top: 10px;
|
||||
margin-inline: 4px;
|
||||
width: calc(100% - 8px);
|
||||
}
|
||||
@@ -500,6 +517,8 @@ a:focus-visible,
|
||||
}
|
||||
#mastodon .compose-form {
|
||||
padding-top: 10px;
|
||||
min-height: unset;
|
||||
overflow: unset;
|
||||
}
|
||||
#mastodon .compose-form .reply-indicator {
|
||||
position: relative;
|
||||
@@ -515,12 +534,6 @@ a:focus-visible,
|
||||
}
|
||||
#mastodon .compose-form .compose-form__buttons-wrapper {
|
||||
border-radius: 0 0 var(--radius) var(--radius) !important;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__buttons-wrapper .compose-form__buttons> * {
|
||||
border-radius: var(--radius-round);
|
||||
overflow: hidden;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__publish-button-wrapper {
|
||||
overflow: visible !important;
|
||||
@@ -706,7 +719,7 @@ a:focus-visible,
|
||||
overflow: hidden;
|
||||
}
|
||||
.dismissable-banner__message {
|
||||
padding: 10px;
|
||||
padding-block: 10px;
|
||||
padding-inline-end: 30px;
|
||||
}
|
||||
.dismissable-banner__action {
|
||||
@@ -719,7 +732,7 @@ a:focus-visible,
|
||||
#mastodon .column:not(.scrollable--flex) > .dismissable-banner ~ .scrollable {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
#mastodon .scrollable:not(.scrollable--flex) > .dismissable-banner {
|
||||
#mastodon .scrollable > .dismissable-banner {
|
||||
margin: 0 !important;
|
||||
}
|
||||
#mastodon .empty-column-indicator {
|
||||
@@ -908,7 +921,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
||||
all: unset;
|
||||
color: unset;
|
||||
opacity: 0.9;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd,
|
||||
#mastodon .account__header__account-note dl dd,
|
||||
@@ -2199,7 +2211,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
||||
transform: scale(1.2);
|
||||
}
|
||||
#mastodon .status__content ~ [style*="aspect-ratio"] {
|
||||
aspect-ratio: unset !important;
|
||||
max-height: 80vh;
|
||||
}
|
||||
#mastodon .status > .status__content .status__content__text:empty {
|
||||
margin-top: -10px !important;
|
||||
@@ -2993,11 +3005,14 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
||||
}
|
||||
#mastodon .status__action-bar :not(i):not(.status__action-bar-spacer) {
|
||||
display: flex;
|
||||
flex-grow: 9999 !important;
|
||||
flex-grow: 9999;
|
||||
justify-content: center !important;
|
||||
max-width: 55px;
|
||||
min-width: max-content;
|
||||
}
|
||||
#mastodon .status__action-bar > .icon-button:first-child {
|
||||
margin-inline-start: -8px !important;
|
||||
}
|
||||
#mastodon .status__action-bar,
|
||||
#mastodon .detailed-status__action-bar,
|
||||
#mastodon .picture-in-picture__footer {
|
||||
@@ -3142,9 +3157,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
||||
margin: 0 !important;
|
||||
justify-content: center;
|
||||
}
|
||||
#mastodon .status__action-bar > .icon-button:first-child {
|
||||
margin-inline-start: -8px !important;
|
||||
}
|
||||
#mastodon .icon-button:after {
|
||||
content: unset !important;
|
||||
}
|
||||
@@ -3175,23 +3187,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
||||
flex-grow: 1;
|
||||
overflow: visible !important;
|
||||
}
|
||||
#mastodon .columns-area__panels__main .compose-form {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
#mastodon .columns-area__panels__main .compose-form__autosuggest-wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
#mastodon .columns-area__panels__main .compose-form__autosuggest-wrapper,
|
||||
#mastodon .columns-area__panels__main .autosuggest-textarea,
|
||||
#mastodon .columns-area__panels__main .autosuggest-textarea label,
|
||||
#mastodon .columns-area__panels__main .autosuggest-textarea textarea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#mastodon .about.about.about {
|
||||
padding-inline: 10px !important;
|
||||
}
|
||||
@@ -3889,11 +3884,14 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .status__action-bar :not(i):not(.status__action-bar-spacer) {
|
||||
display: flex;
|
||||
flex-grow: 9999 !important;
|
||||
flex-grow: 9999;
|
||||
justify-content: center !important;
|
||||
max-width: 55px;
|
||||
min-width: max-content;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .status__action-bar > .icon-button:first-child {
|
||||
margin-inline-start: -8px !important;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .status__action-bar,
|
||||
.layout-multiple-columns #mastodon .columns-area .detailed-status__action-bar,
|
||||
.layout-multiple-columns #mastodon .columns-area .picture-in-picture__footer {
|
||||
@@ -3972,6 +3970,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer__inner__mastodon {
|
||||
background-color: transparent;
|
||||
border: 0 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer__inner.darker {
|
||||
border-radius: var(--radius-round) var(--radius-round) 0 0;
|
||||
|
||||
@@ -13,9 +13,13 @@
|
||||
////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
/* Update 1.6.9
|
||||
- fix embeds w/ no text
|
||||
- respect the built-in reduce-motion option
|
||||
/* Update 1.6.10
|
||||
- Fix jump when loading some media
|
||||
- add transition to dropdowns
|
||||
- unset text transforms in extra info fields
|
||||
- use webkit-scrollbar
|
||||
- fix missing -webkit-mask for glitch collapsed content on chromium
|
||||
- fixes
|
||||
*/
|
||||
|
||||
/* ==UserStyle==
|
||||
@@ -55,6 +59,27 @@
|
||||
--shadow-low 0 8px 16px -10px rgba(0,0,0,0.4)
|
||||
--shadow-med 0 8px 60px -30px rgba(0,0,0,0.1)
|
||||
}
|
||||
|
||||
:not(body):not(.scrollable) {
|
||||
&::-webkit-scrollbar {
|
||||
width 6px
|
||||
margin-block 10px
|
||||
&-track {
|
||||
background none
|
||||
}
|
||||
&-thumb {
|
||||
border-radius 100px
|
||||
transition background-color .2s
|
||||
}
|
||||
}
|
||||
&:not(:hover) {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background none
|
||||
padding-block 10px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fa() {
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
}
|
||||
@@ -97,11 +122,14 @@
|
||||
margin-inline-end 0 !important
|
||||
:not(i):not(.status__action-bar-spacer) {
|
||||
display flex
|
||||
flex-grow 9999 !important
|
||||
flex-grow 9999
|
||||
justify-content center !important
|
||||
max-width 55px
|
||||
min-width max-content
|
||||
}
|
||||
> .icon-button:first-child {
|
||||
margin-inline-start -8px !important
|
||||
}
|
||||
}
|
||||
.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer {
|
||||
flex-wrap wrap
|
||||
@@ -250,8 +278,9 @@
|
||||
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
.dropdown-menu, .dropdown-animation {
|
||||
border-radius var(--radius)
|
||||
animation scaleIn .2s
|
||||
}
|
||||
.dropdown-menu__container__list {
|
||||
overflow hidden auto
|
||||
@@ -351,7 +380,7 @@
|
||||
border-radius var(--radius)
|
||||
animation scaleIn .2s
|
||||
box-shadow var(--shadow-low)
|
||||
margin-top 4px
|
||||
margin-top 10px
|
||||
margin-inline 4px
|
||||
width calc(100% - 8px)
|
||||
}
|
||||
@@ -366,6 +395,8 @@
|
||||
|
||||
.compose-form {
|
||||
padding-top 10px
|
||||
min-height unset
|
||||
overflow unset
|
||||
.reply-indicator {
|
||||
position relative
|
||||
transition min-height .1s
|
||||
@@ -379,12 +410,6 @@
|
||||
}
|
||||
.compose-form__buttons-wrapper {
|
||||
border-radius 0 0 var(--radius) var(--radius) !important
|
||||
position sticky
|
||||
bottom 0
|
||||
.compose-form__buttons> * {
|
||||
border-radius var(--radius-round)
|
||||
overflow hidden
|
||||
}
|
||||
}
|
||||
.compose-form__publish-button-wrapper {
|
||||
overflow visible !important
|
||||
@@ -598,7 +623,7 @@
|
||||
isolation isolate
|
||||
overflow hidden
|
||||
/.dismissable-banner__message {
|
||||
padding 10px
|
||||
padding-block 10px
|
||||
padding-inline-end 30px
|
||||
}
|
||||
/.dismissable-banner__action {
|
||||
@@ -612,7 +637,7 @@
|
||||
border-radius 0 !important
|
||||
}
|
||||
}
|
||||
.scrollable:not(.scrollable--flex) > .dismissable-banner {
|
||||
.scrollable > .dismissable-banner {
|
||||
margin 0 !important
|
||||
}
|
||||
|
||||
@@ -809,10 +834,8 @@
|
||||
// max-width max-content !important
|
||||
dt {
|
||||
all unset
|
||||
|
||||
color unset
|
||||
opacity .9
|
||||
text-transform capitalize
|
||||
}
|
||||
|
||||
dd {
|
||||
@@ -1492,7 +1515,7 @@
|
||||
}
|
||||
}
|
||||
& ~ [style*="aspect-ratio"] {
|
||||
aspect-ratio unset !important
|
||||
max-height 80vh
|
||||
}
|
||||
}
|
||||
.status > .status__content {
|
||||
@@ -2374,9 +2397,6 @@
|
||||
margin 0 !important
|
||||
justify-content center
|
||||
}
|
||||
> .icon-button:first-child {
|
||||
margin-inline-start -8px !important
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button:after {
|
||||
@@ -2420,28 +2440,6 @@
|
||||
overflow visible !important
|
||||
}
|
||||
|
||||
// COMPOSE PAGE
|
||||
.columns-area__panels__main {
|
||||
.compose-form {
|
||||
flex-grow 1
|
||||
display flex
|
||||
flex-direction column
|
||||
overflow hidden
|
||||
}
|
||||
.compose-form__autosuggest-wrapper {
|
||||
overflow hidden
|
||||
}
|
||||
.compose-form__autosuggest-wrapper,
|
||||
.autosuggest-textarea,
|
||||
.autosuggest-textarea label,
|
||||
.autosuggest-textarea textarea {
|
||||
display flex
|
||||
flex-direction column
|
||||
flex-grow 1
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// ABOUT PAGE
|
||||
.about.about.about {
|
||||
padding-inline 10px !important
|
||||
@@ -2877,6 +2875,7 @@
|
||||
.drawer__inner:not(.darker), .drawer__inner__mastodon {
|
||||
background-color transparent
|
||||
border 0 !important
|
||||
background-color transparent !important
|
||||
}
|
||||
.drawer__inner.darker {
|
||||
border-radius var(--radius-round) var(--radius-round) 0 0
|
||||
@@ -2940,9 +2939,10 @@
|
||||
overflow visible
|
||||
.status__content__text {
|
||||
mask linear-gradient(to bottom, black 50px, transparent) !important
|
||||
-webkit-mask @mask
|
||||
max-height 100px
|
||||
}
|
||||
p:not(:last-of-type) {
|
||||
p:not(:last-child) {
|
||||
margin-bottom .4em
|
||||
}
|
||||
br {
|
||||
@@ -2998,16 +2998,23 @@
|
||||
}
|
||||
|
||||
.status__relative-time {
|
||||
margin-right 5px
|
||||
margin-inline 5px !important
|
||||
z-index 2
|
||||
flex-grow 0 !important
|
||||
}
|
||||
|
||||
.reactions-bar {
|
||||
width unset
|
||||
margin-top 8px
|
||||
button {
|
||||
border-radius 6px !important
|
||||
padding-block 2px
|
||||
@media (pointer: coarse) {
|
||||
padding 8px 10px !important
|
||||
padding 4px 8px !important
|
||||
.reactions-bar__item__emoji {
|
||||
height 18px
|
||||
width @height
|
||||
}
|
||||
}
|
||||
}
|
||||
&:empty {
|
||||
|
||||
Reference in New Issue
Block a user