diff --git a/CHANGELOG.md b/CHANGELOG.md index 41d1c20..29d4a6b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,4 @@ -### 2.0.0rc30: 2024-03-23 +### 2.0.0rc31: 2024-03-23 * Prepare for 4.3.0 release with SVG icons * Add icon support for new SVG icons, replace icons for Home, Notifications, Explore, Live feeds, Private mentions, bookmarks, Favorites, Preferences and Lists @@ -55,6 +55,8 @@ * More compact compose button on mobile * More compact header bar on mobile (thanks @nileane!) * Replace column settings icon for both single and advanced column views +* Fix compose form styles on mobile +* Change compose form resizability to follow core ### 1.8.3: 2023-11-12 diff --git a/layout-multiple-columns.css b/layout-multiple-columns.css index 13af17f..053b404 100644 --- a/layout-multiple-columns.css +++ b/layout-multiple-columns.css @@ -1,5 +1,5 @@ /* Mastodon Bird UI by @rolle@mementomori.social - 2.0.0rc30 */ + 2.0.0rc31 */ /* CSS variables */ :root { @@ -3004,55 +3004,35 @@ body.embed .button.logo-button:hover, padding-bottom: 6px; } -/* Compose form and reply indicator box, see https://mastodo.fi/@rmattila74/110140863513856240 */ -@media (min-width: 889px) { - .layout-multiple-columns .compose-form__highlightable .autosuggest-textarea__textarea, - .layout-multiple-columns .compose-form .autosuggest-textarea__textarea { - /* stylelint-disable-next-line */ - max-height: 20vh !important; /* stylelint-disable-next-line */ - overflow-y: auto !important; - resize: none; - } - - /* Add slight background color for the compose form */ - /* stylelint-disable-next-line no-duplicate-selectors */ - .layout-multiple-columns .compose-form__highlightable, - .layout-multiple-columns .compose-form__highlightable .compose-form__buttons-wrapper, - .layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper, - .layout-multiple-columns .compose-form .compose-form__buttons-wrapper { - background-color: var(--color-bg-compose-form); - border-color: var(--color-bg-compose-form); - padding-top: 0; - transition: all 200ms; - } - - /* Smooth color transition on focus */ - .layout-multiple-columns .compose-form__highlightable:focus-within, - .layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper:focus-within, - .layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, - .layout-multiple-columns .compose-form__highlightable .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper { - background-color: var(--color-bg-compose-form-focus); - border-color: var(--color-bg-compose-form-focus); - } +/* Add slight background color for the compose form */ +/* stylelint-disable-next-line no-duplicate-selectors */ +.layout-multiple-columns .compose-form__highlightable, +.layout-multiple-columns .compose-form__highlightable .compose-form__buttons-wrapper, +.layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper, +.layout-multiple-columns .compose-form .compose-form__buttons-wrapper { + background-color: var(--color-bg-compose-form); + border-color: var(--color-bg-compose-form); + padding-top: 0; + transition: all 200ms; +} - /* Fixes bottom row padding when there's a background */ - .layout-multiple-columns .compose-form__highlightable .compose-form__buttons-wrapper, - .layout-multiple-columns .compose-form .compose-form__buttons-wrapper { - padding: calc(var(--gap-default) / 2); - } +/* Smooth color transition on focus */ +.layout-multiple-columns .compose-form__highlightable:focus-within, +.layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper:focus-within, +.layout-multiple-columns .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, +.layout-multiple-columns .compose-form__highlightable .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper { + background-color: var(--color-bg-compose-form-focus); + border-color: var(--color-bg-compose-form-focus); +} - .layout-multiple-columns .navigation-bar + .compose-form { - padding-top: 10px; - } +/* Fixes bottom row padding when there's a background */ +.layout-multiple-columns .compose-form__highlightable .compose-form__buttons-wrapper, +.layout-multiple-columns .compose-form .compose-form__buttons-wrapper { + padding: calc(var(--gap-default) / 2); } -@media (min-width: 889px) and (max-height: 1000px) { - .layout-multiple-columns .compose-form__highlightable .autosuggest-textarea__textarea, - .layout-multiple-columns .compose-form .autosuggest-textarea__textarea { - /* stylelint-disable-next-line */ - max-height: 10vh !important; - resize: none; - } +.layout-multiple-columns .navigation-bar + .compose-form { + padding-top: 10px; } .layout-multiple-columns .server-banner .button:hover, @@ -4031,6 +4011,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } /* Scrollbars */ +*::-webkit-scrollbar, .layout-multiple-columns .scrollable::-webkit-scrollbar, .layout-multiple-columns .drawer__inner::-webkit-scrollbar, .layout-multiple-columns textarea::-webkit-scrollbar, @@ -4041,6 +4022,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu width: 6px; } +*::-webkit-scrollbar-thumb, .layout-multiple-columns .scrollable::-webkit-scrollbar-thumb, .layout-multiple-columns textarea::-webkit-scrollbar-thumb, .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb, @@ -4051,6 +4033,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 50px; } +*::-webkit-scrollbar-thumb:hover, .layout-multiple-columns .scrollable::-webkit-scrollbar-thumb:hover, .layout-multiple-columns textarea::-webkit-scrollbar-thumb:hover, .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:hover, @@ -4059,6 +4042,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-light-purple); } +*::-webkit-scrollbar-thumb:active, .layout-multiple-columns .scrollable::-webkit-scrollbar-thumb:active, .layout-multiple-columns textarea::-webkit-scrollbar-thumb:active, .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:active, @@ -4067,6 +4051,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-black-coral); } +*::-webkit-scrollbar-track, .layout-multiple-columns .scrollable::-webkit-scrollbar-track, .layout-multiple-columns textarea::-webkit-scrollbar-track, .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track, @@ -4077,6 +4062,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 0; } +*::-webkit-scrollbar-track:hover, .layout-multiple-columns .scrollable::-webkit-scrollbar-track:hover, .layout-multiple-columns textarea::-webkit-scrollbar-track:hover, .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track:hover, @@ -4085,6 +4071,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-bg); } +*::-webkit-scrollbar-track:active, .layout-multiple-columns .scrollable::-webkit-scrollbar-track:active, .layout-multiple-columns textarea::-webkit-scrollbar-track:active, .layout-multiple-columns .autosuggest-textarea__textarea::-webkit-scrollbar-track:active, @@ -4093,6 +4080,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-bg); } +*::-webkit-scrollbar-corner, .layout-multiple-columns .scrollable::-webkit-scrollbar-corner, .layout-multiple-columns .drawer__inner::-webkit-scrollbar-corner, .layout-multiple-columns textarea::-webkit-scrollbar-corner, diff --git a/layout-single-column.css b/layout-single-column.css index 47bd510..f6ed33d 100644 --- a/layout-single-column.css +++ b/layout-single-column.css @@ -1,5 +1,5 @@ /* Mastodon Bird UI by @rolle@mementomori.social - 2.0.0rc30 */ + 2.0.0rc31 */ /* CSS variables */ :root { @@ -3089,55 +3089,35 @@ body.embed .button.logo-button:hover, padding-bottom: 6px; } -/* Compose form and reply indicator box, see https://mastodo.fi/@rmattila74/110140863513856240 */ -@media (min-width: 889px) { - .layout-single-column .compose-form__highlightable .autosuggest-textarea__textarea, - .layout-single-column .compose-form .autosuggest-textarea__textarea { - /* stylelint-disable-next-line */ - max-height: 20vh !important; /* stylelint-disable-next-line */ - overflow-y: auto !important; - resize: none; - } - - /* Add slight background color for the compose form */ - /* stylelint-disable-next-line no-duplicate-selectors */ - .layout-single-column .compose-panel .compose-form__highlightable, - .layout-single-column .compose-form__highlightable .compose-form__buttons-wrapper, - .layout-single-column .compose-form .compose-form__autosuggest-wrapper, - .layout-single-column .compose-form .compose-form__buttons-wrapper { - background-color: var(--color-bg-compose-form); - border-color: var(--color-bg-compose-form); - padding-top: 0; - transition: all 200ms; - } - - /* Smooth color transition on focus */ - .layout-single-column .compose-panel .compose-form__highlightable:focus-within, - .layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within, - .layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, - .layout-single-column .compose-form__highlightable .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper { - background-color: var(--color-bg-compose-form-focus); - border-color: var(--color-bg-compose-form-focus); - } +/* Add slight background color for the compose form */ +/* stylelint-disable-next-line no-duplicate-selectors */ +.layout-single-column .compose-form .compose-form__highlightable, +.layout-single-column .compose-form__highlightable .compose-form__buttons-wrapper, +.layout-single-column .compose-form .compose-form__autosuggest-wrapper, +.layout-single-column .compose-form .compose-form__buttons-wrapper { + background-color: var(--color-bg-compose-form); + border-color: var(--color-bg-compose-form); + padding-top: 0; + transition: all 200ms; +} - /* Fixes bottom row padding when there's a background */ - .layout-single-column .compose-form__highlightable .compose-form__buttons-wrapper, - .layout-single-column .compose-form .compose-form__buttons-wrapper { - padding: calc(var(--gap-default) / 2); - } +/* Smooth color transition on focus */ +.layout-single-column .compose-form .compose-form__highlightable:focus-within, +.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within, +.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, +.layout-single-column .compose-form__highlightable .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper { + background-color: var(--color-bg-compose-form-focus); + border-color: var(--color-bg-compose-form-focus); +} - .layout-single-column .navigation-bar + .compose-form { - padding-top: 10px; - } +/* Fixes bottom row padding when there's a background */ +.layout-single-column .compose-form__highlightable .compose-form__buttons-wrapper, +.layout-single-column .compose-form .compose-form__buttons-wrapper { + padding: calc(var(--gap-default) / 2); } -@media (min-width: 889px) and (max-height: 1000px) { - .layout-single-column .compose-form__highlightable .autosuggest-textarea__textarea, - .layout-single-column .compose-form .autosuggest-textarea__textarea { - /* stylelint-disable-next-line */ - max-height: 10vh !important; - resize: none; - } +.layout-single-column .navigation-bar + .compose-form { + padding-top: 10px; } .layout-single-column .server-banner .button:hover, @@ -4144,6 +4124,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } /* Scrollbars */ +*::-webkit-scrollbar, .layout-single-column .drawer__inner::-webkit-scrollbar, .layout-single-column textarea::-webkit-scrollbar, .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar, @@ -4153,6 +4134,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu width: 6px; } +*::-webkit-scrollbar-thumb, .layout-single-column textarea::-webkit-scrollbar-thumb, .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb, .layout-single-column .reply-indicator::-webkit-scrollbar-thumb, @@ -4162,6 +4144,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 50px; } +*::-webkit-scrollbar-thumb:hover, .layout-single-column textarea::-webkit-scrollbar-thumb:hover, .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:hover, .layout-single-column .reply-indicator::-webkit-scrollbar-thumb:hover, @@ -4169,6 +4152,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-light-purple); } +*::-webkit-scrollbar-thumb:active, .layout-single-column textarea::-webkit-scrollbar-thumb:active, .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:active, .layout-single-column .reply-indicator::-webkit-scrollbar-thumb:active, @@ -4176,6 +4160,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-black-coral); } +*::-webkit-scrollbar-track, .layout-single-column textarea::-webkit-scrollbar-track, .layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track, .layout-single-column .reply-indicator::-webkit-scrollbar-track, diff --git a/package.json b/package.json index 532ec9f..cb5435c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mastodon-bird-ui", - "version": "2.0.0rc30", + "version": "2.0.0rc31", "description": "", "main": "index.js", "scripts": {