@import 'variables';
// Text-icons status buttons
.status,
.status.status-direct {
.icon-button {
color: $status-buttons-base-color;
&:hover,
&:active,
&:focus {
color: $status-buttons-active-color;
}
&.disabled {
color: $status-buttons-disabled-color;
}
}
}
.icon-button.overlayed {
background: rgba($white, .6);
&:hover {
background: rgba($white, .6);
}
}
// Boost button
@function hex-color($color) {
@if type-of($color) == 'color' {
$color: str-slice(ie-hex-str($color), 4);
}
@return '%23' + unquote($color)
}
button.icon-button i.fa-retweet {
background-image: url("data:image/svg+xml;utf8,");
&:hover {
background-image: url("data:image/svg+xml;utf8,");
}
}
button.icon-button.disabled i.fa-retweet {
background-image: url("data:image/svg+xml;utf8,");
&:hover {
background-image: url("data:image/svg+xml;utf8,");
}
}
// Spoilers button
.status__content,
.reply-indicator__content, {
.status__content__spoiler-link {
background-color: lighten($classic-secondary-color, 10%);
color: $black;
&:focus,
&:hover,
&:active {
background-color: lighten($classic-highlight-color, 10%);
}
&:disabled {
background-color: rgba($classic-secondary-color, .4);
color: rgba($black, .4);
}
}
}
// Toot input
.drawer__inner {
background: darken($classic-base-color, 15%);
}
.drawer__inner__mastodon {
background: darken($classic-base-color, 15%) url('data:image/svg+xml;utf8,') no-repeat bottom / 100% auto;
}
.compose-form .autosuggest-textarea__textarea,
.compose-form .spoiler-input__input {
color: $black;
}
.compose-form__buttons {
background: rgba($white, 0.3);
.icon-button.inverted,
.text-icon-button {
color: $status-buttons-base-color;
&:hover,
&:active,
&:focus {
color: $status-buttons-active-color;
}
&.disabled {
color: $status-buttons-disabled-color;
}
}
}
.compose-form__warning {
background: $classic-base-color;
}
.reply-indicator {
background: $classic-base-color;
color: $black;
* {
color: inherit;
}
}
.privacy-dropdown__option,
.privacy-dropdown__option__content strong {
color: $classic-primary-color;
}
.media-spoiler {
color: $classic-primary-color;
background: lighten($classic-base-color, 15%);
&:hover {
color: $classic-highlight-color;
}
}
.button {
background-color: lighten($classic-secondary-color, 10%);
color: $black;
&:focus,
&:hover,
&:active {
background-color: lighten($classic-highlight-color, 10%);
}
&:disabled {
background-color: rgba($classic-secondary-color, .4);
color: rgba($black, .4);
}
}
.upload-progress__tracker {
background: $classic-primary-color;
}
.activity-stream .status.light .display-name span {
color: $ui-highlight-color;
}
.activity-stream-tabs a.active,
.activity-stream .status.light .status__content,
.activity-stream .status.light .display-name strong {
color: $black;
}