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

1.7.0

Browse Source 
- 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
This commit is contained in:
freeplay
2023-08-23 14:40:29 -04:00
parent 4dc1472f4b
commit cc20105828
2 changed files with 346 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
modern.css
View File

@@ -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;

189
modern.user.css
View File

@@ -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 {