diff --git a/modern.css b/modern.css index ba46bd5..1e0b66a 100644 --- a/modern.css +++ b/modern.css @@ -480,6 +480,7 @@ a:focus-visible, padding-bottom: 20px; box-sizing: border-box; max-height: unset !important; + height: 100%; } #mastodon .search { margin-inline: 5px; @@ -2241,12 +2242,14 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ #mastodon .status__content__spoiler-link:focus::after { opacity: 1; } +#mastodon .detailed-status__wrapper-direct .status__prepend, #mastodon .status-direct .status__prepend, #mastodon .status__wrapper-direct .status__prepend, #mastodon .conversation .status__prepend { position: absolute; font-size: 0; } +#mastodon .detailed-status__wrapper-direct .status__content, #mastodon .status-direct .status__content, #mastodon .status__wrapper-direct .status__content, #mastodon .conversation .status__content { @@ -2262,6 +2265,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ overflow: hidden !important; max-width: max-content; } +#mastodon .detailed-status__wrapper-direct .status__content .media-gallery, #mastodon .status-direct .status__content .media-gallery, #mastodon .status__wrapper-direct .status__content .media-gallery, #mastodon .conversation .status__content .media-gallery { @@ -2338,7 +2342,9 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ margin-bottom: 10px !important; animation: scaleIn 0.4s; max-width: unset !important; - max-height: 80vh !important; +} +#mastodon .status .media-gallery__item { + max-height: 80vh; } .status-card { line-height: 1; @@ -2392,6 +2398,42 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ .audio-player .video-player__seek { margin: var(--radius); } +#mastodon .hashtag-bar { + margin-top: 8px; +} +#mastodon .hashtag-bar a, +#mastodon .hashtag-bar button { + font-size: 0.85em; + font-weight: 600; + opacity: 0.8; + padding: 0.2em 0.6em; + transition: opacity 0.2s; +} +#mastodon .hashtag-bar a { + position: relative; + border-radius: var(--radius); + background: var(--elevated-color); +} +#mastodon .hashtag-bar a::after { + content: ""; + position: absolute; + inset: 0; + background: var(--elevated-color); + border-radius: inherit; + opacity: 0; + transition: opacity 0.2s; +} +#mastodon .hashtag-bar a:hover, +#mastodon .hashtag-bar a:focus { + opacity: 1; +} +#mastodon .hashtag-bar a:hover::after, +#mastodon .hashtag-bar a:focus::after { + opacity: 1; +} +#mastodon .hashtag-bar button { + padding-block: 0; +} #mastodon .detailed-status__wrapper { border-radius: var(--radius); overflow: clip; @@ -3102,9 +3144,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ #mastodon .picture-in-picture__footer { flex-wrap: wrap; } - #mastodon .columns-area--mobile > .column > div > div { - animation: fadeUp 0.4s; - } #mastodon .columns-area--mobile > .column > .column-header__wrapper { display: none; } @@ -3123,6 +3162,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ box-sizing: border-box; gap: 10px; border: 0 !important; + overflow: visible; } .ui__header::after { content: ""; @@ -3189,10 +3229,133 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ } #mastodon .tabs-bar__wrapper { top: 0; + background: none; } #mastodon .column-back-button.column-back-button { border-radius: 0 !important; } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels { + flex-direction: column; + } + #mastodon:has(.navigation-panel__sign-in-banner) .ui__header::after { + content: unset; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__main { + width: 100%; + border-radius: 0 !important; + margin: 0 !important; + border: 0 !important; + } + #mastodon:has(.navigation-panel__sign-in-banner) .tabs-bar__wrapper { + transition: none !important; + } + #mastodon:has(.navigation-panel__sign-in-banner):has(.column-header__buttons:empty) .tabs-bar__wrapper { + margin-top: -50px; + margin-bottom: 2px; + height: 48px; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational { + display: contents; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { + position: relative !important; + inset: unset !important; + order: -1; + width: unset; + height: auto; + white-space: nowrap; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel { + flex-direction: row; + margin: 0; + padding: 0; + height: auto; + padding: 12px 14px; + gap: 10px; + border-block: 1px solid; + overflow: scroll hidden; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar { + display: none; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational hr { + display: none; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name > span, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__sparkline { + display: none; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name { + all: unset; + display: contents !important; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name::before, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .navigation-panel__legal::after, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational h4::after, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .getting-started__trends::after, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item::after, + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational .trends__item__name::after { + content: unset; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .flex-spacer { + border-right: 1px solid; + margin-block: 10px; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .navigation-panel::after { + content: ""; + position: sticky; + right: -20px; + min-width: 150px; + margin-left: -50px; + background: inherit; + mask: linear-gradient(to right, transparent, #000); + -webkit-mask: linear-gradient(to right, transparent, #000); + pointer-events: none; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a { + position: relative; + z-index: 3; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a { + position: relative; + overflow: hidden; + border-radius: var(--radius); + padding: 0.8em 1.2em; + font-weight: 600; + font-size: 1.1em; + text-align: center; + min-width: max-content; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a i { + font-size: 1em; + width: auto; + margin-right: 0; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a.active { + padding-inline: 1.2em; + position: relative; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a.active::before { + content: ""; + position: absolute; + inset: 0; + background: currentcolor; + opacity: 0.1; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational a > span:not(:first-child) { + margin-left: 0.7em; + } + #mastodon:has(.navigation-panel__sign-in-banner) .columns-area__panels__pane--navigational span { + display: unset; + } #mastodon .columns-area__panels { justify-content: flex-start; max-width: 100% !important; @@ -3204,6 +3367,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ border-start-end-radius: var(--radius); overflow: clip !important; margin-top: 1px !important; + flex-grow: 1; } #mastodon .columns-area__panels__main > .columns-area--mobile { overflow: visible !important; @@ -3216,6 +3380,10 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_ #mastodon .columns-area__panels__main > div { border-radius: 0 !important; } + #mastodon .column { + flex-grow: 1; + overflow: clip; + } #mastodon .dismissable-banner { margin: 0; padding-left: 4px; diff --git a/modern.user.css b/modern.user.css index 65231fc..c2db039 100644 --- a/modern.user.css +++ b/modern.user.css @@ -13,14 +13,17 @@ //////////////////////////////////////////////////////////////////// -/* Update 1.6.13 -- Minimize Mastodon's timeline flickering that was amplified by Modern D: -- Comment out empty accent variable +/* Update 1.7.0 +- New navbar design for when logged out, uses less space +- fix sidebar height (footer had too much bottom padding) +- fix multiple images in gallery being cut off +- style hashtags bar +- fixes */ /* ==UserStyle== @name Mastodon Modern -@version 1.6.13 +@version 1.7.0 @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 @@ -32,7 +35,7 @@ @author Freeplay (https://freeplay.codeberg.page/) ==/UserStyle== */ -@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social"), domain("mastodon.cloud"), domain("bark.lgbt"), domain("wetdry.world"), domain("md.ilyamikcoder.com"), domain("techhub.social") { +@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social"), domain("mastodon.cloud"), domain("bark.lgbt"), domain("wetdry.world"), domain("md.ilyamikcoder.com"), domain("techhub.social"), domain("mastodon.world"), domain("toot.io") { / { // This is just so I can easily collapse everything, shouldn't affect compiled code responsiveW1 = 1320px responsiveW2 = 1175px @@ -352,6 +355,7 @@ box-sizing border-box // min-height 100vh !important max-height unset !important + height 100% } .search { margin-inline 5px @@ -1547,7 +1551,7 @@ } } } - .status-direct, .status__wrapper-direct, .conversation { + .detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation { .status__prepend { position absolute font-size 0 @@ -1641,7 +1645,10 @@ margin-bottom 10px !important animation scaleIn .4s max-width unset !important - max-height 80vh !important + // max-height 80vh !important + } + .status .media-gallery__item { + max-height 80vh } /.status-card { &:not(.horizontal) { @@ -1697,6 +1704,39 @@ margin var(--radius) } } + .hashtag-bar { + margin-top 8px + a, button { + font-size .85em + font-weight 600 + opacity .8 + padding .2em .6em + transition opacity .2s + } + a { + position relative + border-radius var(--radius) + background var(--elevated-color) + &::after { + content "" + position absolute + inset 0 + background var(--elevated-color) + border-radius inherit + opacity 0 + transition opacity .2s + } + &:hover, &:focus { + opacity 1 + &::after { + opacity 1 + } + } + } + button { + padding-block 0 + } + } .detailed-status__wrapper { @@ -2330,11 +2370,6 @@ // Mobile @media (max-width mobileW - 1) { compactStatuses() - .columns-area--mobile > .column { - > div > div { - animation fadeUp .4s - } - } .columns-area--mobile > .column > .column-header__wrapper { display none } @@ -2353,6 +2388,7 @@ box-sizing border-box gap 10px border 0 !important + overflow visible &::after { content "" position absolute @@ -2364,6 +2400,7 @@ mask radial-gradient(var(--radius) at 0px var(--radius),#0000 100%,#000) -webkit-mask @mask z-index 9999 + /.rtl & { transform scaleX(-1) } @@ -2420,10 +2457,130 @@ } .tabs-bar__wrapper { top 0 + background none } .column-back-button.column-back-button { border-radius 0 !important } + + // logged out view + &:has(.navigation-panel__sign-in-banner) { + .columns-area__panels { + flex-direction column + } + .ui__header::after { + content unset + } + .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) { + .tabs-bar__wrapper { + margin-top -50px + margin-bottom 2px + height 48px + } + } + .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 + height auto + padding 12px 14px + gap 10px + border-block 1px solid + overflow scroll hidden + &::-webkit-scrollbar { + display none + } + } + hr { + display none + } + .trends__item__name > span, .trends__item__sparkline { + display none + } + .navigation-panel__legal, h4, + .getting-started__trends, .trends__item, .trends__item__name { + all unset + display contents !important + &::before, &::after { + content unset + } + } + &:has(.getting-started__trends) { + .flex-spacer { + border-right 1px solid + margin-block 10px + } + .navigation-panel::after { + content "" + position sticky + right -20px + min-width 150px + margin-left -50px + background inherit + mask linear-gradient(to right, transparent, black) + -webkit-mask @mask + pointer-events none + } + .trends__item:last-child a { + position relative + z-index 3 + } + } + a { + // background var(--elevated-color) + position relative + overflow hidden + border-radius var(--radius) + padding .8em 1.2em + font-weight 600 + font-size 1.1em + text-align center + min-width max-content + i { + font-size 1em + width auto + margin-right 0 + } + &.active { + padding-inline 1.2em + position relative + &::before { + content "" + position absolute + inset 0 + background currentcolor + opacity .1 + } + } + > span:not(:first-child) { + margin-left .7em + } + } + span { + display unset + } + } + + } .columns-area__panels { // overflow-x scroll !important justify-content flex-start @@ -2436,13 +2593,12 @@ border-start-end-radius var(--radius) overflow clip !important margin-top 1px !important + flex-grow 1 // z-index 2 // order 2 > .columns-area--mobile { overflow visible !important } - - ~/ .is-composing .columns-area__panels__main { padding-bottom 40px !important } @@ -2451,12 +2607,15 @@ } } + .column { + flex-grow 1 + overflow clip + } .dismissable-banner { margin 0 padding-left 4px } - .status { padding-top 14px !important .status__avatar {