Firehawk52-backup/Mastodon-Modern
28
0
Fork 0
mirror of https://git.gay/freeplay/Mastodon-Modern.git synced 2026-01-15 16:32:57 -03:00
Code Issues Actions Packages Projects Releases Wiki Activity

1.8.1 - Mobile: Revert to side nav when browser doesn't support :has()

Browse Source
This commit is contained in:
freeplay
2023-10-10 17:16:37 -04:00
parent ffbd82be36
commit 8c8be8319e
2 changed files with 258 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

376
modern.user.css
View File

@@ -13,20 +13,13 @@
////////////////////////////////////////////////////////////////////
/* Update 1.8.0
- Mobile: Change the sidebar into a bottom bar!
- Styled unread count indicator
- Styled new search page
- Minimized media in notifications
- Fixed open in advanced interface notice not showing
- Fixed overlapping nav buttons in announcements
- Margins & other fixes, tweaks
- Glitch-soc: Fixed notes
/* Update 1.8.1
- Revert to side nav when browser doesn't support :has()
*/
/* ==UserStyle==
@name Mastodon Modern
@version 1.8.0
@version 1.8.1
@description Drastically improves the look & feel of Mastodon
@updateURL https://codeberg.org/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css
@homepageURL https://codeberg.org/Freeplay/Mastodon-Modern
@@ -710,40 +703,33 @@
@media (max-width mobileW) {
padding-inline 15px
}
/body:not(.flavour-glitch) & {
background inherit !important
}
border-radius var(--radius) var(--radius) 0 0
margin-top calc(0px - var(--radius)) !important
display flex
flex-direction column
background inherit
// &::before {
// content ""
// position absolute
// inset 0
// border-radius inherit
// background rgba(220,220,255,0.05)
// }
.account__header__tabs {
overflow visible !important
position relative
align-items flex-end
padding 0
padding-top 10px
// padding-top 10px
height unset !important
margin-top -55px !important
isolation isolate
&::before { // Add blur below the account header
content ""
position absolute
top 0
left -20px
right -20px
bottom -40px
bottom -100px
backdrop-filter blur(40px)
filter brightness(1.1)
pointer-events none
opacity .7
z-index -1
clip-path: inset(55px 0 0 0 round var(--radius));
mask linear-gradient(transparent 55px, black 50px, transparent)
-webkit-mask @mask
@@ -756,17 +742,19 @@
margin-inline-start 0 !important
overflow visible !important
position relative
margin-top 20px
.account-role {
position absolute
bottom 0
left 100%
border-radius var(--radius-round)
left 110%
border-radius var(--radius)
}
}
.account__avatar {
border 0
box-shadow var(--shadow)
// background none
background none
background-size cover !important
}
}
.account__header__tabs__name {
@@ -778,6 +766,7 @@
flex-wrap wrap
white-space unset
gap 0 .4em
font-weight 600
}
}
.account__header__badges {
@@ -793,9 +782,11 @@
padding-inline 0
}
}
.account__header__content {
padding-top 0
}
.account__header__extra {
line-height 1.5
margin-top 1em
}
}
@@ -803,6 +794,7 @@
display flex
flex-wrap wrap
gap 2px
margin-bottom 20px
background none
// margin-inline -10px
border-radius var(--radius)
@@ -1306,19 +1298,6 @@
inset -10px
border-radius var(--radius)
}
/* .account__contents {
flex-grow 1
}
.display-name {
display contents
bdi {
display block
}
}
.account__details {
display inline-flex
margin-left 1em
} */
}
// Fix dropdown note preview
@@ -1975,7 +1954,7 @@
background none
}
.column-header/*, .column-header__buttons button:not(.active)*/ {
.column-header {
background none !important
overflow hidden
border 0
@@ -2418,14 +2397,35 @@
gap 10px
border 0 !important
overflow visible
&::after {
content ""
position absolute
inset-inline-end 54px
top 100%
width var(--radius)
height var(--radius)
background inherit
mask radial-gradient(var(--radius) at 0px var(--radius),#0000 100%,#000)
-webkit-mask @mask
z-index 9999
/.rtl & {
transform scaleX(-1)
}
}
.ui__header__logo {
padding-block 5px !important
}
.ui__header__links {
min-width max-content
position sticky
right 0
inset-inline-end 50px
background inherit
:has(body) & {
right 0
}
}
[href="/search"] {
margin-inline-end 5px
@@ -2433,9 +2433,7 @@
[href="/publish"] {
position fixed
bottom 15px
bottom 70px
inset-inline-end 15px
// margin-inline -60px
border-radius 100px !important
border-radius var(--radius) !important
height 60px
@@ -2454,6 +2452,7 @@
touch-action manipulation
animation scaleIn transBounce1
visibility visible
&::before {
content ""
fa()
@@ -2481,6 +2480,20 @@
pointer-events none
}
}
[href^="/@"], a.permalink[href] {
position fixed
inset-inline-end 1px
width 53px
display flex
justify-content center
background inherit
}
:has(body) & {
[href^="/@"], a.permalink[href] {
position static !important
width unset
}
}
}
.tabs-bar__wrapper {
top 0
@@ -2492,123 +2505,129 @@
}
// Navigation
.columns-area__panels {
flex-direction column
}
.columns-area__panels__main {
width 100%
border-radius 0 !important
margin 0 !important
border 0 !important
}
.tabs-bar__wrapper {
transition none !important
}
&:has(.column-header__buttons:empty) {
&:has(*) { // would've rather used @supports but stylus is dumb apparently
[href="/publish"] {
bottom 70px !important
}
.columns-area__panels {
flex-direction column
}
.columns-area__panels__main {
width 100%
border-radius 0 !important
margin 0 !important
border 0 !important
}
.tabs-bar__wrapper {
margin-top -50px
margin-bottom 2px
height 48px
transition none !important
}
}
.columns-area__panels__pane--navigational {
display contents
.columns-area__panels__pane__inner {
position relative !important
inset unset !important
order -1
width unset
height auto
white-space nowrap
&:has(.column-header__buttons:empty) {
.tabs-bar__wrapper {
margin-top -50px
margin-bottom 2px
height 48px
}
}
.navigation-panel {
flex-direction row
margin 0
padding 0
padding 0 8px
height 5em
gap 10px
border-block 1px solid
overflow scroll hidden
align-items center
&::-webkit-scrollbar {
.columns-area__panels__pane--navigational {
display contents
.columns-area__panels__pane__inner {
position relative !important
inset unset !important
order -1
width unset
height auto
white-space nowrap
}
.navigation-panel {
flex-direction row
margin 0
padding 0
padding 0 8px
height 5em
gap 10px
border-block 1px solid
overflow scroll hidden
align-items center
&::-webkit-scrollbar {
display none
}
}
hr {
display none
}
}
hr {
display none
}
.trends__item__name > span, .trends__item__sparkline {
display none
}
.navigation-panel__legal, h4,
.trends__item, .trends__item__name {
all unset
display contents !important
&::before, &::after {
content unset
.trends__item__name > span, .trends__item__sparkline {
display none
}
}
h4 a span::after {
content ":" !important
}
&:has(.getting-started__trends) {
&:has(.navigation-panel__sign-in-banner) {
.flex-spacer {
border-right 1px solid var(--border-color)
height 50%
margin 10px
}
.getting-started__trends {
all unset
display contents !important
.navigation-panel__legal, h4,
.trends__item, .trends__item__name {
all unset
display contents !important
&::before, &::after {
content unset
}
}
.trends__item:last-child a {
position relative
z-index 3
}
}
a, h4 > span {
// background var(--elevated-color)
position relative
overflow hidden
border-radius var(--radius)
padding .8em 1em
font-weight 600
font-size 1.1em
text-align center
min-width max-content
transition padding .2s
&::before {
content ""
position absolute
inset 0
background currentcolor
opacity 0
border-radius inherit
transition inset .4s cubic-bezier(0,0,0,1.2), opacity .2s
}
i {
font-size 1em
width auto
margin-right 0
}
&.active {
padding-inline 1.2em
h4 a span::after {
content ":" !important
}
&:has(.getting-started__trends) {
&:has(.navigation-panel__sign-in-banner) {
.flex-spacer {
border-right 1px solid var(--border-color)
height 50%
margin 10px
}
.getting-started__trends {
all unset
display contents !important
}
}
.trends__item:last-child a {
position relative
z-index 3
}
}
a, h4 > span {
// background var(--elevated-color)
position relative
overflow hidden
border-radius var(--radius)
padding .8em 1em
font-weight 600
font-size 1.1em
text-align center
min-width max-content
transition padding .2s
&::before {
inset 0 !important
opacity .1
content ""
position absolute
inset 0
background currentcolor
opacity 0
border-radius inherit
transition inset .4s cubic-bezier(0,0,0,1.2), opacity .2s
}
i {
font-size 1em
width auto
margin-right 0
}
&.active {
padding-inline 1.2em
position relative
&::before {
inset 0 !important
opacity .1
}
}
> span:not(:first-child) {
margin-left .7em
}
}
> span:not(:first-child) {
margin-left .7em
span {
display unset
}
}
span {
display unset
}
}
@@ -2635,14 +2654,6 @@
visibility visible
// opacity .9
}
/* @supports (backdrop-filter: blur(0px)) {
&::after {
filter none
opacity 1
background none
backdrop-filter blur(10px)
}
} */
}
.navigation-panel {
padding-inline 14px
@@ -2784,6 +2795,7 @@
border-start-end-radius var(--radius)
overflow clip !important
flex-grow 1
margin-top 1px
// order 2
> .columns-area--mobile {
overflow visible !important
@@ -2869,60 +2881,6 @@
z-index -1
}
}
/* .compose-form {
&::before {
content ""
position absolute
inset 0
background var(--elevated-color)
z-index -1
}
padding 0
.reply-indicator {
margin-inline 16px
padding 15px
}
textarea, .spoiler-input__input
.compose-form__modifiers,
.compose-form__buttons-wrapper,
.compose-form__publish {
background none
color unset
height auto
border-radius 0 !important
padding-inline 16px
border-bottom 1px solid var(--border-color)
}
textarea {
padding-inline-end 50px
}
.compose-form__modifiers {
padding-inline 10px
}
.spoiler-input {
padding-top 5px !important
}
.spoiler-input__input {
font-weight 600
}
.emoji-picker-dropdown {
inset-inline-end 20px
}
.compose-form__buttons-wrapper {
margin-inline -10px 0
}
.compose-form__publish {
border 0
}
.inverted, button {
padding 10px
}
.inverted, button {
&:not(.active) {
color inherit !important
}
}
} */
// ABOUT PAGE
.about.about.about {