mirror of
https://git.gay/freeplay/Mastodon-Modern.git
synced 2026-01-15 16:32:57 -03:00
2.1.1 (Mastodon v4.5.0-nightly.2025-08-06-security)
- Fixes posts padding in notifications - Fixed embeds collapsing upon opening - Fixes up the compose box from Masto's dropdown position change !! This change was done in a more recent Mastodon commit (49a6e4cbb5f0a30a52162b65b1046b99d29faccc) You will not see this change until these changes were pulled to your instance
This commit is contained in:
freeplay
129
modern.css
129
modern.css
@@ -497,12 +497,6 @@ a:focus-visible,
|
||||
max-height: unset !important;
|
||||
height: 100%;
|
||||
}
|
||||
.compose-panel > * {
|
||||
padding-inline: 0;
|
||||
}
|
||||
.compose-panel > .navigation-bar {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
.compose-panel .search,
|
||||
.drawer .search {
|
||||
margin-bottom: 25px;
|
||||
@@ -517,15 +511,9 @@ a:focus-visible,
|
||||
border-radius: var(--radius);
|
||||
margin-inline: -5px;
|
||||
}
|
||||
.search label {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.search input {
|
||||
border-radius: var(--radius-round) !important;
|
||||
}
|
||||
.search .search__icon > i {
|
||||
margin-inline: 5px;
|
||||
}
|
||||
.search__popout {
|
||||
border-radius: var(--radius);
|
||||
animation: scaleIn 0.2s;
|
||||
@@ -534,78 +522,36 @@ a:focus-visible,
|
||||
margin-inline: 4px;
|
||||
width: calc(100% - 8px);
|
||||
}
|
||||
.navigation-bar .icon-button {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
padding: 8px;
|
||||
}
|
||||
.compose-form {
|
||||
min-height: unset;
|
||||
overflow: unset;
|
||||
gap: 15px;
|
||||
flex: 1 0 auto !important;
|
||||
}
|
||||
.compose-form > * {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.compose-form > [aria-hidden="true"] {
|
||||
display: none;
|
||||
}
|
||||
.compose-form > .navigation-bar {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.compose-form .reply-indicator {
|
||||
position: relative;
|
||||
transition: min-height 0.1s;
|
||||
}
|
||||
.compose-form .reply-indicator__display-name {
|
||||
padding: 0;
|
||||
}
|
||||
.compose-form .spoiler-input__border {
|
||||
display: none;
|
||||
}
|
||||
.compose-form #cw-spoiler-input {
|
||||
padding-inline: 12px;
|
||||
}
|
||||
.compose-form .compose-form__autosuggest-wrapper,
|
||||
.compose-form .autosuggest-textarea__textarea {
|
||||
border-radius: var(--radius) var(--radius) 0 0 !important;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.compose-form .compose-form__buttons-wrapper {
|
||||
border-radius: 0 0 var(--radius) var(--radius) !important;
|
||||
}
|
||||
.compose-form .compose-form__publish-button-wrapper {
|
||||
overflow: visible !important;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.compose-form .compose-form__upload__actions {
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
}
|
||||
.compose-form .compose-form__upload__actions button {
|
||||
background: none;
|
||||
}
|
||||
.compose-form .compose-form__upload__thumbnail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.compose-form .compose-form__upload__actions {
|
||||
z-index: 10;
|
||||
}
|
||||
.compose-form .compose-form__upload__warning {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
.compose-form .compose-form__upload__warning button {
|
||||
margin-top: auto;
|
||||
}
|
||||
.compose-form .compose-form__upload__warning button.active {
|
||||
box-shadow: 0 0 0 100px rgba(0,0,0,0.75);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
color: inherit;
|
||||
transition: background 0.2s, transform 0.2s cubic-bezier(0, 0, 0, 1) !important;
|
||||
}
|
||||
.compose-form .compose-form__upload__warning button.active svg {
|
||||
@@ -618,16 +564,33 @@ a:focus-visible,
|
||||
}
|
||||
.compose-form__highlightable {
|
||||
border-radius: var(--radius);
|
||||
overflow: visible !important;
|
||||
/* .character-counter {
|
||||
position absolute
|
||||
inset-inline-end 0
|
||||
bottom calc(100%)
|
||||
padding 4px
|
||||
font-size 13px
|
||||
} */
|
||||
}
|
||||
.compose-form__highlightable #cw-spoiler-input {
|
||||
border-radius: 0 !important;
|
||||
.compose-form__highlightable > .compose-form__dropdowns button {
|
||||
border: 0;
|
||||
padding: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.compose-form__highlightable textarea {
|
||||
background: none !important;
|
||||
.compose-form__highlightable > .compose-form__dropdowns button::after {
|
||||
content: "";
|
||||
border: 0.3em solid currentcolor;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
transform: rotate(45deg);
|
||||
margin-top: -0.2em;
|
||||
margin-inline: 0px 2px;
|
||||
}
|
||||
.compose-form__highlightable .compose-form__dropdowns {
|
||||
max-width: calc(100% - 7ch);
|
||||
.compose-form__highlightable > .compose-form__dropdowns button:hover:not(.active) {
|
||||
background: var(--hover-color);
|
||||
}
|
||||
.compose-form__highlightable .compose-form__dropdowns + .autosuggest-textarea textarea {
|
||||
padding-top: 0;
|
||||
}
|
||||
.compose-form__highlightable .compose-form__actions {
|
||||
position: relative;
|
||||
@@ -636,30 +599,28 @@ a:focus-visible,
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
gap: 4px;
|
||||
flex-grow: 9999;
|
||||
}
|
||||
.compose-form__highlightable .compose-form__buttons * {
|
||||
.compose-form__highlightable .compose-form__buttons :not(.character-counter) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
aspect-ratio: 1;
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.compose-form__highlightable .compose-form__buttons label {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
.compose-form__highlightable .compose-form__buttons button {
|
||||
flex-grow: 1;
|
||||
padding: 5px;
|
||||
.compose-form__highlightable .compose-form__buttons .character-counter {
|
||||
flex-grow: 0;
|
||||
min-width: 4ch;
|
||||
padding-inline: 10px 4px;
|
||||
}
|
||||
.compose-form__highlightable .compose-form__submit button {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.compose-form__highlightable .character-counter {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
bottom: calc(100% + 12px);
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.server-banner .server-banner__hero {
|
||||
border-radius: var(--radius);
|
||||
width: 100%;
|
||||
@@ -1409,10 +1370,6 @@ a:focus-visible,
|
||||
.status-card:not(.expanded) .status-card__image img {
|
||||
border-radius: 0;
|
||||
}
|
||||
.status-card:not(.interactive) .status-card__image {
|
||||
position: relative;
|
||||
aspect-ratio: unset !important;
|
||||
}
|
||||
.status-card__content {
|
||||
margin-block: auto;
|
||||
padding: 15px;
|
||||
@@ -1424,7 +1381,6 @@ a:focus-visible,
|
||||
}
|
||||
.status-card__title {
|
||||
font-size: 1em;
|
||||
margin-top: 0.2em;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@@ -1605,12 +1561,8 @@ a:focus-visible,
|
||||
background: var(--elevated-color);
|
||||
color: inherit;
|
||||
}
|
||||
.notification-ungrouped {
|
||||
padding: 0;
|
||||
}
|
||||
.notification-ungrouped__header {
|
||||
padding-top: 16px;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.notification-ungrouped .status__wrapper {
|
||||
margin-inline: 0;
|
||||
@@ -1620,9 +1572,6 @@ a:focus-visible,
|
||||
.notification-ungrouped .status__wrapper::after {
|
||||
content: unset;
|
||||
}
|
||||
.notification-ungrouped .status {
|
||||
padding: 16px;
|
||||
}
|
||||
.notification-group {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
137
modern.user.css
137
modern.user.css
@@ -6,14 +6,17 @@
|
||||
// textbox in the left panel following this format:
|
||||
// *://domain.tld/*
|
||||
|
||||
/* Update 2.1.0 (Mastodon 4.4.0-nightly.2025-06-13)
|
||||
- Fixes the mobile UI with Masto's new navbar
|
||||
- Alt text modals are larger again
|
||||
/* Update 2.1.1 (v4.5.0-nightly.2025-08-06-security)
|
||||
- Fixes posts padding in notifications
|
||||
- Fixed embeds collapsing upon opening
|
||||
- Fixes up the compose box from Masto's dropdown position change
|
||||
!! This change was done in a more recent Mastodon commit (49a6e4cbb5f0a30a52162b65b1046b99d29faccc)
|
||||
You will not see this change until these changes were pulled to your instance
|
||||
*/
|
||||
|
||||
/* ==UserStyle==
|
||||
@name MastoModern
|
||||
@version 2.1.0
|
||||
@version 2.1.1
|
||||
@description Improves the look & feel of Mastodon
|
||||
@updateURL https://git.gay/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css
|
||||
@homepageURL https://git.gay/Freeplay/Mastodon-Modern
|
||||
@@ -355,12 +358,6 @@
|
||||
box-sizing border-box
|
||||
max-height unset !important
|
||||
height 100%
|
||||
> * {
|
||||
padding-inline 0
|
||||
}
|
||||
> .navigation-bar {
|
||||
padding-top 0 !important
|
||||
}
|
||||
.search, /.drawer .search {
|
||||
margin-bottom 25px
|
||||
}
|
||||
@@ -374,16 +371,9 @@
|
||||
.search {
|
||||
border-radius var(--radius)
|
||||
margin-inline -5px
|
||||
label {
|
||||
// padding-inline 20px
|
||||
box-sizing border-box
|
||||
}
|
||||
input {
|
||||
border-radius var(--radius-round) !important
|
||||
}
|
||||
.search__icon > i {
|
||||
margin-inline 5px
|
||||
}
|
||||
/.search__popout {
|
||||
border-radius var(--radius)
|
||||
animation scaleIn .2s
|
||||
@@ -393,78 +383,34 @@
|
||||
width calc(100% - 8px)
|
||||
}
|
||||
}
|
||||
.navigation-bar {
|
||||
.icon-button {
|
||||
width auto !important
|
||||
height auto !important
|
||||
padding 8px
|
||||
}
|
||||
}
|
||||
.compose-form {
|
||||
min-height unset
|
||||
overflow unset
|
||||
gap 15px
|
||||
flex 1 0 auto !important
|
||||
> * {
|
||||
margin 0 !important
|
||||
}
|
||||
> [aria-hidden="true"] {
|
||||
display none
|
||||
}
|
||||
> .navigation-bar {
|
||||
margin-top 10px
|
||||
}
|
||||
.reply-indicator {
|
||||
position relative
|
||||
transition min-height .1s
|
||||
}
|
||||
.reply-indicator__display-name {
|
||||
padding 0
|
||||
}
|
||||
.spoiler-input__border {
|
||||
display none
|
||||
}
|
||||
#cw-spoiler-input {
|
||||
padding-inline 12px
|
||||
}
|
||||
.compose-form__autosuggest-wrapper, .autosuggest-textarea__textarea {
|
||||
border-radius var(--radius) var(--radius) 0 0 !important
|
||||
border-bottom 0
|
||||
}
|
||||
.compose-form__buttons-wrapper {
|
||||
border-radius 0 0 var(--radius) var(--radius) !important
|
||||
}
|
||||
.compose-form__publish-button-wrapper {
|
||||
overflow visible !important
|
||||
max-width 100%
|
||||
padding 0
|
||||
}
|
||||
.compose-form__upload__actions {
|
||||
z-index 5
|
||||
position relative
|
||||
button {
|
||||
background none
|
||||
}
|
||||
}
|
||||
.compose-form__upload__thumbnail {
|
||||
display flex
|
||||
flex-direction column
|
||||
}
|
||||
.compose-form__upload__actions {
|
||||
z-index 10
|
||||
}
|
||||
.compose-form__upload__warning {
|
||||
//display contents
|
||||
position relative
|
||||
flex-grow 1
|
||||
display flex
|
||||
button {
|
||||
margin-top auto
|
||||
}
|
||||
button.active {
|
||||
box-shadow 0 0 0 100px rgba(0,0,0,0.75)
|
||||
width 100%
|
||||
height 100%
|
||||
font-weight bold
|
||||
font-size 1.1em
|
||||
color inherit
|
||||
transition background .2s, transform .2s cubic-bezier(0,0,0,1) !important
|
||||
svg {
|
||||
height 1.2em
|
||||
@@ -478,15 +424,27 @@
|
||||
}
|
||||
.compose-form__highlightable {
|
||||
border-radius var(--radius)
|
||||
overflow visible !important
|
||||
#cw-spoiler-input {
|
||||
border-radius 0 !important
|
||||
> .compose-form__dropdowns {
|
||||
button {
|
||||
border 0
|
||||
padding 4px
|
||||
transition background .2s
|
||||
&::after {
|
||||
content: "";
|
||||
border: .3em solid currentcolor;
|
||||
border-top-color: transparent;
|
||||
border-left-color: transparent;
|
||||
transform: rotate(45deg);
|
||||
margin-top: -.2em;
|
||||
margin-inline: 0px 2px;
|
||||
}
|
||||
&:hover:not(.active) {
|
||||
background var(--hover-color)
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
background none !important
|
||||
}
|
||||
.compose-form__dropdowns {
|
||||
max-width calc(100% - 7ch)
|
||||
.compose-form__dropdowns + .autosuggest-textarea textarea {
|
||||
padding-top 0
|
||||
}
|
||||
.compose-form__actions {
|
||||
position relative
|
||||
@@ -495,18 +453,23 @@
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
flex-direction row
|
||||
gap 0
|
||||
gap 4px
|
||||
flex-grow 9999
|
||||
* {
|
||||
:not(.character-counter) {
|
||||
display flex
|
||||
justify-content center
|
||||
flex-grow 1
|
||||
aspect-ratio 1
|
||||
padding 0
|
||||
border-radius 6px
|
||||
}
|
||||
label {
|
||||
display none
|
||||
display none !important
|
||||
}
|
||||
button {
|
||||
flex-grow 1
|
||||
padding 5px
|
||||
.character-counter {
|
||||
flex-grow: 0;
|
||||
min-width: 4ch;
|
||||
padding-inline: 10px 4px;
|
||||
}
|
||||
}
|
||||
.compose-form__submit {
|
||||
@@ -514,13 +477,13 @@
|
||||
padding 8px 16px
|
||||
}
|
||||
}
|
||||
.character-counter {
|
||||
/* .character-counter {
|
||||
position absolute
|
||||
inset-inline-end 0
|
||||
bottom calc(100% + 12px)
|
||||
bottom calc(100%)
|
||||
padding 4px
|
||||
font-size 13px
|
||||
}
|
||||
} */
|
||||
}
|
||||
|
||||
//// SERVER INFO
|
||||
@@ -1323,10 +1286,6 @@
|
||||
border-radius 0
|
||||
}
|
||||
}
|
||||
&:not(.interactive) .status-card__image {
|
||||
position relative
|
||||
aspect-ratio unset !important
|
||||
}
|
||||
/.status-card__content {
|
||||
margin-block auto
|
||||
padding 15px
|
||||
@@ -1338,7 +1297,6 @@
|
||||
}
|
||||
/.status-card__title {
|
||||
font-size 1em
|
||||
margin-top .2em
|
||||
margin-bottom 0
|
||||
line-height 1.4
|
||||
}
|
||||
@@ -1527,10 +1485,8 @@
|
||||
|
||||
//// NOTIFICATIONS
|
||||
.notification-ungrouped {
|
||||
padding 0
|
||||
/.notification-ungrouped__header {
|
||||
padding-top 16px
|
||||
margin-bottom 0
|
||||
margin-bottom 10px
|
||||
}
|
||||
.status__wrapper {
|
||||
margin-inline 0
|
||||
@@ -1539,9 +1495,6 @@
|
||||
content unset
|
||||
}
|
||||
}
|
||||
.status {
|
||||
padding 16px
|
||||
}
|
||||
}
|
||||
.notification-group {
|
||||
padding 16px
|
||||
|
||||
Reference in New Issue
Block a user