From 143bac6478e49505d6de4ff263ddc018ff52478b Mon Sep 17 00:00:00 2001 From: Freeplay Date: Sun, 25 Feb 2024 19:28:13 -0500 Subject: [PATCH] 1.10.2 - Newer compose form styled, fixed overflow counter in glitch-soc - Fix media alt button --- glitch-fixes.css | 9 ++++ modern.css | 93 ++++++++++++++++++++++------------ modern.user.css | 128 ++++++++++++++++++++++++++++++----------------- 3 files changed, 154 insertions(+), 76 deletions(-) diff --git a/glitch-fixes.css b/glitch-fixes.css index 0b51f69..c8df776 100644 --- a/glitch-fixes.css +++ b/glitch-fixes.css @@ -22,6 +22,15 @@ body.app-body.flavour-glitch > #mastodon .character-counter__wrapper span { font-size: 0.9em; font-weight: 500; } +body.app-body.flavour-glitch > #mastodon .compose-form__submit { + position: absolute; + right: -12px; + top: 100%; + margin-top: 24px; +} +body.app-body.flavour-glitch > #mastodon .compose-form__submit button { + padding: 10px 20px; +} body.app-body.flavour-glitch > #mastodon .collapsed .status__content { height: auto !important; overflow: visible; diff --git a/modern.css b/modern.css index cba5725..f2f96d1 100644 --- a/modern.css +++ b/modern.css @@ -597,22 +597,6 @@ a:focus-visible, #mastodon .compose-form .reply-indicator__display-name { padding: 0; } -#mastodon .compose-form .compose-form__highlightable { - border-radius: var(--radius); - overflow: visible !important; -} -#mastodon .compose-form .compose-form__highlightable > .compose-form__footer { - gap: 8px; -} -#mastodon .compose-form .compose-form__highlightable > .compose-form__footer .compose-form__buttons { - gap: 2px; -} -#mastodon .compose-form .compose-form__highlightable > .compose-form__footer .compose-form__buttons button { - padding: 6px; -} -#mastodon .compose-form .compose-form__highlightable .compose-form__submit button { - padding: 6px; -} #mastodon .compose-form .compose-form__autosuggest-wrapper, #mastodon .compose-form .autosuggest-textarea__textarea { border-radius: var(--radius) var(--radius) 0 0 !important; @@ -630,28 +614,78 @@ a:focus-visible, z-index: 5; position: relative; } -#mastodon .compose-form .compose-form__upload-thumbnail { +#mastodon .compose-form .compose-form__upload__actions button { + background: none; +} +#mastodon .compose-form .compose-form__upload__thumbnail { display: flex; flex-direction: column; } #mastodon .compose-form .compose-form__upload__warning { position: relative; - display: flex; - justify-content: center; - background: rgba(0,0,0,0.7); flex-grow: 1; - box-shadow: 0 -50px rgba(0,0,0,0.7); + display: flex; } -#mastodon .compose-form .compose-form__upload__warning > button { +#mastodon .compose-form .compose-form__upload__warning button { + margin-top: auto; +} +#mastodon .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: 700; - padding-inline: 1em; - color: #fff; + font-weight: bold; + font-size: 1.1em; + color: inherit; + transition: background 0.2s, transform 0.2s cubic-bezier(0, 0, 0, 1) !important; } -#mastodon .compose-form .compose-form__upload__warning > button i { - margin-inline-end: 0.2em; - transform: scale(1.2); +#mastodon .compose-form .compose-form__upload__warning button.active svg { + height: 1.2em; + width: 1.2em; +} +#mastodon .compose-form .compose-form__upload__warning button.active:hover, +#mastodon .compose-form .compose-form__upload__warning button.active:focus { + background: rgba(20,20,20,0.75); +} +#mastodon .compose-form__highlightable { + border-radius: var(--radius); + overflow: visible !important; +} +#mastodon .compose-form__highlightable #cw-spoiler-input { + border-radius: 0 !important; +} +#mastodon .compose-form__highlightable > .compose-form__footer { + gap: 12px; +} +#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__dropdowns { + max-width: calc(100% - 7ch); +} +#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__actions { + position: relative; +} +#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__buttons { + display: flex; + flex-wrap: wrap; + flex-direction: row; + gap: 0; + flex-grow: 9999; +} +#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__buttons > * { + flex-grow: 1; + box-sizing: border-box; +} +#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__buttons button { + flex-grow: 1; + padding: 5px; +} +#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__submit button { + padding: 8px 16px; +} +#mastodon .compose-form__highlightable > .compose-form__footer .character-counter { + position: absolute; + right: 0; + bottom: calc(100% + 12px); + padding: 4px; + font-size: 13px; } .server-banner { padding: 10px; @@ -4688,9 +4722,6 @@ a:focus-visible, padding: 0 !important; border-radius: var(--radius-round) var(--radius-round) 0 0; } -.layout-multiple-columns #mastodon .columns-area .compose-form:first-child { - padding-top: 0; -} .layout-multiple-columns #mastodon .columns-area .getting-started__trends { padding: 0px 20px; } diff --git a/modern.user.css b/modern.user.css index 5444a6f..6788836 100644 --- a/modern.user.css +++ b/modern.user.css @@ -6,20 +6,14 @@ // *://domain.tld/* -/* Update 1.10.0 -- Post slide up animation is now just a fade -- Fixed overflowing video in notifications -- Banner glow should work better now on Chromium -- Styled account rows -- Other fixes & spacing -glitch-soc: -- Fixed cut off header -- Advanced view getting started column +/* Update 1.10.2 +- Newer compose form styled, fixed overflow counter in glitch-soc +- Fix media alt button */ /* ==UserStyle== @name Mastodon Modern -@version 1.10.1 +@version 1.10.2 @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 @@ -31,7 +25,7 @@ glitch-soc: @author Freeplay (https://freeplay.codeberg.page/) ==/UserStyle== */ -@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social"), domain("mastodon.cloud"), domain("bark.lgbt"), domain("wetdry.world"), domain("md.ilyamikcoder.com"), domain("techhub.social"), domain("mastodon.world"), domain("toot.io"), domain("catcatnya.com") { +@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social"), domain("mastodon.cloud"), domain("bark.lgbt"), domain("wetdry.world"), domain("md.ilyamikcoder.com"), domain("techhub.social"), domain("mastodon.world"), domain("toot.io"), domain("catcatnya.com"), domain("mstdn.constellatory.net") { / { // This is just so I can easily collapse everything, shouldn't affect compiled code responsiveW1 = 1320px responsiveW2 = 1175px @@ -470,24 +464,6 @@ glitch-soc: .reply-indicator__display-name { padding 0 } - .compose-form__highlightable { - border-radius var(--radius) - overflow visible !important - > .compose-form__footer { - gap 8px - .compose-form__buttons { - gap 2px - button { - padding 6px - } - } - } - .compose-form__submit { - button { - padding 6px - } - } - } .compose-form__autosuggest-wrapper, .autosuggest-textarea__textarea { border-radius var(--radius) var(--radius) 0 0 !important border-bottom 0 @@ -503,28 +479,83 @@ glitch-soc: .compose-form__upload__actions { z-index 5 position relative + button { + background none + } } - .compose-form__upload-thumbnail { + .compose-form__upload__thumbnail { display flex flex-direction column } .compose-form__upload__warning { + //display contents position relative - display flex - justify-content center - background rgba(0,0,0,0.7) flex-grow 1 - box-shadow 0 -50px rgba(0,0,0,0.7) - > button { + 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 700 - padding-inline 1em - color white - i { - margin-inline-end .2em - transform scale(1.2) + 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 + width @height } + &:hover, &:focus { + background rgba(20,20,20,0.75) + } + } + } + } + .compose-form__highlightable { + border-radius var(--radius) + overflow visible !important + #cw-spoiler-input { + border-radius 0 !important + } + > .compose-form__footer { + gap 12px + .compose-form__dropdowns { + max-width calc(100% - 7ch) + } + .compose-form__actions { + position relative + } + .compose-form__buttons { + display flex + flex-wrap wrap + flex-direction row + gap 0 + //width auto !important + flex-grow 9999 + > * { + //display flex + flex-grow 1 + //max-width 38px !important + box-sizing border-box + } + button { + flex-grow 1 + padding 5px + } + } + .compose-form__submit { + button { + padding 8px 16px + } + } + .character-counter { + position absolute + right 0 + bottom calc(100% + 12px) + padding 4px + font-size 13px } } } @@ -3541,10 +3572,6 @@ glitch-soc: padding 0 !important border-radius var(--radius-round) var(--radius-round) 0 0 } - .compose-form:first-child { - padding-top 0 - } - .getting-started__trends { padding 0px 20px } @@ -3570,6 +3597,8 @@ glitch-soc: // GLITCH-SOC FIXES /body.app-body.flavour-glitch > #mastodon { + + // Compose Form .compose-form__autosuggest-wrapper > :last-child { padding-bottom 2em !important } @@ -3594,6 +3623,15 @@ glitch-soc: font-weight 500 } } + .compose-form__submit { + position absolute + right -12px + top 100% + margin-top 24px + button { + padding 10px 20px + } + } // GLITCH STATUSES .collapsed {