diff --git a/modern.css b/modern.css index 77e0e72..fe15118 100644 --- a/modern.css +++ b/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; } diff --git a/modern.user.css b/modern.user.css index 3e13233..003e3ac 100644 --- a/modern.user.css +++ b/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 @@ -2963,5 +2916,5 @@ } } - + }