Mastodon custom.scss for https://mstdn.club default theme

custom.scss

@import 'application';

/*
 * Mastodon custom.scss for https://mstdn.club default theme
 * by d6rkaiz
 *
 * original css created by 生駒菜々（やっきゅん）
 * ref: https://userstyles.org/styles/141389/lite-masudon-kun-lite,
 *      https://userstyles.org/styles/141517/theme
*/

$tab_color: #283593;
$theme_color: #f5f5ff;
$theme_color_rgba: rgba(245, 245, 255, 0.7);
$link_color: #ff5722;
$font_color: #222;
$ui_color: #444B5D;

.drawer__inner, .ui {
  background-color: $ui_color;
}

.scrollable, .drawer__inner.darker, .search-results__section *, .tabs-bar__link:hover {
  background-color: $theme_color !important;
  color: $font_color !important;
}

.drawer__header > a:hover {
  background-color: $theme_color !important;
  color: $font_color !important;
  * {
    background-color: $theme_color !important;
    color: $font_color !important;
  }
}

.empty-column-indicator {
  background-color: $theme_color !important;
  color: $font_color !important;
}

.scrollable *:not(.fa) {
  background-color: $theme_color;
  color: $font_color;
}

.account__header {
  div *:not(.account__header__avatar), span {
    background: rgba(0, 0, 0, 0) !important;
  }
}

.account__header__content, .account__header .fa, .muted a.status__content__spoiler-link, .status__content__spoiler-link:hover > span {
  background: rgba(0, 0, 0, 0) !important;
}

.drawer__tab {
  > .fa, &:hover > .fa {
    background: rgba(0, 0, 0, 0) !important;
  }
}

.account__header {
  > div {
    background: $theme_color_rgba !important;
  }
  * {
    color: $font_color !important;
  }
}

.status__content a {
  color: $link_color !important;
  > span {
    color: $link_color !important;
  }
}

span.ellipsis, .active, .search__icon * {
  color: $link_color !important;
}

.tabs-bar__link.active {
  border-color: $link_color;
}

.compose-form__buttons .active {
  background-color: #282c37;
}

.button {
  background-color: $link_color;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  &:hover {
    background-color: $link_color;
    opacity: 0.8;
  }
}

.search *, .compose-form__buttons .active {
  border-radius: 0.4em;
}

.search__input {
  background-color: $theme_color;
  &:focus {
    background-color: $theme_color;
  }
}

.status__content__spoiler-link *:hover {
  color: #FFF;
}

.column-header, .column-icon, .tabs-bar {
  background-color: $tab_color;
  color: #FFF;
}

.drawer__header {
  background-color: $tab_color;
  color: #FFF;
  * {
    background-color: $tab_color;
    color: #FFF;
  }
}

.column-back-button, .search-results__header {
  background-color: $tab_color;
  color: #FFF;
}

.status__content__spoiler-link:hover > span {
  color: #fff !important;
}

.dropdown__content > ul {
  width: 25vw !important;
  * {
    width: 25vw !important;
  }
}

@media (max-width: 1024px) {
  .dropdown__content > ul {
    width: 50vw !important;
    * {
      width: 50vw !important;
    }
  }
}

@media (max-width: 500px) {
  .dropdown__content > ul {
    width: 90vw !important;
    * {
      width: 90vw !important;
    }
  }
}

@media (min-width: 1025px) {
  .drawer {
    width: 20%;
    max-width: 400px;
  }
  .column {
    width: calc(80%/3);
    max-width: 800px;
  }
}

@media (min-width: 2560px) {
  .drawer, .column {
    margin: 0;
    height: 100vh;
  }
}

.columns-area > div {
  &:nth-child(1) {
    order: 1 !important;
  }
  &:nth-child(2) {
    order: 3 !important;
  }
  &:nth-child(3) {
    order: 4 !important;
  }
  &:nth-child(4) {
    order: 2 !important;
  }
}