diff --git a/app/styles/gabsocial/components/compose-form.scss b/app/styles/gabsocial/components/compose-form.scss index ef6ac305d..50c8b972f 100644 --- a/app/styles/gabsocial/components/compose-form.scss +++ b/app/styles/gabsocial/components/compose-form.scss @@ -1,5 +1,6 @@ .compose-form { padding: 10px; + &__sensitive-button { padding: 10px; padding-top: 0; @@ -7,6 +8,7 @@ font-weight: 500; &.active {color: $highlight-text-color;} input[type=checkbox] {display: none;} + .checkbox { display: inline-block; position: relative; @@ -19,12 +21,14 @@ top: -1px; border-radius: 4px; vertical-align: middle; + &.active { border-color: $highlight-text-color; background: $highlight-text-color; } } } + .compose-form__warning { color: $primary-text-color; margin-bottom: 10px; @@ -34,6 +38,7 @@ border-radius: 4px; font-size: 13px; font-weight: 400; + strong { color: $inverted-text-color; font-weight: 500; @@ -43,10 +48,12 @@ } } } + a { color: $lighter-text-color; font-weight: 500; text-decoration: underline; + &:hover, &:active, &:focus { @@ -54,30 +61,36 @@ } } } + .emoji-picker-dropdown { position: absolute; top: 5px; right: 5px; z-index: 1; } + .compose-form__autosuggest-wrapper { position: relative; } + .autosuggest-textarea, .autosuggest-input, .spoiler-input { position: relative; } + .spoiler-input { height: 0; transform-origin: bottom; - opacity: 0.0; + opacity: 0; + &.spoiler-input--visible { height: 36px; margin-bottom: 11px; - opacity: 1.0; + opacity: 1; } } + .autosuggest-textarea__textarea, .spoiler-input__input { display: block; @@ -96,6 +109,7 @@ @media screen and (max-width: 600px) {font-size: 16px;} } .spoiler-input__input {border-radius: 4px;} + .autosuggest-textarea__textarea { min-height: 100px; border-radius: 5px 5px 0 0; @@ -109,17 +123,20 @@ resize: vertical; } } + &.condensed { .autosuggest-textarea__textarea { min-height: 46px; border-radius: 5px; } } + .emoji-picker-wrapper, .autosuggest-textarea__suggestions-wrapper { position: relative; height: 0; } + .autosuggest-textarea__suggestions { box-sizing: border-box; display: none; @@ -135,15 +152,20 @@ padding: 6px; &.autosuggest-textarea__suggestions--visible {display: block;} } + .autosuggest-textarea__suggestions__item { padding: 10px; cursor: pointer; border-radius: 4px; + &:hover, &:focus, &:active, - &.selected {background: darken($ui-secondary-color, 10%);} + &.selected { + background: darken($ui-secondary-color, 10%); + } } + .autosuggest-account, .autosuggest-emoji { display: flex; @@ -153,6 +175,7 @@ line-height: 18px; font-size: 14px; } + .autosuggest-account-icon, .autosuggest-emoji img { display: block; @@ -161,21 +184,25 @@ height: 16px; } .autosuggest-account .display-name__account {color: $lighter-text-color;} + .compose-form__modifiers { color: $inverted-text-color; font-family: inherit; font-size: 14px; background: $simple-background-color; .compose-form__upload-wrapper {overflow: hidden;} + .compose-form__uploads-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; + &.contains-media { padding: 5px; border-top: 1px solid darken($simple-background-color, 8%); } } + .compose-form__upload { flex: 1 1 0; min-width: 40%; @@ -188,6 +215,7 @@ justify-content: space-between; opacity: 0; transition: opacity .1s ease; + .icon-button { flex: 0 1 auto; color: $gab-secondary-text; @@ -195,12 +223,16 @@ font-weight: 500; padding: 10px; font-family: inherit; + &:hover, &:focus, - &:active {color: $gab-text-highlight;} + &:active { + color: $gab-text-highlight; + } } &.active {opacity: 1;} } + &-description { position: absolute; z-index: 2; @@ -212,8 +244,9 @@ padding: 10px; opacity: 0; transition: opacity .1s ease; + textarea { - background: rgba(0,0,0,0.3); + background: rgba(0, 0, 0, 0.3); box-sizing: border-box; background: transparent; color: $gab-secondary-text; @@ -225,7 +258,9 @@ font-family: inherit; font-size: 14px; font-weight: 500; + &:focus {color: #fff;} + &::placeholder { color: $gab-secondary-text; } @@ -233,6 +268,7 @@ &.active {opacity: 1;} } } + .compose-form__upload-thumbnail { border-radius: 4px; background-position: center; @@ -243,6 +279,7 @@ overflow: hidden; } } // end .compose-form .compose-form__modifiers + .compose-form__buttons-wrapper { padding: 10px; background: darken($simple-background-color, 8%); @@ -250,22 +287,27 @@ display: flex; justify-content: space-between; flex: 0 0 auto; + .compose-form__buttons { display: flex; .compose-form__upload-button-icon {line-height: 27px;} + .compose-form__sensitive-button { display: none; &.compose-form__sensitive-button--visible {display: block;} .compose-form__sensitive-button__icon {line-height: 27px;} } } + .icon-button { box-sizing: content-box; padding: 0 3px; } + .character-counter__wrapper { align-self: center; margin-right: 4px; + .character-counter { cursor: default; font-family: $font-sans-serif, sans-serif; @@ -276,11 +318,13 @@ } } } + .compose-form__publish { display: flex; justify-content: flex-end; min-width: 0; flex: 0 0 auto; + .compose-form__publish-button-wrapper { overflow: hidden; padding-top: 10px;