Mimicks the Threads desktop UI for the Mastodon Pinafore client (pinafore.social)
Threads for Mastodon Pinafore by Freeplay
Imported and mirrored from https://codeberg.org/Freeplay/UserStyles/raw/branch/main/mastodon/threads-for-pinafore.user.css
Details
AuthorFreeplay
License
Categorypinafore
Created
Updated
Size18 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Threads for Mastodon Pinafore
@version 1.0.1
@description Mimicks the Threads desktop UI for the Mastodon Pinafore client (pinafore.social)
@preprocessor stylus
-- AUTHOR STUFF --
@namespace Freeplay
@author Freeplay (https://freeplay.codeberg.page/)
@homepageURL https://codeberg.org/Freeplay/UserStyles
@supportURL https://codeberg.org/Freeplay/UserStyles/issues
==/UserStyle== */
@-moz-document domain("pinafore.social") {
/* Insert code here... */
:root {
--body-bg rgb(16, 16, 16)
--body-text-color rgb(243, 245, 247)
--deemphasized-text-color rgb(119, 119, 119)
--main-border rgba(243, 245, 247, 0.15)
--button-border var(--main-border)
--button-primary-bg-hover rgb(30,30,30)
--button-bg rgb(24, 24, 24)
--main-bg var(--button-bg)
--length-indicator-color var(--deemphasized-text-color)
--settings-list-item-bg-hover transparent
--settings-list-item-border var(--main-border)
--form-bg transparent
--radius 12px
--radius-small 8px
--nav-total-height 74px
--main-content-gap-top 0px
--gradient hsl(0, 0%, 0%) 0%,
hsla(0, 0%, 0%, 0.987) 8.1%,
hsla(0, 0%, 0%, 0.951) 15.5%,
hsla(0, 0%, 0%, 0.896) 22.5%,
hsla(0, 0%, 0%, 0.825) 29%,
hsla(0, 0%, 0%, 0.741) 35.3%,
hsla(0, 0%, 0%, 0.648) 41.2%,
hsla(0, 0%, 0%, 0.55) 47.1%,
hsla(0, 0%, 0%, 0.45) 52.9%,
hsla(0, 0%, 0%, 0.352) 58.8%,
hsla(0, 0%, 0%, 0.259) 64.7%,
hsla(0, 0%, 0%, 0.175) 71%,
hsla(0, 0%, 0%, 0.104) 77.5%,
hsla(0, 0%, 0%, 0.049) 84.5%,
hsla(0, 0%, 0%, 0.013) 91.9%,
hsla(0, 0%, 0%, 0) 100%
}
* {
line-height 1.5 !important
}
.infinite-scroll-page {
min-height calc(100vh - var(--nav-total-height) - 15px) !important
}
// global
.size-small, .compose-box-avatar, .status-sidebar {
width 48px !important
height 36px !important
margin-right 0 !important
> img {
width 36px !important
height 36px !important
border-radius 100px !important
}
}
.avatar {
border-radius 100px
}
a, button {
transition background .2s
}
button, .button {
border-radius var(--radius)
padding-inline 16px
font-size 1em
font-weight 600
&.primary {
background var(--button-bg)
border 1px solid var(--main-border)
}
}
input {
border 0
border-bottom 1px solid var(--main-border)
background none !important
padding-inline 0
border-radius 0 !important
}
.ui-settings {
border-radius var(--radius)
}
[class*="list-wrapper"] > [class*="-list"],
[class*="-results"] {
border 0 !important
li {
border 0
}
li > a {
border 0 !important
background none !important
border-radius var(--radius)
padding-inline 25px 20px !important
margin-inline -20px !important
&:hover, &:focus {
background var(--button-bg) !important
}
&[href*="/statuses/"] {
padding 0 !important
article::after {
content unset !important
}
}
}
.instance-switcher-button-wrapper {
margin 4px
border 0
border-radius var(--radius)
padding 10px
}
}
// tabs
nav {
font-size 15px
overflow-x auto
white-space nowrap
.current, .not-current {
background none !important
border 0
border-bottom 1px solid var(--main-border) !important
min-width max-content
@media (min-width 770px) {
&:first-child {
margin-left 20px
}
&:last-child {
margin-right 20px
}
}
a {
box-sizing border-box
line-height 48px !important
padding-block 0
font-weight 600
}
}
.not-current a {
color var(--deemphasized-text-color) !important
}
.current {
border-color currentcolor !important
}
}
// page
#main-nav {
display flex
background none
height var(--nav-total-height)
&::before, &::after {
content ""
position absolute
inset 0
background var(--body-bg)
z-index -1
opacity .85
}
&::after {
backdrop-filter blur(28.5px)
opacity 1
background none
}
}
.main-nav-ul {
width 100%
.nav-indicator-wrapper, .nav-link-label {
display none
}
@media (min-width 992px) {
padding-inline 10px !important
.main-nav-li:first-child {
flex-grow 1
width 180px
a {
display flex !important
flex-direction row !important
justify-content space-between !important
pointer-events none
.nav-icon-and-label, &::after {
pointer-events all
}
&::after {
content ""
width 90px
height 100%
background url("https://raw.githubusercontent.com/nolanlawson/pinafore/master/src/thirdparty/font-awesome-svg-png/white/svg/home.svg")
background-size var(--nav-icon-size)
background-position center
background-repeat no-repeat
filter brightness(.3)
transition filter .2s
}
> div {
flex-grow 0
}
svg {
filter none
}
&.selected, &:hover, &:focus {
&::after {
filter none
}
}
}
}
.main-nav-li:last-child {
flex-grow 1
a {
flex-grow 0
margin-left auto
}
}
}
.main-nav-link {
@media (min-width 770px) {
width 100px
}
background none !important
--nav-icon-size 26px
svg {
filter brightness(.3)
transition filter .2s
}
&.selected, &:hover, &:focus {
svg {
filter none
}
}
}
}
main {
background none
border 0
width 620px
}
@media (min-width 770px) {
.timeline-slot-reveal-container {
display contents
}
.dynamic-page-banner {
display contents !important
--anchor-text currentcolor
svg {
width 18px
height 2em
display inline
vertical-align -1.2em
margin-inline 20px 4px
margin-block 10px
}
h1 {
display inline
font-size 1.4em
font-weight 600
}
.dynamic-page-go-back {
position sticky
font-size 0
top 60px
padding 20px 0
float right
margin-top -100px
margin-right -20px
z-index 100
svg {
width 18px
height 30px
margin 0
}
}
}
}
@css {
.compose-box {
grid-template-areas:
"b name handle handle "
"b cw cw cw "
"avatar input input input "
"a gauge gauge gauge "
"a autosuggest autosuggest autosuggest"
"a poll poll poll "
"a toolbar toolbar length "
"a media media media "
"a sensitive sensitive sensitive " !important;
align-items: center;
}
}
.compose-box {
--button-border transparent
.compose-box-display-name, .compose-box-handle {
display none
}
.compose-box-avatar {
z-index 2
}
.content-warning-input {
margin 0 !important
padding 0
border 0
border-bottom 1px solid var(--main-border)
font-size 15px
}
.compose-box-input {
margin -15px 0 !important
padding 10px !important
margin-left -50px !important
padding-left 50px !important
border 0 !important
min-height 1em !important
height 1em
margin-block auto !important
font-size 15px !important
border-radius 12px
width unset !important
}
.compose-box-toolbar, .length-indicator {
transition .1s max-height linear, opacity .2s
max-height 100px
}
.compose-box-toolbar {
margin-left -10px
}
.length-indicator {
font-size 1em
margin-right 10px
}
.compose-media-container {
border-radius var(--radius)
overflow hidden
padding 0
}
.compose-media-alt-input {
margin 0
border 0
padding 10px
backdrop-filter blur(10px)
border-top 1px solid var(--main-border)
}
/.compose-box-button-wrapper {
margin-right 10px
.compose-box-button-halo {
margin 10px
margin-top 0
}
&.compose-box-button-sticky {
top 0
button {
height 36px
font-size 12px
line-height 0 !important
padding-block 0 !important
}
.compose-box-button-halo-sticky button {
transform translate(100px, 82px)
height 60px
}
@media (max-width 771px) {
display contents
.compose-box-button-halo {
display flex
justify-content flex-end
height 0
margin-bottom 46px
}
.compose-box-button-halo-sticky {
position sticky
top 100vh
display flex
align-items flex-end
z-index 9999
button {
transform none
margin-bottom 10px !important
}
}
}
}
button {
margin 0 !important
transition transform .3s cubic-bezier(0,1,0,1.05), height .2s
}
.primary {
background none
border 1px solid var(--button-border) !important
}
}
@media (min-width 770px) {
/.compose-box-border-bottom {
margin-inline 20px
width unset !important
}
}
}
// timeline
.more-items-header {
button {
width 100%
background none
height 60px
border-radius 0
border 0 !important
}
border-bottom 1px solid var(--main-border)
margin-inline 20px
padding 0 !important
}
.virtual-list-item, .list-item {
margin-inline calc(0px - 50vw + 50%) !important
padding-inline calc(50vw - 50%) !important
}
// STATUSES
@css {
.status-article.status-in-own-thread {
grid-template-areas:
"sidebar author-name "
"sidebar author-handle"
"spoiler spoiler "
"spoiler-btn spoiler-btn "
"mentions mentions "
"content content "
"card card "
"media-grp media-grp "
"media media "
"poll poll "
"toolbar toolbar "
"details details "
"compose compose " !important;
}
}
.status-article {
position relative
font-size 15px
border 0 !important
border-radius 12px
&::after {
content ""
position absolute
bottom 0
inset-inline 0
@media (min-width 770px) {
inset-inline 20px
}
border-top 1px solid var(--main-border)
}
padding-block 12px !important
:not(.invisible) {
font-size unset !important
}
> :not(.invisible) {
...