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 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
| 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.