Something went wrong. Try again.
my personal css tweaks for glitch-soc. ermm maybe Call it Mastodon Modern... 2! (userstyles version)
Something went wrong. Try again.
14 kB · 605 lines · Created 6mo ago CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606/* ==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; }}