mirror of
https://git.gay/freeplay/Mastodon-Modern.git
synced 2026-01-15 16:32:57 -03:00
1.6.7
- Glitch 4.1.5+, fix detailed note shadow - tweak mobile button padding - make more of the post clickable on glitch-soc - fix white-on-white audio player - fix dismissable banner padding on mobile - tweak search popup - other tweaks and more fixes (and maybe accidental breakage of other things who knooowwwwsssss) weeeeeeeeeeeeeeeeeeeeeeeee
This commit is contained in:
freeplay
@@ -1 +1 @@
|
||||
body.app-body.flavour-glitch>#mastodon .compose-form__autosuggest-wrapper>:last-child{padding-bottom:2em!important}body.app-body.flavour-glitch>#mastodon .compose-form__buttons{width:100%}body.app-body.flavour-glitch>#mastodon .compose-form__buttons>div:last-child{margin-inline-start:auto}body.app-body.flavour-glitch>#mastodon .character-counter__wrapper{position:absolute;inset-inline-end:0;bottom:100%;margin:4px 4px;border-radius:6px;padding:.1em .5em}body.app-body.flavour-glitch>#mastodon .character-counter__wrapper span{font-size:.9em;font-weight:500}body.app-body.flavour-glitch>#mastodon .collapsed .status__content{height:auto!important;overflow:visible}body.app-body.flavour-glitch>#mastodon .collapsed .status__content .status__content__text{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){margin-bottom:.4em}body.app-body.flavour-glitch>#mastodon .collapsed .status__content::after{content:unset}body.app-body.flavour-glitch>#mastodon .collapsed.muted .status__content__text ~ *{display:none}body.app-body.flavour-glitch>#mastodon .status .full-width{margin-inline:0!important}body.app-body.flavour-glitch>#mastodon .status .status__action-bar{position:static}body.app-body.flavour-glitch>#mastodon .status__info>span{overflow:visible!important}body.app-body.flavour-glitch>#mastodon .status__info .notification__message{padding-top:0!important;padding-inline-start:0!important}body.app-body.flavour-glitch>#mastodon .status__display-name{line-height:22px}body.app-body.flavour-glitch>#mastodon .display-name__account{font-size:15px}body.app-body.flavour-glitch>#mastodon .media-gallery__preview{display:unset}body.app-body.flavour-glitch>#mastodon .status__action-bar-spacer{min-width:5px}body.app-body.flavour-glitch>#mastodon .reactions-bar button{border-radius:6px!important;padding-block:2px}@media (pointer:coarse){body.app-body.flavour-glitch>#mastodon .reactions-bar button{padding:8px 10px!important}}body.app-body.flavour-glitch>#mastodon .reactions-bar:empty{display:none}body.app-body.flavour-glitch>#mastodon .detailed-status__wrapper{box-shadow:none}body.app-body.flavour-glitch>#mastodon .detailed-status__wrapper>div>.focusable:not(.status){box-shadow:var(--shadow)}body.app-body.flavour-glitch>#mastodon .collapsed>.status__info .notification__message{padding-bottom:0!important}body.app-body.flavour-glitch>#mastodon .notification>.notification__message{padding-inline-start:15px!important;padding-top:18px!important}body.app-body.flavour-glitch>#mastodon .notification .account{padding-inline-start:0!important}body.app-body.flavour-glitch>#mastodon .notification__favourite-icon-wrapper{position:static;margin-inline-end:10px}body.app-body.flavour-glitch>#mastodon .notification__favourite-icon-wrapper i{width:1.28571429em!important;text-align:center}body.app-body.flavour-glitch>#mastodon .status__prepend,body.app-body.flavour-glitch>#mastodon .status__info .notification__message{padding-bottom:15px!important;padding-top:0!important;margin-top:-5px!important}body.app-body.flavour-glitch>#mastodon .status__prepend .status__prepend-icon-wrapper,body.app-body.flavour-glitch>#mastodon .status__info .notification__message .status__prepend-icon-wrapper{all:unset;margin-inline-end:10px}body.app-body.flavour-glitch>#mastodon .detailed-status__wrapper .focusable:not(.status)::before{content:unset!important}body.app-body.flavour-glitch>#mastodon .setting-text{border-radius:0!important;margin:4px;width:calc(100% - 8px)}body.app-body.flavour-glitch>#mastodon .column-settings__pillbar{border-radius:var(--radius)}body.app-body.flavour-glitch>#mastodon .pillbar-button{border-radius:0!important;padding:6px}body.app-body.flavour-glitch>#mastodon .account-card .media-modal__close{left:10px;top:10px}body.app-body.flavour-glitch>#mastodon .account-card .media-modal__close::before{content:"";position:absolute;inset:-60px -30px;background:linear-gradient(to right,#000,transparent);transform:rotate(45deg);z-index:-1;opacity:.5}.layout-multiple-columns.flavour-glitch .drawer__inner{margin-top:-10px;padding-top:30px!important}
|
||||
body.app-body.flavour-glitch>#mastodon .compose-form__autosuggest-wrapper>:last-child{padding-bottom:2em!important}body.app-body.flavour-glitch>#mastodon .compose-form__buttons{width:100%}body.app-body.flavour-glitch>#mastodon .compose-form__buttons>div:last-child{margin-inline-start:auto}body.app-body.flavour-glitch>#mastodon .character-counter__wrapper{position:absolute;inset-inline-end:0;bottom:100%;margin:4px 4px;border-radius:6px;padding:.1em .5em}body.app-body.flavour-glitch>#mastodon .character-counter__wrapper span{font-size:.9em;font-weight:500}body.app-body.flavour-glitch>#mastodon .collapsed .status__content{height:auto!important;overflow:visible}body.app-body.flavour-glitch>#mastodon .collapsed .status__content .status__content__text{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){margin-bottom:.4em}body.app-body.flavour-glitch>#mastodon .collapsed .status__content br{display:block}body.app-body.flavour-glitch>#mastodon .collapsed .status__content::after{content:unset}body.app-body.flavour-glitch>#mastodon .collapsed.muted .status__content__text ~ *{display:none}body.app-body.flavour-glitch>#mastodon .status>.status__content{margin-block:-90px -100px!important;padding-block:100px!important}body.app-body.flavour-glitch>#mastodon .status>.status__content .status__content__text{margin-top:0}body.app-body.flavour-glitch>#mastodon .status>.status__content>:last-child:not(.status__content__text){margin-bottom:5px!important}body.app-body.flavour-glitch>#mastodon .status .full-width{margin-inline:0!important}body.app-body.flavour-glitch>#mastodon .status .status__action-bar{position:static}body.app-body.flavour-glitch>#mastodon .status__info .notification__message{padding-top:0!important;padding-inline-start:0!important}body.app-body.flavour-glitch>#mastodon .status__display-name{line-height:22px}body.app-body.flavour-glitch>#mastodon .display-name__account{font-size:15px}body.app-body.flavour-glitch>#mastodon .media-gallery__item>.media-gallery__preview{display:unset}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}body.app-body.flavour-glitch>#mastodon .reactions-bar button{border-radius:6px!important;padding-block:2px}@media (pointer:coarse){body.app-body.flavour-glitch>#mastodon .reactions-bar button{padding:8px 10px!important}}body.app-body.flavour-glitch>#mastodon .reactions-bar:empty{display:none}body.app-body.flavour-glitch>#mastodon .collapsed>.status__info .notification__message{padding-bottom:0!important}body.app-body.flavour-glitch>#mastodon .notification>.notification__message{padding-inline:15px!important;padding-top:18px!important}body.app-body.flavour-glitch>#mastodon .notification .account{padding-inline-start:0!important}body.app-body.flavour-glitch>#mastodon .notification__favourite-icon-wrapper{position:static;margin-inline-end:10px}body.app-body.flavour-glitch>#mastodon .notification__favourite-icon-wrapper i{width:1.28571429em!important;text-align:center}body.app-body.flavour-glitch>#mastodon .status__prepend,body.app-body.flavour-glitch>#mastodon .status__info .notification__message{padding-bottom:15px!important;padding-top:0!important;margin-top:-5px!important}body.app-body.flavour-glitch>#mastodon .status__prepend .status__prepend-icon-wrapper,body.app-body.flavour-glitch>#mastodon .status__info .notification__message .status__prepend-icon-wrapper{all:unset;margin-inline-end:10px;display:flex}body.app-body.flavour-glitch>#mastodon .status__prepend .status__prepend-icon-wrapper i,body.app-body.flavour-glitch>#mastodon .status__info .notification__message .status__prepend-icon-wrapper i{margin:auto}body.app-body.flavour-glitch>#mastodon .detailed-status__wrapper .focusable:not(.status)::before{content:unset!important}body.app-body.flavour-glitch>#mastodon .setting-text{border-radius:0!important;margin:4px;width:calc(100% - 8px)}body.app-body.flavour-glitch>#mastodon .column-settings__pillbar{border-radius:var(--radius)}body.app-body.flavour-glitch>#mastodon .pillbar-button{border-radius:0!important;padding:6px}body.app-body.flavour-glitch>#mastodon .account-card .media-modal__close{left:10px;top:10px}body.app-body.flavour-glitch>#mastodon .account-card .media-modal__close::before{content:"";position:absolute;inset:-60px -30px;background:linear-gradient(to right,#000,transparent);transform:rotate(45deg);z-index:-1;opacity:.5}.layout-multiple-columns.flavour-glitch .drawer__inner{margin-top:-10px;padding-top:30px!important}
|
||||
File diff suppressed because one or more lines are too long
155
modern.user.css
155
modern.user.css
@@ -13,13 +13,19 @@
|
||||
////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
/* Update 1.6.5
|
||||
- Glitch-soc / light mode / border fixes
|
||||
/* Update 1.6.7
|
||||
- Glitch 4.1.5+, fix detailed note shadow
|
||||
- tweak mobile button padding
|
||||
- make more of the post clickable on glitch-soc
|
||||
- fix white-on-white audio player
|
||||
- fix dismissable banner padding on mobile
|
||||
- tweak search popup
|
||||
- other tweaks and more fixes (and maybe accidental breakage of other things who knooowwwwsssss) weeeeeeeeeeeeeeeeeeeeeeeee
|
||||
*/
|
||||
|
||||
/* ==UserStyle==
|
||||
@name Mastodon Modern
|
||||
@version 1.6.6
|
||||
@version 1.6.7
|
||||
@description Drastically improves the look & feel of Mastodon
|
||||
@updateURL https://codeberg.org/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css
|
||||
@homepageURL https://codeberg.org/Freeplay/Mastodon-Modern
|
||||
@@ -42,7 +48,7 @@
|
||||
statuses-list = ".focusable, .entry, .statuses-grid__item .detailed-status, .trends__item, .story, .account-card, .scrollable :not(.focusable) > .account, .timeline-hint"
|
||||
media = ".media-gallery, .video-player, .status-card.horizontal.interactive, .status-card, .audio-player, .picture-in-picture-placeholder"
|
||||
|
||||
:root {
|
||||
/:root {
|
||||
--tl-width 750px
|
||||
--radius 12px
|
||||
--radius-round 24px
|
||||
@@ -155,7 +161,7 @@
|
||||
.load-more, .setting-toggle, .column-header__back-button, .column-back-button,
|
||||
.trends__item, .story, .account__avatar, .button,
|
||||
.media-gallery__item, .column-link, select, .status-card, .audio-player, .account {
|
||||
transition transform .4s cubic-bezier(0,0,0,3) !important
|
||||
transition transform .4s cubic-bezier(0,0,0,3), background .2s !important
|
||||
&:active, &:focus-visible {
|
||||
transform scale(.99)
|
||||
transition transform .4s cubic-bezier(0,0,0,1) !important
|
||||
@@ -327,10 +333,8 @@
|
||||
max-height unset !important
|
||||
}
|
||||
.search {
|
||||
&, /.search-popout {
|
||||
margin-inline 5px
|
||||
border-radius var(--radius)
|
||||
}
|
||||
margin-inline 5px
|
||||
border-radius var(--radius)
|
||||
label {
|
||||
// padding-inline 20px
|
||||
box-sizing border-box
|
||||
@@ -343,6 +347,14 @@
|
||||
.search__icon > i {
|
||||
margin-inline 5px
|
||||
}
|
||||
/.search__popout {
|
||||
border-radius var(--radius)
|
||||
animation scaleIn .2s
|
||||
box-shadow var(--shadow-low)
|
||||
margin-top 4px
|
||||
margin-inline 4px
|
||||
width calc(100% - 8px)
|
||||
}
|
||||
}
|
||||
.compose__action-bar-dropdown {
|
||||
.icon-button {
|
||||
@@ -593,14 +605,14 @@
|
||||
margin 10px
|
||||
}
|
||||
}
|
||||
.column > .dismissable-banner {
|
||||
.column:not(.scrollable--flex) > .dismissable-banner {
|
||||
border-radius var(--radius) var(--radius) 0 0 !important
|
||||
margin 0
|
||||
& ~ .scrollable {
|
||||
border-radius 0 !important
|
||||
}
|
||||
}
|
||||
.scrollable > .dismissable-banner {
|
||||
.scrollable:not(.scrollable--flex) > .dismissable-banner {
|
||||
margin 0 !important
|
||||
}
|
||||
|
||||
@@ -1295,6 +1307,7 @@
|
||||
display flex
|
||||
flex-grow 1
|
||||
gap .3em
|
||||
align-items center
|
||||
> a {
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
@@ -1318,22 +1331,28 @@
|
||||
a {
|
||||
white-space nowrap
|
||||
font-weight 700
|
||||
text-overflow ellipsis
|
||||
overflow hidden !important
|
||||
}
|
||||
bdi {
|
||||
text-overflow ellipsis
|
||||
overflow hidden
|
||||
max-width 100%
|
||||
}
|
||||
}
|
||||
.status__prepend {
|
||||
margin-bottom -15px !important
|
||||
}
|
||||
.notification__message {
|
||||
> span, > span > span {
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
align-items center
|
||||
gap 0em .4em
|
||||
line-height 1.4
|
||||
max-width 100%
|
||||
}
|
||||
}
|
||||
.status__prepend {
|
||||
margin-bottom -10px !important
|
||||
}
|
||||
.notification-favourite, .notification-reblog {
|
||||
.notification__message {
|
||||
margin-bottom -10px !important
|
||||
@@ -1412,10 +1431,6 @@
|
||||
position relative
|
||||
z-index 2
|
||||
}
|
||||
> span:first-child {
|
||||
width 0
|
||||
flex-grow 1
|
||||
}
|
||||
.display-name {
|
||||
color unset !important
|
||||
strong {
|
||||
@@ -1449,10 +1464,10 @@
|
||||
|
||||
// STATUS CONTENT
|
||||
.status__content {
|
||||
margin-block 10px 0
|
||||
padding-top 2px
|
||||
text-align unset !important
|
||||
line-height 1.5
|
||||
margin-top 10px
|
||||
&.status__content--with-spoiler {
|
||||
overflow visible
|
||||
> p {
|
||||
@@ -1460,13 +1475,10 @@
|
||||
padding-inline 100px
|
||||
overflow hidden
|
||||
}
|
||||
> p:first-child {
|
||||
> p:first-child {
|
||||
margin-bottom 0
|
||||
}
|
||||
}
|
||||
.status__content__text > br:first-child {
|
||||
display none !important
|
||||
}
|
||||
p:empty {
|
||||
max-height 0
|
||||
}
|
||||
@@ -1480,6 +1492,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.status > .status__content {
|
||||
.status__content__text {
|
||||
&:empty {
|
||||
margin-top -10px !important
|
||||
}
|
||||
}
|
||||
}
|
||||
.status__content__spoiler-link {
|
||||
display block
|
||||
position relative
|
||||
@@ -1531,12 +1550,19 @@
|
||||
border-radius 0
|
||||
width 90px
|
||||
min-height 100%
|
||||
aspect-ratio unset !important
|
||||
img {
|
||||
border-radius 0
|
||||
height 100%
|
||||
}
|
||||
}
|
||||
&.compact .status-card__image {
|
||||
position relative
|
||||
aspect-ratio unset !important
|
||||
img {
|
||||
position absolute
|
||||
inset 0
|
||||
}
|
||||
}
|
||||
/.status-card__host {
|
||||
font-size .85em
|
||||
line-height 1.5
|
||||
@@ -1692,7 +1718,7 @@
|
||||
|
||||
|
||||
// RIGHT COLUMN
|
||||
/.layout-single-column & {
|
||||
/.layout-single-column {
|
||||
.tabs-bar__wrapper, .column-back-button--slim .column-back-button {
|
||||
z-index 101
|
||||
grid-column 2
|
||||
@@ -2202,6 +2228,9 @@
|
||||
.columns-area--mobile > .column > .column-header__wrapper {
|
||||
display none
|
||||
}
|
||||
.column-header {
|
||||
border-inline 0
|
||||
}
|
||||
/.ui__header {
|
||||
z-index 101
|
||||
border-bottom 0
|
||||
@@ -2313,6 +2342,11 @@
|
||||
|
||||
}
|
||||
|
||||
.dismissable-banner {
|
||||
margin 0
|
||||
padding-left 4px
|
||||
}
|
||||
|
||||
.status {
|
||||
padding-top 14px !important
|
||||
.status__avatar {
|
||||
@@ -2326,9 +2360,6 @@
|
||||
background-size cover !important
|
||||
}
|
||||
}
|
||||
{media} {
|
||||
margin-bottom 0 !important
|
||||
}
|
||||
}
|
||||
|
||||
.status__action-bar {
|
||||
@@ -2337,10 +2368,9 @@
|
||||
.icon-button {
|
||||
margin 0 !important
|
||||
justify-content center
|
||||
padding .7em !important
|
||||
&:first-child {
|
||||
margin-inline-start -10px !important
|
||||
}
|
||||
}
|
||||
> .icon-button:first-child {
|
||||
margin-inline-start -8px !important
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2428,15 +2458,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/.search-popout {
|
||||
max-width unset !important
|
||||
width calc(100vw - 70px) !important
|
||||
position fixed
|
||||
left 15px
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2919,6 +2940,9 @@
|
||||
p:not(:last-of-type) {
|
||||
margin-bottom .4em
|
||||
}
|
||||
br {
|
||||
display block
|
||||
}
|
||||
&::after {
|
||||
content unset
|
||||
}
|
||||
@@ -2929,6 +2953,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// make entire post clickable
|
||||
.status > .status__content {
|
||||
margin-block -90px -100px !important
|
||||
padding-block 100px !important
|
||||
.status__content__text {
|
||||
margin-top 0px
|
||||
}
|
||||
> :last-child:not(.status__content__text) {
|
||||
margin-bottom 5px !important
|
||||
}
|
||||
}
|
||||
.status {
|
||||
.full-width {
|
||||
margin-inline 0 !important
|
||||
@@ -2938,9 +2973,6 @@
|
||||
}
|
||||
}
|
||||
.status__info {
|
||||
> span {
|
||||
overflow visible !important
|
||||
}
|
||||
.notification__message {
|
||||
padding-top 0 !important
|
||||
padding-inline-start 0 !important
|
||||
@@ -2952,7 +2984,7 @@
|
||||
.display-name__account {
|
||||
font-size 15px
|
||||
}
|
||||
.media-gallery__preview {
|
||||
.media-gallery__item > .media-gallery__preview {
|
||||
display unset
|
||||
}
|
||||
|
||||
@@ -2960,6 +2992,10 @@
|
||||
min-width 5px
|
||||
}
|
||||
|
||||
.status__relative-time {
|
||||
margin-right 5px
|
||||
}
|
||||
|
||||
.reactions-bar {
|
||||
button {
|
||||
border-radius 6px !important
|
||||
@@ -2973,22 +3009,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__wrapper {
|
||||
box-shadow none
|
||||
> div > .focusable:not(.status) {
|
||||
box-shadow var(--shadow)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Notifications
|
||||
.collapsed > .status__info .notification__message {
|
||||
padding-bottom 0 !important
|
||||
}
|
||||
.notification {
|
||||
> .notification__message {
|
||||
padding-inline-start 15px !important
|
||||
padding-inline 15px !important
|
||||
padding-top 18px !important
|
||||
}
|
||||
.account {
|
||||
@@ -3010,6 +3037,10 @@
|
||||
.status__prepend-icon-wrapper {
|
||||
all unset
|
||||
margin-inline-end 10px
|
||||
display flex
|
||||
i {
|
||||
margin auto
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3059,6 +3090,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// below isn't needed for compilation, just for compatability w/ glitch-soc v's < 4.1.5
|
||||
/body.app-body.flavour-glitch > #mastodon {
|
||||
.scrollable.detailed-status__wrapper {
|
||||
box-shadow none
|
||||
> div > .focusable[aria-label]:not(.status--in-thread) {
|
||||
box-shadow var(--shadow)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////////////////
|
||||
// //
|
||||
// STYLUS-ONLY OPTIONS //
|
||||
|
||||
Reference in New Issue
Block a user