- .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;
- margin: 10px 0;
- padding: 0 12px;
- font-size: 14px;
- line-height: 20px;
- color: $inverted-text-color;
- word-wrap: break-word;
- font-weight: 400;
- overflow: visible;
- white-space: pre-wrap;
- padding-top: 5px;
- overflow: hidden;
-
- p,
- pre,
- blockquote {
- margin-bottom: 20px;
- white-space: pre-wrap;
-
- &:last-child {
- margin-bottom: 0;
- }
- }
-
- h1,
- h2,
- h3,
- h4,
- h5 {
- margin-top: 20px;
- margin-bottom: 20px;
- }
-
- h1,
- h2 {
- font-weight: 700;
- font-size: 18px;
- }
-
- h2 {
- font-size: 16px;
- }
-
- h3,
- h4,
- h5 {
- font-weight: 500;
- }
-
- blockquote {
- padding-left: 10px;
- border-left: 3px solid $inverted-text-color;
- color: $inverted-text-color;
- white-space: normal;
-
- p:last-child {
- margin-bottom: 0;
- }
- }
-
- b,
- strong {
- font-weight: 700;
- }
-
- em,
- i {
- font-style: italic;
- }
-
- sub {
- font-size: smaller;
- vertical-align: sub;
- }
-
- sup {
- font-size: smaller;
- vertical-align: super;
- }
-
- ul,
- ol {
- margin-left: 1em;
-
- p {
- margin: 0;
- }
- }
-
- ul {
- list-style-type: disc;
- }
-
- ol {
- list-style-type: decimal;
- }
-
- 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 {
- display: block;
- position: absolute;
- box-sizing: border-box;
- top: 100%;
- border-radius: 0 0 4px 4px;
- padding: 6px;
- width: 100%;
- color: $inverted-text-color;
- background: $ui-secondary-color;
- box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
- font-size: 14px;
- z-index: 99;
- display: none;
- }
-
- .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: $ui-base-lighter-color;
- }
-
- .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%);
- }
- }
- }
- }
- }
- }
|