diff options
author | Starfall <root@starfall.blue> | 2019-12-09 19:07:33 -0600 |
---|---|---|
committer | Starfall <root@starfall.blue> | 2019-12-09 19:09:31 -0600 |
commit | 6b34fcfef7566105e8d80ab5fee0a539c06cddbf (patch) | |
tree | 8fad2d47bf8be255d3c671c40cbfd04c2f55ed03 /app/javascript/flavours/glitch/styles/components/composer.scss | |
parent | 9fbb4af7611aa7836e65ef9f544d341423c15685 (diff) | |
parent | 246addd5b33a172600342af3fb6fb5e4c80ad95e (diff) |
Merge branch 'glitch'`
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/composer.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/composer.scss | 94 |
1 files changed, 69 insertions, 25 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss index c06d79ffc..51287f62e 100644 --- a/app/javascript/flavours/glitch/styles/components/composer.scss +++ b/app/javascript/flavours/glitch/styles/components/composer.scss @@ -2,6 +2,18 @@ padding: 10px; } +.character-counter { + cursor: default; + font-family: $font-sans-serif, sans-serif; + font-size: 14px; + font-weight: 600; + color: $lighter-text-color; + + &.character-counter--over { + color: $warning-red; + } +} + .no-reduce-motion .composer--spoiler { transition: height 0.4s ease, opacity 0.4s ease; } @@ -32,6 +44,10 @@ font-family: inherit; resize: vertical; + &::placeholder { + color: $dark-text-color; + } + &:focus { outline: 0 } @include single-column('screen and (max-width: 630px)') { font-size: 16px } } @@ -127,6 +143,7 @@ overflow: visible; white-space: pre-wrap; padding-top: 5px; + overflow: hidden; p, pre, blockquote { margin-bottom: 20px; @@ -232,6 +249,7 @@ .compose-form__autosuggest-wrapper, .autosuggest-input { position: relative; + width: 100%; label { .autosuggest-textarea__textarea { @@ -251,6 +269,10 @@ resize: none; scrollbar-color: initial; + &::placeholder { + color: $dark-text-color; + } + &::-webkit-scrollbar { all: unset; } @@ -314,29 +336,46 @@ } .autosuggest-textarea__suggestions__item { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - border-radius: 4px; padding: 10px; - font-size: 14px; - line-height: 18px; - overflow: hidden; cursor: pointer; + border-radius: 4px; &:hover, &:focus, &:active, &.selected { background: darken($ui-secondary-color, 10%) } - & > .emoji { - img { - display: block; - float: left; - margin-right: 8px; - width: 18px; - height: 18px; + > .account, + > .emoji, + > .autosuggest-hashtag { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + line-height: 18px; + font-size: 14px; + } + + .autosuggest-hashtag { + justify-content: space-between; + + &__name { + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + strong { + font-weight: 500; + } + + &__uses { + flex: 0 0 auto; + text-align: right; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } @@ -370,6 +409,7 @@ border-radius: 4px; height: 140px; width: 100%; + background-color: $base-shadow-color; background-position: center; background-size: cover; background-repeat: no-repeat; @@ -488,12 +528,18 @@ background: $simple-background-color; } -.composer--options { +.composer--options-wrapper { padding: 10px; background: darken($simple-background-color, 8%); - box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05); border-radius: 0 0 4px 4px; height: 27px; + display: flex; + justify-content: space-between; + flex: 0 0 auto; +} + +.composer--options { + display: flex; flex: 0 0 auto; & > * { @@ -518,6 +564,11 @@ } } +.compose--counter-wrapper { + align-self: center; + margin-right: 4px; +} + .composer--options--dropdown { &.open { & > .value { @@ -588,13 +639,6 @@ justify-content: flex-end; flex: 0 0 auto; - & > .count { - display: inline-block; - margin: 0 16px 0 8px; - font-size: 16px; - line-height: 36px; - } - & > .primary { display: inline-block; margin: 0; @@ -604,7 +648,7 @@ & > .side_arm { display: inline-block; - margin: 0 2px 0 0; + margin: 0 2px; padding: 0; width: 36px; text-align: center; |