|
|
@ -265,7 +265,6 @@ |
|
|
|
|
|
|
|
|
|
|
|
.compose-form { |
|
|
|
.compose-form { |
|
|
|
padding: 10px; |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.compose-form__warning { |
|
|
|
.compose-form__warning { |
|
|
|
color: darken($ui-secondary-color, 65%); |
|
|
|
color: darken($ui-secondary-color, 65%); |
|
|
@ -301,48 +300,122 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.compose-form__modifiers { |
|
|
|
.compose-form__autosuggest-wrapper { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.emoji-picker-dropdown { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
right: 5px; |
|
|
|
|
|
|
|
top: 5px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.autosuggest-textarea, |
|
|
|
|
|
|
|
.spoiler-input { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.autosuggest-textarea__textarea, |
|
|
|
|
|
|
|
.spoiler-input__input { |
|
|
|
|
|
|
|
display: block; |
|
|
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
margin: 0; |
|
|
|
color: $ui-base-color; |
|
|
|
color: $ui-base-color; |
|
|
|
|
|
|
|
background: $simple-background-color; |
|
|
|
|
|
|
|
padding: 10px; |
|
|
|
font-family: inherit; |
|
|
|
font-family: inherit; |
|
|
|
font-size: 14px; |
|
|
|
font-size: 14px; |
|
|
|
background: $simple-background-color; |
|
|
|
resize: vertical; |
|
|
|
border-radius: 0 0 4px; |
|
|
|
border: 0; |
|
|
|
|
|
|
|
outline: 0; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:focus { |
|
|
|
|
|
|
|
outline: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.compose-form__buttons-wrapper { |
|
|
|
@media screen and (max-width: 600px) { |
|
|
|
display: flex; |
|
|
|
font-size: 16px; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.compose-form__buttons { |
|
|
|
.spoiler-input__input { |
|
|
|
padding: 10px; |
|
|
|
border-radius: 4px; |
|
|
|
background: darken($simple-background-color, 8%); |
|
|
|
} |
|
|
|
box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05); |
|
|
|
|
|
|
|
|
|
|
|
.autosuggest-textarea__textarea { |
|
|
|
|
|
|
|
min-height: 100px; |
|
|
|
|
|
|
|
border-radius: 4px 4px 0 0; |
|
|
|
|
|
|
|
padding-bottom: 0; |
|
|
|
|
|
|
|
padding-right: 10px + 22px; |
|
|
|
|
|
|
|
resize: none; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 600px) { |
|
|
|
|
|
|
|
height: 100px !important; // prevent auto-resize textarea |
|
|
|
|
|
|
|
resize: vertical; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
border-radius: 0 0 4px 4px; |
|
|
|
display: flex; |
|
|
|
color: $ui-base-color; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
padding: 6px; |
|
|
|
|
|
|
|
|
|
|
|
.icon-button { |
|
|
|
&.autosuggest-textarea__suggestions--visible { |
|
|
|
box-sizing: content-box; |
|
|
|
display: block; |
|
|
|
padding: 0 3px; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.compose-form__upload-button-icon { |
|
|
|
.autosuggest-textarea__suggestions__item { |
|
|
|
line-height: 27px; |
|
|
|
padding: 10px; |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:hover, |
|
|
|
|
|
|
|
&:focus, |
|
|
|
|
|
|
|
&:active, |
|
|
|
|
|
|
|
&.selected { |
|
|
|
|
|
|
|
background: darken($ui-secondary-color, 10%); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.compose-form__sensitive-button { |
|
|
|
.autosuggest-account, |
|
|
|
display: none; |
|
|
|
.autosuggest-emoji { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
justify-content: flex-start; |
|
|
|
|
|
|
|
line-height: 18px; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&.compose-form__sensitive-button--visible { |
|
|
|
.autosuggest-account-icon, |
|
|
|
|
|
|
|
.autosuggest-emoji img { |
|
|
|
display: block; |
|
|
|
display: block; |
|
|
|
|
|
|
|
margin-right: 8px; |
|
|
|
|
|
|
|
width: 16px; |
|
|
|
|
|
|
|
height: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.compose-form__sensitive-button__icon { |
|
|
|
.autosuggest-account .display-name__account { |
|
|
|
line-height: 27px; |
|
|
|
color: lighten($ui-base-color, 36%); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.compose-form__modifiers { |
|
|
|
|
|
|
|
color: $ui-base-color; |
|
|
|
|
|
|
|
font-family: inherit; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
background: $simple-background-color; |
|
|
|
|
|
|
|
|
|
|
|
.compose-form__upload-wrapper { |
|
|
|
.compose-form__upload-wrapper { |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
@ -410,54 +483,69 @@ |
|
|
|
height: 100px; |
|
|
|
height: 100px; |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.compose-form__label { |
|
|
|
.compose-form__buttons-wrapper { |
|
|
|
display: block; |
|
|
|
padding: 10px; |
|
|
|
line-height: 24px; |
|
|
|
background: darken($simple-background-color, 8%); |
|
|
|
vertical-align: middle; |
|
|
|
border-radius: 0 0 4px 4px; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
|
|
|
|
&.with-border { |
|
|
|
.compose-form__buttons { |
|
|
|
border-top: 1px solid $ui-base-color; |
|
|
|
display: flex; |
|
|
|
padding-top: 10px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.compose-form__label__text { |
|
|
|
.compose-form__upload-button-icon { |
|
|
|
display: inline-block; |
|
|
|
line-height: 27px; |
|
|
|
vertical-align: middle; |
|
|
|
|
|
|
|
margin-bottom: 14px; |
|
|
|
|
|
|
|
margin-left: 8px; |
|
|
|
|
|
|
|
color: $ui-primary-color; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.compose-form__textarea, |
|
|
|
.compose-form__sensitive-button { |
|
|
|
.follow-form__input { |
|
|
|
display: none; |
|
|
|
background: $simple-background-color; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:disabled { |
|
|
|
&.compose-form__sensitive-button--visible { |
|
|
|
background: $ui-secondary-color; |
|
|
|
display: block; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.compose-form__sensitive-button__icon { |
|
|
|
|
|
|
|
line-height: 27px; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.compose-form__autosuggest-wrapper { |
|
|
|
.icon-button { |
|
|
|
position: relative; |
|
|
|
box-sizing: content-box; |
|
|
|
|
|
|
|
padding: 0 3px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.emoji-picker-dropdown { |
|
|
|
.character-counter__wrapper { |
|
|
|
position: absolute; |
|
|
|
align-self: center; |
|
|
|
right: 5px; |
|
|
|
margin-right: 4px; |
|
|
|
top: 5px; |
|
|
|
|
|
|
|
|
|
|
|
.character-counter { |
|
|
|
|
|
|
|
cursor: default; |
|
|
|
|
|
|
|
font-family: 'mastodon-font-sans-serif', sans-serif; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
font-weight: 600; |
|
|
|
|
|
|
|
color: lighten($ui-base-color, 12%); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&.character-counter--over { |
|
|
|
|
|
|
|
color: $warning-red; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.compose-form__publish { |
|
|
|
.compose-form__publish { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
justify-content: flex-end; |
|
|
|
min-width: 0; |
|
|
|
min-width: 0; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.compose-form__publish-button-wrapper { |
|
|
|
.compose-form__publish-button-wrapper { |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
padding-top: 10px; |
|
|
|
padding-top: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.emojione { |
|
|
|
.emojione { |
|
|
|
display: inline-block; |
|
|
|
display: inline-block; |
|
|
@ -1973,121 +2061,6 @@ |
|
|
|
cursor: default; |
|
|
|
cursor: default; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.autosuggest-textarea, |
|
|
|
|
|
|
|
.spoiler-input { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.autosuggest-textarea__textarea, |
|
|
|
|
|
|
|
.spoiler-input__input { |
|
|
|
|
|
|
|
display: block; |
|
|
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
margin: 0; |
|
|
|
|
|
|
|
color: $ui-base-color; |
|
|
|
|
|
|
|
background: $simple-background-color; |
|
|
|
|
|
|
|
padding: 10px; |
|
|
|
|
|
|
|
font-family: inherit; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
resize: vertical; |
|
|
|
|
|
|
|
border: 0; |
|
|
|
|
|
|
|
outline: 0; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:focus { |
|
|
|
|
|
|
|
outline: 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 600px) { |
|
|
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.spoiler-input__input { |
|
|
|
|
|
|
|
border-radius: 4px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.autosuggest-textarea__textarea { |
|
|
|
|
|
|
|
min-height: 100px; |
|
|
|
|
|
|
|
border-radius: 4px 4px 0 0; |
|
|
|
|
|
|
|
padding-bottom: 0; |
|
|
|
|
|
|
|
padding-right: 10px + 22px; |
|
|
|
|
|
|
|
resize: none; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 600px) { |
|
|
|
|
|
|
|
height: 100px !important; // prevent auto-resize textarea |
|
|
|
|
|
|
|
resize: vertical; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.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: $ui-base-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%); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.autosuggest-account, |
|
|
|
|
|
|
|
.autosuggest-emoji { |
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
justify-content: flex-start; |
|
|
|
|
|
|
|
line-height: 18px; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.autosuggest-account-icon, |
|
|
|
|
|
|
|
.autosuggest-emoji img { |
|
|
|
|
|
|
|
display: block; |
|
|
|
|
|
|
|
margin-right: 8px; |
|
|
|
|
|
|
|
width: 16px; |
|
|
|
|
|
|
|
height: 16px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.autosuggest-account .display-name__account { |
|
|
|
|
|
|
|
color: lighten($ui-base-color, 36%); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.character-counter__wrapper { |
|
|
|
|
|
|
|
line-height: 36px; |
|
|
|
|
|
|
|
margin: 0 16px 0 8px; |
|
|
|
|
|
|
|
padding-top: 10px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.character-counter { |
|
|
|
|
|
|
|
cursor: default; |
|
|
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.character-counter--over { |
|
|
|
|
|
|
|
color: $warning-red; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.getting-started__wrapper { |
|
|
|
.getting-started__wrapper { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
overflow-y: auto; |
|
|
|
overflow-y: auto; |
|
|
|