/* ==UserStyle==
@name           glitch-soc Tweaks
@namespace      github.com/openstyles/stylus
@version        1.0.1
@description    my personal css tweaks for glitch-soc. ermm maybe Call it Mastodon Modern... 2!
@author         @niko@meowing.zip
@updateURL      https://tangled.org/strings/meowing.zip/3mkbyvblcll22/raw
==/UserStyle== */
@-moz-document domain("tech.lgbt"), domain("toot.cat"), domain("kolektiva.social") {
  @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

  @keyframes bg-move {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: -560px -560px;
    }
  }

  :root {
    --emoji-size: 1.5em;
    --status-gutter-width: 1px;
    --border-radius: 24px;
    --smaller-border-radius: 16px;
    --background-color: light-dark(#f3ebf7, #1f1725);
    --elevated-tint: #e0d3e6;
    --border-color: #d8b3e3;
    --surface-variant-background-color: #f3edf5;
    --rich-text-container-color: #e0cce0;
    --accent: 166, 118, 214;
    --color-border-primary: #d8b3e3;
  }
  .detailed-status__button .icon {
    background: #cbbed1;
    padding: 4px 14px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
  }
  .detailed-status__button .icon:hover {
    border-radius: 8px;
    background: rgb(--accent);
  }
  .tabs-bar__wrapper {
    border: 0 solid transparent;
  }
  ._feat_account_timeline__filtersWrapper {
    padding: 0;
    margin-top: -20px;
  }
  ._feat_account_timeline__statusWrapper
    article:has(._feat_account_timeline__pinnedViewAllButton) {
    border-bottom: 0;
    border: 0;
    border-color: transparent;
  }
  ._feat_account_timeline__pinnedViewAllButton {
    padding: 4px;
    width: calc(35% - 32px);
    margin: 2px 0px;
  }
  ._comp_tags__tag {
    background-color: var(--elevated-tint);
  }
  ._comp_mini_card__card {
    background: #cbbed1;
  }
  ._feat_account_timeline__filterSelectButton {
    padding: 0;
  }
  ._comp_account_header__header {
    border-radius: 14px;
    border: 1px solid var(--border-color);
  }
  ._comp_account_header__barWrapper {
    padding-inline: 16px;
    border: 1px solid var(--border-color);
    border-top: 0;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: var(--elevated-tint);
  }
  ._comp_tab_list__withSpaceAndBorder {
    border-bottom: 0;
    padding-inline: ;
    background: var(--elevated-tint);
    border-radius: 0 0 12px 12px;
    border: 1px solid var(--border-color);
    border-top: 0;
    transform: translateY(-16px);
    padding-inline: 18px;
  }
  html {
    --avatar-border-radius: 14px;
    --color-white: #f3ebf7;
    --color-grey-50: #e2d5e6;
    --color-indigo-700: #bf73c9;
    --color-indigo-50: #f7e6f7;
    --color-indigo-800: rgb(var(--accent));
  }
  body {
    font-family: "figtree";
    font-weight: 500;
    line-height: 16px;
  }

  @media screen and (min-width: 1175px) {
    .columns-area__panels__main {
      max-width: 675px;
    }
  }
  .columns-area__panels__main {
    margin-top: 10px;
  }
  .status__content {
    line-height: 1.35;
  }
  .status__info {
    font-size: 12px;
  }
  .emojione:hover {
    transform: scale(1.5);
    transition: ease-out 0.2s;
  }
  .emojione {
    width: auto;
    max-width: 300px;
  }
  .detailed-status .status__content .emojione {
    width: auto;
    max-width: 300px;
  }
  .status__content .emojione,
  .edit-indicator__content .emojione,
  .reply-indicator__content .emojione {
    width: auto;
    max-width: 300px;
  }
  .edit-indicator__content,
  .reply-indicator__content,
  .status__content {
    padding-top: 0;
  }
  .video-player.full-width {
    margin-left: 4px;
    margin-right: 4px;
    border-radius: 12px;
    outline: 1px solid var(--border-color);
  }
  .status__info .status__display-name {
    line-height: 23px;
  }
  .reactions-bar__item {
    margin: 4px;
    padding: 4px 4px;
    border-radius: 6px;
  }
  .reactions-bar {
    margin-top: 5px;
  }
  .content-warning {
    padding: 6px;
    line-height: 14px;
  }
  .status .content-warning {
    margin-bottom: 4px;
  }
  .status__action-bar {
    margin-bottom: -9px;
  }
  .status__action-bar__button-wrapper {
    max-width: 40px;
  }
  .account__action-bar__tab {
    padding: 6px 0;
  }
  .account__section-headline a,
  .account__section-headline button,
  .notification__filter-bar a,
  .notification__filter-bar button {
    padding: 8px 0;
  }
  .account__action-bar-links {
    line-height: 14px;
  }
  .reactions-bar__item.active {
    border-radius: 8px;
  }
  .account__header__fields dl {
    padding: 4px 8px !important;
  }
  .status__content__read-more-button,
  .status__content__translate-button {
    margin-top: 6px;
  }
  .status__quote {
    border-radius: 8px;
    margin-bottom: 8px;
    margin-top: 0;
  }
  .status__content__read-more-button,
  .status__content__translate-button {
    margin-top: 2px;
  }
  .status__prepend + .status:not(.status-direct) {
    padding-top: 1px;
  }
  .notification-group__main {
    gap: 4px;
  }
  .notification-group {
    padding: 12px;
  }
  body.app-body.flavour-glitch > #mastodon .compose-form__submit button {
    padding: 8px 12px;
  }
  .compose-form {
    gap: 8px;
  }
  .compose-panel .search,
  .drawer .search {
    margin-bottom: 12px;
  }
  .detailed-status__meta {
    margin-top: 10px;
  }
  .account__header__tabs__buttons .icon-button {
    padding: 3px;
  }
  .button.button-secondary {
    padding: 5px 12px;
    border-radius: var(--border-radius);
  }
  .button {
    padding: 4px 18px;
  }
  .account__header__tabs__buttons {
    gap: 4px;
  }
  .account__header__bar .avatar {
    margin-top: 10px;
  }
  .account__header__tabs__name {
    margin-top: 0px;
    margin-bottom: 8px;
  }
  .account__header__bar {
    padding-inline: 12px;
  }
  ._comp_badge__badge {
    border: 1px solid var(--border-color);
  }
  .account__header__familiar-followers {
    margin-block: 4px;
  }
  .account__relationship .icon-button,
  .explore-suggestions-card .icon-button {
    padding: 2px;
  }
  .icon:hover {
    transform: scale(1.05, 1.05);
  }
  .account {
    padding: 8px;
  }
  .status {
    padding: 16px 16px;
  }
  .status__info {
    padding-bottom: 6px;
  }
  .detailed-status__display-name {
    margin-bottom: 12px;
  }
  .detailed-status {
    border-top: 0px;
    padding: 0px 12px;
    padding-top: 10px;
    padding-bottom: 12px;
  }
  .detailed-status__wrapper {
    background: var(--elevated-tint);
    padding: 4px;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
  }
  [style*="--avatar-height: 28px;"] {
    --avatar-height: 32px;
  }
  .audio-player,
  .media-gallery,
  .picture-in-picture-placeholder,
  .status-card,
  .status-card.horizontal.interactive,
  .video-player {
    margin-block: 8px;
  }
  .status-card__content {
    padding: 6px 10px;
  }
  .upload-progress {
    gap: 4px;
  }
  .upload-progress__tracker {
    height: 3px;
  }
  .compose-form__footer {
    padding: 12px;
  }
  .dialog-modal__header {
    border-bottom: 0;
    padding: 6px 12px;
    min-height: 41px;
  }
  .dialog-modal__content__description {
    margin: 2px 12px 0;
  }
  .dialog-modal__content__form {
    gap: 6px;
    padding: 12px;
  }
  .visibility-dropdown__button {
    font-size: 13px;
    height: 36px;
    border-radius: var(--border-radius);
  }
  .visibility-dropdown__button:hover,
  .visibility-dropdown__button:focus,
  .visibility-dropdown__button:active {
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.1);
    transition: ease-in-out 0.15s;
  }
  .dialog-modal__content {
    letter-spacing: 0;
  }
  .account__header__buttons .icon-button .icon {
    height: 20px;
    width: 20px;
  }
  div [class*="account__avatar-overlay"] {
    width: 28px;
    height: 28px;
  }
  .inline-follow-suggestions__body__scrollable__card {
    border-radius: 14px;
  }
  ._account_timeline_components__avatarWrapper {
    padding-left: 5px;
    padding-bottom: 5px;
  }
  .account__avatar {
    padding: 2px;
    border-radius: var(--avatar-border-radius);
  }
  .full-width .media-gallery__item {
    border-radius: 18px;
  }
  .media-gallery.full-width {
    margin-left: 0px;
    margin-right: 0px;
  }
  .avatar-group {
    --avatar-height: 32px;
  }
  .avatar-group:not(.avatar-group--compact) {
    height: 32px;
    gap: 2px;
  }
  [aria-label*="Notifications"] .media-gallery.full-width {
    margin-left: 45px;
  }
  .edit-indicator__content,
  .reply-indicator__content,
  .status__content {
    padding-top: 2px;
  }
  .button--compact {
    border-radius: var(--border-radius);
  }
  .button.button-secondary:active,
  .button.button-secondary:focus,
  .button.button-secondary:hover {
    border-radius: 4px;
    transition: ease-in-out 0.15s;
  }
  .sign-in-banner .button {
    border-radius: var(--border-radius);
    transition: ease-in-out 0.15s;
  }
  .sign-in-banner .button:hover {
    border-radius: 4px;
    transition: ease-in-out 0.15s;
  }
  .button:active,
  .button:focus,
  .button:hover {
    border-radius: 4px;
    transition: ease-in-out 0.15s;
  }
  .button {
    border-radius: var(--border-radius);
  }
  .dropdown-button {
    border-radius: var(--border-radius);
    transition: ease-in-out 0.15s;
  }
  .dropdown-button:hover {
    border-radius: 4px;
    transition: ease-in-out 0.15s;
    background: rgba(0, 0, 0, 0.1);
  }
  .column-link {
    border-radius: var(--border-radius);
    gap: 14px;
  }
  .column-link:hover {
    background: rgba(0, 0, 0, 0.1);
    transition: ease-in-out 0.15s;
  }
  .search__input {
    border-radius: var(--border-radius);
  }
  .search__input:hover,
  .search__input:focus,
  .search__input:active {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }
  .getting-started__trends {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--background-color);
  }
  ._account_timeline_components__handleHelp {
    border: 1px solid var(--border-color);
  }
  .navigation-panel hr,
  .compose-panel hr {
    margin: 0 0;
    border-top: 0px;
  }
  ._comp_badge__badge:not(._comp_badge__badgeWithoutIcon) {
    background-color: #d8b3e3;
  }
  .status__info .account__avatar,
  .status__info .status__avatar {
    max-height: 40px !important;
    max-width: 40px !important;
  }
  .navigation-panel__menu {
    padding-top: 36px;
  }
  ._account_timeline_components__tabs a {
    border-radius: 4px;
    padding: 0 0;
  }
  ._account_timeline_components__tabs .active {
    padding-bottom: 10px;
    border-radius: 4px;
  }
  ._account_timeline_components__tabs a:hover,
  ._account_timeline_components__tabs a:active,
  ._account_timeline_components__tabs a:focus {
    background: rgba(0, 0, 0, 0.15);
  }
  .compose-form .autosuggest-textarea__textarea,
  .compose-form .spoiler-input__input {
    resize: vertical;
  }
  .sign-in-banner {
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--background-color);
    margin-top: 24px;
    margin: 12px;
  }
  .link-footer {
    padding-bottom: 24px;
    margin-left: 10px;
  }
  .app-body .link-footer::after {
    content: var(--meta);
  }
  .server-banner__introduction {
    margin-top: 12px;
  }
  .server-banner {
    background: var(--background-color);
    padding: 12px;
    padding-bottom: 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
  }
  .image {
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
  }
  .simple_form .fields-group__thumbnail {
    border-radius: var(--border-radius);
  }
  .hover-card {
    border-radius: var(--border-radius);
  }
  ._account_timeline_components__fieldList {
    margin: 10px 0;
  }
  .icon-with-badge__badge {
    top: -10px;
  }
  .column-header {
    border-radius: 18px;
    margin-bottom: 4px;
  }
  .column-back-button {
    border-radius: 16px;
  }
  .announcements__mastodon {
    border-radius: 0 var(--border-radius);
  }
  .announcements__root {
    margin: 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border-brand-soft);
  }
  .column > .scrollable {
    border: 0;
    border-top: 0;
  }
  .notification,
  .status__wrapper,
  .conversation {
    position: relative;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--elevated-tint);
  }
  .account__header {
    ._account_timeline_components__header {
      height: 220px;
    }
  }
  .account__header__tabs__name .emojione {
    width: auto;
    max-width: 300px;
  }
  .audio-player,
  .media-gallery,
  .picture-in-picture-placeholder,
  .status-card,
  .status-card.horizontal.interactive,
  .video-player {
    margin-block: 0;
  }
  .detailed-status__meta__line {
    padding: 12px 0;
  }
  .detailed-status__action-bar {
    padding: 5px 0;
    border-bottom: 0;
  }
  .status-card.bottomless {
    border-radius: 18px 18px 0 0;
    margin-top: 10px;
  }
  .more-from-author {
    border-radius: 0 0 18px 18px;
    padding: 10px;
  }
  ._comp_account_header__buttonsDesktop .icon-button,
  ._comp_account_header__buttonsMobile .icon-button {
    padding: 3px;
    border-radius: 24px;
  }
  .pillbar-button {
    border-radius: 24px;
    padding: 10px;
  }
  .column-settings__pillbar .pillbar-button:last-child {
    border-start-end-radius: 0px;
    border-end-end-radius: 0px;
    border-radius: 24px;
  }
  .column-settings__pillbar .pillbar-button:first-child {
    border-start-start-radius: 0px;
    border-end-start-radius: 0px;
    border-radius: 24px;
  }
  .pillbar-button: ([disabled]) {
    background-color: var(--color-bg-secondary);
  }
  .compose-form__highlightable {
    border-radius: 24px;
    padding: 2px;
  }
  .account__avatar__counter {
    bottom: 0;
  }
  .status {
    border-bottom: 0;
  }
}