diff options
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components/compose_form.scss')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/compose_form.scss | 683 |
1 files changed, 683 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss new file mode 100644 index 000000000..1c2e0aeb4 --- /dev/null +++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss @@ -0,0 +1,683 @@ +.compose-form { + padding: 10px; + + .emoji-picker-dropdown { + position: absolute; + top: 0; + right: 0; + + ::-webkit-scrollbar-track:hover, + ::-webkit-scrollbar-track:active { + background-color: rgba($base-overlay-background, 0.3); + } + } +} + +.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 .spoiler-input { + transition: height 0.4s ease, opacity 0.4s ease; +} + +.spoiler-input { + height: 0; + transform-origin: bottom; + opacity: 0; + + &.spoiler-input--visible { + height: 36px; + margin-bottom: 11px; + opacity: 1; + } + + input { + display: block; + box-sizing: border-box; + margin: 0; + border: 0; + border-radius: 4px; + padding: 10px; + width: 100%; + outline: 0; + color: $inverted-text-color; + background: $simple-background-color; + font-size: 14px; + font-family: inherit; + resize: vertical; + + &::placeholder { + color: $dark-text-color; + } + + &:focus { + outline: 0; + } + @include single-column('screen and (max-width: 630px)') { + font-size: 16px; + } + } +} + +.compose-form__warning { + color: $inverted-text-color; + margin-bottom: 15px; + background: $ui-primary-color; + box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); + padding: 8px 10px; + border-radius: 4px; + font-size: 13px; + font-weight: 400; + + a { + color: $lighter-text-color; + font-weight: 500; + text-decoration: underline; + + &:active, + &:focus, + &:hover { + text-decoration: none; + } + } +} + +.compose-form__sensitive-button { + padding: 10px; + padding-top: 0; + font-size: 14px; + font-weight: 500; + + &.active { + color: $highlight-text-color; + } + + input[type='checkbox'] { + display: none; + } + + .checkbox { + display: inline-block; + position: relative; + border: 1px solid $ui-primary-color; + box-sizing: border-box; + width: 18px; + height: 18px; + flex: 0 0 auto; + margin-left: 5px; + margin-right: 10px; + top: -1px; + border-radius: 4px; + vertical-align: middle; + + &.active { + border-color: $highlight-text-color; + background: $highlight-text-color + url("data:image/svg+xml;utf8,<svg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.5 8.5L8 12l6-6' stroke='white' stroke-width='1.5'/></svg>") + center center no-repeat; + } + } +} + +.reply-indicator { + margin: 0 0 10px; + border-radius: 4px; + padding: 10px; + background: $ui-primary-color; + min-height: 23px; + overflow-y: auto; + flex: 0 2 auto; +} + +.reply-indicator__header { + margin-bottom: 5px; + overflow: hidden; + + & > .account.small { + color: $inverted-text-color; + } +} + +.reply-indicator__cancel { + float: right; + line-height: 24px; +} + +.reply-indicator__content { + position: relative; + font-size: 14px; + line-height: 20px; + word-wrap: break-word; + font-weight: 400; + overflow: hidden; + padding-top: 5px; + color: $inverted-text-color; + white-space: pre-wrap; + + p, + pre { + margin-bottom: 20px; + white-space: pre-wrap; + + &:last-child { + margin-bottom: 0; + } + } + + a { + color: $lighter-text-color; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + + &.mention { + &:hover { + text-decoration: none; + + span { + text-decoration: underline; + } + } + } + } + + .emojione { + width: 20px; + height: 20px; + margin: -5px 0 0; + } +} + +.compose-form .compose-form__autosuggest-wrapper { + position: relative; +} + +.compose-form .autosuggest-textarea, +.compose-form .autosuggest-input { + position: relative; + width: 100%; + + label { + .autosuggest-textarea__textarea { + display: block; + box-sizing: border-box; + margin: 0; + border: 0; + border-radius: 4px 4px 0 0; + padding: 10px 32px 0 10px; + width: 100%; + min-height: 100px; + outline: 0; + color: $inverted-text-color; + background: $simple-background-color; + font-size: 14px; + font-family: inherit; + resize: none; + scrollbar-color: initial; + + &::placeholder { + color: $dark-text-color; + } + + &::-webkit-scrollbar { + all: unset; + } + + &:focus { + outline: 0; + } + + @include single-column('screen and (max-width: 630px)') { + font-size: 16px; + } + + @include limited-single-column('screen and (max-width: 600px)') { + height: 100px !important; // prevent auto-resize textarea + resize: vertical; + } + } + } +} + +.compose-form__textarea-icons { + display: block; + position: absolute; + top: 29px; + right: 5px; + bottom: 5px; + overflow: hidden; + + & > .textarea_icon { + display: block; + margin: 2px 0 0 2px; + width: 24px; + height: 24px; + color: $lighter-text-color; + font-size: 18px; + line-height: 24px; + text-align: center; + opacity: 0.8; + } +} + +.autosuggest-textarea__suggestions-wrapper { + position: relative; + height: 0; +} + +.autosuggest-textarea__suggestions { + box-sizing: border-box; + display: none; + position: absolute; + top: 100%; + width: 100%; + z-index: 99; + box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); + background: $ui-secondary-color; + border-radius: 0 0 4px 4px; + color: $inverted-text-color; + font-size: 14px; + 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%); + } + + > .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; + } + } + + & > .account.small { + .display-name { + & > span { + color: $lighter-text-color; + } + } + } +} + +.compose-form__upload-wrapper { + overflow: hidden; +} + +.compose-form__uploads-wrapper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + font-family: inherit; + padding: 5px; + overflow: hidden; +} + +.compose-form__upload { + flex: 1 1 0; + margin: 5px; + min-width: 40%; + + .compose-form__upload-thumbnail { + position: relative; + border-radius: 4px; + height: 140px; + width: 100%; + background-color: $base-shadow-color; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + overflow: hidden; + + & > .close { + mix-blend-mode: difference; + } + } + + .icon-button { + flex: 0 1 auto; + color: $secondary-text-color; + font-size: 14px; + font-weight: 500; + padding: 10px; + font-family: inherit; + + &:hover, + &:focus, + &:active { + color: lighten($secondary-text-color, 7%); + } + } + + &__warning { + position: absolute; + z-index: 2; + bottom: 0; + left: 0; + right: 0; + box-sizing: border-box; + background: linear-gradient( + 0deg, + rgba($base-shadow-color, 0.8) 0, + rgba($base-shadow-color, 0.35) 80%, + transparent + ); + } +} + +.compose-form__upload__actions { + background: linear-gradient( + 180deg, + rgba($base-shadow-color, 0.8) 0, + rgba($base-shadow-color, 0.35) 80%, + transparent + ); + display: flex; + align-items: flex-start; + justify-content: space-between; +} + +.upload-progress { + display: flex; + padding: 10px; + color: $darker-text-color; + overflow: hidden; + + .fa { + font-size: 34px; + margin-right: 10px; + } + + span { + display: block; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + } +} + +.upload-progress__message { + flex: 1 1 auto; +} + +.upload-progress__backdrop { + position: relative; + margin-top: 5px; + border-radius: 6px; + width: 100%; + height: 6px; + background: darken($simple-background-color, 8%); +} + +.upload-progress__tracker { + position: absolute; + top: 0; + left: 0; + height: 6px; + border-radius: 6px; + background: $ui-highlight-color; +} + +.compose-form__modifiers { + color: $inverted-text-color; + font-family: inherit; + font-size: 14px; + background: $simple-background-color; +} + +.compose-form__buttons-wrapper { + padding: 10px; + background: darken($simple-background-color, 8%); + border-radius: 0 0 4px 4px; + height: 27px; + display: flex; + justify-content: space-between; + flex: 0 0 auto; +} + +.compose-form__buttons { + display: flex; + flex: 0 0 auto; + + & .icon-button, + & .text-icon-button { + display: inline-block; + box-sizing: content-box; + padding: 0 3px; + height: 27px; + line-height: 27px; + vertical-align: bottom; + } + + & > hr { + display: inline-block; + margin: 0 3px; + border-width: 0 0 0 1px; + border-style: none none none solid; + border-color: transparent transparent transparent + darken($simple-background-color, 24%); + padding: 0; + width: 0; + height: 27px; + background: transparent; + } +} + +.character-counter__wrapper { + align-self: center; + margin-right: 4px; +} + +.privacy-dropdown.active { + .privacy-dropdown__value { + background: $simple-background-color; + border-radius: 4px 4px 0 0; + box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); + + .icon-button { + transition: none; + } + + &.active { + background: $ui-highlight-color; + + .icon-button { + color: $primary-text-color; + } + } + } + + &.top .privacy-dropdown__value { + border-radius: 0 0 4px 4px; + } + + .privacy-dropdown__dropdown { + display: block; + box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); + } +} + +.privacy-dropdown__dropdown { + border-radius: 4px; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + background: $simple-background-color; + overflow: hidden; + transform-origin: 50% 0; +} + +.privacy-dropdown__option { + display: flex; + align-items: center; + padding: 10px; + color: $inverted-text-color; + cursor: pointer; + + .privacy-dropdown__option__content { + flex: 1 1 auto; + color: $lighter-text-color; + + &:not(:first-child) { + margin-left: 10px; + } + + strong { + display: block; + color: $inverted-text-color; + font-weight: 500; + } + } + + &:hover, + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + + .privacy-dropdown__option__content { + color: $primary-text-color; + + strong { + color: $primary-text-color; + } + } + } + + &.active:hover { + background: lighten($ui-highlight-color, 4%); + } +} + +.compose-form__publish { + display: flex; + justify-content: flex-end; + min-width: 0; + flex: 0 0 auto; + column-gap: 5px; + + .compose-form__publish-button-wrapper { + overflow: hidden; + padding-top: 10px; + + button { + padding: 7px 10px; + text-align: center; + } + + & > .side_arm { + width: 36px; + } + } +} + +.language-dropdown { + &__dropdown { + background: $simple-background-color; + box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); + border-radius: 4px; + overflow: hidden; + z-index: 2; + + &.top { + transform-origin: 50% 100%; + } + + &.bottom { + transform-origin: 50% 0; + } + + .emoji-mart-search { + padding-right: 10px; + } + + .emoji-mart-search-icon { + right: 10px + 5px; + } + + .emoji-mart-scroll { + padding: 0 10px 10px; + } + + &__results { + &__item { + cursor: pointer; + color: $inverted-text-color; + font-weight: 500; + padding: 10px; + border-radius: 4px; + + &:focus, + &:active, + &:hover { + background: $ui-secondary-color; + } + + &__common-name { + color: $darker-text-color; + } + + &.active { + background: $ui-highlight-color; + color: $primary-text-color; + outline: 0; + + .language-dropdown__dropdown__results__item__common-name { + color: $secondary-text-color; + } + + &:hover { + background: lighten($ui-highlight-color, 4%); + } + } + } + } + } +} |