Skip to content

Instantly share code, notes, and snippets.

@ericwbailey
Last active November 27, 2023 15:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ericwbailey/dab7fa46fc03beaa011abc5864a49ddc to your computer and use it in GitHub Desktop.
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/
: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%;
}
@ericwbailey
Copy link
Author

ericwbailey commented Nov 8, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment