mirror of
https://git.gay/freeplay/Mastodon-Modern.git
synced 2026-01-15 08:22:57 -03:00
1.10.2
- Newer compose form styled, fixed overflow counter in glitch-soc - Fix media alt button
This commit is contained in:
Freeplay
@@ -22,6 +22,15 @@ body.app-body.flavour-glitch > #mastodon .character-counter__wrapper span {
|
||||
font-size: 0.9em;
|
||||
font-weight: 500;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .compose-form__submit {
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
top: 100%;
|
||||
margin-top: 24px;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .compose-form__submit button {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .collapsed .status__content {
|
||||
height: auto !important;
|
||||
overflow: visible;
|
||||
|
||||
93
modern.css
93
modern.css
@@ -597,22 +597,6 @@ a:focus-visible,
|
||||
#mastodon .compose-form .reply-indicator__display-name {
|
||||
padding: 0;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__highlightable {
|
||||
border-radius: var(--radius);
|
||||
overflow: visible !important;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__highlightable > .compose-form__footer {
|
||||
gap: 8px;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__highlightable > .compose-form__footer .compose-form__buttons {
|
||||
gap: 2px;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__highlightable > .compose-form__footer .compose-form__buttons button {
|
||||
padding: 6px;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__highlightable .compose-form__submit button {
|
||||
padding: 6px;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__autosuggest-wrapper,
|
||||
#mastodon .compose-form .autosuggest-textarea__textarea {
|
||||
border-radius: var(--radius) var(--radius) 0 0 !important;
|
||||
@@ -630,28 +614,78 @@ a:focus-visible,
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__upload-thumbnail {
|
||||
#mastodon .compose-form .compose-form__upload__actions button {
|
||||
background: none;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__upload__thumbnail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__upload__warning {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: rgba(0,0,0,0.7);
|
||||
flex-grow: 1;
|
||||
box-shadow: 0 -50px rgba(0,0,0,0.7);
|
||||
display: flex;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__upload__warning > button {
|
||||
#mastodon .compose-form .compose-form__upload__warning button {
|
||||
margin-top: auto;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__upload__warning button.active {
|
||||
box-shadow: 0 0 0 100px rgba(0,0,0,0.75);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: 700;
|
||||
padding-inline: 1em;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
color: inherit;
|
||||
transition: background 0.2s, transform 0.2s cubic-bezier(0, 0, 0, 1) !important;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__upload__warning > button i {
|
||||
margin-inline-end: 0.2em;
|
||||
transform: scale(1.2);
|
||||
#mastodon .compose-form .compose-form__upload__warning button.active svg {
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__upload__warning button.active:hover,
|
||||
#mastodon .compose-form .compose-form__upload__warning button.active:focus {
|
||||
background: rgba(20,20,20,0.75);
|
||||
}
|
||||
#mastodon .compose-form__highlightable {
|
||||
border-radius: var(--radius);
|
||||
overflow: visible !important;
|
||||
}
|
||||
#mastodon .compose-form__highlightable #cw-spoiler-input {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
#mastodon .compose-form__highlightable > .compose-form__footer {
|
||||
gap: 12px;
|
||||
}
|
||||
#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__dropdowns {
|
||||
max-width: calc(100% - 7ch);
|
||||
}
|
||||
#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__actions {
|
||||
position: relative;
|
||||
}
|
||||
#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
gap: 0;
|
||||
flex-grow: 9999;
|
||||
}
|
||||
#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__buttons > * {
|
||||
flex-grow: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__buttons button {
|
||||
flex-grow: 1;
|
||||
padding: 5px;
|
||||
}
|
||||
#mastodon .compose-form__highlightable > .compose-form__footer .compose-form__submit button {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
#mastodon .compose-form__highlightable > .compose-form__footer .character-counter {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: calc(100% + 12px);
|
||||
padding: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.server-banner {
|
||||
padding: 10px;
|
||||
@@ -4688,9 +4722,6 @@ a:focus-visible,
|
||||
padding: 0 !important;
|
||||
border-radius: var(--radius-round) var(--radius-round) 0 0;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .compose-form:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .getting-started__trends {
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
128
modern.user.css
128
modern.user.css
@@ -6,20 +6,14 @@
|
||||
// *://domain.tld/*
|
||||
|
||||
|
||||
/* Update 1.10.0
|
||||
- Post slide up animation is now just a fade
|
||||
- Fixed overflowing video in notifications
|
||||
- Banner glow should work better now on Chromium
|
||||
- Styled account rows
|
||||
- Other fixes & spacing
|
||||
glitch-soc:
|
||||
- Fixed cut off header
|
||||
- Advanced view getting started column
|
||||
/* Update 1.10.2
|
||||
- Newer compose form styled, fixed overflow counter in glitch-soc
|
||||
- Fix media alt button
|
||||
*/
|
||||
|
||||
/* ==UserStyle==
|
||||
@name Mastodon Modern
|
||||
@version 1.10.1
|
||||
@version 1.10.2
|
||||
@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
|
||||
@@ -31,7 +25,7 @@ glitch-soc:
|
||||
@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"), domain("mastodon.world"), domain("toot.io"), domain("catcatnya.com") {
|
||||
@-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"), domain("catcatnya.com"), domain("mstdn.constellatory.net") {
|
||||
/ { // This is just so I can easily collapse everything, shouldn't affect compiled code
|
||||
responsiveW1 = 1320px
|
||||
responsiveW2 = 1175px
|
||||
@@ -470,24 +464,6 @@ glitch-soc:
|
||||
.reply-indicator__display-name {
|
||||
padding 0
|
||||
}
|
||||
.compose-form__highlightable {
|
||||
border-radius var(--radius)
|
||||
overflow visible !important
|
||||
> .compose-form__footer {
|
||||
gap 8px
|
||||
.compose-form__buttons {
|
||||
gap 2px
|
||||
button {
|
||||
padding 6px
|
||||
}
|
||||
}
|
||||
}
|
||||
.compose-form__submit {
|
||||
button {
|
||||
padding 6px
|
||||
}
|
||||
}
|
||||
}
|
||||
.compose-form__autosuggest-wrapper, .autosuggest-textarea__textarea {
|
||||
border-radius var(--radius) var(--radius) 0 0 !important
|
||||
border-bottom 0
|
||||
@@ -503,28 +479,83 @@ glitch-soc:
|
||||
.compose-form__upload__actions {
|
||||
z-index 5
|
||||
position relative
|
||||
button {
|
||||
background none
|
||||
}
|
||||
}
|
||||
.compose-form__upload-thumbnail {
|
||||
.compose-form__upload__thumbnail {
|
||||
display flex
|
||||
flex-direction column
|
||||
}
|
||||
.compose-form__upload__warning {
|
||||
//display contents
|
||||
position relative
|
||||
display flex
|
||||
justify-content center
|
||||
background rgba(0,0,0,0.7)
|
||||
flex-grow 1
|
||||
box-shadow 0 -50px rgba(0,0,0,0.7)
|
||||
> button {
|
||||
display flex
|
||||
button {
|
||||
margin-top auto
|
||||
}
|
||||
button.active {
|
||||
box-shadow 0 0 0 100px rgba(0,0,0,0.75)
|
||||
width 100%
|
||||
height 100%
|
||||
font-weight 700
|
||||
padding-inline 1em
|
||||
color white
|
||||
i {
|
||||
margin-inline-end .2em
|
||||
transform scale(1.2)
|
||||
font-weight bold
|
||||
font-size 1.1em
|
||||
color inherit
|
||||
transition background .2s, transform .2s cubic-bezier(0,0,0,1) !important
|
||||
svg {
|
||||
height 1.2em
|
||||
width @height
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background rgba(20,20,20,0.75)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.compose-form__highlightable {
|
||||
border-radius var(--radius)
|
||||
overflow visible !important
|
||||
#cw-spoiler-input {
|
||||
border-radius 0 !important
|
||||
}
|
||||
> .compose-form__footer {
|
||||
gap 12px
|
||||
.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
|
||||
//width auto !important
|
||||
flex-grow 9999
|
||||
> * {
|
||||
//display flex
|
||||
flex-grow 1
|
||||
//max-width 38px !important
|
||||
box-sizing border-box
|
||||
}
|
||||
button {
|
||||
flex-grow 1
|
||||
padding 5px
|
||||
}
|
||||
}
|
||||
.compose-form__submit {
|
||||
button {
|
||||
padding 8px 16px
|
||||
}
|
||||
}
|
||||
.character-counter {
|
||||
position absolute
|
||||
right 0
|
||||
bottom calc(100% + 12px)
|
||||
padding 4px
|
||||
font-size 13px
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3541,10 +3572,6 @@ glitch-soc:
|
||||
padding 0 !important
|
||||
border-radius var(--radius-round) var(--radius-round) 0 0
|
||||
}
|
||||
.compose-form:first-child {
|
||||
padding-top 0
|
||||
}
|
||||
|
||||
.getting-started__trends {
|
||||
padding 0px 20px
|
||||
}
|
||||
@@ -3570,6 +3597,8 @@ glitch-soc:
|
||||
|
||||
// GLITCH-SOC FIXES
|
||||
/body.app-body.flavour-glitch > #mastodon {
|
||||
|
||||
// Compose Form
|
||||
.compose-form__autosuggest-wrapper > :last-child {
|
||||
padding-bottom 2em !important
|
||||
}
|
||||
@@ -3594,6 +3623,15 @@ glitch-soc:
|
||||
font-weight 500
|
||||
}
|
||||
}
|
||||
.compose-form__submit {
|
||||
position absolute
|
||||
right -12px
|
||||
top 100%
|
||||
margin-top 24px
|
||||
button {
|
||||
padding 10px 20px
|
||||
}
|
||||
}
|
||||
|
||||
// GLITCH STATUSES
|
||||
.collapsed {
|
||||
|
||||
Reference in New Issue
Block a user