theme-mastodon-light-obsidian.css

/* 
Mastodon v4.4 Obsidian Light Theme
author: @timotheegoguely@mastodon.design
last update: 2025-09-02 17:30
*/

:root {
  --primary-color: #6364ff; /* $blurple-500 Brand Purple */
  --primary-color-hover: #563acc; /* $blurple-600 Iris */
  --icon-color: #9c9cc9;
  --icon-color-hover: #fff;
  --label-color: #606085;
  --rich-text-text-color: currentColor;
  --rich-text-decorations-color: var(--background-border-color);
  --rich-text-container-color: var(--surface-variant-active-background-color);
}

/* Set drawer min-width to 310px max-width to 400px */
.drawer {
  max-width: 400px;
}

/* Responsive columns layout */
@media screen and (min-width: 630.02px) {
  .column, .drawer {
    flex: 1 0 auto;
  }
  .column {
    width: clamp(310px, calc((100% - 400px) / 4), 400px);
  }
}

/* Increase expanded status card titles and descriptions visible lines from 1 to 4 */
.status-card.expanded .status-card__title,
.status-card.expanded .status-card__description {
  white-space: initial;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* Use variables for drawer and status card image icons color */
.drawer__tab,
.status-card__image {
  color: var(--icon-color);
}
.drawer__header a:active,
.drawer__header a:focus,
.drawer__header a:hover {
  color: var(--icon-color-hover);
}

/* Content warning */
.content-warning {
  border-radius: 4px;
}
.content-warning::before,
.content-warning::after {
  background: var(--primary-color);
}

/* Reduce some icons contrast */
.column-link__icon,
.column-header__icon,
.account__section-headline a,
.account__section-headline button,
.notification__filter-bar a,
.notification__filter-bar button {
  color: var(--icon-color);
}
/* Except on compose button icon */
.navigation-panel__compose-button .icon {
  color: currentColor;
}

/* Add border arround announcements and adjust background color */
.announcements {
  background: var(--surface-background-color);
  border-inline: 1px solid var(--background-border-color);
}

/* Adjust reactions bar buttons background color */
.reactions-bar__item {
  background: var(--surface-variant-background-color);
}
.reactions-bar__item:hover,
.reactions-bar__item:active {
  background: var(--surface-variant-active-background-color);
}

/* Make scrollbar background transparent */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: rgba(96,96,133,.25) transparent;
  }
}

/* Harmonize dropdown buttons and badges styles and fix optical centering */
.dropdown-button,
.account__header__badges .account-role {
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0;
  padding: 4px 6px 5px;
}

/* Supporter role */
.account-role[data-account-role-id="4"] svg {
  opacity: 0;
}
.account-role[data-account-role-id="4"]::before {
  content: '';
  width: 15px;
  height: 15px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z' fill='black'/%3E%3C/svg%3E%0A");
  mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z' fill='black'/%3E%3C/svg%3E%0A");
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
  position: absolute;
}

/* Verified */
.verified {
  border-color: var(--background-border-color) !important;
  background: none !important;
}
.verified dt {
  color: var(--label-color) !important;
}


/* Light theme
---------------------------------------------------------------------------- */

/* Color variables */
.theme-mastodon-light {
  --dropdown-border-color: #E0E0E0;
  --dropdown-background-color: #F6F6F6;
  --modal-border-color: #E0E0E0;
  --modal-background-color: var(--background-color-tint);
  --background-border-color: #E0E0E0;
  --background-color: #F6F6F6;
  --background-color-tint: hsla(0,0%,100%,.8);
  --on-surface-color: rgba(221,217,232,.35);
  --icon-color: #606085;
  --icon-color-hover: #000;
  --label-color: #45455f;
  --rich-text-text-color: currentColor;
  --rich-text-decorations-color: var(--icon-color);
  --rich-text-decorations-color: var(--background-border-color);
  --rich-text-container-color: var(--surface-variant-active-background-color);
}
/* Adjust some background colors */
.theme-mastodon-light .status-card__image,
.theme-mastodon-light .column-subheading,
.theme-mastodon-light .hashtag-bar a,
.theme-mastodon-light .icon-button:active,
.theme-mastodon-light .icon-button:focus,
.theme-mastodon-light .icon-button:hover {
  background: var(--on-surface-color);
}

.theme-mastodon-light .status__wrapper-direct,
.theme-mastodon-light .notification-group--direct,
.theme-mastodon-light .notification-ungrouped--direct {
  background: var(--nested-card-background);
}
.theme-mastodon-light [class*="notification-"] .status__wrapper-direct {
  background: transparent;
}
.theme-mastodon-light .detailed-status__wrapper-direct .detailed-status,
.theme-mastodon-light .detailed-status__wrapper-direct .detailed-status__action-bar {
  background: rgba(97,97,255,.1);
}
.theme-mastodon-light .detailed-status__wrapper-direct:focus .detailed-status, 
.theme-mastodon-light .detailed-status__wrapper-direct:focus .detailed-status__action-bar {
  background: rgba(97,97,255,.15);
}

/* Reduce Mastodon mascot opacity */
.theme-mastodon-light .drawer__inner__mastodon {
  opacity: .6;
}