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

2.1.1 (Mastodon v4.5.0-nightly.2025-08-06-security)

Browse Source 
- 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
2025-08-18 20:44:58 -04:00
parent 9f8db85eda
commit f899b68740
2 changed files with 85 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
modern.css
View File

@@ -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;
}

135
modern.user.css
View File

@@ -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;
}
textarea {
background none !important
&:hover:not(.active) {
background var(--hover-color)
}
.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