Something went wrong. Try again.
my personal css tweaks for glitch-soc. ermm maybe Call it Mastodon Modern... 2!
Something went wrong. Try again.
12 kB · 595 lines · Created 6mo ago CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596@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;}