diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles')
3 files changed, 41 insertions, 5 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index ba517a2ab..b2603a008 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -12,7 +12,8 @@ opacity: 0.0; &.composer--spoiler--visible { - height: 47px; + height: 36px; + margin-bottom: 11px; opacity: 1.0; } @@ -98,6 +99,9 @@ border-radius: 4px; padding: 10px; background: $ui-primary-color; + min-height: 23px; + overflow-y: auto; + flex: 0 2 auto; & > header { margin-bottom: 5px; @@ -218,6 +222,7 @@ position: absolute; right: 5px; top: 5px; + z-index: 1; ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active { @@ -225,7 +230,7 @@ } } -.composer--textarea, +.compose-form__autosuggest-wrapper, .autosuggest-input { position: relative; @@ -284,6 +289,12 @@ } } +.emoji-picker-wrapper, +.autosuggest-textarea__suggestions-wrapper { + position: relative; + height: 0; +} + .autosuggest-textarea__suggestions { display: block; position: absolute; @@ -485,6 +496,7 @@ box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05); border-radius: 0 0 4px 4px; height: 27px; + flex: 0 0 auto; & > * { display: inline-block; @@ -575,6 +587,7 @@ text-align: right; white-space: nowrap; overflow: hidden; + justify-content: flex-end; & > .count { display: inline-block; diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 81098e52c..577a7b85a 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -818,7 +818,8 @@ margin-top: 10px; display: flex; flex-direction: column; - height: 100%; + height: calc(100% - 10px); + overflow-y: hidden; .search__input { line-height: 18px; @@ -834,14 +835,33 @@ .navigation-bar { padding-top: 20px; padding-bottom: 20px; + flex: 0 1 48px; + min-height: 20px; } .flex-spacer { background: transparent; } + .compose-form { + flex: 1; + overflow-y: hidden; + display: flex; + flex-direction: column; + min-height: 310px; + padding-bottom: 71px; + margin-bottom: -71px; + } + + .compose-form__autosuggest-wrapper { + overflow-y: auto; + background-color: $white; + border-radius: 4px 4px 0 0; + flex: 0 1 auto; + } + .autosuggest-textarea__textarea { - max-height: 200px; + overflow-y: hidden; } .compose-form__upload-thumbnail { @@ -851,6 +871,9 @@ .navigation-panel { margin-top: 10px; + margin-bottom: 10px; + height: calc(100% - 20px); + overflow-y: auto; hr { border: 0; diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss index 3e4a15c9f..7da8edbde 100644 --- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss +++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss @@ -125,7 +125,7 @@ // Change the default color of several parts of the compose form .composer { - .composer--spoiler input, .composer--textarea textarea { + .composer--spoiler input, .compose-form__autosuggest-wrapper textarea { color: lighten($ui-base-color, 80%); &:disabled { background: lighten($simple-background-color, 10%) } |