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.1.2 (v4.6.0-nightly.2025-12-04)

Browse Source 
- Fixes for Mastodon 4.6.0!!
This commit is contained in:
Freeplay
2025-12-05 00:21:30 -05:00
parent f899b68740
commit 0ffd556b29
3 changed files with 145 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
glitch-fixes.css
View File

@@ -1,30 +1,3 @@
:root {
--background-color-alt: transparent;
}
body.app-body.flavour-glitch > #mastodon .compose-form__autosuggest-wrapper > :last-child {
padding-bottom: 2em !important;
}
body.app-body.flavour-glitch > #mastodon .compose-form__buttons {
width: 100%;
}
body.app-body.flavour-glitch > #mastodon .compose-form__buttons > div:last-child {
margin-inline-start: auto;
}
body.app-body.flavour-glitch > #mastodon .compose-form__buttons-wrapper {
position: relative;
}
body.app-body.flavour-glitch > #mastodon .character-counter__wrapper {
position: absolute;
inset-inline-end: 0;
bottom: 100%;
margin: 4px 4px;
border-radius: 6px;
padding: 0.1em 0.5em;
}
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__highlightable { body.app-body.flavour-glitch > #mastodon .compose-form__highlightable {
margin-bottom: 50px !important; margin-bottom: 50px !important;
} }
@@ -37,33 +10,12 @@ body.app-body.flavour-glitch > #mastodon .compose-form__submit {
body.app-body.flavour-glitch > #mastodon .compose-form__submit button { body.app-body.flavour-glitch > #mastodon .compose-form__submit button {
padding: 10px 20px; padding: 10px 20px;
} }
body.app-body.flavour-glitch > #mastodon .collapsed .status__content {
height: auto !important;
overflow: visible;
mask: unset !important;
}
body.app-body.flavour-glitch > #mastodon .collapsed .status__content .status__content__text {
mask: linear-gradient(to bottom, #000 50px, transparent) !important;
-webkit-mask: linear-gradient(to bottom, #000 50px, transparent) !important;
max-height: 100px;
}
body.app-body.flavour-glitch > #mastodon .collapsed .status__content p:not(:last-child) {
margin-bottom: 0.4em;
}
body.app-body.flavour-glitch > #mastodon .collapsed .status__content br {
display: block;
}
body.app-body.flavour-glitch > #mastodon .collapsed .status__content::after {
content: unset;
}
body.app-body.flavour-glitch > #mastodon .collapsed.muted .status__content__text ~ * {
display: none;
}
body.app-body.flavour-glitch > #mastodon .focusable[tabindex]:not(.notification-ungrouped) .full-width { body.app-body.flavour-glitch > #mastodon .focusable[tabindex]:not(.notification-ungrouped) .full-width {
margin-inline: 0; margin-inline: 0;
} }
body.app-body.flavour-glitch > #mastodon .media-gallery__item > .media-gallery__preview { body.app-body.flavour-glitch > #mastodon .media-gallery__item > .media-gallery__preview {
display: unset; display: unset;
opacity: 0.5;
} }
body.app-body.flavour-glitch > #mastodon .status__action-bar-spacer { body.app-body.flavour-glitch > #mastodon .status__action-bar-spacer {
min-width: 5px; min-width: 5px;
@@ -79,85 +31,38 @@ body.app-body.flavour-glitch > #mastodon .status__relative-time {
body.app-body.flavour-glitch > #mastodon .status__relative-time time { body.app-body.flavour-glitch > #mastodon .status__relative-time time {
display: inline !important; display: inline !important;
} }
body.app-body.flavour-glitch > #mastodon .status__content__spoiler-link { .reactions-bar {
display: flex;
align-items: center;
position: relative;
padding: 0.4em 1.2em;
border-radius: var(--radius-round);
color: inherit;
background: var(--elevated-color);
margin-block: 8px;
}
body.app-body.flavour-glitch > #mastodon .status__content__spoiler-link::before,
body.app-body.flavour-glitch > #mastodon .status__content__spoiler-link::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--radius-round);
background-color: var(--hover-color);
opacity: 0;
transition: opacity 0.2s;
}
body.app-body.flavour-glitch > #mastodon .status__content__spoiler-link::after {
inset: -6px -9999px;
}
body.app-body.flavour-glitch > #mastodon .status__content__spoiler-link:hover::before,
body.app-body.flavour-glitch > #mastodon .status__content__spoiler-link:focus::before,
body.app-body.flavour-glitch > #mastodon .status__content__spoiler-link:hover::after,
body.app-body.flavour-glitch > #mastodon .status__content__spoiler-link:focus::after {
opacity: 1;
}
body.app-body.flavour-glitch > #mastodon .reactions-bar {
width: unset; width: unset;
margin-top: 8px; margin-top: 8px;
pointer-events: none;
} }
body.app-body.flavour-glitch > #mastodon .reactions-bar button { .reactions-bar button {
pointer-events: all;
border-radius: 6px !important; border-radius: 6px !important;
padding-block: 2px; padding-block: 2px;
border: 1px solid var(--border-color);
} }
body.app-body.flavour-glitch > #mastodon .reactions-bar button .reactions-bar__item__emoji { .reactions-bar button .reactions-bar__item__emoji {
width: unset;
height: 2em; height: 2em;
width: 2em; max-width: 70px;
min-width: 2em;
} }
body.app-body.flavour-glitch > #mastodon .reactions-bar button:not(.active) { .detailed-status .reactions-bar button .reactions-bar__item__emoji {
max-width: 400px;
}
.reactions-bar button:not(.active) {
border: 1px solid var(--border-color);
background: none; background: none;
} }
body.app-body.flavour-glitch > #mastodon .reactions-bar:empty { .reactions-bar:empty {
display: none; display: none;
} }
body.app-body.flavour-glitch > #mastodon .reactions-bar .emoji-picker-dropdown { .reactions-bar .emoji-picker-dropdown {
align-self: stretch; align-self: stretch;
} }
body.app-body.flavour-glitch > #mastodon .reactions-bar .emoji-picker-dropdown button { .reactions-bar .emoji-picker-dropdown button {
align-self: stretch; align-self: stretch;
height: 100%; height: 100%;
aspect-ratio: 1; aspect-ratio: 1;
} }
body.app-body.flavour-glitch > #mastodon .column-settings__pillbar {
border-radius: var(--radius);
}
body.app-body.flavour-glitch > #mastodon .pillbar-button {
padding: 10px;
border-radius: 4px;
}
body.app-body.flavour-glitch > #mastodon .column-header__notif-cleaning-buttons {
flex-wrap: wrap;
}
body.app-body.flavour-glitch > #mastodon .column-header__notif-cleaning-buttons button {
min-width: 50% !important;
}
body.app-body.flavour-glitch > #mastodon .notification__dismiss-overlay {
position: absolute !important;
}
body.app-body.flavour-glitch > #mastodon .notification__dismiss-overlay .wrappy {
box-shadow: none;
background: none;
border-top: 0;
}
body.app-body.flavour-glitch > #mastodon .local-settings { body.app-body.flavour-glitch > #mastodon .local-settings {
max-height: 700px !important; max-height: 700px !important;
width: 100%; width: 100%;

104
modern.css
View File

@@ -7,7 +7,7 @@
--panel-radius: var(--radius); --panel-radius: var(--radius);
--hover-color: rgba(170,170,170,0.07); --hover-color: rgba(170,170,170,0.07);
--elevated-color: rgba(150,150,200,0.1); --elevated-color: rgba(150,150,200,0.1);
--elevated-tint: rgba(200,200,240,0.07); --elevated-tint: var(--color-bg-secondary);
--border-color: rgba(120,120,200,0.2); --border-color: rgba(120,120,200,0.2);
--border-color-2: #787878; --border-color-2: #787878;
--shadow: 0 10px 40px -10px rgba(0,0,0,0.15); --shadow: 0 10px 40px -10px rgba(0,0,0,0.15);
@@ -31,7 +31,7 @@ body:not(.admin)::before {
content: ""; content: "";
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(0,0,0,0.06); background: rgba(0,0,0,0.09);
z-index: -1; z-index: -1;
} }
p { p {
@@ -104,6 +104,9 @@ a:focus-visible,
border-radius: 30%; border-radius: 30%;
flex: none; flex: none;
} }
button.icon-button {
--hover-bg-color: var(--hover-color);
}
:not(body):not(.scrollable)::-webkit-scrollbar { :not(body):not(.scrollable)::-webkit-scrollbar {
width: 6px; width: 6px;
margin-block: 10px; margin-block: 10px;
@@ -503,7 +506,6 @@ a:focus-visible,
} }
.compose-form__uploads { .compose-form__uploads {
padding: 0; padding: 0;
margin-block: 0 !important;
margin-inline: 12px; margin-inline: 12px;
width: unset; width: unset;
} }
@@ -526,13 +528,18 @@ a:focus-visible,
min-height: unset; min-height: unset;
overflow: unset; overflow: unset;
gap: 15px; gap: 15px;
margin-bottom: 20px;
flex: 1 0 auto !important; flex: 1 0 auto !important;
} }
.compose-form .spoiler-input__border { .compose-form .spoiler-input__border {
display: none; display: none;
} }
.compose-form .autosuggest-input.autosuggest-input {
border-block: 0;
}
.compose-form #cw-spoiler-input { .compose-form #cw-spoiler-input {
padding-inline: 12px; padding-inline: 12px;
border-radius: 0;
} }
.compose-form .compose-form__upload__thumbnail { .compose-form .compose-form__upload__thumbnail {
display: flex; display: flex;
@@ -547,6 +554,8 @@ a:focus-visible,
display: flex; display: flex;
} }
.compose-form .compose-form__upload__warning button.active { .compose-form .compose-form__upload__warning button.active {
background: rgba(0,0,0,0.75);
backdrop-filter: none;
box-shadow: 0 0 0 100px rgba(0,0,0,0.75); box-shadow: 0 0 0 100px rgba(0,0,0,0.75);
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -572,20 +581,17 @@ a:focus-visible,
font-size 13px font-size 13px
} */ } */
} }
.columns-area__panels__main .compose-form__highlightable {
background: none;
}
.compose-form__highlightable > .compose-form__dropdowns {
flex-wrap: nowrap;
}
.compose-form__highlightable > .compose-form__dropdowns button { .compose-form__highlightable > .compose-form__dropdowns button {
border: 0; border: 0;
padding: 4px; padding: 4px;
transition: background 0.2s; transition: background 0.2s;
} }
.compose-form__highlightable > .compose-form__dropdowns button::after {
content: "";
border: 0.3em solid currentcolor;
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(45deg);
margin-top: -0.2em;
margin-inline: 0px 2px;
}
.compose-form__highlightable > .compose-form__dropdowns button:hover:not(.active) { .compose-form__highlightable > .compose-form__dropdowns button:hover:not(.active) {
background: var(--hover-color); background: var(--hover-color);
} }
@@ -607,6 +613,7 @@ a:focus-visible,
justify-content: center; justify-content: center;
flex-grow: 1; flex-grow: 1;
aspect-ratio: 1; aspect-ratio: 1;
max-width: 38px;
padding: 0; padding: 0;
border-radius: 6px; border-radius: 6px;
} }
@@ -614,13 +621,11 @@ a:focus-visible,
display: none !important; display: none !important;
} }
.compose-form__highlightable .compose-form__buttons .character-counter { .compose-form__highlightable .compose-form__buttons .character-counter {
margin-inline-start: auto;
flex-grow: 0; flex-grow: 0;
min-width: 4ch; min-width: 4ch;
padding-inline: 10px 4px; padding-inline: 10px 4px;
} }
.compose-form__highlightable .compose-form__submit button {
padding: 8px 16px;
}
.server-banner .server-banner__hero { .server-banner .server-banner__hero {
border-radius: var(--radius); border-radius: var(--radius);
width: 100%; width: 100%;
@@ -692,6 +697,7 @@ a:focus-visible,
} }
} }
.columns-area__panels__main { .columns-area__panels__main {
background: none;
overflow: visible !important; overflow: visible !important;
contain: inline-size style !important; contain: inline-size style !important;
transition: max-width 0.2s cubic-bezier(0, 0, 0, 1.1), margin 0.2s cubic-bezier(0, 0, 0, 1.1); transition: max-width 0.2s cubic-bezier(0, 0, 0, 1.1), margin 0.2s cubic-bezier(0, 0, 0, 1.1);
@@ -724,7 +730,7 @@ a:focus-visible,
grid-row: 1; grid-row: 1;
} }
.column { .column {
background: var(--background-color); background: var(--color-bg-ambient);
overflow: clip; overflow: clip;
} }
.column::before { .column::before {
@@ -757,9 +763,6 @@ a:focus-visible,
max-width: calc(100% - 20px); max-width: calc(100% - 20px);
} }
} }
.scrollable {
padding-bottom: 40vh !important;
}
.empty-column-indicator, .empty-column-indicator,
.error-column { .error-column {
background: none; background: none;
@@ -815,31 +818,34 @@ a:focus-visible,
} }
.column-header__collapsible { .column-header__collapsible {
transition: none; transition: none;
background: var(--surface-background-color); background: var(--color-bg-secondary-solid);
overflow-y: auto !important; overflow-y: auto !important;
} }
.tabs-bar__wrapper .collapsed { .tabs-bar__wrapper .collapsed {
display: none; display: none;
} }
.announcements { .announcements__root {
background: var(--surface-background-color); display: flex !important;
} flex-direction: column;
.announcements__container {
width: 100% !important;
}
.announcements__mastodon {
display: block !important;
z-index: -1; z-index: -1;
position: relative; position: relative;
} }
.announcements {
width: 100%;
overflow: visible;
}
.announcements__pagination { .announcements__pagination {
inset-inline-start: 0;
top: 100%;
bottom: unset; bottom: unset;
padding-block: 0; padding-block: 0;
display: flex; }
align-items: center; .announcements__mastodon {
display: unset;
order: 2;
} }
.column-header__wrapper > :not(.column-header):not(.collapsed) { .column-header__wrapper > :not(.column-header):not(.collapsed) {
border-top: 2px solid var(--background-color) !important; border-top: 2px solid var(--color-bg-ambient) !important;
border: 0; border: 0;
} }
.column-header { .column-header {
@@ -877,7 +883,7 @@ a:focus-visible,
inset: -20px -800px; inset: -20px -800px;
transform: scale(0); transform: scale(0);
transform-origin: bottom center; transform-origin: bottom center;
background: var(--surface-background-color); background: var(--color-bg-secondary-solid);
z-index: -1; z-index: -1;
border-radius: 100px; border-radius: 100px;
pointer-events: none; pointer-events: none;
@@ -912,7 +918,7 @@ a:focus-visible,
overflow: hidden; overflow: hidden;
} }
.tabs-bar__wrapper .column-header__wrapper > div { .tabs-bar__wrapper .column-header__wrapper > div {
background: var(--surface-background-color); background: var(--color-bg-secondary-solid);
} }
.tabs-bar__wrapper .column-header { .tabs-bar__wrapper .column-header {
background: none !important; background: none !important;
@@ -1083,8 +1089,7 @@ a:focus-visible,
min-width: max-content; min-width: max-content;
border-radius: 2em; border-radius: 2em;
font-weight: 600; font-weight: 600;
font-size: 0.6em !important; top: -6px;
top: -10px;
box-sizing: border-box; box-sizing: border-box;
} }
@media (min-width: 760px) { @media (min-width: 760px) {
@@ -1204,9 +1209,6 @@ a:focus-visible,
.status__line { .status__line {
left: calc(16px + (var(--avatar-size) / 2)); left: calc(16px + (var(--avatar-size) / 2));
} }
.status__prepend + .status:not(.status-direct) {
padding-top: 5px;
}
@media (max-width: 450px) { @media (max-width: 450px) {
.status--in-thread { .status--in-thread {
--avatar-size: 34px; --avatar-size: 34px;
@@ -1256,6 +1258,10 @@ a:focus-visible,
.status__content ~ [style*="aspect-ratio"] { .status__content ~ [style*="aspect-ratio"] {
max-height: 80vh; max-height: 80vh;
} }
.status__quote .status__wrapper {
margin: 0;
max-width: unset;
}
.detailed-status__wrapper-direct .status__content, .detailed-status__wrapper-direct .status__content,
.status-direct .status__content, .status-direct .status__content,
.status__wrapper-direct .status__content, .status__wrapper-direct .status__content,
@@ -1301,7 +1307,7 @@ a:focus-visible,
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background: var(--elevated-tint) !important; background: var(--color-bg-secondary) !important;
pointer-events: none; pointer-events: none;
z-index: -1; z-index: -1;
} }
@@ -1735,7 +1741,7 @@ a:focus-visible,
margin-top: calc(0px - var(--radius)) !important; margin-top: calc(0px - var(--radius)) !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--background-color); background: var(--color-bg-ambient);
isolation: isolate; isolation: isolate;
} }
@media (max-width: 760px) { @media (max-width: 760px) {
@@ -2452,7 +2458,7 @@ a:focus-visible,
background-color: transparent !important; background-color: transparent !important;
} }
.layout-multiple-columns.layout-multiple-columns .darker { .layout-multiple-columns.layout-multiple-columns .darker {
background-color: var(--surface-background-color); background-color: var(--color-bg-secondary-solid);
border-radius: var(--radius) var(--radius) 0 0; border-radius: var(--radius) var(--radius) 0 0;
top: 10px; top: 10px;
width: unset; width: unset;
@@ -2466,7 +2472,7 @@ a:focus-visible,
position: absolute; position: absolute;
inset: 0; inset: 0;
top: var(--column-header-height); top: var(--column-header-height);
background: var(--background-color); background: var(--color-bg-ambient);
z-index: -1; z-index: -1;
} }
.layout-multiple-columns.layout-multiple-columns .column::before, .layout-multiple-columns.layout-multiple-columns .column::before,
@@ -2557,14 +2563,21 @@ a:focus-visible,
} }
} }
@media (max-width: 759px) { @media (max-width: 759px) {
.tabs-bar__wrapper::before, .tabs-bar__wrapper {
.ui__navigation-bar::before { background: var(--color-bg-primary);
backdrop-filter: none;
}
.tabs-bar__wrapper::before {
content: ""; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background: var(--elevated-color); background: var(--elevated-tint);
z-index: -1; z-index: -1;
} }
.ui__navigation-bar {
border: 0;
background: var(--color-bg-tertiary);
}
.ui__navigation-bar { .ui__navigation-bar {
color: var(--on-input-color); color: var(--on-input-color);
height: 70px; height: 70px;
@@ -2616,6 +2629,7 @@ a:focus-visible,
box-sizing: border-box; box-sizing: border-box;
overscroll-behavior: contain; overscroll-behavior: contain;
visibility: hidden; visibility: hidden;
box-shadow: 0 0 0 200px rgb(from var(--color-bg-overlay) r g b/50%);
transition: visibility 0s 0.2s; transition: visibility 0s 0.2s;
} }
.columns-area__panels__pane--navigational .columns-area__panels__pane__inner { .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {

241
modern.user.css
View File

@@ -6,17 +6,13 @@
// textbox in the left panel following this format: // textbox in the left panel following this format:
// *://domain.tld/* // *://domain.tld/*
/* Update 2.1.1 (v4.5.0-nightly.2025-08-06-security) /* Update 2.1.2 (v4.6.0-nightly.2025-12-04)
- Fixes posts padding in notifications - Fixes for Mastodon 4.6.0!!
- Fixed embeds collapsing upon opening
- Fixes up the compose box from Masto's dropdown position change
!! This change was done in a more recent Mastodon commit (49a6e4cbb5f0a30a52162b65b1046b99d29faccc)
You will not see this change until these changes were pulled to your instance
*/ */
/* ==UserStyle== /* ==UserStyle==
@name MastoModern @name MastoModern
@version 2.1.1 @version 2.1.2
@description Improves the look & feel of Mastodon @description Improves the look & feel of Mastodon
@updateURL https://git.gay/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css @updateURL https://git.gay/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css
@homepageURL https://git.gay/Freeplay/Mastodon-Modern @homepageURL https://git.gay/Freeplay/Mastodon-Modern
@@ -70,7 +66,7 @@
--panel-radius var(--radius) --panel-radius var(--radius)
--hover-color rgba(170,170,170, 0.07) --hover-color rgba(170,170,170, 0.07)
--elevated-color rgba(150,150,200,0.1) --elevated-color rgba(150,150,200,0.1)
--elevated-tint rgba(200,200,240,0.07) --elevated-tint var(--color-bg-secondary)
--border-color rgba(120,120,200, 0.2) --border-color rgba(120,120,200, 0.2)
--border-color-2 rgba(120,120,120, 1) --border-color-2 rgba(120,120,120, 1)
--shadow 0 10px 40px -10px rgba(0,0,0,0.15) --shadow 0 10px 40px -10px rgba(0,0,0,0.15)
@@ -78,6 +74,7 @@
--shadow-med 0 8px 60px -30px rgba(0,0,0,0.1) --shadow-med 0 8px 60px -30px rgba(0,0,0,0.1)
--column-shadow 0 8px 24px 12px rgba(0,0,0,0.02) --column-shadow 0 8px 24px 12px rgba(0,0,0,0.02)
--background-border-color var(--border-color) --background-border-color var(--border-color)
if flatterUI { if flatterUI {
--column-shadow 0 --column-shadow 0
--elevated-tint 0 --elevated-tint 0
@@ -110,7 +107,7 @@
content "" content ""
position fixed position fixed
inset 0 inset 0
background rgba(0,0,0,0.06) background rgba(0,0,0,0.09)
z-index -1 z-index -1
} }
} }
@@ -176,6 +173,10 @@
border-radius avatarRadius border-radius avatarRadius
flex none flex none
} }
button.icon-button {
--hover-bg-color: var(--hover-color);
}
:not(body):not(.scrollable) { :not(body):not(.scrollable) {
&::-webkit-scrollbar { &::-webkit-scrollbar {
@@ -364,7 +365,6 @@
} }
.compose-form__uploads { .compose-form__uploads {
padding 0 padding 0
margin-block 0 !important
margin-inline 12px margin-inline 12px
width unset width unset
} }
@@ -387,12 +387,17 @@
min-height unset min-height unset
overflow unset overflow unset
gap 15px gap 15px
margin-bottom 20px
flex 1 0 auto !important flex 1 0 auto !important
.spoiler-input__border { .spoiler-input__border {
display none display none
} }
.autosuggest-input.autosuggest-input {
border-block 0
}
#cw-spoiler-input { #cw-spoiler-input {
padding-inline 12px padding-inline 12px
border-radius 0
} }
.compose-form__upload__thumbnail { .compose-form__upload__thumbnail {
display flex display flex
@@ -406,6 +411,8 @@
flex-grow 1 flex-grow 1
display flex display flex
button.active { button.active {
background: rgba(0,0,0,0.75);
backdrop-filter: none;
box-shadow 0 0 0 100px rgba(0,0,0,0.75) box-shadow 0 0 0 100px rgba(0,0,0,0.75)
width 100% width 100%
height 100% height 100%
@@ -424,20 +431,15 @@
} }
.compose-form__highlightable { .compose-form__highlightable {
border-radius var(--radius) border-radius var(--radius)
.columns-area__panels__main & {
background none
}
> .compose-form__dropdowns { > .compose-form__dropdowns {
flex-wrap: nowrap;
button { button {
border 0 border 0
padding 4px padding 4px
transition background .2s transition background .2s
&::after {
content: "";
border: .3em solid currentcolor;
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(45deg);
margin-top: -.2em;
margin-inline: 0px 2px;
}
&:hover:not(.active) { &:hover:not(.active) {
background var(--hover-color) background var(--hover-color)
} }
@@ -460,6 +462,7 @@
justify-content center justify-content center
flex-grow 1 flex-grow 1
aspect-ratio 1 aspect-ratio 1
max-width 38px
padding 0 padding 0
border-radius 6px border-radius 6px
} }
@@ -467,16 +470,12 @@
display none !important display none !important
} }
.character-counter { .character-counter {
margin-inline-start auto
flex-grow: 0; flex-grow: 0;
min-width: 4ch; min-width: 4ch;
padding-inline: 10px 4px; padding-inline: 10px 4px;
} }
} }
.compose-form__submit {
button {
padding 8px 16px
}
}
/* .character-counter { /* .character-counter {
position absolute position absolute
inset-inline-end 0 inset-inline-end 0
@@ -565,6 +564,7 @@
} }
} }
.columns-area__panels__main { .columns-area__panels__main {
background: none;
@media (min-width responsiveW2) { @media (min-width responsiveW2) {
width 0 width 0
flex-grow 1 flex-grow 1
@@ -599,7 +599,7 @@
} }
} }
.column { .column {
background var(--background-color) background var(--color-bg-ambient)
overflow clip overflow clip
&::before { &::before {
content "" content ""
@@ -636,9 +636,6 @@
max-width calc(100% - 20px) max-width calc(100% - 20px)
} }
} }
.scrollable {
padding-bottom 40vh !important
}
.empty-column-indicator, .error-column { .empty-column-indicator, .error-column {
background none background none
} }
@@ -691,32 +688,35 @@
} }
/.column-header__collapsible { /.column-header__collapsible {
transition none transition none
background var(--surface-background-color) background var(--color-bg-secondary-solid)
overflow-y auto !important overflow-y auto !important
} }
.collapsed { .collapsed {
display none display none
} }
/.announcements { /.announcements__root {
background var(--surface-background-color) display flex !important
} flex-direction column
/.announcements__container {
width 100% !important
}
/.announcements__mastodon {
display block !important
z-index -1 z-index -1
position relative position relative
} }
/.announcements {
width 100%
overflow visible
}
/.announcements__pagination { /.announcements__pagination {
inset-inline-start 0
top 100%
bottom unset bottom unset
padding-block 0 padding-block 0
display flex }
align-items center /.announcements__mastodon {
display unset
order 2
} }
/.column-header__wrapper { /.column-header__wrapper {
> :not(.column-header):not(.collapsed) { > :not(.column-header):not(.collapsed) {
border-top 2px solid var(--background-color) !important border-top 2px solid var(--color-bg-ambient) !important
border 0 border 0
} }
} }
@@ -754,7 +754,7 @@
inset -20px -800px inset -20px -800px
transform scale(0) transform scale(0)
transform-origin bottom center transform-origin bottom center
background var(--surface-background-color) background var(--color-bg-secondary-solid)
z-index -1 z-index -1
border-radius 100px border-radius 100px
pointer-events none pointer-events none
@@ -784,7 +784,7 @@
border-radius var(--radius) border-radius var(--radius)
overflow hidden overflow hidden
> div { > div {
background var(--surface-background-color) background var(--color-bg-secondary-solid)
} }
} }
.column-header { .column-header {
@@ -942,7 +942,7 @@
content "" content ""
position absolute position absolute
inset -100px -10px inset -100px -10px
background var(--background-color) background var(--color-bg-ambient)
z-index -1 z-index -1
} }
&::after { &::after {
@@ -1004,8 +1004,7 @@
min-width max-content min-width max-content
border-radius 2em border-radius 2em
font-weight 600 font-weight 600
font-size .6em !important top -6px
top -10px
box-sizing border-box box-sizing border-box
} }
@media (min-width mobileW) { @media (min-width mobileW) {
@@ -1104,11 +1103,6 @@
.status__line { .status__line {
left calc(16px + (var(--avatar-size) / 2)) left calc(16px + (var(--avatar-size) / 2))
} }
.status__prepend {
& + .status:not(.status-direct) {
padding-top 5px
}
}
// STATUS REPLY // STATUS REPLY
.status--in-thread { .status--in-thread {
@@ -1166,6 +1160,10 @@
max-height 80vh max-height 80vh
} }
} }
.status__quote .status__wrapper {
margin: 0;
max-width: unset;
}
// STATUS DIRECT // STATUS DIRECT
.detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation { .detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation {
@@ -1210,7 +1208,7 @@
content "" content ""
position absolute position absolute
inset 0 inset 0
background var(--elevated-tint) !important background var(--color-bg-secondary) !important
pointer-events none pointer-events none
z-index -1 z-index -1
} }
@@ -1649,7 +1647,7 @@
margin-top calc(0px - var(--radius)) !important margin-top calc(0px - var(--radius)) !important
display flex display flex
flex-direction column flex-direction column
background var(--background-color) background var(--color-bg-ambient)
isolation isolate isolation isolate
&::before { &::before {
@@ -2315,7 +2313,7 @@
background-color transparent !important background-color transparent !important
} }
.darker { .darker {
background-color var(--surface-background-color) background-color var(--color-bg-secondary-solid)
border-radius var(--radius) var(--radius) 0 0 border-radius var(--radius) var(--radius) 0 0
top 10px top 10px
width unset width unset
@@ -2329,7 +2327,7 @@
position absolute position absolute
inset 0 inset 0
top var(--column-header-height) top var(--column-header-height)
background var(--background-color) background var(--color-bg-ambient)
z-index -1 z-index -1
} }
&::before, &::after { &::before, &::after {
@@ -2424,15 +2422,21 @@
//// MOBILE //// MOBILE
/ { / {
@media (max-width mobileW - 1) { @media (max-width mobileW - 1) {
.tabs-bar__wrapper, .ui__navigation-bar { .tabs-bar__wrapper {
background var(--color-bg-primary)
backdrop-filter none
&::before { &::before {
content "" content ""
position absolute position absolute
inset 0 inset 0
background var(--elevated-color) background var(--elevated-tint)
z-index -1 z-index -1
} }
} }
.ui__navigation-bar {
border 0
background var(--color-bg-tertiary)
}
.ui__navigation-bar { .ui__navigation-bar {
color var(--on-input-color) color var(--on-input-color)
height 70px height 70px
@@ -2485,6 +2489,7 @@
box-sizing border-box box-sizing border-box
overscroll-behavior contain overscroll-behavior contain
visibility hidden visibility hidden
box-shadow unquote("0 0 0 200px rgb(from var(--color-bg-overlay) r g b/50%)")
transition visibility 0s 0.2s transition visibility 0s 0.2s
.columns-area__panels__pane__inner { .columns-area__panels__pane__inner {
width 100% width 100%
@@ -2702,35 +2707,8 @@
//// GLITCH-SOC FIXES //// GLITCH-SOC FIXES
/ { / {
:root {
--background-color-alt transparent
}
/body.app-body.flavour-glitch > #mastodon { /body.app-body.flavour-glitch > #mastodon {
// Compose Form // Compose Form
.compose-form__autosuggest-wrapper > :last-child {
padding-bottom 2em !important
}
.compose-form__buttons {
width 100%
> div:last-child {
margin-inline-start auto
}
}
.compose-form__buttons-wrapper {
position relative
}
.character-counter__wrapper {
position absolute
inset-inline-end 0
bottom 100%
margin 4px 4px
border-radius 6px
padding .1em .5em
span {
font-size .9em
font-weight 500
}
}
.compose-form__highlightable { .compose-form__highlightable {
margin-bottom 50px !important margin-bottom 50px !important
} }
@@ -2745,38 +2723,12 @@
} }
// GLITCH STATUSES // GLITCH STATUSES
.collapsed {
.status__content {
height auto !important
overflow visible
mask unset !important
.status__content__text {
mask linear-gradient(to bottom, black 50px, transparent) !important
-webkit-mask @mask
max-height 100px
}
p:not(:last-child) {
margin-bottom .4em
}
br {
display block
}
&::after {
content unset
}
}
&.muted {
.status__content__text ~ * {
display none
}
}
}
.focusable[tabindex]:not(.notification-ungrouped) .full-width { .focusable[tabindex]:not(.notification-ungrouped) .full-width {
margin-inline 0 margin-inline 0
} }
.media-gallery__item > .media-gallery__preview { .media-gallery__item > .media-gallery__preview {
display unset display unset
opacity .5
} }
.status__action-bar-spacer { .status__action-bar-spacer {
@@ -2795,50 +2747,23 @@
} }
} }
// CW /.reactions-bar {
.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 width unset
margin-top 8px margin-top 8px
pointer-events none
button { button {
pointer-events all
border-radius 6px !important border-radius 6px !important
padding-block 2px padding-block 2px
.reactions-bar__item__emoji { .reactions-bar__item__emoji {
width unset
height 2em height 2em
width @height max-width 70px
min-width @height
.detailed-status & {
max-width 400px
}
} }
border 1px solid var(--border-color)
&:not(.active) { &:not(.active) {
border 1px solid var(--border-color)
background none background none
} }
} }
@@ -2856,31 +2781,7 @@
} }
// timeline settings // GLITCH-SOC OPTIONS
.column-settings__pillbar {
border-radius var(--radius)
}
.pillbar-button {
padding 10px
border-radius 4px
}
.column-header__notif-cleaning-buttons {
flex-wrap wrap
button {
min-width 50% !important
}
}
.notification__dismiss-overlay {
position absolute !important
.wrappy {
box-shadow none
background none
border-top 0
}
}
// OPTIONS
.local-settings { .local-settings {
max-height 700px !important max-height 700px !important