Last active
December 8, 2023 20:35
-
-
Save pcantrell/5572729080a0ce938572a48f2e12b3ca to your computer and use it in GitHub Desktop.
Stylesheet to make Mastodon more macOS-like
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
body.app-body.layout-multiple-columns.theme-mastodon-light, | |
body.app-body.layout-multiple-columns.theme-default, | |
body.app-body.layout-multiple-columns.theme-contrast { | |
overflow: hidden !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .columns-area, | |
body.app-body.layout-multiple-columns.theme-default .columns-area, | |
body.app-body.layout-multiple-columns.theme-contrast .columns-area { | |
margin: 0 -1px !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .column, | |
body.app-body.layout-multiple-columns.theme-mastodon-light .drawer, | |
body.app-body.layout-multiple-columns.theme-default .column, | |
body.app-body.layout-multiple-columns.theme-default .drawer, | |
body.app-body.layout-multiple-columns.theme-contrast .column, | |
body.app-body.layout-multiple-columns.theme-contrast .drawer { | |
padding: 0 !important; | |
margin: -1px 0 0 -1px !important; | |
flex: 1 1 auto !important; | |
min-width: 300px !important; | |
max-width: 450px !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .drawer, | |
body.app-body.layout-multiple-columns.theme-default .drawer, | |
body.app-body.layout-multiple-columns.theme-contrast .drawer { | |
flex: 0.5 0 300px !important; | |
border-left: 1px solid #c0cdd9 !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .drawer__header, | |
body.app-body.layout-multiple-columns.theme-default .drawer__header, | |
body.app-body.layout-multiple-columns.theme-contrast .drawer__header { | |
border-top: none !important; | |
border-left: none !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .search, | |
body.app-body.layout-multiple-columns.theme-default .search, | |
body.app-body.layout-multiple-columns.theme-contrast .search { | |
padding: 10px 20px !important; | |
margin: 10px 0 !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .search__input, | |
body.app-body.layout-multiple-columns.theme-default .search__input, | |
body.app-body.layout-multiple-columns.theme-contrast .search__input { | |
border-radius: 10px !important; | |
font-size: inherit !important; | |
padding: 10px !important; | |
background: inherit !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .search__icon .fa, | |
body.app-body.layout-multiple-columns.theme-default .search__icon .fa, | |
body.app-body.layout-multiple-columns.theme-contrast .search__icon .fa { | |
top: 20px !important; | |
right: 30px !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .drawer__header, | |
body.app-body.layout-multiple-columns.theme-default .drawer__header, | |
body.app-body.layout-multiple-columns.theme-contrast .drawer__header { | |
margin: 0 !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .drawer, | |
body.app-body.layout-multiple-columns.theme-default .drawer, | |
body.app-body.layout-multiple-columns.theme-contrast .drawer { | |
padding: 0 !important; | |
margin: 0 !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .drawer__inner, | |
body.app-body.layout-multiple-columns.theme-default .drawer__inner, | |
body.app-body.layout-multiple-columns.theme-contrast .drawer__inner { | |
border: none !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .navigation-bar, | |
body.app-body.layout-multiple-columns.theme-mastodon-light .compose-form, | |
body.app-body.layout-multiple-columns.theme-default .navigation-bar, | |
body.app-body.layout-multiple-columns.theme-default .compose-form, | |
body.app-body.layout-multiple-columns.theme-contrast .navigation-bar, | |
body.app-body.layout-multiple-columns.theme-contrast .compose-form { | |
padding: 10px 20px !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .status__prepend, | |
body.app-body.layout-multiple-columns.theme-default .status__prepend, | |
body.app-body.layout-multiple-columns.theme-contrast .status__prepend { | |
font-size: 90% !important; | |
line-height: 140% !important; | |
padding-bottom: 0 !important; | |
margin-bottom: -5px !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .status, | |
body.app-body.layout-multiple-columns.theme-default .status, | |
body.app-body.layout-multiple-columns.theme-contrast .status { | |
padding-top: 10px !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .status > *, | |
body.app-body.layout-multiple-columns.theme-default .status > *, | |
body.app-body.layout-multiple-columns.theme-contrast .status > * { | |
font-size: 108% !important; | |
line-height: 140% !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .status__display-name, | |
body.app-body.layout-multiple-columns.theme-default .status__display-name, | |
body.app-body.layout-multiple-columns.theme-contrast .status__display-name { | |
font-size: 100% !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .muted .status__content, | |
body.app-body.layout-multiple-columns.theme-default .muted .status__content, | |
body.app-body.layout-multiple-columns.theme-contrast .muted .status__content { | |
max-height: 4em !important; | |
position: relative !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .muted .status__content:after, | |
body.app-body.layout-multiple-columns.theme-default .muted .status__content:after, | |
body.app-body.layout-multiple-columns.theme-contrast .muted .status__content:after { | |
content: ""; | |
position: absolute; | |
z-index: 1; | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
height: 1.6em; | |
pointer-events: none; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light ::-webkit-scrollbar, | |
body.app-body.layout-multiple-columns.theme-default ::-webkit-scrollbar, | |
body.app-body.layout-multiple-columns.theme-contrast ::-webkit-scrollbar { | |
width: 0 !important; | |
height: 0 !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .column-header, | |
body.app-body.layout-multiple-columns.theme-mastodon-light .column-header button, | |
body.app-body.layout-multiple-columns.theme-mastodon-light .drawer-header, | |
body.app-body.layout-multiple-columns.theme-mastodon-light .drawer__tab { | |
background: #F7FAFC !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .status, | |
body.app-body.layout-multiple-columns.theme-mastodon-light .column-header, | |
body.app-body.layout-multiple-columns.theme-mastodon-light .drawer__header { | |
border-bottom: 0.5px solid #B5BEC6 !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .drawer { | |
background: #fff !important; | |
} | |
body.app-body.layout-multiple-columns.theme-mastodon-light .muted .status__content:after { | |
background-image: linear-gradient(to bottom, | |
#FFF0, | |
#FFFF 100%); | |
} | |
body.app-body.layout-multiple-columns.theme-default .column-header, | |
body.app-body.layout-multiple-columns.theme-default .column-header button, | |
body.app-body.layout-multiple-columns.theme-default .drawer-header, | |
body.app-body.layout-multiple-columns.theme-default .drawer__tab, | |
body.app-body.layout-multiple-columns.theme-contrast .column-header, | |
body.app-body.layout-multiple-columns.theme-contrast .column-header button, | |
body.app-body.layout-multiple-columns.theme-contrast .drawer-header, | |
body.app-body.layout-multiple-columns.theme-contrast .drawer__tab { | |
background: #444b5d !important; | |
} | |
body.app-body.layout-multiple-columns.theme-default .search__input, | |
body.app-body.layout-multiple-columns.theme-contrast .search__input { | |
border: 0.5px solid #8B9AC0 !important; | |
} | |
body.app-body.layout-multiple-columns.theme-default .status, | |
body.app-body.layout-multiple-columns.theme-default .account, | |
body.app-body.layout-multiple-columns.theme-default .column-header, | |
body.app-body.layout-multiple-columns.theme-default .drawer__header, | |
body.app-body.layout-multiple-columns.theme-contrast .status, | |
body.app-body.layout-multiple-columns.theme-contrast .account, | |
body.app-body.layout-multiple-columns.theme-contrast .column-header, | |
body.app-body.layout-multiple-columns.theme-contrast .drawer__header { | |
border-bottom: 1px solid #000 !important; | |
} | |
body.app-body.layout-multiple-columns.theme-default .drawer, | |
body.app-body.layout-multiple-columns.theme-contrast .drawer { | |
background: #444b5d !important; | |
} | |
body.app-body.layout-multiple-columns.theme-default .column > .scrollable, | |
body.app-body.layout-multiple-columns.theme-contrast .column > .scrollable { | |
border-left: 1px solid #000 !important; | |
} | |
body.app-body.layout-multiple-columns.theme-default .muted .status__content:after, | |
body.app-body.layout-multiple-columns.theme-contrast .muted .status__content:after { | |
background-image: linear-gradient(to bottom, | |
#282c3700, | |
#282c37FF 100%); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Changing the second rule to:
`body.app-body.layout-multiple-columns.theme-mastodon-light .columns-area,
body.app-body.layout-multiple-columns.theme-default .columns-area,
body.app-body.layout-multiple-columns.theme-contrast .columns-area {
max-width: 100%;
min-width: 1200px;
margin-right: -1px !important;
}`
Makes the page dynamically scale to the browser window size instead of being maxed out at 1600px wide.