mirror of
https://git.gay/freeplay/Mastodon-Modern.git
synced 2026-01-15 16:32:57 -03:00
1.6.12
- Highlight mention only posts - fix post preview in dropdowns - accent variable, not applied everywhere - fixes & tweaks, as always
This commit is contained in:
freeplay
154
modern.user.css
154
modern.user.css
@@ -13,17 +13,16 @@
|
||||
////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
||||
/* Update 1.6.10
|
||||
- Fix jump when loading some media
|
||||
- add transition to dropdowns
|
||||
- unset text transforms in extra info fields
|
||||
- use webkit-scrollbar
|
||||
- fixes
|
||||
/* Update 1.6.12
|
||||
- Highlight mention only posts
|
||||
- fix post preview in dropdowns
|
||||
- accent variable, not applied everywhere
|
||||
- fixes & tweaks, as always
|
||||
*/
|
||||
|
||||
/* ==UserStyle==
|
||||
@name Mastodon Modern
|
||||
@version 1.6.11
|
||||
@version 1.6.12
|
||||
@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
|
||||
@@ -57,6 +56,8 @@
|
||||
--shadow 0 10px 40px -10px rgba(0,0,0,0.15)
|
||||
--shadow-low 0 8px 16px -10px rgba(0,0,0,0.4)
|
||||
--shadow-med 0 8px 60px -30px rgba(0,0,0,0.1)
|
||||
|
||||
--accent // not applied everywhere, just for if you have custom color scheme and want to match it
|
||||
}
|
||||
|
||||
:not(body):not(.scrollable) {
|
||||
@@ -279,7 +280,7 @@
|
||||
|
||||
.dropdown-menu, .dropdown-animation {
|
||||
border-radius var(--radius)
|
||||
animation scaleIn .2s
|
||||
animation scaleIn .2s cubic-bezier(0,0,0,1.1)
|
||||
}
|
||||
.dropdown-menu__container__list {
|
||||
overflow hidden auto
|
||||
@@ -612,7 +613,7 @@
|
||||
.explore__search-results {
|
||||
padding 10px
|
||||
}
|
||||
.dismissable-banner {
|
||||
.dismissable-banner, .follow_requests-unlocked_explanation {
|
||||
border-inline 0
|
||||
border-top 0
|
||||
margin -10px
|
||||
@@ -1028,7 +1029,7 @@
|
||||
}
|
||||
|
||||
/{statuses-list} {
|
||||
overflow clip
|
||||
overflow hidden
|
||||
transition background .2s, box-shadow .4s, margin .2s, border .2s
|
||||
animation slideUp backwards .4s cubic-bezier(0,1,1,1)
|
||||
position relative
|
||||
@@ -1303,15 +1304,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status__wrapper-direct {
|
||||
.status__prepend {
|
||||
display: none;
|
||||
}
|
||||
.status__relative-time {
|
||||
color #8c8dff !important
|
||||
}
|
||||
}
|
||||
|
||||
.status, .scrollable .account {
|
||||
padding-block 15px
|
||||
@@ -1320,6 +1312,15 @@
|
||||
border-radius var(--radius)
|
||||
}
|
||||
}
|
||||
|
||||
// Fix dropdown note preview
|
||||
.status.light {
|
||||
overflow hidden !important
|
||||
.boost-modal__status-header {
|
||||
display flow-root !important
|
||||
}
|
||||
}
|
||||
|
||||
.account__relationship:empty {
|
||||
display none
|
||||
}
|
||||
@@ -1508,9 +1509,11 @@
|
||||
height 2em
|
||||
min-width 2em
|
||||
width auto
|
||||
transition transform .2s cubic-bezier(0,0,0,1)
|
||||
&:hover {
|
||||
transform scale(1.2)
|
||||
/^[-1..-1] {
|
||||
transition transform .4s cubic-bezier(0,0.7,0,1)
|
||||
&:hover {
|
||||
transform scale(1.3)
|
||||
}
|
||||
}
|
||||
}
|
||||
& ~ [style*="aspect-ratio"] {
|
||||
@@ -1520,7 +1523,7 @@
|
||||
.status > .status__content {
|
||||
.status__content__text {
|
||||
&:empty {
|
||||
margin-top -10px !important
|
||||
margin-top -5px !important
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1552,7 +1555,93 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-direct, .status__wrapper-direct, .conversation {
|
||||
.status__prepend {
|
||||
position absolute
|
||||
font-size 0
|
||||
}
|
||||
|
||||
.status__content {
|
||||
position relative !important
|
||||
background var(--elevated-color)
|
||||
padding 8px 12px
|
||||
padding .7em .9em !important
|
||||
border-radius var(--radius-round)
|
||||
border-top-left-radius 6px
|
||||
box-sizing border-box
|
||||
margin-top 5px !important
|
||||
margin-bottom 0
|
||||
overflow hidden !important
|
||||
max-width max-content
|
||||
.media-gallery {
|
||||
width 999px
|
||||
max-width 100% !important
|
||||
}
|
||||
/.detailed-status__wrapper-direct ^[-1..-1] {
|
||||
font-size 17px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__wrapper-direct {
|
||||
.fa-at, .status__visibility-icon {
|
||||
font-family inherit
|
||||
font-weight 600
|
||||
color var(--accent, #8c8dff)
|
||||
width auto !important
|
||||
&::before {
|
||||
font-family FontAwesome !important
|
||||
}
|
||||
&::after {
|
||||
content attr(title)
|
||||
margin-left .4em
|
||||
}
|
||||
}
|
||||
}
|
||||
.status-direct {
|
||||
.fa-at, .status__visibility-icon {
|
||||
color var(--accent, #8c8dff)
|
||||
}
|
||||
.status__info .status__relative-time {
|
||||
height auto
|
||||
color var(--accent, #8c8dff)
|
||||
}
|
||||
&.status--in-thread {
|
||||
.status__info {
|
||||
align-items center
|
||||
gap 10px
|
||||
> span {
|
||||
width 0
|
||||
flex-grow 1
|
||||
}
|
||||
}
|
||||
.status__info> span, .status__display-name {
|
||||
overflow visible !important
|
||||
}
|
||||
.status__display-name {
|
||||
overflow hidden
|
||||
width 0
|
||||
flex-grow 1
|
||||
}
|
||||
.status__avatar {
|
||||
height auto
|
||||
margin-bottom -100px
|
||||
.account__avatar {
|
||||
position absolute
|
||||
top 0 !important
|
||||
height 46px !important
|
||||
width 46px !important
|
||||
}
|
||||
}
|
||||
.display-name {
|
||||
* {
|
||||
display inline
|
||||
margin-right .2em
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
{media} {
|
||||
box-shadow var(--shadow-low)
|
||||
border-radius var(--radius)
|
||||
@@ -1874,6 +1963,7 @@
|
||||
.announcements, .column-header__collapsible:not(.collapsed) {
|
||||
flex-direction column-reverse
|
||||
align-items flex-start
|
||||
border 0
|
||||
animation slideDowFade .3s backwards cubic-bezier(0,1,0,1.2)
|
||||
}
|
||||
.column-header__collapsible {
|
||||
@@ -2007,6 +2097,7 @@
|
||||
max-height 3.3em
|
||||
min-height 2.7em !important
|
||||
padding-block 0
|
||||
border-radius 100px
|
||||
position relative
|
||||
box-sizing border-box
|
||||
opacity .9
|
||||
@@ -2387,6 +2478,9 @@
|
||||
background-size cover !important
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
content unset
|
||||
}
|
||||
}
|
||||
|
||||
.status__action-bar {
|
||||
@@ -2418,14 +2512,6 @@
|
||||
border-radius var(--radius) var(--radius) 0 0 !important
|
||||
}
|
||||
|
||||
|
||||
// Fix dropdown note preview
|
||||
.modal-root__modal .status.light {
|
||||
overflow hidden !important
|
||||
padding-inline-start 70px !important
|
||||
}
|
||||
|
||||
|
||||
.columns-area {
|
||||
padding-bottom 0 !important
|
||||
overflow hidden !important
|
||||
@@ -2961,7 +3047,7 @@
|
||||
}
|
||||
}
|
||||
// make entire post clickable
|
||||
.status > .status__content {
|
||||
.status:not(.status-direct) > .status__content {
|
||||
margin-block -90px -100px !important
|
||||
padding-block 100px !important
|
||||
.status__content__text {
|
||||
@@ -3000,7 +3086,7 @@
|
||||
}
|
||||
|
||||
.status__relative-time {
|
||||
margin-inline 5px !important
|
||||
margin-inline auto 5px !important
|
||||
z-index 2
|
||||
flex-grow 0 !important
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user