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

2.0.2

Browse Source 
- Removed settings sidebar styling as changes had broken it
- Fixed vertical top bar menu (#4)
- Fix publish button being hidden under bottombar
- Fixed some borders
- More fixes !!
This commit is contained in:
freeplay
2024-10-09 19:57:24 -04:00
parent be022bb9fd
commit 67881ea524
3 changed files with 272 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

386
modern.user.css
View File

@@ -6,15 +6,17 @@
// textbox in the left panel following this format:
// *://domain.tld/*
/* Update 2.0.1 (Mastodon 4.3)
- Fixed not being able to change user fields
- Added option to disable larger emoji
- Fixed spacing in navigation
/* Update 2.0.2 (Mastodon 4.3)
- Removed settings sidebar styling as changes had broken it
- Fixed vertical top menu
- Fix publish button being hidden under bottombar
- Fixed some borders
- More fixes !!
*/
/* ==UserStyle==
@name MastoModern
@version 2.0.1
@version 2.0.2
@description Improves the look & feel of Mastodon
@updateURL https://git.gay/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css
@homepageURL https://git.gay/Freeplay/Mastodon-Modern
@@ -47,7 +49,7 @@
transBounce1 = .2s cubic-bezier(0,0,0,1.1)
statuses-list = ".focusable, .entry, .statuses-grid__item .detailed-status, .trends__item, .story, .account-card, .scrollable :not(.focusable) > .account:not(.account--minimal), .timeline-hint"
statuses-list = ".focusable, .entry, .statuses-grid__item .detailed-status, .trends__item, .story, .scrollable :not(.focusable) > .account:not(.account--minimal), .timeline-hint"
media = ".media-gallery, .video-player, .status-card.horizontal.interactive, .status-card, .audio-player, .picture-in-picture-placeholder"
:root {
@@ -75,6 +77,7 @@
--shadow-low 0 8px 24px -16px rgba(0,0,0,0.2)
--shadow-med 0 8px 60px -30px rgba(0,0,0,0.1)
--column-shadow 0 8px 24px 12px rgba(0,0,0,0.02)
--background-border-color var(--border-color)
if flatterUI {
--column-shadow 0
--elevated-tint 0
@@ -83,9 +86,6 @@
// --accent // not applied everywhere, just for if you have custom color scheme and want to match it
}
fa() {
font: normal normal normal 14px/1 FontAwesome;
}
desktop() {
@media (min-width mobileW) {
.layout-single-column {
@@ -326,7 +326,6 @@
// LEFT COLUMN
/ {
.columns-area__panels__pane--compositional {
@media (min-width responsiveW1) {
if spaceBetween {
@@ -361,6 +360,12 @@
margin-bottom 25px
}
}
.compose-form__uploads {
padding 0
margin-block 0 !important
margin-inline 12px
width unset
}
.search {
border-radius var(--radius)
margin-inline -5px
@@ -469,45 +474,42 @@
textarea {
background none !important
}
> .compose-form__footer {
gap 12px
.compose-form__dropdowns {
max-width calc(100% - 7ch)
}
.compose-form__actions {
position relative
}
.compose-form__buttons {
.compose-form__dropdowns {
max-width calc(100% - 7ch)
}
.compose-form__actions {
position relative
}
.compose-form__buttons {
display flex
flex-wrap wrap
flex-direction row
gap 0
flex-grow 9999
* {
display flex
flex-wrap wrap
flex-direction row
gap 0
flex-grow 9999
* {
display flex
flex-grow 1
}
label {
display none
}
button {
flex-grow 1
padding 5px
}
flex-grow 1
}
.compose-form__submit {
button {
padding 8px 16px
}
label {
display none
}
.character-counter {
position absolute
inset-inline-end 0
bottom calc(100% + 12px)
padding 4px
font-size 13px
button {
flex-grow 1
padding 5px
}
}
.compose-form__submit {
button {
padding 8px 16px
}
}
.character-counter {
position absolute
inset-inline-end 0
bottom calc(100% + 12px)
padding 4px
font-size 13px
}
}
//// SERVER INFO
@@ -646,11 +648,14 @@
> article:first-of-type {
margin-top 10px
}
> article::after {
inset-inline calc(var(--radius) + 10px)
}
}
.load-more
.trends__item,
{statuses-list} {
margin-inline 10px !important
margin-inline 10px
max-width calc(100% - 20px)
}
}
@@ -983,15 +988,19 @@
margin-top calc(0px - var(--radius))
padding-top calc(10px + var(--radius))
overflow hidden auto
> hr {
hr {
display none
}
.navigation-panel__menu {
display contents
}
@media (min-width responsiveW2) {
if sideHeader {
padding-top calc(var(--radius) + 10px)
margin-top calc(50px - var(--radius))
.navigation-panel__logo {
margin 0
.column-link, hr {
display none !important
}
@@ -1041,7 +1050,7 @@
display flex !important
align-items center !important
align-content center
max-height 3.3em
max-height 3em
min-height 2.7em !important
padding-block 0
border-radius 100px
@@ -1111,6 +1120,7 @@
position relative
border-radius var(--panel-radius)
border 0
&.focusable {
background none
}
@@ -1131,26 +1141,9 @@
}
}
}
// borders
&:not(:last-child)::after {
content ""
position absolute
bottom 0px
inset-inline var(--radius)
border-top 1px solid var(--border-color)
pointer-events none
}
/.status__wrapper-reply.status--in-thread {
&::after {
top 0
}
}
/.status--in-thread.status__wrapper-reply:not(.status--first-in-thread),
/.status--in-thread:not(.status__wrapper-reply) {
&::after {
border-top 0 !important
}
}
}
.status:not(.status--first-in-thread) {
border 0
}
.detailed-status
.status {
@@ -1167,7 +1160,7 @@
}
.status__prepend {
& + .status:not(.status-direct) {
padding-top 0
padding-top 5px
}
}
@@ -1207,7 +1200,7 @@
display inline-block
height var(--emoji-size) !important
min-width var(--emoji-size) !important
width auto
width auto !important
margin -.2ex 0 .2ex
if emojiZoom {
@@ -1227,34 +1220,6 @@
max-height 80vh
}
}
#mastodon .status__content__spoiler-link {
display flex
align-items center
position relative
padding .4em 1.2em
border-radius var(--radius-round)
color inherit
background var(--elevated-color)
margin-block 8px
&::before, &::after {
content ""
position absolute
inset 0
border-radius var(--radius-round)
background-color var(--hover-color)
opacity 0
transition opacity .2s
}
&::after {
inset -6px -9999px
}
&:hover, &:focus {
&::before, &::after {
opacity 1
}
}
}
// STATUS DIRECT
.detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation {
@@ -1328,8 +1293,7 @@
{media} {
box-shadow var(--shadow-low)
border-radius var(--radius) !important
margin-top 10px !important
margin-bottom 10px !important
margin-block 10px
animation scaleIn .4s
max-width unset !important
}
@@ -1341,6 +1305,7 @@
}
.media-gallery__item {
border-radius 0
outline none
}
.spoiler-button--minified {
button {
@@ -1466,18 +1431,16 @@
gap 0
margin-inline-start -8px
pointer-events none
> * {
/.status__action-bar__button-wrapper {
pointer-events all
flex-grow 1
max-width 55px
min-width max-content
button.icon-button {
width 100% !important
}
}
> :not(.icon-button) {
display flex
height 100%
* {
display flex !important
justify-content center !important
flex-grow 1 !important
}
.icon-button {
margin 0
@@ -1525,6 +1488,17 @@
//// ITEMS
/ {
.item-list > article {
position relative
&::after {
content ""
position absolute
bottom 0px
inset-inline 0
border-top 1px solid var(--border-color)
pointer-events none
}
}
.account__wrapper {
line-height 1.5
/.account__contents {
@@ -1562,6 +1536,32 @@
}
//// PAGES
//// NOTIFICATIONS
.notification-ungrouped {
padding 0
/.notification-ungrouped__header {
padding-top 16px
margin-bottom 0
}
.status__wrapper {
margin-inline 0
max-width unset
&::before, &::after {
content unset
}
}
.status {
padding 16px
}
}
.notification-group {
padding 16px
}
.notification-group__main__additional-content {
display none
}
//// EXPLORE
/ {
.trends__item, .story, .account-card {
@@ -1907,37 +1907,6 @@
padding 0
margin 4px
gap 4px
margin-bottom calc(-40vh + 4px)
/.account-gallery__item {
margin 0
flex 1 1 calc(100px + 15%)
transition flex .7s cubic-bezier(0,0,0,1)
min-height 180px !important
/.media-gallery__item-thumbnail {
transition transform .2s
}
&:hover, &:focus-within {
flex-grow 1.5
.media-gallery__item-thumbnail {
transform scale(1.02)
}
}
}
> button {
// order 2
width unset
flex-grow 1
// min-width 30%
flex 1 1 calc(100px + 15% - 24px)
margin 12px
font-size 1.2em
font-weight 700
background var(--elevated-color)
color inherit
&:hover:not(:focus) {
transform scale(1.01)
}
}
}
}
//// FOLLOW REQ'S
@@ -2052,84 +2021,7 @@
//// SETTINGS PAGE
/ {
/.admin-wrapper {
/.sidebar-wrapper {
overflow visible !important
width unset
/.sidebar-wrapper__inner {
position sticky
top 0
max-height 100vh !important
overflow-y auto !important
pointer-events all !important
z-index 100
.fa {
margin-inline-end 1em !important
}
.sidebar > ul > li {
overflow hidden
margin-inline 15px !important
> a:not(.selected) {
background none
}
a {
display flex !important
align-items center
white-space unset
}
&.selected {
margin 6px
border-radius var(--radius)
> a.selected {
font-weight 600
color unset
position relative
overflow visible
border-radius 0 !important
border 0
&::after {
content ""
position absolute
top 100%
inset-inline 0
height 9999px
background inherit
z-index -1
}
}
}
> ul {
border-radius var(--radius) !important
overflow hidden !important
gap 2px !important
margin 8px
margin-top 0
background none
& > li {
border-radius 8px
&:not(:first-child):not(:last-child) {
margin-block 2px
}
a {
padding 14px 16px
font-weight 600
border 0
}
&:not(.selected) {
a {
background-color rgba(150,150,250,0.1)
}
}
}
}
}
}
}
.content__heading {
margin-bottom 2em
}
@@ -2405,6 +2297,9 @@
/ {
.layout-multiple-columns.layout-multiple-columns {
--column-header-height: 45px;
.column-header, .column-header button {
background none
}
.column-header, .scrollable, .column-back-button, .account__header__image {
border-radius 0 !important
gap 0 !important
@@ -2503,7 +2398,6 @@
}
.column-back-button,
.column-header__wrapper {
height var(--column-header-height)
&.active {
box-shadow none
&::before {
@@ -2626,6 +2520,7 @@
font-size 0
box-shadow var(--shadow-low)
background var(--surface-background-color)
border-color var(--border-color)
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
@@ -2639,25 +2534,17 @@
visibility visible
&::before {
content ""
fa()
content ""
position absolute
inset 0
display flex
justify-content center
align-items center
font-size 24px
background transparent
border-radius inherit
transition transform .4s cubic-bezier(0,0,0,1) !important
}
&:active {
animation rainbow 8s infinite linear !important
&::before {
background violet
transform scale(.9)
transition background 1s, transform .4s cubic-bezier(0,0.5,0,1) !important
}
background-position center
background-repeat no-repeat
background-image url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNMjAwLTEyMHEtMzMgMC01Ni41LTIzLjVUMTIwLTIwMHYtNTYwcTAtMzMgMjMuNS01Ni41VDIwMC04NDBoMzU3bC04MCA4MEgyMDB2NTYwaDU2MHYtMjc4bDgwLTgwdjM1OHEwIDMzLTIzLjUgNTYuNVQ3NjAtMTIwSDIwMFptMjgwLTM2MFpNMzYwLTM2MHYtMTcwbDM2Ny0zNjdxMTItMTIgMjctMTh0MzAtNnExNiAwIDMwLjUgNnQyNi41IDE4bDU2IDU3cTExIDEyIDE3IDI2LjV0NiAyOS41cTAgMTUtNS41IDI5LjVUODk3LTcyOEw1MzAtMzYwSDM2MFptNDgxLTQyNC01Ni01NiA1NiA1NlpNNDQwLTQ0MGg1NmwyMzItMjMyLTI4LTI4LTI5LTI4LTIzMSAyMzF2NTdabTI2MC0yNjAtMjktMjggMjkgMjggMjggMjgtMjgtMjhaIi8+PC9zdmc+")
}
/body:not(:has(.column-link.active)) &:not(:focus) {
transform scale(0.97) !important
@@ -2758,6 +2645,7 @@
justify-content center
transition padding .2s
padding-inline 6px
gap 6px
&::before {
content ""
position absolute
@@ -2798,6 +2686,9 @@
.columns-area__panels__main {
margin-top 2px !important
}
.columns-area--mobile .column {
padding-bottom 60px
}
.ui__header {
z-index 199
&::before, &::after {
@@ -3290,6 +3181,36 @@
display inline !important
}
}
// CW
.status__content__spoiler-link {
display flex
align-items center
position relative
padding .4em 1.2em
border-radius var(--radius-round)
color inherit
background var(--elevated-color)
margin-block 8px
&::before, &::after {
content ""
position absolute
inset 0
border-radius var(--radius-round)
background-color var(--hover-color)
opacity 0
transition opacity .2s
}
&::after {
inset -6px -9999px
}
&:hover, &:focus {
&::before, &::after {
opacity 1
}
}
}
.reactions-bar {
width unset
@@ -3303,7 +3224,7 @@
height 2em
width @height
}
border 1px solid var(--border-color-2)
border 1px solid var(--border-color)
&:not(.active) {
background none
}
@@ -3320,14 +3241,7 @@
}
}
}
// Notifications
.notification__message {
padding-top 15px
& + .status {
padding-top 5px !important
}
}
// timeline settings
.column-settings__pillbar {