You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1048 lines
21 KiB
1048 lines
21 KiB
// 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, |
|
.account__header__bar { |
|
background: $purple; |
|
} |
|
|
|
.column-header__button.active { |
|
color: $ui-highlight-color; |
|
|
|
&:hover, |
|
&:active, |
|
&:focus { |
|
color: $ui-highlight-color; |
|
background: lighten($purple, 4%); |
|
} |
|
} |
|
|
|
.account__header__bar .avatar .account__avatar { |
|
border-color: $white; |
|
} |
|
|
|
.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 { |
|
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,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>") 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 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}"/></svg>') no-repeat bottom / 100% auto; |
|
} |
|
|
|
// 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; |
|
} |
|
} |
|
} |
|
|
|
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 .sidebar ul a.selected { |
|
background: $purple; |
|
} |
|
|
|
.admin-wrapper .sidebar ul a:hover { |
|
background: lighten($blue, 8%); |
|
} |
|
|
|
.selected ul li a { |
|
background: $blue; |
|
} |
|
|
|
.admin-wrapper .sidebar ul .simple-navigation-active-leaf a { |
|
background: $blueberry; |
|
} |
|
|
|
.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: $blue; |
|
border: 1px solid lighten($blue, 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($ui-base-color, 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 $purple; |
|
} |
|
|
|
.public-layout .public-account-header__bar:before { |
|
background: $purple; |
|
} |
|
|
|
.public-layout .public-account-header__tabs__tabs .counter { |
|
border-right: 1px solid lighten($purple, 8%); |
|
} |
|
|
|
.public-layout .public-account-header__tabs__tabs .counter::after { |
|
border-bottom: 4px solid lighten($purple, 8%); |
|
} |
|
|
|
.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%); |
|
} |
|
|
|
@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($blue, 8%); |
|
} |
|
}
|
|
|