// components.scss
.compose-form {
.compose-form__modifiers {
.compose-form__upload {
&-description {
input {
&::placeholder {
opacity: 1;
}
}
}
}
}
}
.rich-formatting a,
.rich-formatting p a,
.rich-formatting li a,
.landing-page__short-description p a,
.status__content a,
.reply-indicator__content a {
color: lighten($ui-highlight-color, 12%);
text-decoration: underline;
&.mention {
text-decoration: none;
}
&.mention span {
text-decoration: underline;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
}
&:hover,
&:focus,
&:active {
text-decoration: none;
}
&.status__content__spoiler-link {
color: $secondary-text-color;
text-decoration: none;
}
}
.status__content__read-more-button {
text-decoration: underline;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
}
.getting-started__footer a {
text-decoration: underline;
&:hover,
&:focus,
&:active {
text-decoration: none;
}
}
.nothing-here {
color: $darker-text-color;
}
.public-layout .public-account-header__tabs__tabs .counter.active::after {
border-bottom: 4px solid $ui-highlight-color;
}
// FAIRY FLOSS CHANGES
html {
scrollbar-color: $purple3 rgba($purple3, 0.25);
}
::-webkit-scrollbar-thumb {
background: $purplescrollbar;
border: 0 #f8f8f2;
border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
background: $purplescrollbar;
border: 0;
}
::-webkit-scrollbar-track:hover {
background: darken($purple2, 6%);
}
.loading-bar
{
background-color: $mint;
}
// text
.status__display-name, .column-header, .column-link, .navigation-bar strong {
color: $purple4;
}
.ui,
.notification__filter-bar button, .account__section-headline button, body, body.admin {
background: $purple1;
}
.drawer__header {
background: $purple3;
a {
&:hover, &:focus {
background: darken($purple3, 8%);
}
}
}
.search__input {
&:hover, &:focus {
background: $purple2;
color: $purple4;
}
background: $purple2;
color: $purple4;
}
::placeholder {
color: $purple4;
}
.search-popout, .search-popout h4 {
color: $purple1;
background-color: $purple4;
}
.drawer__inner, .drawer__inner__mastodon {
background: $purple3;
}
.compose-form .compose-form__buttons-wrapper {
background: lighten($purple4, 8%);
}
.text-icon-button.active {
color: darken($pink, 12%);
}
.column-header, .column-header__button, .column-header__back-button {
background: $purple5;
}
.notification__filter-bar button.active::after, .notification__filter-bar a.active::after, .account__section-headline button.active::after, .account__section-headline a.active::after {
border-color: transparent transparent $purple2;
}
.column>.scrollable {
background: $purple2;
}
.load-more:hover {
background: darken($purple2, 4%);
}
.empty-column-indicator, .error-column {
background: $purple2;
}
.column-link__badge, .column-subheading {
background: $purple2;
}
.column-link {
background: $purple3;
}
// link previews
.status-card.compact {
border-color: darken($purple5, 8%);
background: $purple5;
}
.status-card__image {
background: $purple3;
}
.status-card__content {
background: $purple5;
&:hover, &:focus {
background: darken($purple5, 4%);
}
}
.notification__filter-bar button.active, .notification__filter-bar a.active, .account__section-headline button.active, .account__section-headline a.active, .column-header>.column-header__back-button {
color: $mint;
}
.react-toggle--checked .react-toggle-track, .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
background: $pink;
}
.react-toggle-track, .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
background: $purple2;
}
.column-header__collapsible-inner, .column-header__button.active, .column-header__button.active:hover, .column-header__button.active:focus {
background: $purple3;
color: $purpleicon;
}
.column-inline-form, .column-back-button {
background: $purplescrollbar;
}
.flex-spacer, .getting-started, .getting-started__wrapper {
background: $purple2;
}
.status {
border-bottom: 1px solid lighten($purple2, 8%);
}
.detailed-status, .detailed-status__action-bar {
background: $purplescrollbar;
}
.detailed-status__action-bar {
border-top: 1px solid lighten($purple3, 8%);
border-bottom: 1px solid lighten($purple3, 8%);
}
.focusable:focus {
background: $purplescrollbar;
}
.focusable {
&:focus {
outline: 0;
background: $purplescrollbar;
.detailed-status,
.detailed-status__action-bar {
background: lighten($purplescrollbar, 2%);
}
}
}
.icon-button.active {
color: $pink;
}
button.icon-button i.fa-retweet {
background-image: url("data:image/svg+xml;utf8,");
}
button.icon-button i.fa-retweet:hover {
background-image: url("data:image/svg+xml;utf8,");
}
.notification__favourite-icon-wrapper .star-icon, .star-icon.active, a.mention.hashtag {
color: $lemon;
}
.reply-indicator__content a, .status__content a {
color: $mint;
}
a.mention, .notification__message .fa {
color: $pink;
}
.poll__link {
color: $purple4;
}
.poll__chart {
color: lighten($coral, 4%);
}
.poll__chart.leading {
color: $coral;
}
.emoji-mart-bar:first-child {
background: $purple4;
}
.emoji-mart-anchor-selected {
color: $purple2;
&:hover, &:focus {
color: $purple1;
}
}
.emoji-mart-anchor-bar {
background: $purple1;
}
// profile in deck view
.account__header__bar {
background: $purple5;
}
.account__header__image {
background: $purple1;
}
.notification__filter-bar, .account__section-headline {
background: $purple1;
}
.dropdown-menu, .dropdown-menu__item a {
background: $purple4;
}
.dropdown-menu__item a {
&:hover, &:focus {
background: $purple2;
}
}
.dropdown-menu__separator {
border-bottom: 1px solid darken($purple4, 4%);
}
.button.logo-button.button--destructive:active, .button.logo-button.button--destructive:focus, .button.logo-button.button--destructive:hover {
background: $pink;
}
// public profiles
.public-layout .header {
background: $purple3;
}
.public-layout .header .brand:active, .public-layout .header .brand:focus, .public-layout .header .brand:hover {
background: darken($purple3, 4%);
}
.public-layout .public-account-header__bar .avatar img {
background: $purple2;
border: 4px solid $purple2;
}
.public-layout .header .nav-button {
background: darken($purple3, 4%);
&:hover, &:focus {
background: darken($purple3, 8%);
}
}
.public-layout .public-account-header__bar:before {
background: $purplescrollbar;
}
.public-layout .public-account-header__tabs__tabs .counter.active::after {
border-bottom: 4px solid $lemon;
}
.public-layout .public-account-bio {
background: $purple3;
}
.hero-widget__text {
background: $purple2;
}
.activity-stream .entry {
background: $purple2;
}
.simple_form .hint a {
color: $mint;
}
.oauth-prompt strong, .follow-prompt strong {
color: $purple4;
}
.simple_form input[type=text]:active, .simple_form input[type=text]:focus, .simple_form input[type=number]:active, .simple_form input[type=number]:focus, .simple_form input[type=email]:active, .simple_form input[type=email]:focus, .simple_form input[type=password]:active, .simple_form input[type=password]:focus, .simple_form textarea:active, .simple_form textarea:focus {
border-color: $mint;
}
.nothing-here {
background: $purple2;
}
// admin zone
.admin-wrapper .content h2 {
color: $purple4;
}
.admin-wrapper .sidebar-wrapper {
background: $purple2;
}
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a {
background: $purpleborder;
&:hover, &:focus {
background: lighten($purpleborder, 8%);
}
}
.admin-wrapper .sidebar ul ul {
background: $purple1;
}
.admin-wrapper .sidebar ul a:hover, .admin-wrapper .sidebar ul a:focus {
background: $purpleborder;
}
.admin-wrapper .content .muted-hint a {
color: $mint;
}
.card__bar {
background: $purplescrollbar;
}
.simple_form input[type=text], .simple_form input[type=number], .simple_form input[type=email], .simple_form input[type=password], .simple_form textarea {
background: darken($purple1, 6%);
}
.simple_form select {
background: darken($purple1, 6%) url("data:image/svg+xml;utf8,") no-repeat right 8px center/auto 16px
}
.table th, .table td {
background: darken($purple2, 6%);
}
.table > thead > tr > th {
color: $lemon;
}
.table > tbody > tr:nth-child(odd) > td, .table > tbody > tr:nth-child(odd) > th {
background: $purple3;
}
// directory
.accounts-table tbody td {
background: $purple3;
}
.page-header {
background: $purpleborder;
h1 {
color: $purple4;
}
}
.box-widget, .contact-widget, .landing-page__information.contact-widget {
background: $purple2;
}
.notice-widget a {
color: $mint;
}
.directory__tag a {
background: $purple2;
&:hover, &:focus {
background: lighten($purple2, 4%);
}
}
// about/more
.landing-page__call-to-action {
background: $purple3;
}
.rich-formatting h3, .rich-formatting h4, .rich-formatting h2, .rich-formatting h1 {
color: lighten($purpleicon, 8%);
}
.landing-page__information strong {
color: lighten($purpleicon, 10%);
}
// about
.simple_form .input.boolean label a {
color: $mint;
}
::-webkit-input-placeholder { /* Edge */
color: $purpleicon;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: $purpleicon;
}
::placeholder {
color: $purpleicon;
}
.landing .hero-widget__footer {
background: $purple3;
}