// Notes! // Sass color functions, "darken" and "lighten" are automatically replaced. html { scrollbar-color: $pink rgba($pink, 0.25); } .loading-bar { background-color: $green; } .status__content a, .reply-indicator__content a { &:hover, &:active, &:focus { color: $bilberry; } } ::-webkit-scrollbar-thumb { background: $pink; border: 0; } ::-webkit-scrollbar-thumb { background: $pink; border: 0; } ::-webkit-scrollbar-thumb:hover { background: $pink; border: 0; } ::-webkit-scrollbar-track:hover { background: $green; } .ui { background: $cream; } // Change the colors of button texts .button { color: $white; &.button-alternative-2 { color: $white; } } // Change default background colors of columns .column > .scrollable, .getting-started, .column-inline-form { background: $white; border: 1px solid lighten(#eeeeee, 4%); border-top: 0; } .getting-started { background: $green; border: 1px solid lighten($green, 8%); } .column-back-button, .column-header { background: #c8c4dd; border: 1px solid lighten($purple, 8%); @media screen and (max-width: $no-gap-breakpoint) { border-top: 0; } &--slim-button { border: 0; top: -49px; right: 1px; } } .column-header__back-button, .column-header__button, .column-header__button.active, .column-header__button.active { color: $ui-highlight-color; background: $purple; &:hover, &:active, &:focus { color: $ui-highlight-color; background: lighten($purple, 4%); } } .account__header__bar .avatar .account__avatar { border-color: $green; } .getting-started__footer a { color: $ui-secondary-color; text-decoration: underline; } .column-subheading { background: $green; border-bottom: 1px solid lighten($green, 8%); } .getting-started, .scrollable { .column-link { background: $blue; border-bottom: 1px solid lighten($blue, 8%); &:hover, &:active, &:focus { background: lighten($blue, 8%); } } } .getting-started .navigation-bar { border-top: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%); @media screen and (max-width: $no-gap-breakpoint) { border-top: 0; } } .compose-form__autosuggest-wrapper, .poll__text input[type="text"], .compose-form .spoiler-input__input, .compose-form__poll-wrapper select, .search__input, .setting-text, .box-widget input[type="text"], .box-widget input[type="email"], .box-widget input[type="password"], .box-widget textarea, .statuses-grid .detailed-status .audio-player { border: 1px solid lighten(#eeeeee, 4%); } .poll__chart { background: darken($purple, 4%); } .muted .poll__chart { background: rgba($purple, 0.8); } .poll__chart.leading { background: $pink; } .muted .poll__chart.leading { background: rgba($pink, 0.8); } .status { border-bottom: 1px solid lighten(#eeeeee, 4%); } .detailed-status__action-bar { border-top: 1px solid lighten($purple, 4%); border-bottom: 1px solid lighten($purple, 4%); } .search__input { @media screen and (max-width: $no-gap-breakpoint) { border-top: 0; border-bottom: 0; } background: $green; border: 1px solid lighten($green, 8%); } .search__input { &:focus { background: $purple; border: 1px solid lighten($purple, 8%); } } .list-editor .search .search__input { border-top: 0; border-bottom: 0; } .compose-form__poll-wrapper select { background: $simple-background-color url("data:image/svg+xml;utf8,") no-repeat right 8px center / auto 16px; } .compose-form__poll-wrapper, .compose-form__poll-wrapper .poll__footer { border-top-color: lighten($ui-base-color, 8%); } .notification__filter-bar, .account__section-headline { background: $green; border: 1px solid lighten($green, 8%); border-top: 0; } .notification__filter-bar button { background: $green; } .compose-form .compose-form__buttons-wrapper { background: $ui-base-color; border: 1px solid lighten($ui-base-color, 8%); border-top: 0; } .drawer__inner { background: $pink; border: 1px solid lighten($pink, 8%); } .drawer__header { background: $blue; border: 1px solid lighten($blue, 8%); } .drawer__header a { &:active, &:focus, &:hover { background: lighten($blue, 4%); } } .drawer__inner__mastodon { background: $pink; } // Change the colors used in compose-form .compose-form { .compose-form__modifiers { .compose-form__upload__actions .icon-button { color: lighten($white, 7%); &:active, &:focus, &:hover { color: $white; } } .compose-form__upload-description input { color: lighten($white, 7%); &::placeholder { color: lighten($white, 7%); } } } .compose-form__buttons-wrapper { background: darken($ui-base-color, 6%); } .autosuggest-textarea__suggestions { background: darken($ui-base-color, 6%); } .autosuggest-textarea__suggestions__item { &:hover, &:focus, &:active, &.selected { background: lighten($ui-base-color, 4%); } } } .account__header__tabs__buttons .icon-button { border-color: lighten($purple, 8%); } .emoji-mart-bar { border-color: lighten($ui-base-color, 4%); &:first-child { background: darken($ui-base-color, 6%); } } .emoji-mart-search input { background: rgba($ui-base-color, 0.3); border-color: $ui-base-color; } // Change the background colors of statuses .focusable:focus { background: darken($green, 2%); } .status.status-direct { background: darken($ui-base-color, 2%); } .focusable:focus .status.status-direct { background: $ui-base-color; } .status.status-direct:not(.read) { background: $ui-base-color; border-bottom-color: lighten($ui-base-color, 4%); } .detailed-status, .detailed-status__action-bar { background: darken($purple, 10%); } .reply-indicator { background: darken($purple, 8%); } // Change the background colors of status__content__spoiler-link .reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link { background: $pink; &:hover { background: lighten($pink, 4%); } } // Change the background colors of media and video spoilers .media-spoiler, .video-player__spoiler { background: $ui-base-color; } .privacy-dropdown.active .privacy-dropdown__value.active .icon-button { color: $white; } .account-gallery__item a { background-color: $ui-base-color; } // Change the colors used in the dropdown menu .dropdown-menu { background: $white; &__arrow { &.left { border-left-color: $white; } &.top { border-top-color: $white; } &.bottom { border-bottom-color: $white; } &.right { border-right-color: $white; } } &__item { a { background: $white; color: $darker-text-color; } } &__container { &__header { background: $white; border-bottom: 1px solid lighten($purple, 16%); } } } body.admin { background: $cream; } .card > a:hover { .card__bar { background: $blue; } } .batch-table__toolbar { background: $green; } .batch-table__row { border-top: 0; border: 1px solid #fffdef; background: $blue; } .batch-table__row:nth-child(2n) { background: $green; } .filters .filter-subset a { border-bottom: 2px solid $green; } .filters .filter-subset a:hover, .filters .filter-subset a:focus { border-bottom: 2px solid lighten($green, 8%); } .filters .filter-subset a.selected:hover, .filters .filter-subset a.selected:focus { border-bottom: 2px solid lighten($blueberry, 8%); } .table > tbody > tr:nth-child(odd) > td, .table > tbody > tr:nth-child(odd) > th { background: $green; } .table td, .table th { padding: 8px; line-height: 18px; vertical-align: top; border-top: 1px solid $green; text-align: left; background: $blue; } .card__bar { background: $purple; } .admin-wrapper .sidebar { background: $green; } .admin-wrapper .content h2, .admin-wrapper .content h4 { border-bottom: 1px solid #eeeeee; } .admin-wrapper { .content { &__heading { &__tabs { a { &.selected { color: $white; } } } } } } .admin-wrapper .sidebar ul a.selected { background: $purple; border-bottom: 1px solid $purple; } .admin-wrapper .sidebar ul a:hover { background: lighten($blue, 8%); border-bottom: 1px solid lighten($blue, 8%); } .admin-wrapper .sidebar ul a.selected:hover { background: lighten($purple, 4%); border-bottom: 1px solid lighten($purple, 4%); } .selected ul li a { background: $blue; border-bottom: 1px solid $blue; } .admin-wrapper .sidebar ul .simple-navigation-active-leaf a { background: $blueberry; border-bottom: 1px solid $blueberry; } .admin-wrapper .sidebar ul .simple-navigation-active-leaf a:hover { background: lighten($blueberry, 4%); border-bottom: 1px solid lighten($blueberry, 4%); } .dashboard__counters > div > div, .dashboard__counters > div > a { background: $pink; } .dashboard__counters > div > a:hover, .dashboard__counters > div > a:focus { background: lighten($pink, 4%); } // Change the text colors on inverted background .privacy-dropdown__option.active, .privacy-dropdown__option:hover, .privacy-dropdown__option.active .privacy-dropdown__option__content, .privacy-dropdown__option.active .privacy-dropdown__option__content strong, .privacy-dropdown__option:hover .privacy-dropdown__option__content, .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, .dropdown-menu__item a:active, .dropdown-menu__item a:focus, .dropdown-menu__item a:hover, .actions-modal ul li:not(:empty) a.active, .actions-modal ul li:not(:empty) a.active button, .actions-modal ul li:not(:empty) a:active, .actions-modal ul li:not(:empty) a:active button, .actions-modal ul li:not(:empty) a:focus, .actions-modal ul li:not(:empty) a:focus button, .actions-modal ul li:not(:empty) a:hover, .actions-modal ul li:not(:empty) a:hover button, .admin-wrapper .sidebar ul .simple-navigation-active-leaf a, .simple_form .block-button, .simple_form .button, .simple_form button { color: $white; } .dropdown-menu__separator { border-bottom-color: lighten($ui-base-color, 4%); } // Change the background colors of modals .actions-modal, .boost-modal, .confirmation-modal, .mute-modal, .report-modal, .embed-modal, .error-modal, .onboarding-modal { background: $ui-base-color; } .column-header__collapsible-inner { background: darken($blue, 4%); border: 1px solid lighten($blue, 8%); border-top: 0; } .boost-modal__action-bar, .confirmation-modal__action-bar, .mute-modal__action-bar, .onboarding-modal__paginator, .error-modal__footer { background: darken($ui-base-color, 6%); .onboarding-modal__nav, .error-modal__nav { &:hover, &:focus, &:active { background-color: darken($ui-base-color, 12%); } } } .display-case__case { background: $white; } .embed-modal .embed-modal__container .embed-modal__html { background: $white; &:focus { background: darken($ui-base-color, 6%); } } .react-toggle-track { background: $ui-secondary-color; } .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { background: darken($ui-secondary-color, 10%); } .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { background: lighten($ui-highlight-color, 10%); } // Change the default color used for the text in an empty column or on the error column .empty-column-indicator, .error-column { color: $primary-text-color; background: $white; } .tabs-bar { background: $blue; border: 1px solid lighten($blue, 8%); border-bottom: 0; @media screen and (max-width: $no-gap-breakpoint) { border-top: 0; } &__link { padding-bottom: 14px; border-bottom-width: 1px; border-bottom-color: lighten($blue, 8%); &:hover, &:active, &:focus { background: lighten($blue, 4%); } &.active { &:hover, &:active, &:focus { background: transparent; border-bottom-color: $ui-highlight-color; } } } } // Change the default colors used on some parts of the profile pages .activity-stream-tabs { background: $account-background-color; border-bottom-color: lighten($ui-base-color, 8%); } .getting-started__wrapper, .getting-started, .flex-spacer { background: $purple; } .box-widget, .nothing-here, .page-header, .directory__tag > a, .directory__tag > div, .landing-page__call-to-action, .contact-widget, .landing .hero-widget__text, .landing-page__information.contact-widget { background: $white; border: 1px solid lighten(#eeeeee, 4%); @media screen and (max-width: $no-gap-breakpoint) { border-left: 0; border-right: 0; border-top: 0; } } .directory__tag a:hover, .directory__tag a:focus { background: $blue; border: 1px solid lighten($blue, 4%); } .page-header { background: $purple; border: 1px solid lighten($purple, 4%); } .directory, .nothing-here, .directory__tag a { background: $green; border: 1px solid lighten($green, 4%); } .box-widget { background: $blue; border: 1px solid lighten($blue, 4%); } .landing__grid__column-login .box-widget { background: $pink; border: 1px solid lighten($pink, 4%); } .landing .hero-widget__text { border-top: 0; border-bottom: 0; } .simple_form { input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea { border-color: $blueberry; &:hover { border-color: $bilberry; } } } .landing .hero-widget__footer { background: $purple; border: 1px solid lighten($purple, 8%); border-top: 0; @media screen and (max-width: $no-gap-breakpoint) { border: 0; } } .brand__tagline { color: $ui-secondary-color; } .landing-page__call-to-action { background: $purple; } .landing-page__information.contact-widget { background: $green; } .directory__tag > a { &:hover, &:active, &:focus { background: $ui-base-color; } @media screen and (max-width: $no-gap-breakpoint) { border: 0; } } .directory__tag.active > a, .directory__tag.active > div { border-color: $ui-highlight-color; &, h4, h4 small, .fa, .trends__item__current { color: $white; } &:hover, &:active, &:focus { background: $ui-highlight-color; } } .batch-table { &__toolbar, &__row, .nothing-here { border-color: lighten($ui-base-color, 8%); } } .activity-stream { border: 1px solid lighten($ui-base-color, 8%); &--under-tabs { border-top: 0; } .entry { background: $account-background-color; .detailed-status.light, .more.light, .status.light { border-bottom-color: lighten($ui-base-color, 8%); } } .status.light { .status__content { color: $primary-text-color; } .display-name { strong { color: $primary-text-color; } } } } .accounts-grid { .account-grid-card { .controls { .icon-button { color: $darker-text-color; } } .name { a { color: $primary-text-color; } } .username { color: $darker-text-color; } .account__header__content { color: $primary-text-color; } } } .simple_form, .table-form { .warning { box-shadow: none; background: rgba($error-red, 0.5); text-shadow: none; } .recommended { border-color: $ui-highlight-color; color: $ui-highlight-color; background-color: $blue; } } .compose-form .compose-form__warning { border-color: $ui-highlight-color; background-color: darken($blue, 6%); &, a { color: $ui-highlight-color; } } .status__content, .reply-indicator__content { a { color: $highlight-text-color; } } .status.status-direct { background: darken($green, 6%); } .button.logo-button { color: $white; svg { fill: $white; } } .public-layout { .activity-stream { border-color: lighten(#eeeeee, 4%); } .account__section-headline { background: $green; border: 1px solid lighten($green, 8%); @media screen and (max-width: $no-gap-breakpoint) { border-top: 0; } } .header, .public-account-header, .public-account-bio { box-shadow: none; } .hero-widget__text { background: darken($blue, 4%); border: 1px solid lighten($blue, 4%); } .public-account-bio { background: $purple; border: 1px solid lighten($purple, 4%); } .header { background: $ui-base-color; border: 1px solid lighten($ui-base-color, 8%); @media screen and (max-width: $no-gap-breakpoint) { border: 0; } .brand { &:hover, &:focus, &:active { background: darken($pink, 4%); } } } .public-account-header { &__image { background: lighten($ui-base-color, 12%); &::after { box-shadow: none; } } &__bar { &::before { background: $account-background-color; border: 1px solid lighten($ui-base-color, 8%); border-top: 0; } .avatar img { border-color: $account-background-color; } @media screen and (max-width: $no-columns-breakpoint) { background: $account-background-color; border: 1px solid lighten($ui-base-color, 8%); border-top: 0; } } &__tabs { &__name { h1, h1 small { color: $white; @media screen and (max-width: $no-columns-breakpoint) { color: $primary-text-color; } } } } &__extra { .public-account-bio { border: 0; } .public-account-bio .account__header__fields { border-color: lighten($purple, 8%); } } } } .notification__filter-bar button.active::after, .account__section-headline a.active::after { border-color: transparent transparent $white; } .hero-widget, .box-widget, .contact-widget, .landing-page__information.contact-widget, .moved-account-widget, .memoriam-widget, .activity-stream, .nothing-here, .directory__tag > a, .directory__tag > div, .card > a, .page-header, .compose-form .compose-form__warning { box-shadow: none; } body { background: $cream; } .public-layout .header, .public-layout .public-account-header__image { background: $pink; border: 1px solid lighten($pink, 8%); } .public-layout .header .nav-button { background: darken($pink, 4%); &:hover, &:focus { background: darken($pink, 6%); } } .public-layout .public-account-header__bar .avatar img { border: 4px solid $blue; } .public-layout .public-account-header__bar::before { background: $blue; border: 1px solid lighten($blue, 8%); } .public-layout .public-account-header__tabs__tabs .counter { border-right: 1px solid lighten($blue, 8%); } .public-layout .public-account-header__tabs__tabs .counter::after { border-bottom: 4px solid lighten($blue, 12%); } .public-layout .public-account-header__image { background: $pink; } .notification__filter-bar button.active::before, .notification__filter-bar button.active::after, .notification__filter-bar a.active::before, .notification__filter-bar a.active::after, .account__section-headline button.active::before, .account__section-headline button.active::after, .account__section-headline a.active::before, .account__section-headline a.active::after { border-color: transparent transparent $white; } .public-layout .footer .grid .column-2 h4 a, .public-layout .footer, .public-layout .footer h4, .public-layout .footer ul a { color: $blueberry; } .public-layout .footer .brand svg { fill: $blueberry; } .account__header__image { background: $pink; } .detailed-status__wrapper { background: $purple; } a.status-card.compact:hover { background: $purple; border: 1px solid lighten($purple, 4%); } .column-inline-form { background: $blue; border: 1px solid lighten($blue, 4%); } .account { border-bottom: 1px solid #eeeeee; } .notification-favourite .status.status-direct:not(.read) { background: transparent; border-bottom: 1px solid lighten(#eeeeee, 4%); } .loading-indicator__figure { border: 0 solid lighten($green, 12%); } .account__header__bio .account__header__fields { border-top: 1px solid lighten($purple, 8%); border-bottom: 1px solid lighten($purple, 8%); } .public-account-bio .account__header__fields { border-bottom: 1px solid lighten($purple, 8%); } .account__header__fields dl { border-bottom: 1px solid lighten($purple, 8%); } @media screen and (max-width: 600px) { .public-layout .public-account-header__bar { background: $blue; } .public-layout .public-account-header__extra .public-account-bio .account__header__fields { border-color: lighten($purple, 8%); background: $purple; } .admin-wrapper .sidebar ul a, .admin-wrapper .sidebar ul ul a { border-bottom: 1px solid $blue; } } .audio-player { background: $ui-base-color; border: 1px solid lighten($ui-base-color, 8%); &__progress-placeholder { background-color: rgba(lighten($ui-highlight-color, 8%), 0.5); } &__wave-placeholder { background-color: lighten($ui-base-color, 16%); } } .audio-player .video-player__controls button, .audio-player .video-player__time-sep, .audio-player .video-player__time-current, .audio-player .video-player__time-total { color: $ui-primary-color; } button.icon-button i.fa-retweet { background-image: url("data:image/svg+xml;utf8,"); &:hover { background-image: url("data:image/svg+xml;utf8,"); } } .status-private 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,"); } .report-dialog-modal { background: $white; } .compose-form__upload__warning > button { color: $white !important; } .dropdown-menu__item.edited-timestamp__history__item { border-bottom: 1px solid lighten($purple, 16%); &.dropdown-menu__item--text, button { background: $white; } } #navigation-panel__publish { i { color: $ui-base-lighter-color; } } #navigation-panel__publish.active { i { background-color: darken($ui-highlight-color, 20%); color: darken($ui-highlight-color, 30%); } } // Tablet layout @media screen and (max-width: $no-gap-breakpoint - 1px) { .tabs-bar__wrapper { z-index: 2; } .columns-area--mobile { z-index: 0; } .column-header { box-sizing: border-box; height: 48px; } } // Mobile layout @media screen and (max-width: $no-gap-breakpoint - 285px - 1px) { .tabs-bar__wrapper { z-index: 2; } .columns-area--mobile { z-index: 0; } .column-header { box-sizing: border-box; height: 48px; } } .rules-list { background-color: $cream; } .button.button-tertiary { color: $darker-text-color; }