CSS Tweaks for Mastodon

tweaks-for-mastodon.css

/* Cassidy’s CSS tweaks for mastodon.blaede.family
  
  Inspired in part by TangerineUI:
  https://github.com/nileane/TangerineUI-for-Mastodon/

  …but much smaller in scope.
  by @cassidy@blaede.family
*/

:root {
  --version: "2.1.2";
  --color-accent: #6364ff;
  --bg: white;
  --bg-alt: color-mix(in oklab, var(--bg), var(--color-accent) 10%);
  --avatar-size: 46px;
  --avatar-gap: 10px;
  --logo: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%20216.414%20232.01%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20style%3D%22fill%3A%23000%22%20d%3D%22M%20107.86714%200%20C%2078.206142%200.242%2049.676743%203.4498573%2033.049743%2011.085857%20C%2033.049743%2011.085857%200.067294364%2025.846832%200.067294364%2076.176832%20C%200.067294364%2087.701832%20-0.15205204%20101.47292%200.21294796%20116.08592%20C%201.409948%20165.30592%209.2279453%20213.81518%2054.735945%20225.86018%20C%2075.717945%20231.41418%2093.729367%20232.58043%20108.23937%20231.78343%20C%20134.54937%20230.32443%20149.32987%20222.39686%20149.32987%20222.39686%20L%20148.45594%20203.30006%20C%20148.45594%20203.30006%20129.66286%20209.23422%20108.54686%20208.51122%20C%2087.625858%20207.79322%2065.532095%20206.24891%2062.148095%20180.56191%20C%2061.835095%20178.30591%2061.678767%20175.89415%2061.678767%20173.36015%20C%2061.678767%20173.36015%2082.212367%20178.3827%20108.23937%20179.5747%20C%20124.15437%20180.3047%20139.09072%20178.64865%20154.24972%20176.83965%20C%20183.31972%20173.36865%20208.61908%20155.449%20211.79908%20139.083%20C%20216.81208%20113.301%20216.41144%2076.176832%20216.41144%2076.176832%20C%20216.41144%2025.846832%20183.42899%2011.085857%20183.42899%2011.085857%20C%20166.80199%203.4498573%20138.25541%200.242%20108.59541%200%20L%20107.86714%200%20z%20M%2074.302079%2039.326472%20C%2086.657079%2039.326472%2095.999651%2044.069157%20102.18665%2053.568157%20L%20108.207%2063.650623%20L%20114.22735%2053.568157%20C%20120.41235%2044.070157%20129.75592%2039.326472%20142.11192%2039.326472%20C%20152.78892%2039.326472%20161.40353%2043.073145%20167.97353%2050.396145%20C%20174.34253%2057.718145%20177.50575%2067.622112%20177.50575%2080.077112%20L%20177.50575%20141.02505%20L%20153.35962%20141.02505%20L%20153.35962%2081.873507%20C%20153.35962%2069.404507%20148.12303%2063.068009%20137.62903%2063.068009%20C%20126.02703%2063.068009%20120.21533%2070.572744%20120.21533%2085.417744%20L%20120.21533%20117.80139%20L%2096.214854%20117.80139%20L%2096.214854%2085.417744%20C%2096.214854%2070.572744%2090.386973%2063.068009%2078.784973%2063.068009%20C%2068.290973%2063.068009%2063.054384%2069.404507%2063.054384%2081.873507%20L%2063.054384%20141.02505%20L%2038.908254%20141.02505%20L%2038.908254%2080.077112%20C%2038.908254%2067.622112%2042.070473%2057.719145%2048.440473%2050.396145%20C%2055.009473%2043.074145%2063.623079%2039.326472%2074.302079%2039.326472%20z%22%2F%3E%3C%2Fsvg%3E");

  --avatar-border-radius: 999px;
  --color-bg-primary: var(--bg);
  --color-bg-secondary: color-mix(in oklab, var(--color-bg-primary), var(--color-accent) 10%);
  --color-bg-brand-soft: color-mix(in oklab, var(--color-accent), var(--color-bg-primary) 33%);
  --color-bg-brand-softest: color-mix(in oklab, var(--color-accent), var(--color-bg-primary) 85%);
  --color-bg-brand-base: var(--color-accent);
  --color-bg-brand-base-hover: color-mix(in oklab, var(--color-bg-brand-base), black 20%);
  --color-border-primary: color-mix(in oklab, var(--color-text-brand), var(--color-bg-primary) 75%);
  --color-border-brand: color-mix(in oklab, var(--color-accent), var(--color-bg-primary) 50%);
  --color-border-brand-soft: color-mix(in oklab, var(--color-accent), var(--color-bg-primary) 75%);
  --color-text-secondary: color-mix(in oklab, var(--color-text-primary), var(--color-bg-primary));
  --color-text-brand: var(--color-accent);
  --thread-margin: calc(var(--avatar-size) + var(--avatar-gap));
}

[data-color-scheme="dark"] {
  --bg: black;

  --color-bg-primary: color-mix(in oklab, var(--bg), var(--color-accent) 33%);
  --color-text-brand: color-mix(in oklab, var(--color-accent), white 30%);
}

/* COLUMN LAYOUT */

.app-body .columns-area__panels__pane--navigational {
  order: 1;
}

.app-body .columns-area__panels__main {
  order: 2;
}

.app-body .columns-area__panels__pane--compositional {
  order: 3;
}

@media screen and (max-width: 1174px) {
  .columns-area__panels__pane--navigational .navigation-panel {
    border-inline-end: 1px solid var(--color-border-primary);
    border-inline-start: none;
  }
}

/* LOGO */

.app-body .column-link.column-link--logo,
.app-body .ui__header__logo {
  display: inline-flex;
  flex-grow: unset;
  padding: 0;
  margin-inline-start: 10px;
  border: 0;
  width: 48px;
  height: 48px;
  background-image: none;
  background-color: var(--color-text-brand);
  mask-image: var(--logo);
  mask-size: 75%;
  mask-repeat: no-repeat;
  mask-position: center;
}

.app-body .column-link.column-link--logo svg,
.app-body .ui__header__logo svg {
  display: none;
}

.app-body .column-header__title .logo {
  opacity: 0;
  visibility: hidden;
}

.app-body .column-header__title:has(> .logo)::before {
  content: " ";
  display: block;
  position: absolute;
  width: 28px;
  height: 28px;
  inset-inline-start: 8px;
  inset-block-start: 14px;
  background-image: none;
  background-color: var(--color-text-brand);
  mask-image: var(--logo);
  mask-repeat: no-repeat;
}

/* STATUSES */

.status__content, 
.edit-indicator__content, 
.reply-indicator__content,
.status__action-bar,
.detailed-status__meta,
.status__quote,
.status__prepend,
.status-card,
.video-player,
.content-warning,
.media-gallery,
.hashtag-bar,
.more-from-author {
  max-width: calc(100% - var(--thread-margin));
  margin-inline-start: var(--thread-margin);
}

.conversation .status__content,
.conversation .status__action-bar {
  max-width: initial;
  margin-inline-start: initial;
}

.status__quote {
  --avatar-size: 32px;
  --thread-margin: calc(var(--avatar-size) + var(--avatar-gap));
}

.icon-button {
  --default-icon-color: color-mix(in oklab, var(--color-text-primary), var(--color-bg-primary) 67%);
}

.status__line {
  border-inline-start-width: 1px;
}

.status__prepend__icon {
  margin-inline-start: -24px;
}

.media-gallery {
  border: 1px solid var(--color-border-primary); 
}

/* BORDER RADIUS */

.status-card,
.compose-form__highlightable,
.media-gallery,
.media-gallery__item,
.video-player {
  border-radius: 1em;
}

.content-warning,
.search__input,
.navigation-panel__compose-button {
  border-radius: 0.5em;
}

.btn,
.simple_form .btn,
.button,
.button--compact,
.icon-button,
.hashtag-bar a,
.hashtag-header__header__buttons .icon-button,
._comp_account_header__buttonsDesktop .icon-button,
._comp_account_header__buttonsMobile .icon-button {
  border-radius: 999px;
}

/* BACKGROUND COLORS */
html,
body {
  background-color: var(--bg-alt);
}

.app-body .columns-area__panels__main {
  background-color: var(--bg-alt);
}

.app-body .scrollable, .app-body .column > .scrollable { 
  background-color: var(--color-bg-primary);
}

@media screen and (min-width: 1175px) {
  .tabs-bar__wrapper {
    border-top-color: var(--bg-alt);
  }
}

.app-body .navigation-panel .column-link .icon {
  opacity: 0.75;
  color: var(--color-text-brand);
}

.app-body .navigation-panel .column-link.active {
  font-weight: bold;
}

.app-body .navigation-panel .column-link.active .icon {
  opacity: 1;
}