/* ==UserStyle==
@name           glitch-soc Tweaks
@namespace      github.com/openstyles/stylus
@version        1.0.0
@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") {
    :root {
        --avatar-size: 40px;
        --emoji-size: 1.5em;
        --status-gutter-width: 1px;
    }
    html {
        --avatar-border-radius: 64px;
    }
    body {
        font-weight: 500;
        line-height: 16px;
    }
    @media screen and (min-width: 1175px) {
        .columns-area__panels__main {
            max-width: 675px;
        }
    }
    .status__content {
        line-height: 1.35;
    }
    .status__info {
        font-size: 12px;
    }
    .emojione:hover {
        transform: scale(1.5);
        transition: ease-out 0.2s;
    }
    .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);
    }
    .icon {
        width: 20px;
        height: 20px;
    }
    .content-warning {
        padding: 6px 12px;
    }
    .status__info .status__display-name {
        line-height: 23px;
    }
    .reactions-bar__item {
        margin: 2px;
        padding: 0 2px;
    }
    .reactions-bar {
        margin-top: 0;
    }
    .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;
    }
    .status__info .account__avatar,
    .status__info .status__avatar {
        max-height: 42px !important;
        max-width: 42px !important;
    }
    .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: 3px 12px;
        border-radius: 24px;
    }
    .button {
        padding: 4px 18px;
    }
    .account__header__tabs__buttons {
        gap: 4px;
    }
    .account__header__bar .avatar {
    margin-top: 10px;
    }
    .account__header__tabs__name {
        margin-top: 12px;
    }
    .account__header__bar {
        padding-inline: 12px;
    }
    .account__header__familiar-followers {
        margin-block: 4px;
    }
    .account__relationship .icon-button,
    .explore-suggestions-card .icon-button {
        padding: 2px;
    }
    .account {
        padding: 8px;
    }
    .status {
        padding: 12px 10px;
    }
    .status__info {
        padding-bottom: 6px;
    }
    .detailed-status__display-name {
        margin-bottom: 12px;
    }
    .detailed-status {
        border-top: 0px;
        padding: 0px 12px;
        margin-top: 10px;
        margin-bottom: 12px;
    }
    [style*="width:46px;height: 46px;"] {
        width: 42px;
        height: 42px;
    }
    [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: 24px;
    }
    .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:hover {
        transform: scale(1.05);
        transition: ease-in-out 0.1s; 
    }
    .account__avatar {
        padding: 2px;
        border-radius: 64px;
    }
    .full-width .media-gallery__item {
        border-radius: 18px;
    }
    .media-gallery.full-width {
        margin-left: 0px;
        margin-right: 0px;
    }
    .media-gallery__item-thumbnail, .media-gallery__item-thumbnail img:hover {
        transform: scale(1.02);
        transition: ease-in-out 0.15s;
    }
    .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: 24px;
    }
    .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: 24px;
        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: 24px;
    }
    .dropdown-button {
        border-radius: 24px;
        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);
    }
    @media screen and (min-width: 1175px) {
        .tabs-bar__wrapper {
            border-top: 0px;
        }
    }
    .column-link {
        border-radius: 24px;
    }
    .column-link:hover {
        background: rgba(0, 0, 0, 0.1);
        transition: ease-in-out 0.15s;
    }
    .search__icon-wrapper {
        margin-top: -4px;
    }
    .search__input {
        border-radius: 24px;
        padding: 8px 40px;
    }
    .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: 4px;
        background: var(--background-color);
    }
    ._account_timeline_components__handleHelp {
        border: 1px solid var(--border-color);
    }
    .account__avatar img {
        border: 1px solid var(--border-color);
    }
    .account__avatar img:hover {
        border: 1px solid var(--color-text-tertiary);
        color: rgba(0,0,0,0.15);
    }
    .navigation-panel hr, .compose-panel hr {
        margin: 0 0;
        border-top: 0px;
    }
    .status__info .account__avatar, .status__info .status__avatar {
        max-height: 40px !important;
        max-width: 40px !important;
    }
    .tabs-bar__wrapper {
        background: var(--background-color);
    }
    .navigation-panel__menu {
        padding-top: 36px;
    }
    ._account_timeline_components__tabs a {
        border-radius: 4px;
        padding: 10px 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-panel {
        width: 345px;
    }
    .columns-area__panels__pane__inner {
        width: 345px;
    }
    .navigation-panel {
        width: 345px;
    }
    .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: 24px;
        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: 24px;
    }
    .image {
        border-radius: 24px;
        border: 1px solid var(--border-color);
    }
    .compose-panel .search, .drawer .search {
        padding-top: 36px;
    }
    .simple_form .fields-group__thumbnail {
        border-radius: 24px;
    }
    .hover-card {
        border-radius: 24px;
    }
    ._account_timeline_components__fieldList {
        margin: 10px 0;
    }
    .announcements__root {
        background: var(--background-color);
        border: 1px solid var(--border-color);
        border-top: 0px solid;
    }
}