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

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 {
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 {
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 {
margin-inline: 0;
}
body.app-body.flavour-glitch > #mastodon .media-gallery__item > .media-gallery__preview {
display: unset;
opacity: 0.5;
}
body.app-body.flavour-glitch > #mastodon .status__action-bar-spacer {
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 {
display: inline !important;
}
body.app-body.flavour-glitch > #mastodon .status__content__spoiler-link {
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 {
.reactions-bar {
width: unset;
margin-top: 8px;
pointer-events: none;
}
body.app-body.flavour-glitch > #mastodon .reactions-bar button {
pointer-events: all;
.reactions-bar button {
border-radius: 6px !important;
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;
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;
}
body.app-body.flavour-glitch > #mastodon .reactions-bar:empty {
.reactions-bar:empty {
display: none;
}
body.app-body.flavour-glitch > #mastodon .reactions-bar .emoji-picker-dropdown {
.reactions-bar .emoji-picker-dropdown {
align-self: stretch;
}
body.app-body.flavour-glitch > #mastodon .reactions-bar .emoji-picker-dropdown button {
.reactions-bar .emoji-picker-dropdown button {
align-self: stretch;
height: 100%;
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 {
max-height: 700px !important;
width: 100%;

104
modern.css
View File

@@ -7,7 +7,7 @@
--panel-radius: var(--radius);
--hover-color: rgba(170,170,170,0.07);
--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-2: #787878;
--shadow: 0 10px 40px -10px rgba(0,0,0,0.15);
@@ -31,7 +31,7 @@ body:not(.admin)::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,0.06);
background: rgba(0,0,0,0.09);
z-index: -1;
}
p {
@@ -104,6 +104,9 @@ a:focus-visible,
border-radius: 30%;
flex: none;
}
button.icon-button {
--hover-bg-color: var(--hover-color);
}
:not(body):not(.scrollable)::-webkit-scrollbar {
width: 6px;
margin-block: 10px;
@@ -503,7 +506,6 @@ a:focus-visible,
}
.compose-form__uploads {
padding: 0;
margin-block: 0 !important;
margin-inline: 12px;
width: unset;
}
@@ -526,13 +528,18 @@ a:focus-visible,
min-height: unset;
overflow: unset;
gap: 15px;
margin-bottom: 20px;
flex: 1 0 auto !important;
}
.compose-form .spoiler-input__border {
display: none;
}
.compose-form .autosuggest-input.autosuggest-input {
border-block: 0;
}
.compose-form #cw-spoiler-input {
padding-inline: 12px;
border-radius: 0;
}
.compose-form .compose-form__upload__thumbnail {
display: flex;
@@ -547,6 +554,8 @@ a:focus-visible,
display: flex;
}
.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);
width: 100%;
height: 100%;
@@ -572,20 +581,17 @@ a:focus-visible,
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 {
border: 0;
padding: 4px;
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) {
background: var(--hover-color);
}
@@ -607,6 +613,7 @@ a:focus-visible,
justify-content: center;
flex-grow: 1;
aspect-ratio: 1;
max-width: 38px;
padding: 0;
border-radius: 6px;
}
@@ -614,13 +621,11 @@ a:focus-visible,
display: none !important;
}
.compose-form__highlightable .compose-form__buttons .character-counter {
margin-inline-start: auto;
flex-grow: 0;
min-width: 4ch;
padding-inline: 10px 4px;
}
.compose-form__highlightable .compose-form__submit button {
padding: 8px 16px;
}
.server-banner .server-banner__hero {
border-radius: var(--radius);
width: 100%;
@@ -692,6 +697,7 @@ a:focus-visible,
}
}
.columns-area__panels__main {
background: none;
overflow: visible !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);
@@ -724,7 +730,7 @@ a:focus-visible,
grid-row: 1;
}
.column {
background: var(--background-color);
background: var(--color-bg-ambient);
overflow: clip;
}
.column::before {
@@ -757,9 +763,6 @@ a:focus-visible,
max-width: calc(100% - 20px);
}
}
.scrollable {
padding-bottom: 40vh !important;
}
.empty-column-indicator,
.error-column {
background: none;
@@ -815,31 +818,34 @@ a:focus-visible,
}
.column-header__collapsible {
transition: none;
background: var(--surface-background-color);
background: var(--color-bg-secondary-solid);
overflow-y: auto !important;
}
.tabs-bar__wrapper .collapsed {
display: none;
}
.announcements {
background: var(--surface-background-color);
}
.announcements__container {
width: 100% !important;
}
.announcements__mastodon {
display: block !important;
.announcements__root {
display: flex !important;
flex-direction: column;
z-index: -1;
position: relative;
}
.announcements {
width: 100%;
overflow: visible;
}
.announcements__pagination {
inset-inline-start: 0;
top: 100%;
bottom: unset;
padding-block: 0;
display: flex;
align-items: center;
}
.announcements__mastodon {
display: unset;
order: 2;
}
.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;
}
.column-header {
@@ -877,7 +883,7 @@ a:focus-visible,
inset: -20px -800px;
transform: scale(0);
transform-origin: bottom center;
background: var(--surface-background-color);
background: var(--color-bg-secondary-solid);
z-index: -1;
border-radius: 100px;
pointer-events: none;
@@ -912,7 +918,7 @@ a:focus-visible,
overflow: hidden;
}
.tabs-bar__wrapper .column-header__wrapper > div {
background: var(--surface-background-color);
background: var(--color-bg-secondary-solid);
}
.tabs-bar__wrapper .column-header {
background: none !important;
@@ -1083,8 +1089,7 @@ a:focus-visible,
min-width: max-content;
border-radius: 2em;
font-weight: 600;
font-size: 0.6em !important;
top: -10px;
top: -6px;
box-sizing: border-box;
}
@media (min-width: 760px) {
@@ -1204,9 +1209,6 @@ a:focus-visible,
.status__line {
left: calc(16px + (var(--avatar-size) / 2));
}
.status__prepend + .status:not(.status-direct) {
padding-top: 5px;
}
@media (max-width: 450px) {
.status--in-thread {
--avatar-size: 34px;
@@ -1256,6 +1258,10 @@ a:focus-visible,
.status__content ~ [style*="aspect-ratio"] {
max-height: 80vh;
}
.status__quote .status__wrapper {
margin: 0;
max-width: unset;
}
.detailed-status__wrapper-direct .status__content,
.status-direct .status__content,
.status__wrapper-direct .status__content,
@@ -1301,7 +1307,7 @@ a:focus-visible,
content: "";
position: absolute;
inset: 0;
background: var(--elevated-tint) !important;
background: var(--color-bg-secondary) !important;
pointer-events: none;
z-index: -1;
}
@@ -1735,7 +1741,7 @@ a:focus-visible,
margin-top: calc(0px - var(--radius)) !important;
display: flex;
flex-direction: column;
background: var(--background-color);
background: var(--color-bg-ambient);
isolation: isolate;
}
@media (max-width: 760px) {
@@ -2452,7 +2458,7 @@ a:focus-visible,
background-color: transparent !important;
}
.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;
top: 10px;
width: unset;
@@ -2466,7 +2472,7 @@ a:focus-visible,
position: absolute;
inset: 0;
top: var(--column-header-height);
background: var(--background-color);
background: var(--color-bg-ambient);
z-index: -1;
}
.layout-multiple-columns.layout-multiple-columns .column::before,
@@ -2557,14 +2563,21 @@ a:focus-visible,
}
}
@media (max-width: 759px) {
.tabs-bar__wrapper::before,
.ui__navigation-bar::before {
.tabs-bar__wrapper {
background: var(--color-bg-primary);
backdrop-filter: none;
}
.tabs-bar__wrapper::before {
content: "";
position: absolute;
inset: 0;
background: var(--elevated-color);
background: var(--elevated-tint);
z-index: -1;
}
.ui__navigation-bar {
border: 0;
background: var(--color-bg-tertiary);
}
.ui__navigation-bar {
color: var(--on-input-color);
height: 70px;
@@ -2616,6 +2629,7 @@ a:focus-visible,
box-sizing: border-box;
overscroll-behavior: contain;
visibility: hidden;
box-shadow: 0 0 0 200px rgb(from var(--color-bg-overlay) r g b/50%);
transition: visibility 0s 0.2s;
}
.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:
// *://domain.tld/*
/* Update 2.1.1 (v4.5.0-nightly.2025-08-06-security)
- Fixes posts padding in notifications
- 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
/* Update 2.1.2 (v4.6.0-nightly.2025-12-04)
- Fixes for Mastodon 4.6.0!!
*/
/* ==UserStyle==
@name MastoModern
@version 2.1.1
@version 2.1.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
@@ -70,7 +66,7 @@
--panel-radius var(--radius)
--hover-color rgba(170,170,170, 0.07)
--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-2 rgba(120,120,120, 1)
--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)
--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
@@ -110,7 +107,7 @@
content ""
position fixed
inset 0
background rgba(0,0,0,0.06)
background rgba(0,0,0,0.09)
z-index -1
}
}
@@ -176,6 +173,10 @@
border-radius avatarRadius
flex none
}
button.icon-button {
--hover-bg-color: var(--hover-color);
}
:not(body):not(.scrollable) {
&::-webkit-scrollbar {
@@ -364,7 +365,6 @@
}
.compose-form__uploads {
padding 0
margin-block 0 !important
margin-inline 12px
width unset
}
@@ -387,12 +387,17 @@
min-height unset
overflow unset
gap 15px
margin-bottom 20px
flex 1 0 auto !important
.spoiler-input__border {
display none
}
.autosuggest-input.autosuggest-input {
border-block 0
}
#cw-spoiler-input {
padding-inline 12px
border-radius 0
}
.compose-form__upload__thumbnail {
display flex
@@ -406,6 +411,8 @@
flex-grow 1
display flex
button.active {
background: rgba(0,0,0,0.75);
backdrop-filter: none;
box-shadow 0 0 0 100px rgba(0,0,0,0.75)
width 100%
height 100%
@@ -424,20 +431,15 @@
}
.compose-form__highlightable {
border-radius var(--radius)
.columns-area__panels__main & {
background none
}
> .compose-form__dropdowns {
flex-wrap: nowrap;
button {
border 0
padding 4px
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) {
background var(--hover-color)
}
@@ -460,6 +462,7 @@
justify-content center
flex-grow 1
aspect-ratio 1
max-width 38px
padding 0
border-radius 6px
}
@@ -467,16 +470,12 @@
display none !important
}
.character-counter {
margin-inline-start auto
flex-grow: 0;
min-width: 4ch;
padding-inline: 10px 4px;
}
}
.compose-form__submit {
button {
padding 8px 16px
}
}
/* .character-counter {
position absolute
inset-inline-end 0
@@ -565,6 +564,7 @@
}
}
.columns-area__panels__main {
background: none;
@media (min-width responsiveW2) {
width 0
flex-grow 1
@@ -599,7 +599,7 @@
}
}
.column {
background var(--background-color)
background var(--color-bg-ambient)
overflow clip
&::before {
content ""
@@ -636,9 +636,6 @@
max-width calc(100% - 20px)
}
}
.scrollable {
padding-bottom 40vh !important
}
.empty-column-indicator, .error-column {
background none
}
@@ -691,32 +688,35 @@
}
/.column-header__collapsible {
transition none
background var(--surface-background-color)
background var(--color-bg-secondary-solid)
overflow-y auto !important
}
.collapsed {
display none
}
/.announcements {
background var(--surface-background-color)
}
/.announcements__container {
width 100% !important
}
/.announcements__mastodon {
display block !important
/.announcements__root {
display flex !important
flex-direction column
z-index -1
position relative
}
/.announcements {
width 100%
overflow visible
}
/.announcements__pagination {
inset-inline-start 0
top 100%
bottom unset
padding-block 0
display flex
align-items center
}
/.announcements__mastodon {
display unset
order 2
}
/.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
}
}
@@ -754,7 +754,7 @@
inset -20px -800px
transform scale(0)
transform-origin bottom center
background var(--surface-background-color)
background var(--color-bg-secondary-solid)
z-index -1
border-radius 100px
pointer-events none
@@ -784,7 +784,7 @@
border-radius var(--radius)
overflow hidden
> div {
background var(--surface-background-color)
background var(--color-bg-secondary-solid)
}
}
.column-header {
@@ -942,7 +942,7 @@
content ""
position absolute
inset -100px -10px
background var(--background-color)
background var(--color-bg-ambient)
z-index -1
}
&::after {
@@ -1004,8 +1004,7 @@
min-width max-content
border-radius 2em
font-weight 600
font-size .6em !important
top -10px
top -6px
box-sizing border-box
}
@media (min-width mobileW) {
@@ -1104,11 +1103,6 @@
.status__line {
left calc(16px + (var(--avatar-size) / 2))
}
.status__prepend {
& + .status:not(.status-direct) {
padding-top 5px
}
}
// STATUS REPLY
.status--in-thread {
@@ -1166,6 +1160,10 @@
max-height 80vh
}
}
.status__quote .status__wrapper {
margin: 0;
max-width: unset;
}
// STATUS DIRECT
.detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation {
@@ -1210,7 +1208,7 @@
content ""
position absolute
inset 0
background var(--elevated-tint) !important
background var(--color-bg-secondary) !important
pointer-events none
z-index -1
}
@@ -1649,7 +1647,7 @@
margin-top calc(0px - var(--radius)) !important
display flex
flex-direction column
background var(--background-color)
background var(--color-bg-ambient)
isolation isolate
&::before {
@@ -2315,7 +2313,7 @@
background-color transparent !important
}
.darker {
background-color var(--surface-background-color)
background-color var(--color-bg-secondary-solid)
border-radius var(--radius) var(--radius) 0 0
top 10px
width unset
@@ -2329,7 +2327,7 @@
position absolute
inset 0
top var(--column-header-height)
background var(--background-color)
background var(--color-bg-ambient)
z-index -1
}
&::before, &::after {
@@ -2424,15 +2422,21 @@
//// MOBILE
/ {
@media (max-width mobileW - 1) {
.tabs-bar__wrapper, .ui__navigation-bar {
.tabs-bar__wrapper {
background var(--color-bg-primary)
backdrop-filter none
&::before {
content ""
position absolute
inset 0
background var(--elevated-color)
background var(--elevated-tint)
z-index -1
}
}
.ui__navigation-bar {
border 0
background var(--color-bg-tertiary)
}
.ui__navigation-bar {
color var(--on-input-color)
height 70px
@@ -2485,6 +2489,7 @@
box-sizing border-box
overscroll-behavior contain
visibility hidden
box-shadow unquote("0 0 0 200px rgb(from var(--color-bg-overlay) r g b/50%)")
transition visibility 0s 0.2s
.columns-area__panels__pane__inner {
width 100%
@@ -2702,35 +2707,8 @@
//// GLITCH-SOC FIXES
/ {
:root {
--background-color-alt transparent
}
/body.app-body.flavour-glitch > #mastodon {
// 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 {
margin-bottom 50px !important
}
@@ -2745,38 +2723,12 @@
}
// 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 {
margin-inline 0
}
.media-gallery__item > .media-gallery__preview {
display unset
opacity .5
}
.status__action-bar-spacer {
@@ -2795,50 +2747,23 @@
}
}
// 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 {
/.reactions-bar {
width unset
margin-top 8px
pointer-events none
button {
pointer-events all
border-radius 6px !important
padding-block 2px
.reactions-bar__item__emoji {
width unset
height 2em
width @height
max-width 70px
min-width @height
.detailed-status & {
max-width 400px
}
}
border 1px solid var(--border-color)
&:not(.active) {
border 1px solid var(--border-color)
background none
}
}
@@ -2856,31 +2781,7 @@
}
// timeline settings
.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
// GLITCH-SOC OPTIONS
.local-settings {
max-height 700px !important