diff --git a/app/javascript/flavours/glitch/styles/glitch-fixes.css b/app/javascript/flavours/glitch/styles/glitch-fixes.css index 0b51f693b5..96f2b7f05b 100644 --- a/app/javascript/flavours/glitch/styles/glitch-fixes.css +++ b/app/javascript/flavours/glitch/styles/glitch-fixes.css @@ -22,6 +22,18 @@ 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__highlightable { + margin-bottom: 50px !important; +} +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/app/javascript/flavours/glitch/styles/modern-contrast.css b/app/javascript/flavours/glitch/styles/modern-contrast.css index 03c5f53b24..06c2439b97 100644 --- a/app/javascript/flavours/glitch/styles/modern-contrast.css +++ b/app/javascript/flavours/glitch/styles/modern-contrast.css @@ -600,22 +600,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; @@ -633,28 +617,81 @@ 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 textarea { + background: none !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; + inset-inline-end: 0; + bottom: calc(100% + 12px); + padding: 4px; + font-size: 13px; } .server-banner { padding: 10px; @@ -3885,6 +3922,7 @@ a:focus-visible, } #mastodon .compose-form { padding: 10px; + margin-bottom: 100px; } #mastodon .compose-form::before { content: ""; @@ -4691,9 +4729,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/app/javascript/flavours/glitch/styles/modern-light.css b/app/javascript/flavours/glitch/styles/modern-light.css index 85a4dc84b4..67d0d0ab71 100644 --- a/app/javascript/flavours/glitch/styles/modern-light.css +++ b/app/javascript/flavours/glitch/styles/modern-light.css @@ -600,22 +600,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; @@ -633,28 +617,81 @@ 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 textarea { + background: none !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; + inset-inline-end: 0; + bottom: calc(100% + 12px); + padding: 4px; + font-size: 13px; } .server-banner { padding: 10px; @@ -3885,6 +3922,7 @@ a:focus-visible, } #mastodon .compose-form { padding: 10px; + margin-bottom: 100px; } #mastodon .compose-form::before { content: ""; @@ -4691,9 +4729,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/app/javascript/flavours/glitch/styles/modern.css b/app/javascript/flavours/glitch/styles/modern.css index dad18d4d95..2b74af3ec5 100644 --- a/app/javascript/flavours/glitch/styles/modern.css +++ b/app/javascript/flavours/glitch/styles/modern.css @@ -600,22 +600,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; @@ -633,28 +617,81 @@ 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 textarea { + background: none !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; + inset-inline-end: 0; + bottom: calc(100% + 12px); + padding: 4px; + font-size: 13px; } .server-banner { padding: 10px; @@ -3885,6 +3922,7 @@ a:focus-visible, } #mastodon .compose-form { padding: 10px; + margin-bottom: 100px; } #mastodon .compose-form::before { content: ""; @@ -4691,9 +4729,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; }