mastodon.css

/*
SETTINGS

  All theme settings can be modified here.
  You shouldn’t need to dive into any of the other sections
  unless you plan on doing things beyond changing colors and fonts. */

body {
  --font: sans-serif;
  --toot-font: var(--font); /* Modify if different from the interface font */

  --actionable: #ff945e;
  --actionable-hover: #ffac93;

  --text: #000;
  --text-secondary: rgba(0,0,0,.6);
  --background: #fff;
  --background-alt: #f7f9f9;

  --body: #eee; /* image URLs and gradints can also be placed here */
}


/* FONTS */

body,
body.system-font {
  font-family: var(--font);
}
.status__content {
  font-family: var(--toot-font);
}

.reply-indicator__content p, .status__content p {
  font-size: 18px;
  line-height: 1.3;
}


/* PRIMARY COLORS */

a.status-link,
.public-layout .public-account-bio .account__header__fields a,
.reply-indicator__content a, .status__content a,
.column-back-button,
.account__header .account__header__username,
.account__header__fields a,
.emoji-mart-anchor-selected,
.column-header>.column-header__back-button,
.column-link:hover,
.reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link,
.text-icon-button.active {
  color: var(--actionable);
}
a.status-link:focus,
a.status-link:hover,
.public-layout .public-account-bio .account__header__fields a:hover,
.reply-indicator__content a, .status__content a:hover,
.column-back-button:hover,
.account__header .account__header__username:hover,
.account__header__fields a:hover,
.notification__display-name:hover,
.column-header>.column-header__back-button:hover,
.reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link:hover {
  color: var(--actionable-hover);
}

.button,
.admin-wrapper .sidebar ul ul a.selected,
.simple_form .block-button, .simple_form .button, .simple_form button,
.public-layout .public-account-header__tabs__tabs .counter.active:after,
.button.logo-button,
.emoji-mart-anchor-bar,
.privacy-dropdown__option.active, .privacy-dropdown__option:hover,
.privacy-dropdown.active .privacy-dropdown__value.active {
  background-color: var(--actionable);
}

.public-layout .public-account-header__tabs__tabs .counter.active:after {
  border-bottom-color: var(--actionable);
}

.button:hover,
.admin-wrapper .sidebar ul ul a.selected:hover,
.simple_form .block-button:hover, .simple_form .button:hover, .simple_form button:hover,
.button.logo-button:hover {
  background-color: var(--actionable-hover);
}
.simple_form input[type=email]:active, .simple_form input[type=email]:focus, .simple_form input[type=number]:active, .simple_form input[type=number]:focus, .simple_form input[type=password]:active, .simple_form input[type=password]:focus, .simple_form input[type=text]:active, .simple_form input[type=text]:focus, .simple_form textarea:active, .simple_form textarea:focus {
  border-bottom-color: var(--actionable-hover);
}


/* BASE COLORS */

body,
body.app-body,
.ui {
  background: var(--body);
  color: var(--text);
}

.public-layout .public-account-header__tabs__tabs .counter .counter-number,
.reply-indicator__content, .status__content,
.muted .status__content a, .muted .status__content p, .muted .status__display-name strong,
.status__prepend,
.account__action-bar__tab strong,
.public-layout .public-account-header__tabs__name h1,
.public-layout .public-account-header__extra__links a strong {
  color: var(--text);
  text-shadow: none;
}

.public-layout .public-account-header__tabs__tabs .counter,
.account__section-headline a.active,
.account__section-headline a,
.account__display-name strong, .status__display-name strong,
.status__display-name,
.status__relative-time,
.account__header__fields dt,
.account__header__fields dd,
.public-layout .public-account-bio .roles, .public-layout .public-account-bio__extra,
.icon-button,
.public-layout .footer,
.public-layout .footer h4,
.public-layout .footer ul a,
.public-layout .footer .grid .column-2 h4 a,
.status__prepend .status__display-name strong,
.notification__message,
.account__action-bar__tab>span,
.account__header .account__header__fields dd,
.account__header .account__header__fields dt,
.navigation-bar strong,
.navigation-bar,
.detailed-status__display-name strong,
.detailed-status__display-name span, .detailed-status__display-name strong,
.flex-spacer, .getting-started, .getting-started__wrapper,
.getting-started__footer p,
.getting-started__footer a,
.column-link,
.public-layout .public-account-header__tabs__name h1 small,
.public-layout .public-account-header__extra__links a
 {
  color: var(--text-secondary);
}

.muted {
  opacity: .6;
  transition: all .2s ease-in-out;
}
.muted:hover {
  opacity: 1;
}

.drawer__inner,
.drawer__header,
.account__section-headline,
.column-header,
.column-header__button,
.column-header__button:hover,
.column-back-button,
.account__header,
.drawer__tab,
.drawer__tab:hover,
.account__header .account__header__fields,
.drawer__header a:hover,
.search__input,
.status.status-direct,
.notification.notification-follow.focusable,
.focusable:focus,
.detailed-status,
.detailed-status__action-bar,
.column-link__badge, .column-subheading,
.column-link,
.column-link:hover,
.public-layout .public-account-header__bar {
  background: var(--background-alt);
  color: var(--text-secondary);
}

.public-layout .header,
.public-layout .public-account-header__bar:before,
.activity-stream .entry,
.public-layout .public-account-bio,
.column>.scrollable,
.flex-spacer, .getting-started, .getting-started__wrapper,
.column-link,
.reply-indicator__content .status__content__spoiler-link, .status__content .status__content__spoiler-link {
  background: var(--background);
}

.public-layout .public-account-header__bar .avatar img {
  border-color: var(--background);
}

.account__header__fields dt,
.account__header .account__header__fields dt,
.account__header>div,
.account__header .account__header__fields dd {
  background: none;
}

.public-layout .public-account-header__tabs__tabs .counter,
.public-layout .public-account-header__tabs__tabs .counter:after,
.account__section-headline,
.account__action-bar__tab,
.account__action-bar,
.account__header .account__header__fields dl {
  border-color: rgba(100,100,100,.1);
}

.public-layout .public-account-header__tabs__tabs .counter:hover:after,
.account__header__fields dl,
.status,
.account__header__fields,
.status.account__header .account__header__fields dl,
.account,
.detailed-status__action-bar,
.public-layout .public-account-header__extra .public-account-bio .account__header__fields {
  border-color: rgba(100,100,100,.2);
}

.account__section-headline a.active:after,
.account__section-headline a.active:before {
  border-color: transparent transparent rgba(100,100,100,.2);
}

::-webkit-scrollbar-track {
  background: var(--background-alt) !important;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.1) !important;
}


/* REMOVE ELEMENTS*/

.drawer__inner__mastodon,
.hero-widget,
.public-layout .header {
  display: none;
}

.public-layout {
  padding-top: 0;
}


/* ENHANCEMENTS */

.activity-stream {
  overflow: visible;
}
.activity-stream .entry {
  transition: all .2s ease-in-out;
}
@media screen and (min-width: 600px) {
.activity-stream .entry:hover {
  transform: scale(1.025);
  box-shadow: 0 1px 6px rgba(0,0,0,.3);
  z-index: 100;
}
}