Accessibility: Add max-height to compose form

This commit is contained in:
Roni Laukkarinen 2023-04-04 22:59:07 +03:00
parent a59693be6e
commit 9de2e43b28
2 changed files with 45 additions and 3 deletions

View File

@ -1,7 +1,9 @@
### 1.4.0rc2: 2024-04-04
### 1.4.0rc3: 2024-04-04
* Fix a regression with z-index, autosuggest not clickable if compose form expanding
* Make scrollbars more visible
* Accessibility: Add max-height to compose form (thanks @rmattila74@mastodo.fi!)
* Accessibility: Revert resize: true in compose form (thanks @rmattila74@mastodo.fi!)
### 1.3.9: 2023-04-04

View File

@ -1,5 +1,5 @@
/* Mastodon Bird UI by @rolle@mementomori.social
1.4.0rc2 */
1.4.0rc3 */
/* CSS variables */
:root {
@ -2072,8 +2072,24 @@ body.embed .button.logo-button:hover,
}
}
/* Compose form and reply indicator box, see https://mastodo.fi/@rmattila74/110140863513856240 */
.layout-single-column .reply-indicator {
max-height: 150px;
}
.layout-single-column .compose-form .autosuggest-textarea__textarea {
resize: both;
/* stylelint-disable-next-line */
max-height: 20vh !important; /* stylelint-disable-next-line */
overflow-y: scroll !important;
resize: none;
}
@media (max-height: 1000px) {
.layout-single-column .compose-form .autosuggest-textarea__textarea {
/* stylelint-disable-next-line */
max-height: 10vh !important;
resize: none;
}
}
.layout-single-column .server-banner .button:hover,
@ -3121,39 +3137,63 @@ body.embed .entry .detailed-status {
}
/* Scrollbars */
.layout-single-column textarea::-webkit-scrollbar,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar,
.layout-single-column .reply-indicator::-webkit-scrollbar,
.layout-single-column::-webkit-scrollbar {
height: 6px;
width: 6px;
}
.layout-single-column textarea::-webkit-scrollbar-thumb,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb,
.layout-single-column .reply-indicator::-webkit-scrollbar-thumb,
.layout-single-column::-webkit-scrollbar-thumb {
background-color: var(--color-border);
border: 0px solid var(--color-border);
border-radius: 50px;
}
.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,
.layout-single-column::-webkit-scrollbar-thumb:hover {
background-color: var(--color-light-purple);
}
.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,
.layout-single-column::-webkit-scrollbar-thumb:active {
background-color: var(--color-bg);
}
.layout-single-column textarea::-webkit-scrollbar-track,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track,
.layout-single-column .reply-indicator::-webkit-scrollbar-track,
.layout-single-column::-webkit-scrollbar-track {
background-color: var(--color-bg);
border: 0px solid var(--color-border);
border-radius: 0;
}
.layout-single-column textarea::-webkit-scrollbar-track:hover,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track:hover,
.layout-single-column .reply-indicator::-webkit-scrollbar-track:hover,
.layout-single-column::-webkit-scrollbar-track:hover {
background-color: var(--color-bg);
}
.layout-single-column textarea::-webkit-scrollbar-track:active,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track:active,
.layout-single-column .reply-indicator::-webkit-scrollbar-track:active,
.layout-single-column::-webkit-scrollbar-track:active {
background-color: var(--color-bg);
}
.layout-single-column textarea::-webkit-scrollbar-corner,
.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-corner,
.layout-single-column .reply-indicator::-webkit-scrollbar-corner,
.layout-single-column::-webkit-scrollbar-corner {
background-color: transparent;
}