Skip to content

Instantly share code, notes, and snippets.

@BorisAnthony
Last active December 23, 2022 14:39
Show Gist options
  • Save BorisAnthony/d5bb60f8c882093b504f678218becd08 to your computer and use it in GitHub Desktop.
Save BorisAnthony/d5bb60f8c882093b504f678218becd08 to your computer and use it in GitHub Desktop.
CSS for Mastodon - 2022-12-23
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap');
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
font-weight: 400;
}
.getting-started__trends,
.link-footer,
.compose-form__warning {
display: none !important;
}
.status__content.status__content--with-action,
.status__action-bar,
.status-card.compact,
.media-gallery__item {
margin-left: 3.75em;
margin-right: 1em;
}
.status__prepend {
font-size: 95%;
font-weight: 400;
opacity: 0.7
}
.display-name__account {
font-size: 85%;
opacity: 0.6;
}
.status__info {
margin-bottom: 1.5em;
}
.status__relative-time {
opacity: 0.4;
font-size: .8em;
}
.status__action-bar {
margin: 2em 3.9em 0;
}
.status__action-bar button {
opacity: 0.4;
}
.status__action-bar button:hover {
opacity: 1;
}
.status__content {
margin-bottom: 1em;
}
.status__content,
.status__content__read-more-button {
font-weight: 400;
line-height: 17pt;
}
.status .media-gallery {
margin-top: 0;
}
.media-gallery__item {
margin-left: 0em;
margin-right: 1em;
width: unset !important;
height: unset !important;
}
.spoiler-button__overlay {
background: #757F9A;
/* fallback for old browsers */
background: -webkit-linear-gradient(to top, #D7DDE8, #757f9ab8);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #D7DDE8, #757f9ab8);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.mention.hashtag.status-link {
opacity: 0.6;
border: none;
}
.mention.hashtag.status-link:hover {
opacity: 1;
}
.navigation-panel a.column-link--transparent {
font-weight: 300;
opacity: 0.5
}
.navigation-panel a.column-link--transparent:hover {
opacity: 1
}
.navigation-panel .column-link:has(.icon-with-badge) {
opacity: 0.75;
}
.navigation-panel .column-link:has(.icon-with-badge) .column-link__icon,
.navigation-panel .column-link:has(.icon-with-badge) span {
opacity: 0.5;
}
@tenorune
Copy link

Thank you!

I stripped images and avatars from feed view, if of interest:
https://gist.github.com/tenorune/279366c8c833690f8d1d9ac88bd855a1

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