Something went wrong. Try again.
Catppuccin Mocha color scheme for Mastodon-Modern userstyle/flavour by Freeplay.
Something went wrong. Try again.
25 kB · 675 lines · Created 1y ago CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675/* ==UserStyle==@name Catppuccin Mocha Mastodon-Modern (for chuckya/glitch-soc)@namespace github.com/openstyles/stylus@version 1.0.0@description Catppuccin Mocha color scheme for Mastodon-Modern userstyle/flavour by Freeplay@author Niko @gayfamicom@merping.synth.download==/UserStyle== */
@-moz-document domain("wetdry.world"), domain("fuzzies.wtf"), domain("merping.synth.download") { :root { --background-color: hsl(240deg, 23%, 9%); --surface-variant-background-color: hsl(240deg, 21%, 12%); --accent: 166, 173, 247; --rich-text-text-color: #b4befe; --rich-text-decorations-color: var(--rich-text-text-color); --rich-text-container-color: #11111b; --text: #cdd6f4; --sub-text: #a6adc8; --sub-text2: #6c7086; --elevated-tint: #181825; --nested-card-background: rgba(var(--accent), 0.05); --border-color: #313244; --surface-background-color: var(--elevated-tint); --dropdown-background-color: var(--elevated-tint); --elevated-color: #1e1e2e; --modal-background-color: var(--elevated-tint); --modal-border-color: var(--border-color); --hover-color: rgba(var(--accent), 0.05); } body { color: var(--text); } .glitch.local-settings { background: var(--background-color); color: var(--text); } .glitch.local-settings__navigation__item.close, .glitch.local-settings__navigation__item.close:hover { background: #f38ba8; color: var(--background-color); } .glitch.local-settings__navigation__item.active { background: rgb(var(--accent)); color: var(--background-color); } .glitch.local-settings span.hint { color: var(--sub-text2); } .column-link.active { color: rgb(var(--accent)); } .status__content a.unhandled-link, .edit-indicator__content a.unhandled-link, .reply-indicator__content a.unhandled-link { color: rgb(var(--accent)); } .status__content__read-more-button, .status__content__translate-button { color: rgb(var(--accent)); } .status__content a, .edit-indicator__content a, .reply-indicator__content a { color: rgb(var(--accent)); } .status__content, .edit-indicator__content, .reply-indicator__content { color: var(--text); } .status__content__text pre, .status__content__text blockquote, .e-content pre, .e-content blockquote, .edit-indicator__content pre, .edit-indicator__content blockquote, .reply-indicator__content pre, .reply-indicator__content blockquote { margin-bottom: 12px; } .button { background-color: rgb(var(--accent)); color: hsl(240deg, 23%, 9%); } .account__header__tabs__name h1 small { color: var(--sub-text); } .account__disclaimer { color: var(--sub-text2); } .account__header__bio .account__header__fields dd { color: var(--sub-text2); } .account__header__bio .account__header__fields .verified a { color: #a6e3a1; } .account__action-bar__tab strong { color: var(--text); } .account__action-bar__tab>span { color: var(--sub-text2); } .account__header__bio .account__header__content { color: var(--text); } .notification__filter-bar button, .notification__filter-bar a, .account__section-headline button, .account__section-headline a { color: var(--sub-text2); } .notification__filter-bar button.active, .notification__filter-bar a.active, .account__section-headline button.active, .account__section-headline a.active { color: var(--text); background: rgba(var(--accent), 0.05); } .hicolor-privacy-icons .status__visibility-icon.icon-lock, .hicolor-privacy-icons .privacy-dropdown__option .icon-lock { color: #f9e2af; } .hicolor-privacy-icons .status__visibility-icon.icon-unlock, .hicolor-privacy-icons .privacy-dropdown__option .icon-unlock { color: #a6e3a1; } .hicolor-privacy-icons .status__visibility-icon.icon-globe, .hicolor-privacy-icons .privacy-dropdown__option .icon-globe { color: #89b4fa; } .featured-carousel__header { color: var(--text); } .icon-button { color: var(--sub-text2); } .status__relative-time { color: var(--sub-text2); } .icon-button.active { color: rgb(var(--accent)); } .icon-button.star-icon.active { color: rgb(var(--accent)); } .column-link { color: var(--sub-text); } .column-header__title { color: var(--text); } .account__header__tabs__name h1 { color: var(--text); } .compose-form__actions .icon-button { color: rgb(var(--accent)); } .compose-form__actions .icon-button:hover, .compose-form__actions .icon-button:focus, .compose-form__actions .icon-button:active { color: var(--background-color); background-color: rgb(var(--accent)); } .compose-form__actions .icon-button.active { color: var(--background-color); background-color: rgb(var(--accent)); } .privacy-dropdown__option:focus, .privacy-dropdown__option.active { color: var(--background-color); background-color: rgb(var(--accent)); } .privacy-dropdown__option:focus .privacy-dropdown__option__content, .privacy-dropdown__option:focus .privacy-dropdown__option__content strong, .privacy-dropdown__option:focus .privacy-dropdown__option__additional, .privacy-dropdown__option.active .privacy-dropdown__option__content, .privacy-dropdown__option.active .privacy-dropdown__option__content strong, .privacy-dropdown__option.active .privacy-dropdown__option__additional { color: var(--background-color); } .compose-form .spoiler-input__input { background: rgba(var(--accent), .05); color: rgba(var(--accent)); } .dropdown-button { color: rgb(var(--accent)); background: var(--rich-text-container-color); } .character-counter { color: var(--sub-text); } .button.button-secondary:active, .button.button-secondary:focus, .button.button-secondary:hover { color: rgba(var(--accent), 0.5); border: 1px solid rgba(var(--accent), 0.5); } .button.button-secondary { color: rgb(var(--accent)); border: 1px solid rgb(var(--accent)); } .account__domain-pill { color: rgb(var(--accent)); background: rgba(var(--accent), 0.2); } .account__action-bar { border-top: 1px solid var(--sub-text2); border-bottom: 1px solid var(--sub-text2); } .account__header__bio .account__header__fields a { color: rgb(var(--accent)); } .account__action-bar__tab.active { border-bottom: 4px solid rgb(var(--accent)); background: rgba(var(--accent), 0.05); } .column-back-button { color: rgb(var(--accent)); } .icon-with-badge__badge { background: rgb(var(--accent)); color: var(--background-color); } .notification-group--unread:before, .notification-ungrouped--unread:before { -webkit-inline-start: 4px solid rgb(var(--accent)); border-inline-start: 4px solid rgb(var(--accent)); } .notification-group--favourite .notification-group__icon { color: rgb(var(--accent)); } .notification-group--reaction .notification-group__icon { color: rgb(var(--accent)); } .notification-group--follow .notification-group__icon, .notification-group--follow-request .notification-group__icon { color: rgb(var(--accent)); } .notification-group__main__header__label bdi { color: var(--text); } .notification-group__main__header__label { color: var(--sub-text2); } .notification__filter-bar button.active:before, .notification__filter-bar a.active:before, .account__section-headline button.active:before, .account__section-headline a.active:before { background: rgb(var(--accent)); } .hashtag-bar a, .hashtag-bar button { color: rgb(var(--accent)); } .link-button { color: rgb(var(--accent)); } .button:active, .button:focus, .button:hover { background-color: rgba(var(--accent), 0.75); } .trends__item__name a { color: var(--sub-text); } .trends__item__name { color var(--sub-text2); } .getting-started__trends h4 a { color: var(--sub-text); } .simple_form input[type=text], .simple_form input[type=number], .simple_form input[type=email], .simple_form input[type=password], .simple_form input[type=url], .simple_form input[type=datetime-local], .simple_form textarea { background-color: var(--background-color); color: var(--text); } .simple_form .input.with_label .label_input>label { color: var(--text); } .admin-wrapper .content h4 { color: var(--sub-text); } .admin-wrapper .sidebar ul .simple-navigation-active-leaf a { color: rgb(var(--accent)); } .admin-wrapper .sidebar ul a { color: var(--sub-text2); } .simple_form p.hint { color: var(--sub-text2); } .simple_form select { background: var(--background-color) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='%2342425C'/></svg>") no-repeat right 8px center/auto 14px; } .information-badge, .simple_form .recommended, .simple_form .not_recommended { background-color: rgba(var(--accent), 0.1); border: rgba(var(--accent). 0.5); } .simple_form .glitch_only { color: #f38ba8; background-color: #f38ba829 } .simple_form .chuckya_only { color: #b4befe; background-color: #b4befe29; } .simple_form button:not(.button):not(.link-button):not(.help-button) { background: rgb(var(--accent)); color: var(--background-color); } .simple_form button:not(.button):not(.link-button):not(.help-button):active, .simple_form button:not(.button):not(.link-button):not(.help-button):focus, .simple_form button:not(.button):not(.link-button):not(.help-button):hover { background: rgba(var(--accent), 0.5) } .flash-message.notice { color: #a6e3a1; background: #a6e3a129; } .simple_form .input.radio_buttons .radio label { color: var(--sub-text); } .simple_form .input.with_floating_label .label_input>label { color: var(--text); } .admin-wrapper .sidebar ul a:hover { color: var(--text); } .status__display-name .display-name strong, .account__display-name .display-name strong { color: var(--text); } .status__display-name { color: var(--sub-text2); } .account__header__fields .verified { background: #a6e3a129; } .prose a { color: rgb(var(--accent)); } .about__section__title { color: rgb(var(--accent)); } .rules-list__text { color: var(--text); } .rules-list__hint { color: var(--sub-text2) } .rules-languages>select { background: var(--background-color); color: var(--sub-text); } .rules-languages>label { color: var(--text); } .about__domain-blocks__domain h6, .about__bubble-domains__domain h6 { color: var(--text); } .about__domain-blocks__domain:nth-child(2n), .about__bubble-domains__domain:nth-child(2n) { background: var(--elevated-color); } .about__domain-blocks__domain, .about__bubble-domains__domain { color: var(--sub-text2); } .column-header__wrapper.active { box-shadow: 0 1px rgba(var(--accent), .3); } .column-header__wrapper.active:before { background: radial-gradient(ellipse,rgba(var(--accent),.23),rgba(var(--accent),0) 60%); } .column-header.active .column-header__icon { color: rgb(var(--accent)); text-shadow: 0 0 10px rgba(var(--text),.4); } .column-header__collapsible { color: var(--sub-text2); } .column-settings h3 { color: var(--text); } input.glitch-setting-text { border-bottom: 2px solid #313244; } input.glitch-setting-text:focus, input.glitch-setting-text:active { border-bottom-color: rgb(var(--accent)); } .emoji-mart-anchor { color: var(--sub-text2); } .emoji-mart-bar:first-child { background: var(--rich-text-container-color); } .emoji-mart-search input { background: var(--rich-text-container-color); } .attachment-list__list a { color: var(--sub-text2) } .button.button-tertiary { color: rgb(var(--accent)); border: 1px solid rgb(var(--accent)); } .button.button-tertiary:active, .button.button-tertiary:focus, .button.button-tertiary:hover { color: var(--background-color); background: rgba(var(--accent),0.5); } .status__content a.unhandled-link .link-origin-tag, .edit-indicator__content a.unhandled-link .link-origin-tag, .reply-indicator__content a.unhandled-link .link-origin-tag { color: #f9e2af; } .dropdown-button.active { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: var(--background-color); } .language-dropdown__dropdown__results__item:focus, .language-dropdown__dropdown__results__item.active { background: rgb(var(--accent)); color: var(--background-color); } .language-dropdown__dropdown__results__item:focus .language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name { color: var(--background-color); } .language-dropdown__dropdown__results__item__common-name { color: var(--sub-text2); } .language-dropdown__dropdown__results__item { color: var(--text); } .language-dropdown__dropdown .emoji-mart-search input { color: var(--sub-text2); background: var(--background-color); } .privacy-dropdown__option { color: var(--text); } .privacy-dropdown__option__content { color: var(--sub-text2); } .privacy-dropdown__option__content strong { color: var(--text); } .react-toggle--checked .react-toggle-track { background-color: rgb(var(--accent)); } .react-toggle-thumb { background-color: var(--background-color); } .status__prepend { color: var(--sub-text2); } .poll__chart.leading { background: rgb(var(--accent)); } .poll__chart { background: var(--sub-text2); } .compose-form__actions .icon-button.disabled { color: rgb(var(--accent),0.5) } .dropdown-button[disabled] { color: rgb(var(--accent),0.5); border-color: rgb(var(--accent),0.5); } .edit-indicator { background: var(--rich-text-container-color); border-bottom: .5px solid var(--border-color) } .edit-indicator__header { color: var(--sub-text); } .detailed-status__display-name { color: var(--sub-text2); } .detailed-status__display-name strong { color: var(--text); } .load-more .loading-indicator .circular-progress { color: rgb(var(--accent), 0.5) } .icon-button:hover, .icon-button:active, .icon-button:focus-visible { color: rgb(var(--accent)); background-color: rgba(var(--accent), .15); } .help-button { color: var(--background-color); background: rgb(var(--accent)); } .help-button:active, .help-button:focus, .help-button:hover { background: rgba(var(--accent), 0.5); } .compose-form__sensitive-button input[type=checkbox]:checked { background-color: rgb(var(--accent)); border-color: rgb(var(--accent)); } .compose-form__sensitive-button input[type=checkbox]:active, .compose-form__sensitive-button input[type=checkbox]:focus, .compose-form__sensitive-button input[type=checkbox]:hover { border-color: rgb(var(--accent)); color: rgb(var(--accent)); } .compose-form__sensitive-button input[type=checkbox] { border: 1px solid var(--sub-text2); } .icon-button.active:hover { color: rgb(var(--accent)); background: rgba(var(--accent), 0.15) } .hashtag-bar a:after { background-color: rgba(var(--accent), 0.15); } .hashtag-bar .link-button { color: var(--sub-text2); } .account-role { color: rgb(var(--accent)); border: 1px solid rgb(var(--accent)); } a.status-card:hover .status-card__title, a.status-card:hover .status-card__host, a.status-card:hover .status-card__author, a.status-card:hover .status-card__description, a.status-card:focus .status-card__title, a.status-card:focus .status-card__host, a.status-card:focus .status-card__author, a.status-card:focus .status-card__description, a.status-card:active .status-card__title, a.status-card:active .status-card__host, a.status-card:active .status-card__author, a.status-card:active .status-card__description { color: rgb(var(--accent)); } .status-card { color: var(--sub-text2); } .status-card__title { color: var(--text); } .search__popout__menu__item mark { color: var(--text); } .search__popout__menu__item:hover mark { color: var(--background-color); } .search__popout__menu__item { color: var(--sub-text2); } .search__popout h4 { color: var(--sub-text2); } .search__popout__menu__item:hover { background: rgb(var(--accent)); color: var(--background-color); } .search__popout .icon-button { color: var(--sub-text2); } .search__popout .icon-button:hover { color: var(--background-color); } .empty-column-indicator, .follow_requests-unlocked_explanation { color: var(--sub-text2); } .column-link:hover, .column-link:focus, .column-link:active { color: rgb(var(--accent)); } .column-link:before { background-color: rgba(var(--accent),0.15); } .trends__item__sparkline path:last-child { stroke: rgb(var(--accent)) !important; } .trends__item__sparkline path:first-child { fill: rgba(var(--accent), 0.25) !important; } .account__domain-pill.active { background: rgb(var(--accent)); color: var(--background-color); } .account__domain-pill__popout__header__icon { background: rgb(var(--accent)); color: var(--background-color); } .account__domain-pill__popout__header h3 { color: var(--text); } .account__domain-pill__popout__handle { background: rgba(var(--accent),0.15); color: rgb(var(--accent)); } .account__domain-pill__popout__parts__icon { color: rgb(var(--accent)); } .account__domain-pill__popout__parts h6 { color: var(--text); } .account__domain-pill__popout { color: var(--sub-text2); } .emoji-mart-anchor-bar { background-color: rgb(var(--accent)); } .emoji-mart-anchor-selected:hover { color: rgb(var(--accent)); } .emoji-mart-anchor:hover { color: rgb(var(--accent)); } .compose-form__poll__select__value { color: rgb(var(--accent)); } .compose-form__poll__select__label { color: var(--sub-text); } .poll__option input[type=text] { background: var(--background-color); color: var(--sub-text); } .poll__option input[type=text]:focus { border-color: rgb(var(--accent)) } .poll__input { border: 1px soild #585b70 } .compose-form__highlightable.active { border-color: rgb(var(--accent)) } .admin-wrapper .content__heading__tabs a.selected { background: rgb(var(--accent)); color: var(--background-color); } .admin-wrapper .content__heading__tabs a { color: var(--sub-text2); } .doodle-modal__action-bar, .boost-modal__action-bar { background: var(--background-color); } .doodle-modal__action-bar>div, .boost-modal__action-bar>div { color: var(--text); } .doodle-modal__action-bar .doodle-palette { background: var(--background-color); } .doodle-modal__container canvas { border: 5px solid var(--elevated-tint); } .media-modal__overlay .picture-in-picture__footer .icon-button.active { color: rgb(var(--accent)); } .media-modal__overlay .picture-in-picture__footer .icon-button.active:hover, .media-modal__overlay .picture-in-picture__footer .icon-button.active:focus, .media-modal__overlay .picture-in-picture__footer .icon-button.active:active { background: rgba(var(--accent), 0.15); } .media-modal__overlay .picture-in-picture__footer .icon-button { color: var(--text); } .media-modal__overlay .picture-in-picture__footer .icon-button:hover, .media-modal__overlay .picture-in-picture__footer .icon-button:focus, .media-modal__overlay .picture-in-picture__footer .icon-button:active { color: var(--text); background-color: rgba(var(--accent), 0.15); } .compose-form .compose-form__upload__warning button.active { color: rgb(var(--accent)); } .account__header__tabs__buttons .icon-button { border: 1px solid rgba(var(--accent), 0.35); background: rgb(var(--accent)); } .privacy-dropdown__option:focus, .privacy-dropdown__option.active, .visibility-dropdown__option:focus, .visibility-dropdown__option.active { background: rgb(var(--accent)); color: var(--background-color); } .dropdown-menu__item--highlighted { color: rgb(var(--accent)); } .notification-bar__action { color: rgb(var(--accent)); } .notification-bar__action:hover, .notification-bar__action:focus, .notification-bar__action:active { background: rgba(var(--accent), 0.15); } .no-reduce-motion .status--highlighted-entry:before { background: rgba(var(--accent), 0.2); } .notification-bar { background: var(--background-color); color: var(--sub-text1); } .notification-bar__dismiss-button { color: var(--sub-text1); } .status__info__icons { color: var(--sub-text2); } .upload-area__content { color: var(--text); border: 2px dashed rgb(var(--accent)); } .upload-area__background { background: var(--background-color); } .upload-progress { color: var(--sub-text1); } .upload-progress__tracker { background: rgb(var(--accent)); } .upload-progress .icon path { fill: rgb(var(--accent)); } .compose-form .autosuggest-textarea__textarea, .compose-form .spoiler-input__input { color: var(--text); } .dialog-modal__content__description { color: var(--sub-text2); } .visibility-dropdown__button { color: var(--sub-text1); } .visibility-dropdown__helper { color: var(--sub-text2); } .media-gallery__alt__label, .relationship-tag { color: var(--text-color); background: #11111ba6; } .inline-follow-suggestions__body__scroll-button:hover .inline-follow-suggestions__body__scroll-button__icon, .inline-follow-suggestions__body__scroll-button:focus .inline-follow-suggestions__body__scroll-button__icon, .inline-follow-suggestions__body__scroll-button:active .inline-follow-suggestions__body__scroll-button__icon { background: rgb(var(--accent)); } .inline-follow-suggestions__body__scroll-button__icon { background: rgb(var(--accent)); } .inline-follow-suggestions__body__scroll-button { color: var(--background-color); }}