@import 'variables';
body {
background-color: $solar-bg;
}
.media-modal__overlay
.picture-in-picture__footer
button.icon-button {
i.fa-retweet {
background: url("data:image/svg+xml;utf8,") no-repeat;
}
&.reblogPrivate i.fa-retweet {
background: url("data:image/svg+xml;utf8,");
}
i.fa-star {
background: url("data:image/svg+xml;utf8,") no-repeat top;
}
}
.media-modal__overlay
.picture-in-picture__footer
button.icon-button.active {
&.reblogPrivate.active i.fa-retweet,
i.fa-retweet {
background: url("data:image/svg+xml;utf8,") no-repeat;
background-position: 50% 100%;
}
i.fa-star {
background-position: 50% 100%;
}
}
button.icon-button {
&:hover i.fa-retweet,
&.reblogPrivate.active i.fa-retweet,
&:hover.reblogPrivate.active i.fa-retweet,
i.fa-retweet {
background: url("data:image/svg+xml;utf8,") no-repeat;
width: 19px;
height: 18.5px;
transition: background-position .6s steps(4);
}
&.reblogPrivate:hover i.fa-retweet,
&.reblogPrivate i.fa-retweet {
background: url("data:image/svg+xml;utf8,");
}
&.reblogPrivate.active i.fa-retweet,
&:hover.reblogPrivate.active i.fa-retweet {
background-position: bottom;
}
&:hover i.fa-star,
i.fa-star {
background: url("data:image/svg+xml;utf8,") no-repeat top;
height: 21.4px;
margin: 1px 0;
transition: background-position .6s steps(4);
}
&.active i.fa-star {
background-position: 50% 100%;
}
/* Remove the font-awesome icon */
.fa-star::before {
content: "";
}
&.disabled {
i.fa-retweet,
&:hover i.fa-retweet {
background-image: url("data:image/svg+xml;utf8,");
}
}
&.active i.fa-retweet {
background-position: 50% 100%;
}
}
.no-reduce-motion .icon-button.star-icon {
&.deactivate > .fa-star,
&.activate > .fa-star {
animation: none;
-webkit-animation: none;
}
}
.detailed-status__link {
.fa-star {
background: url("data:image/svg+xml;utf8,") no-repeat top;
width: 12px;
height: 13px;
margin-bottom: -1px;
&::before {
content: "";
}
}
.fa-retweet {
background: url("data:image/svg+xml;utf8,") no-repeat;
width: 13px;
height: 14px;
margin-bottom: -1px;
&::before {
content: "";
}
}
}
.drawer .drawer__inner {
background: lighten($ui-base-color, 13%) url("data:image/svg+xml;utf8,") 0 9px;
background-size: 100%;
}
.drawer__inner__mastodon {
background-color: transparent !important;
}
.single-column,
.auto-columns {
.column-header {
background: lighten($ui-base-color, 4%) url("data:image/svg+xml;utf8,") 2px 2px;
background-size: 44.25px;
}
.column-header__button,
.column-header__back-button {
background-color: transparent;
}
}