masthead.css

/*
 * Masthead.css: (version 1.2)
 * @[email protected]'s Mastodon boost
 *
 * I wrote this in a way you can hopefully remove parts you don't want, and/or
 * know what everything does.
 *
 * I use Arc Browser (when I'm on macOS, anyways), so to add/update this just
 * click + -> New Boost -> Style -> [Your mastodon instance URL]  
 *
 * I guess I need to give this a license, the CC0 license works.
 */

/*
 * This changes the default font from Roboto to "Avenir Next," you'll need this installed
 * locally. This is probably my most opinionated change tbh.
 */
body {
  font-family: "Avenir Next", "mastodon-font-sans-serif", sans-serif !important;
  letter-spacing: -0.005em;

  --card-left-inset: 62px;
  --card-spacing: 15px; /* Default is 10px, I just thought it needed more room. */

  --color-bg: #191b22;
  --color-bg-card: #282c37;
  --color-bg-card-variant: 
  --color-bg-hover-transparent: rgba(49, 53, 67, 0.25);
  --color-border: rgb(66, 72, 90);

  background-color: var(--color-bg) !important;
}

/*
 * Make column headers blend in with post cards on large displays.
 */
@media screen and (min-width: 1175px) {
  .column-header {
    background: var(--color-bg-card) !important;
    border-bottom: 1px solid var(--color-border) !important;
  }
  .column-header__button,
  .column-header__notif-cleaning-buttons button {
    background: var(--color-bg-card) !important;
  }
  .column-header__back-button {
    background: var(--color-bg-card) !important;
  }
}

.compose-panel hr,
.navigation-panel hr {
  margin-right: 20px !important;
}
/* Slightly larger icons for the sidebar */
.column-link__icon {
  font-size: 18px !important;
}

/*
 * I'm sorry—the Trending category is just so useless to me. Also Glitchsoc is great but also
 * hiding the disclaimer.
 */
.getting-started__trends {
  display: none !important;
}
.getting-started__footer a {
  color: #606984 !important;
}
.getting-started__footer > p {
  display: none !important;
}

/*
 * Small hover effect on status cards.
 */
.status,
.account__action-bar__tab {
  transition: background-color 200ms ease-in-out;
}
.status:hover:not(:focus),
.account__action-bar__tab:hover:not(:focus) {
  background-color: var(--color-bg-hover-transparent) !important;
}

/*
 * Make all links (including mentions, hashtags, etc) the same blue as unhandled links.
 */
.status__content a {
  color: #8c8dff !important;
}

/*
 * Everything here collapses the post headers into an inset view.
 */
.status .status__info__icons > *:not(.status__visibility-icon) {
  display: none;
}
.status .status__info {
  position: absolute;
}
.status .status__content__text,
.status .status-card.compact {
  margin-top: 10px;
  margin-left: var(--card-left-inset);
}
.status
  .status__prepend
  + .status__info
  + .status__content
  > .status__content__text {
  margin-top: 20px !important;
}
.status .status__info,
.status .status__info__account {
  align-items: flex-start !important;
}
.status .display-name {
  display: flex !important;
  margin-left: 5px;
  align-items: flex-end;
  gap: 5px;
}
.status .display-name strong {
  display: inline-block !important;
}
.status .status__prepend {
  margin-left: var(--card-left-inset) !important;
}

.status .status__content--with-spoiler > p:first-child {
  margin-top: 10px;
  margin-left: var(--card-left-inset);
}
.status
  .status__prepend
  + .status__info
  + .status__content--with-spoiler
  > p:first-child {
  margin-top: 20px !important;
}

.status .status__content__text:not(:has(p)) + .media-gallery.full-width {
  margin-top: 39px !important; /* This is 24px + 15px (spacing + half the avatar size) */
}
/* This cancels out the previous rule. */
.status .status__content__text:has(p) + .media-gallery.full-width {
  margin-top: var(--card-spacing) !important;
}

/*
 * Everything here expands the post action bar, moves the time to the top
 * right of the post.
 */
.status .status__action-bar {
  margin-top: var(--card-spacing) !important;
  justify-content: space-between !important;
  margin-left: var(--card-left-inset) !important;
  margin-right: var(--card-left-inset) !important;
}
.status .status__action-bar-button {
  margin-right: 0 !important;
}
.status .status__relative-time {
  flex-grow: unset !important;
  position: absolute;
  top: 15px;
  right: 15px;
}
/* This removes the weird checkmarks. */
.detailed-status__button .icon-button.active:after,
.status__action-bar-button.active:after {
  content: "" !important;
}

/*
 * Slim back button, on the left.
 */
.column-header > button {
  font-weight: 600 !important;
}
.column-header__icon {
  display: none !important;
}
.column-header__back-button {
  position: absolute;
  left: 5px;
  top: 0;

  width: 38px !important;
  height: 48px !important;
  padding: 0 !important;
  line-height: 46px !important;
}
.column-header__back-button span {
  display: none !important;
}
.column-header:has(.column-header__back-button) > button {
  padding-left: 43px !important;
}

/*
 * Profile-related tweaks.
 */

/* Settings menu icon is off-centered. */
.account__header__tabs__buttons .icon-button[title="Menu"] i {
  line-height: 32px !important;
}
/* Account description is off-centered. */
.account__header__content {
  padding-left: 20px !important;
}
/* Make spacing match the Posts / Follows / Followers */
.account__section-headline > * {
  flex: 1 !important;
}

/* Thin account header fields. */
.account__header__fields {
  margin-left: 15px !important;
  margin-right: 15px !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 4px !important;
}
.account__header__fields > dl:first-child dt {
  border-top-left-radius: 4px !important;
}
.account__header__fields > dl:last-child dt {
  border-bottom-left-radius: 4px !important;
}
.account__header__fields > dl dt,
.account__header__fields > dl dd {
  padding: 10px !important;
  padding-left: 15px !important;
  text-align: left !important;
}
.account__header__bio .account__header__fields dl .verified {
  border: none !important;
  box-shadow: 0 0 0 1px rgb(121 189 154 / 50%) !important;
}
.account__header__bio .account__header__fields dl:first-child .verified {
  border-top-right-radius: 4px !important;
}
.account__header__bio .account__header__fields dl:last-child .verified {
  border-bottom-right-radius: 4px !important;
}
.account__header__fields + .account__header__joined {
  margin-top: 5px !important;
}
.account__header__bio:not(:has(.account__header__fields))
  .account__header__content {
  padding-top: 0px !important;
}

/* Make the banner take up more space. */
.account__header__image {
  height: 200px !important;
}

/* Follow / more "pill" buttons. */
.account__header__tabs {
  margin-top: -80px !important;
}
.account__header__tabs__buttons {
  padding-top: 0 !important;
  gap: 0px !important;
  transform: translateY(80px);
}
.account__header__tabs__buttons .logo-button {
  margin-right: 5px !important;
}
.account__header__tabs__buttons .icon-button {
  border: none !important;
  height: 36px !important;
  width: 36px !important;
  font-size: 18px !important;
  padding: 0 !important;
}

/*
 * Restyle dropdowns.
 */
.dropdown-menu.bottom {
  margin-top: 5px;
}
.dropdown-menu.top {
  margin-top: -5px;
}
.dropdown-menu__arrow {
  /* Still allow it to take up space. */
  opacity: 0 !important;
}
.dropdown-menu {
  background: var(--color-bg-card) !important;
  padding: 5px !important;
  border-radius: 8px !important;
  border: 1px solid var(--color-border) !important;
}
.dropdown-menu__item a,
.dropdown-menu__item button {
  padding: 5px 15px !important;
  border-radius: 3px !important;
}
.dropdown-menu__item a:not(:active):not(:focus):not(:hover),
.dropdown-menu__item button:not(:active):not(:focus):not(:hover) {
  background: transparent !important;
  color: #d9e1e8 !important;
}
.dropdown-menu__separator {
  margin: 5px -5px 6px !important;
  border-bottom-color: var(--color-border) !important;
}