Created
December 1, 2022 22:06
-
-
Save nicepersonality/b9c6fb8be8dc1c093d8895bec515071a to your computer and use it in GitHub Desktop.
Some (opinionated) style tweaks, for a nicer Mastodon web interface. Use with the Stylus browser extension, or with the user style tool of your preference. These styles do not make any assumptions about color scheme. I built them for my own use, on Firefox on a Mac desktop. Untested on other browsers, no warranty, free to use and modify.
This file contains 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
/* Modified desktop layout for Mastodon, Hometown, etc. */ | |
/* creator: @nicepersonality@mspsocial.net */ | |
/* last modified: 2022-12-01 */ | |
/* Fonts and font size */ | |
.ui { | |
font-family: 'Libre Franklin', system-ui, sans-serif; | |
/* I haven’t had much success in @importing web fonts within Stylus, */ | |
/* so I use a font I have installed locally. Feel free to substitute */ | |
font-size: 1rem; | |
line-height: 1.375rem; | |
} | |
.status__info { | |
font-size: 1rem; | |
line-height: 1.375rem; | |
} | |
.status__content { | |
font-size: 1rem; | |
line-height: 1.375rem; | |
} | |
/* Neater columns that adjust to window width */ | |
.columns-area .drawer, | |
.columns-area .column { | |
min-width: 100vw; | |
width: max(100%, 320px); | |
} | |
@media screen and (min-width: 640px) { | |
.columns-area .drawer, | |
.columns-area .column { | |
min-width: 320px; | |
width: 50%; | |
} | |
} | |
@media screen and (min-width: 960px) { | |
.columns-area .drawer, | |
.columns-area .column { | |
width: 33.333%; | |
} | |
} | |
@media screen and (min-width: 1280px) { | |
.columns-area .drawer, | |
.columns-area .column { | |
width: 25%; | |
} | |
} | |
@media screen and (min-width: 1600px) { | |
.columns-area .drawer, | |
.columns-area .column { | |
width: 20%; | |
} | |
} | |
/* Status layout adjustments */ | |
/* Full-width status text */ | |
.status, | |
.detailed-status { | |
margin: 0 0 0.5rem; | |
padding: 0.5rem 0; | |
} | |
.status > *, | |
.detailed-status > * { | |
margin-left: 1rem; | |
margin-right: 1.5rem; | |
} | |
/* Full-width boost & notification info */ | |
.status__prepend, | |
.notification__message { | |
margin: 0; | |
padding: 0.5rem 0 0 1rem; | |
width: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: flex-start; | |
} | |
.status__prepend > *, | |
.notification__message > * { | |
position: static; | |
margin: 0; | |
padding-right: 8px; | |
} | |
/* Larger avatars and stacked time & account info */ | |
.status__relative-time { | |
display: block; | |
float: none; | |
margin: 0; | |
padding: 0; | |
} | |
.status__visibility-icon { | |
padding-left: 0; | |
} | |
.status__info { | |
position: relative; | |
min-height: 72px; | |
padding-left: 72px; | |
line-height: 20px; | |
} | |
.status__avatar { | |
top: 0; | |
left: 2px; | |
height: 60px; | |
width: 60px; | |
} | |
.account__avatar { | |
width: 60px !important; | |
height: 60px !important; | |
background-size: cover !important; | |
} | |
.account__avatar-overlay-base { | |
width: 48px; | |
height: 48px; | |
background-size: cover; | |
} | |
.status__info .status__display-name { | |
padding: 0; | |
} | |
.display-name__account { | |
display: block; | |
overflow-x: hidden; | |
text-overflow: ellipsis; | |
} | |
/* Optional adjustments*/ | |
/* Bigger in-message emoji now maintain consistent line heights */ | |
.reply-indicator__content .emojione, | |
.status__content .emojione { | |
height: 1em; | |
width: 1em; | |
vertical-align: text-bottom; | |
transform: scale(1.4); | |
margin: 0 0.2em; | |
} | |
/* Full-bleed visual media */ | |
.status > .media-gallery, | |
.status > .video-player, | |
.detailed-status > .media-gallery, | |
.detailed-status > .video-player { | |
margin: 0.5rem 0; | |
} | |
.media-gallery, | |
.media-gallery__item, | |
.video-player { | |
border-radius: 0; | |
} | |
/* Less-obtrusive gallery overlay buttons */ | |
.media-gallery button { | |
opacity: 0; | |
transition: opacity 0.3s ease-in-out; | |
} | |
.media-gallery:hover button, | |
.media-gallery:focus button, | |
.media-gallery:focus-within button { | |
opacity: 1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment