Last active
November 27, 2023 15:49
-
-
Save ericwbailey/dab7fa46fc03beaa011abc5864a49ddc to your computer and use it in GitHub Desktop.
Custom stylesheet for social.ericwbailey.website. Perpetually a work in progress. https://ericwbailey.website/published/i-restyled-my-mastodon-instance/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--custom-border-radius: 999999px; | |
--custom-color-background: #ffffff; | |
--custom-color-background-panel: #f7f9fa; | |
--custom-color-background-select: #616981; | |
--custom-color-background-dm: #f7f7fe; | |
--custom-color-background-focus: #e0e5eb; | |
--custom-color-background-verified: #bdf7af; | |
--custom-color-border-resting: #e0e5eb; | |
--custom-color-border-active: #c2ccd8; | |
--custom-color-border-poll-unvoted-resting: #616981; | |
--custom-color-border-poll-unvoted-hover: #616981; | |
--custom-color-border-poll-voted-resting: #282c36; | |
--custom-color-border-poll-voted-hover: #282c36; | |
--custom-color-button-resting: #6364ff; | |
--custom-color-button-hover: #563acc; | |
--custom-color-button-active: #3d2c91; | |
--custom-color-border-error: #f45f45; | |
--custom-color-border-notification-resting: #afb1f7; | |
--custom-color-link-secondary-resting: #616981; | |
--custom-color-text-primary: #282c36; | |
--custom-color-text-verified: #4aa51a; | |
--custom-color-text-secondary: #616981; | |
--custom-color-text-select: #ffffff; | |
--custom-color-fill-resting: #c2ccd8; | |
--custom-color-fill-hover: #616981; | |
--custom-color-fill-active: #282c36; | |
--custom-font-size-medium: 15px; | |
--custom-font-size-small: 14px; | |
--custom-font-size-smallest: 12px; | |
--custom-transition-short: 200ms; | |
--custom-transition-shortest: 125ms; | |
} | |
/* | |
RESETS AND REMOVALS | |
*/ | |
html { | |
scrollbar-color: unset; | |
} | |
.column-header__wrapper.active { | |
box-shadow: none; | |
} | |
.status__info abbr { | |
text-decoration: none; | |
} | |
.column-header.active .column-header__icon { | |
text-shadow: none; | |
} | |
:is( | |
.app-body .navigation-panel__logo, | |
.emoji-picker-dropdown, | |
.link-footer, | |
.navigation-panel [title="Bookmarks"], | |
.navigation-panel [title="Favorites"], | |
.navigation-panel [title="Lists"], | |
[aria-label="Explore"] .explore__links .dismissable-banner | |
) { | |
display: none; | |
} | |
@media screen and (width >= 320px) { | |
.ui__header__logo .logo--wordmark { | |
display: none; | |
} | |
} | |
@media screen and (max-width: 1174px) { | |
.columns-area__panels { | |
min-height: calc(100vh - 0px); | |
} | |
} | |
/* | |
ADJUSTMENTS | |
*/ | |
/* Backgrounds */ | |
:is( | |
html, | |
body.theme-mastodon-light, | |
.tabs-bar__wrapper, | |
.account__section-headline, | |
.detailed-status__wrapper-direct .detailed-status, | |
.detailed-status__wrapper-direct .detailed-status__action-bar, | |
.explore__search-results, | |
.notification__filter-bar, | |
.search-results__section__header, | |
.search-results__section .account, | |
.search-results__section .trends__item, | |
.explore__search-results .account, | |
.explore__search-results .trends__item | |
) { | |
background-color: var(--custom-color-background); | |
} | |
@media screen and (max-width: 1174px) { | |
.layout-single-column .ui__header, | |
.columns-area__panels__pane--navigational .navigation-panel { | |
background-color: var(--custom-color-background); | |
} | |
} | |
:is( | |
.column-header__collapsible-inner, | |
.explore__search-header, | |
.follow_requests-unlocked_explanation | |
) { | |
background: var(--custom-color-background-panel); | |
} | |
:is( | |
.conversation--unread, | |
.status__wrapper-direct | |
) { | |
background: var(--custom-color-background-dm); | |
} | |
.status__content .status__content__spoiler-link { | |
background: var(--custom-color-background-panel); | |
position: relative; | |
top: 2px; | |
transition: background var(--custom-transition-shortest) ease-in-out; | |
} | |
.status__content .status__content__spoiler-link:active { | |
transition: none; | |
} | |
.column-header__wrapper.active::before { | |
background: none; | |
} | |
/* Borders */ | |
:is( | |
.column-back-button, | |
.column-header, | |
.compose-form__poll-wrapper .button.button-secondary, | |
.navigation-panel hr, | |
.compose-panel .reply-indicator | |
) { | |
border-color: var(--custom-color-border-resting); | |
} | |
@media screen and (max-width: 1174px) { | |
.column-header { | |
border-right-color: var(--custom-color-background) !important; | |
} | |
.navigation-panel hr { | |
border-color: var(--custom-color-background) !important; | |
} | |
} | |
:is( | |
.account, | |
.account__section-headline, | |
.column-header__collapsible, | |
.conversation, | |
.follow_requests-unlocked_explanation, | |
.load-gap, | |
.status, | |
.trends__item | |
) { | |
border-bottom-color: var(--custom-color-border-resting); | |
} | |
@media screen and (max-width: 1174px) { | |
.layout-single-column .ui__header { | |
border-bottom-color: var(--custom-color-background); | |
} | |
} | |
.column-header__collapsible-inner { | |
border-color: var(--custom-color-border-resting); | |
border-right: none; | |
border-left: none; | |
} | |
@media screen and (max-width: 1174px) { | |
.column-header { | |
border-right-color: var(--custom-color-background); | |
} | |
} | |
.column > .scrollable { | |
border: none; | |
} | |
.detailed-status { | |
border-top-color: var(--custom-color-border-resting); | |
} | |
.detailed-status__action-bar { | |
border-top-color: var(--custom-color-border-resting); | |
border-bottom-color: var(--custom-color-border-resting); | |
} | |
.notification__filter-bar { | |
border-right: none; | |
border-bottom-color: var(--custom-color-border-resting); | |
border-left: none; | |
} | |
.status__line { | |
border-inline-start: 2px solid var(--custom-color-border-resting); | |
} | |
@media screen and (max-width: 1174px) { | |
.columns-area__panels__pane--navigational .navigation-panel { | |
border-inline-start: 1px solid var(--custom-color-background); | |
} | |
} | |
.notification.unread::before, .status__wrapper.unread::before { | |
border-inline-start: 1px solid var(--custom-color-border-notification-resting); | |
} | |
/* Inputs */ | |
.search__input { | |
background-color: var(--custom-color-background); | |
border-color: var(--custom-color-border-resting); | |
transition: | |
background-color var(--custom-transition-short) ease-in-out, | |
border-color var(--custom-transition-short) ease-in-out; | |
} | |
.search__input:focus, | |
.search__input:hover { | |
background-color: var(--custom-color-background); | |
border-color: var(--custom-color-border-active); | |
} | |
.search__input:active { | |
transition: none; | |
} | |
.search__popout { | |
border: 1px solid var(--custom-color-border-active); | |
box-shadow: none; | |
background-color: var(--custom-color-background); | |
} | |
.compose-form .compose-form__autosuggest-wrapper { | |
border-top-color: var(--custom-color-border-resting); | |
border-right-color: var(--custom-color-border-resting); | |
border-bottom-color: var(--custom-color-border-resting); | |
border-left-color: var(--custom-color-border-resting); | |
transition: border-color var(--custom-transition-short) ease-in-out; | |
} | |
.compose-form .compose-form__autosuggest-wrapper:hover { | |
border-top-color: var(--custom-color-border-active); | |
border-right-color: var(--custom-color-border-active); | |
border-left-color: var(--custom-color-border-active); | |
} | |
.compose-form .compose-form__autosuggest-wrapper:focus-within { | |
border-top-color: var(--custom-color-border-active); | |
border-right-color: var(--custom-color-border-active); | |
border-left-color: var(--custom-color-border-active); | |
} | |
.compose-form .compose-form__buttons-wrapper { | |
border-color: var(--custom-color-border-resting); | |
} | |
/* | |
MOBILE TWEAKS | |
*/ | |
@media screen and (max-width: 1174px) { | |
.tabs-bar__wrapper { | |
position: initial; | |
} | |
.ui__header { | |
height: 0; | |
position: static; | |
} | |
.ui__header__links { | |
position: fixed; | |
top: 14px; | |
right: 0; | |
} | |
.column-link[title="Home"] { | |
margin-top: 50px; | |
} | |
.ui__header__links .account__avatar { | |
--custom-mobile-avatar-size: 26px; | |
height: var(--custom-mobile-avatar-size) !important; | |
width: var(--custom-mobile-avatar-size) !important; | |
} | |
.ui__header__links [aria-label="Search"] { | |
display: none; | |
} | |
.button.button-secondary[href="/publish"] { | |
--custom-mobile-button-size: 30px; | |
--custom-mobile-button-position: 8px; | |
background: var(--custom-color-button-resting) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMS4xMiAyMS4xIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjtzdHJva2Utd2lkdGg6MHB4O308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0xNi41LDIxLjFIMi41Yy0xLjM4LDAtMi41LTEuMTItMi41LTIuNVY0LjZjMC0xLjM4LDEuMTItMi41LDIuNS0yLjVoN2MuMjgsMCwuNS4yMi41LjVzLS4yMi41LS41LjVIMi41Yy0uODMsMC0xLjUuNjctMS41LDEuNXYxNGMwLC44My42NywxLjUsMS41LDEuNWgxNGMuODMsMCwxLjUtLjY3LDEuNS0xLjV2LTdjMC0uMjguMjItLjUuNS0uNXMuNS4yMi41LjV2N2MwLDEuMzgtMS4xMiwyLjUtMi41LDIuNVoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Im0yMC4zNS43NGMtLjk5LS45OS0yLjcyLS45OS0zLjcxLDBMNy4wNSwxMC4zNGwtMS4yNCw0Ljk0LDQuOTQtMS4yNCw5LjYtOS42YzEuMDItMS4wMiwxLjAyLTIuNjksMC0zLjcxWiIvPjwvc3ZnPg==") no-repeat center; /* Feather icon: edit */ | |
background-size: 16px; | |
border-color: transparent; | |
background-position-x: 10px; | |
background-position-y: 8px; | |
border-radius: var(--custom-border-radius); | |
height: calc(var(--custom-mobile-button-size) + 5px); | |
position: fixed; | |
bottom: var(--custom-mobile-button-position); | |
right: var(--custom-mobile-button-position); | |
transition: background-color var(--custom-transition-short) ease-in-out; | |
width: var(--custom-mobile-button-size); | |
} | |
.button.button-secondary[href="/publish"]:hover { | |
background-color: var(--custom-color-button-hover); | |
} | |
.button.button-secondary[href="/publish"]:active { | |
background-color: var(--custom-color-button-active); | |
transition: none; | |
} | |
.button.button-secondary[href="/publish"] span { | |
border: 0; | |
clip: rect(0 0 0 0); | |
height: 1px; | |
margin: -1px; | |
overflow: hidden; | |
padding: 0; | |
position: absolute; | |
white-space: nowrap; | |
width: 1px; | |
} | |
.columns-area__panels__main .status { | |
padding-right: 8px; | |
padding-left: 14px; | |
} | |
} | |
/* | |
ENHANCEMENTS | |
*/ | |
.compose-form .compose-form__publish { | |
padding-bottom: 20px; | |
} | |
/* Account card */ | |
.explore__suggestions .account-card { | |
margin: 30px 10px 10px 10px; | |
} | |
.scrollable .account-card { | |
background-color: var(--custom-color-background); | |
border: 1px solid var(--custom-color-border-resting); | |
} | |
.scrollable .account-card__bio::after { | |
background: none; | |
} | |
.account-card__title__avatar .account__avatar { | |
border-radius: var(--custom-border-radius); | |
} | |
/* Bio */ | |
.account__header__fields, | |
.account__header__fields .verified { | |
background: var(--custom-color-background) !important; | |
} | |
.account__header__fields dl { | |
padding: 11px 16px 11px 0 !important; | |
border-bottom-color: var(--custom-color-border-resting) !important; | |
} | |
.account__header__fields .verified { | |
border-top-color: var(--custom-color-border-resting) !important; | |
border-right: none !important; | |
border-bottom-color: var(--custom-color-border-resting) !important; | |
border-left: none !important; | |
} | |
.account__header__bio .account__header__fields .verified a, | |
.account__header__fields .verified__mark { | |
color: var(--custom-color-text-verified); | |
} | |
.account__header__fields dl dt { | |
color: var(--custom-color-text-secondary) !important; | |
text-transform: initial !important; | |
} | |
/* Avatar and display name lockup */ | |
.account__avatar, | |
.status__avatar { | |
border-radius: var(--custom-border-radius); | |
} | |
.display-name span { | |
bottom: 4px; | |
position: relative; | |
font-size: var(--custom-font-size-small); | |
} | |
/* Hamburger menu */ | |
.compose__action-bar-dropdown [aria-label="Menu"] { | |
transition: background-color var(--custom-transition-short) ease-in-out; | |
} | |
.compose__action-bar-dropdown [aria-label="Menu"]:active { | |
transition: none; | |
} | |
/* Load more */ | |
.load-more { | |
transition: background-color var(--custom-transition-short) ease-in-out; | |
} | |
.load-more:focus, | |
.load-more:hover { | |
background-color: var(--custom-color-background-panel); | |
} | |
@media screen and (max-width: 1174px) { | |
.load-more:focus, | |
.load-more:hover { | |
background-color: var(--custom-color-background); | |
} | |
} | |
.load-more:active { | |
transition: none; | |
} | |
/* Dropdowns */ | |
.dropdown-menu__item a:hover, | |
.dropdown-menu__item button:hover, | |
.privacy-dropdown__option.active, | |
.privacy-dropdown__option:hover, | |
.language-dropdown__dropdown__results__item:hover, | |
.language-dropdown__dropdown__results__item.active, | |
.search__popout__menu__item.selected, | |
.search__popout__menu__item:hover { | |
background: var(--custom-color-background-select) !important; | |
color: var(--custom-color-text-select) !important; | |
} | |
.language-dropdown__dropdown__results__item .language-dropdown__dropdown__results__item__common-name { | |
color: var(--custom-color-text-secondary); | |
} | |
.search__popout__menu__item.selected .icon-button, | |
.search__popout__menu__item:hover .icon-button { | |
color: var(--custom-color-text-select) !important; | |
} | |
.language-dropdown__dropdown__results__item:hover .language-dropdown__dropdown__results__item__common-name, | |
.language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name { | |
color: var(--custom-color-text-select) !important; | |
} | |
.dropdown-menu__separator { | |
border-top-color: var(--custom-color-border-resting) !important; | |
} | |
.actions-modal .dropdown-menu__separator { | |
border-bottom-color: var(--custom-color-border-resting) !important; | |
} | |
/* Profile edit */ | |
.navigation-bar strong { | |
font-size: var(--custom-font-size-medium); | |
font-weight: bold; | |
} | |
.navigation-bar__profile-edit { | |
color: var(--custom-color-link-secondary-resting) !important; | |
} | |
.navigation-bar__profile-edit span { | |
position: relative; | |
bottom: 3px | |
} | |
/* Reply meta */ | |
.detailed-status__meta { | |
opacity: 0.6; | |
transition: opacity var(--custom-transition-short) ease-in-out; | |
} | |
.detailed-status__meta:hover { | |
opacity: 1; | |
} | |
/* Buttons */ | |
.button { | |
transition: background-color var(--custom-transition-short) ease-in-out; | |
} | |
.button:active { | |
background-color: var(--custom-color-button-active); | |
transition: none !important; | |
} | |
/* Icon buttons */ | |
.status__action-bar { | |
justify-content: start; | |
} | |
.status__action-bar__dropdown { | |
margin-left: auto; | |
} | |
.compose-form__buttons-wrapper [aria-label="Add images, a video or an audio file"], | |
.compose-form__buttons-wrapper [aria-label="Add a poll"], | |
.compose-form__buttons-wrapper [aria-label="Change post privacy"], | |
.compose-form__buttons-wrapper [aria-label="Add content warning"], | |
.compose-form__buttons-wrapper [aria-label="Change language"], | |
.status__action-bar [aria-label="Reply"], | |
.status__action-bar [aria-label="Reply to thread"], | |
.status__action-bar [aria-label="Boost"], | |
.status__action-bar [aria-label="Favorite"], | |
.status__action-bar [aria-label="More"], | |
.detailed-status__action-bar [aria-label="Reply"], | |
.detailed-status__action-bar [aria-label="Boost"], | |
.detailed-status__action-bar [aria-label="Favorite"], | |
.detailed-status__action-bar [aria-label="More"] { | |
transition: background-color var(--custom-transition-short) ease-in-out; | |
} | |
.compose-form__buttons-wrapper [aria-label="Add images, a video or an audio file"]:active, | |
.compose-form__buttons-wrapper [aria-label="Add a poll"]:active, | |
.compose-form__buttons-wrapper [aria-label="Change post privacy"]:active, | |
.compose-form__buttons-wrapper [aria-label="Add content warning"]:active, | |
.compose-form__buttons-wrapper [aria-label="Change language"]:active, | |
.status__action-bar [aria-label="Reply"]:active, | |
.status__action-bar [aria-label="Reply to thread"]:active, | |
.status__action-bar [aria-label="Boost"]:active, | |
.status__action-bar [aria-label="Favorite"]:active, | |
.status__action-bar [aria-label="More"]:active, | |
.detailed-status__action-bar [aria-label="Reply"]:active, | |
.detailed-status__action-bar [aria-label="Reply to thread"]:active, | |
.detailed-status__action-bar [aria-label="Boost"]:active, | |
.detailed-status__action-bar [aria-label="Favorite"]:active, | |
.detailed-status__action-bar [aria-label="More"]:active { | |
transition: none; | |
} | |
.status__action-bar [aria-label="Bookmark"], | |
.detailed-status__action-bar [aria-label="Bookmark"] { | |
display: none; | |
} | |
.status__action-bar [aria-label="Reply"], | |
.status__action-bar [aria-label="Reply to thread"], | |
.status__action-bar [aria-label="Boost"], | |
.status__action-bar [aria-label="Favorite"], | |
.status__action-bar [aria-label="More"], | |
.detailed-status__action-bar [aria-label="Reply"], | |
.detailed-status__action-bar [aria-label="Boost"], | |
.detailed-status__action-bar [aria-label="Favorite"], | |
.detailed-status__action-bar [aria-label="More"] { | |
filter: brightness(1.35); | |
transition: filter var(--custom-transition-short) ease-in-out; | |
} | |
.status__action-bar [aria-label="Reply"]:hover, | |
.status__action-bar [aria-label="Reply to thread"]:hover, | |
.status__action-bar [aria-label="Boost"]:hover, | |
.status__action-bar [aria-label="Favorite"]:hover, | |
.status__action-bar [aria-label="More"]:hover, | |
.detailed-status__action-bar [aria-label="Reply"]:hover, | |
.detailed-status__action-bar [aria-label="Boost"]:hover, | |
.detailed-status__action-bar [aria-label="Favorite"]:hover, | |
.detailed-status__action-bar [aria-label="More"]:hover { | |
filter: none; | |
} | |
/* Secondary text */ | |
.display-name__account, | |
.status__relative-time, | |
.notification-follow .account__display-name .account__details, | |
.account__header__tabs__name small span, | |
.search-results__section .account__details { | |
color: var(--custom-color-text-secondary); | |
} | |
.status__relative-time { | |
position: relative; | |
bottom: 2px; | |
} | |
.status__relative-time .status__visibility-icon, | |
.status__relative-time time, | |
.status__relative-time abbr { | |
font-size: var(--custom-font-size-small) !important; | |
} | |
/* Polls */ | |
.poll__input { | |
border-color: var(--custom-color-border-poll-unvoted-hover); | |
} | |
.poll__input:hover { | |
border-color: var(--custom-color-border-poll-unvoted-hover); | |
} | |
.poll__input.active { | |
background-color: var(--custom-color-border-poll-unvoted-hover); | |
border-color: var(--custom-color-border-poll-unvoted-hover); | |
} | |
/* Prepended statuses */ | |
.status__prepend { | |
font-size: var(--custom-font-size-small) !important; | |
position: relative; | |
right: 2px; | |
} | |
.status__prepend > span { | |
position: relative; | |
right: 7px; | |
} | |
.status__wrapper-direct .status__prepend > span { | |
background-color: var(--custom-color-background-dm); | |
z-index: 100; | |
} | |
.status__prepend, | |
.status__prepend .status__prepend-icon-wrapper i, | |
.status__prepend .status__display-name strong, | |
.status__prepend .status__display-name span { | |
color: var(--custom-color-text-secondary) !important; | |
} | |
/* Status link cards */ | |
a.status-card { | |
border-color: var(--custom-color-border-resting) !important; | |
transition: border-color var(--custom-transition-short) ease-in-out; | |
} | |
a.status-card:hover { | |
border-color: var(--custom-color-border-active) !important; | |
} | |
a.status-card .status-card__title, | |
a.status-card:hover .status-card__title { | |
color: var(--custom-color-text-primary) !important; | |
} | |
a.status-card .status-card__host, | |
a.status-card:hover .status-card__host, | |
a.status-card .status-card__author, | |
a.status-card:hover .status-card__author, | |
a.status-card .status-card__description, | |
a.status-card:hover .status-card__description { | |
color: var(--custom-color-text-secondary) !important; | |
} | |
.status-card__author { | |
font-size: var(--custom-font-size-smallest); | |
} | |
a.status-card .status-card__host { | |
margin-bottom: 0; | |
} | |
/* Banners */ | |
.dismissable-banner { | |
border: none; | |
} | |
/* Toot content */ | |
.reply-indicator__content, | |
.status__content__text--visible { | |
color: var(--custom-color-text-primary); | |
line-height: 1.4; | |
max-width: 52ch; | |
} | |
@media screen and (max-width: 1174px) { | |
.reply-indicator__content, | |
.status__content__text--visible { | |
line-height: 1.3; | |
max-width: unset; | |
} | |
} | |
.hashtag-bar a, | |
.hashtag-bar button { | |
color: var(--custom-color-text-secondary) !important; | |
} | |
.getting-started__trends h4 { | |
color: var(--custom-color-text-secondary); | |
text-transform: initial; | |
} | |
.getting-started__trends .trends__item__name span:nth-of-type(2) { | |
color: var(--custom-color-text-secondary); | |
} | |
/* No alt text warning */ | |
.media-gallery__gifv video:not([title]), | |
.media-gallery__gifv video[title=""], | |
.media-gallery__item-thumbnail img:not([alt]), | |
.media-gallery__item-thumbnail img[alt=""] { | |
border: 2px solid var(--custom-color-border-error); | |
box-sizing: border-box; | |
border-radius: 3px; | |
height: 99%; | |
width: 99%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for checking this out!
I am not currently taking feature requests for this, but hopefully it can serve as a good starting point for your efforts. You can also read more about the decisions that went into creating this.
If you manage your own Mastodon server you can add this by going to Preferences > Administration > Server Settings > Appearance.