Update mastomodern
This commit is contained in:
Essem
parent
e8ba9a39d7
commit
64bd79c862
3 changed files with 221 additions and 38 deletions
app/javascript
|
|
@ -73,14 +73,17 @@ body.app-body.flavour-glitch
|
|||
display: none;
|
||||
}
|
||||
|
||||
body.app-body.flavour-glitch > #mastodon .status > .status__content {
|
||||
body.app-body.flavour-glitch
|
||||
> #mastodon
|
||||
.status:not(.status-direct)
|
||||
> .status__content {
|
||||
margin-block: -90px -100px !important;
|
||||
padding-block: 100px !important;
|
||||
}
|
||||
|
||||
body.app-body.flavour-glitch
|
||||
> #mastodon
|
||||
.status
|
||||
.status:not(.status-direct)
|
||||
> .status__content
|
||||
.status__content__text {
|
||||
margin-top: 0;
|
||||
|
|
@ -88,7 +91,7 @@ body.app-body.flavour-glitch
|
|||
|
||||
body.app-body.flavour-glitch
|
||||
> #mastodon
|
||||
.status
|
||||
.status:not(.status-direct)
|
||||
> .status__content
|
||||
> :last-child:not(.status__content__text) {
|
||||
margin-bottom: 5px !important;
|
||||
|
|
@ -127,7 +130,7 @@ body.app-body.flavour-glitch > #mastodon .status__action-bar-spacer {
|
|||
}
|
||||
|
||||
body.app-body.flavour-glitch > #mastodon .status__relative-time {
|
||||
margin-inline: 5px !important;
|
||||
margin-inline: auto 5px !important;
|
||||
z-index: 2;
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
--shadow: 0 10px 40px -10px rgba(0,0,0,0.15);
|
||||
--shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4);
|
||||
--shadow-med: 0 8px 60px -30px rgba(0,0,0,0.1);
|
||||
--accent
|
||||
}
|
||||
:not(body):not(.scrollable)::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
|
|
@ -413,7 +414,7 @@ a:focus-visible,
|
|||
.dropdown-menu,
|
||||
.dropdown-animation {
|
||||
border-radius: var(--radius);
|
||||
animation: scaleIn 0.2s;
|
||||
animation: scaleIn 0.2s cubic-bezier(0, 0, 0, 1.1);
|
||||
}
|
||||
.dropdown-menu__container__list {
|
||||
overflow: hidden auto;
|
||||
|
|
@ -708,7 +709,8 @@ a:focus-visible,
|
|||
#mastodon .explore__search-results {
|
||||
padding: 10px;
|
||||
}
|
||||
#mastodon .dismissable-banner {
|
||||
#mastodon .dismissable-banner,
|
||||
#mastodon .follow_requests-unlocked_explanation {
|
||||
border-inline: 0;
|
||||
border-top: 0;
|
||||
margin: -10px;
|
||||
|
|
@ -1149,7 +1151,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
.account-card,
|
||||
.scrollable :not(.focusable) > .account,
|
||||
.timeline-hint {
|
||||
overflow: clip;
|
||||
overflow: hidden;
|
||||
transition: background 0.2s, box-shadow 0.4s, margin 0.2s, border 0.2s;
|
||||
animation: slideUp backwards 0.4s cubic-bezier(0, 1, 1, 1);
|
||||
position: relative;
|
||||
|
|
@ -1997,12 +1999,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
#mastodon .status__wrapper-direct .status__prepend {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .status__wrapper-direct .status__relative-time {
|
||||
color: #8c8dff !important;
|
||||
}
|
||||
#mastodon .status,
|
||||
#mastodon .scrollable .account {
|
||||
padding-block: 15px;
|
||||
|
|
@ -2012,6 +2008,12 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
inset: -10px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
#mastodon .status.light {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
#mastodon .status.light .boost-modal__status-header {
|
||||
display: flow-root !important;
|
||||
}
|
||||
#mastodon .account__relationship:empty {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -2205,16 +2207,18 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
height: 2em;
|
||||
min-width: 2em;
|
||||
width: auto;
|
||||
transition: transform 0.2s cubic-bezier(0, 0, 0, 1);
|
||||
}
|
||||
#mastodon .status__content .custom-emoji:hover {
|
||||
transform: scale(1.2);
|
||||
.custom-emoji {
|
||||
transition: transform 0.4s cubic-bezier(0, 0.7, 0, 1);
|
||||
}
|
||||
.custom-emoji:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
#mastodon .status__content ~ [style*="aspect-ratio"] {
|
||||
max-height: 80vh;
|
||||
}
|
||||
#mastodon .status > .status__content .status__content__text:empty {
|
||||
margin-top: -10px !important;
|
||||
margin-top: -5px !important;
|
||||
}
|
||||
#mastodon .status__content__spoiler-link {
|
||||
display: block;
|
||||
|
|
@ -2244,6 +2248,91 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
#mastodon .status__content__spoiler-link:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
#mastodon .status-direct .status__prepend,
|
||||
#mastodon .status__wrapper-direct .status__prepend,
|
||||
#mastodon .conversation .status__prepend {
|
||||
position: absolute;
|
||||
font-size: 0;
|
||||
}
|
||||
#mastodon .status-direct .status__content,
|
||||
#mastodon .status__wrapper-direct .status__content,
|
||||
#mastodon .conversation .status__content {
|
||||
position: relative !important;
|
||||
background: var(--elevated-color);
|
||||
padding: 8px 12px;
|
||||
padding: 0.7em 0.9em !important;
|
||||
border-radius: var(--radius-round);
|
||||
border-top-left-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 5px !important;
|
||||
margin-bottom: 0;
|
||||
overflow: hidden !important;
|
||||
max-width: max-content;
|
||||
}
|
||||
#mastodon .status-direct .status__content .media-gallery,
|
||||
#mastodon .status__wrapper-direct .status__content .media-gallery,
|
||||
#mastodon .conversation .status__content .media-gallery {
|
||||
width: 999px;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
.detailed-status__wrapper-direct .status__content {
|
||||
font-size: 17px;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct .fa-at,
|
||||
#mastodon .detailed-status__wrapper-direct .status__visibility-icon {
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
color: var(--accent, #8c8dff);
|
||||
width: auto !important;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct .fa-at::before,
|
||||
#mastodon .detailed-status__wrapper-direct .status__visibility-icon::before {
|
||||
font-family: FontAwesome !important;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct .fa-at::after,
|
||||
#mastodon .detailed-status__wrapper-direct .status__visibility-icon::after {
|
||||
content: attr(title);
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
#mastodon .status-direct .fa-at,
|
||||
#mastodon .status-direct .status__visibility-icon {
|
||||
color: var(--accent, #8c8dff);
|
||||
}
|
||||
#mastodon .status-direct .status__info .status__relative-time {
|
||||
height: auto;
|
||||
color: var(--accent, #8c8dff);
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .status__info {
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .status__info > span {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .status__info> span,
|
||||
#mastodon .status-direct.status--in-thread .status__display-name {
|
||||
overflow: visible !important;
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .status__display-name {
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .status__avatar {
|
||||
height: auto;
|
||||
margin-bottom: -100px;
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .status__avatar .account__avatar {
|
||||
position: absolute;
|
||||
top: 0 !important;
|
||||
height: 46px !important;
|
||||
width: 46px !important;
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .display-name * {
|
||||
display: inline;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
#mastodon .media-gallery,
|
||||
#mastodon .video-player,
|
||||
#mastodon .status-card.horizontal.interactive,
|
||||
|
|
@ -2608,6 +2697,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
.layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible:not(.collapsed) {
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-start;
|
||||
border: 0;
|
||||
animation: slideDowFade 0.3s backwards cubic-bezier(0, 1, 0, 1.2);
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header__collapsible,
|
||||
|
|
@ -2748,6 +2838,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
max-height: 3.3em;
|
||||
min-height: 2.7em !important;
|
||||
padding-block: 0;
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
opacity: 0.9;
|
||||
|
|
@ -3150,6 +3241,9 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
height: 100% !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
#mastodon .status::before {
|
||||
content: unset;
|
||||
}
|
||||
#mastodon .status__action-bar {
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
|
@ -3171,10 +3265,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
#mastodon .notification__filter-bar + .scrollable {
|
||||
border-radius: var(--radius) var(--radius) 0 0 !important;
|
||||
}
|
||||
#mastodon .modal-root__modal .status.light {
|
||||
overflow: hidden !important;
|
||||
padding-inline-start: 70px !important;
|
||||
}
|
||||
#mastodon .columns-area {
|
||||
padding-bottom: 0 !important;
|
||||
overflow: hidden !important;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
--shadow: 0 10px 40px -10px rgba(0,0,0,0.15);
|
||||
--shadow-low: 0 8px 16px -10px rgba(0,0,0,0.4);
|
||||
--shadow-med: 0 8px 60px -30px rgba(0,0,0,0.1);
|
||||
--accent
|
||||
}
|
||||
:not(body):not(.scrollable)::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
|
|
@ -413,7 +414,7 @@ a:focus-visible,
|
|||
.dropdown-menu,
|
||||
.dropdown-animation {
|
||||
border-radius: var(--radius);
|
||||
animation: scaleIn 0.2s;
|
||||
animation: scaleIn 0.2s cubic-bezier(0, 0, 0, 1.1);
|
||||
}
|
||||
.dropdown-menu__container__list {
|
||||
overflow: hidden auto;
|
||||
|
|
@ -708,7 +709,8 @@ a:focus-visible,
|
|||
#mastodon .explore__search-results {
|
||||
padding: 10px;
|
||||
}
|
||||
#mastodon .dismissable-banner {
|
||||
#mastodon .dismissable-banner,
|
||||
#mastodon .follow_requests-unlocked_explanation {
|
||||
border-inline: 0;
|
||||
border-top: 0;
|
||||
margin: -10px;
|
||||
|
|
@ -1149,7 +1151,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
.account-card,
|
||||
.scrollable :not(.focusable) > .account,
|
||||
.timeline-hint {
|
||||
overflow: clip;
|
||||
overflow: hidden;
|
||||
transition: background 0.2s, box-shadow 0.4s, margin 0.2s, border 0.2s;
|
||||
animation: slideUp backwards 0.4s cubic-bezier(0, 1, 1, 1);
|
||||
position: relative;
|
||||
|
|
@ -1997,12 +1999,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
#mastodon .status__wrapper-direct .status__prepend {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .status__wrapper-direct .status__relative-time {
|
||||
color: #8c8dff !important;
|
||||
}
|
||||
#mastodon .status,
|
||||
#mastodon .scrollable .account {
|
||||
padding-block: 15px;
|
||||
|
|
@ -2012,6 +2008,12 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
inset: -10px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
#mastodon .status.light {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
#mastodon .status.light .boost-modal__status-header {
|
||||
display: flow-root !important;
|
||||
}
|
||||
#mastodon .account__relationship:empty {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -2205,16 +2207,18 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
height: 2em;
|
||||
min-width: 2em;
|
||||
width: auto;
|
||||
transition: transform 0.2s cubic-bezier(0, 0, 0, 1);
|
||||
}
|
||||
#mastodon .status__content .custom-emoji:hover {
|
||||
transform: scale(1.2);
|
||||
.custom-emoji {
|
||||
transition: transform 0.4s cubic-bezier(0, 0.7, 0, 1);
|
||||
}
|
||||
.custom-emoji:hover {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
#mastodon .status__content ~ [style*="aspect-ratio"] {
|
||||
max-height: 80vh;
|
||||
}
|
||||
#mastodon .status > .status__content .status__content__text:empty {
|
||||
margin-top: -10px !important;
|
||||
margin-top: -5px !important;
|
||||
}
|
||||
#mastodon .status__content__spoiler-link {
|
||||
display: block;
|
||||
|
|
@ -2244,6 +2248,91 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
#mastodon .status__content__spoiler-link:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
#mastodon .status-direct .status__prepend,
|
||||
#mastodon .status__wrapper-direct .status__prepend,
|
||||
#mastodon .conversation .status__prepend {
|
||||
position: absolute;
|
||||
font-size: 0;
|
||||
}
|
||||
#mastodon .status-direct .status__content,
|
||||
#mastodon .status__wrapper-direct .status__content,
|
||||
#mastodon .conversation .status__content {
|
||||
position: relative !important;
|
||||
background: var(--elevated-color);
|
||||
padding: 8px 12px;
|
||||
padding: 0.7em 0.9em !important;
|
||||
border-radius: var(--radius-round);
|
||||
border-top-left-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
margin-top: 5px !important;
|
||||
margin-bottom: 0;
|
||||
overflow: hidden !important;
|
||||
max-width: max-content;
|
||||
}
|
||||
#mastodon .status-direct .status__content .media-gallery,
|
||||
#mastodon .status__wrapper-direct .status__content .media-gallery,
|
||||
#mastodon .conversation .status__content .media-gallery {
|
||||
width: 999px;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
.detailed-status__wrapper-direct .status__content {
|
||||
font-size: 17px;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct .fa-at,
|
||||
#mastodon .detailed-status__wrapper-direct .status__visibility-icon {
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
color: var(--accent, #8c8dff);
|
||||
width: auto !important;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct .fa-at::before,
|
||||
#mastodon .detailed-status__wrapper-direct .status__visibility-icon::before {
|
||||
font-family: FontAwesome !important;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct .fa-at::after,
|
||||
#mastodon .detailed-status__wrapper-direct .status__visibility-icon::after {
|
||||
content: attr(title);
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
#mastodon .status-direct .fa-at,
|
||||
#mastodon .status-direct .status__visibility-icon {
|
||||
color: var(--accent, #8c8dff);
|
||||
}
|
||||
#mastodon .status-direct .status__info .status__relative-time {
|
||||
height: auto;
|
||||
color: var(--accent, #8c8dff);
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .status__info {
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .status__info > span {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .status__info> span,
|
||||
#mastodon .status-direct.status--in-thread .status__display-name {
|
||||
overflow: visible !important;
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .status__display-name {
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .status__avatar {
|
||||
height: auto;
|
||||
margin-bottom: -100px;
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .status__avatar .account__avatar {
|
||||
position: absolute;
|
||||
top: 0 !important;
|
||||
height: 46px !important;
|
||||
width: 46px !important;
|
||||
}
|
||||
#mastodon .status-direct.status--in-thread .display-name * {
|
||||
display: inline;
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
#mastodon .media-gallery,
|
||||
#mastodon .video-player,
|
||||
#mastodon .status-card.horizontal.interactive,
|
||||
|
|
@ -2608,6 +2697,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
.layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible:not(.collapsed) {
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-start;
|
||||
border: 0;
|
||||
animation: slideDowFade 0.3s backwards cubic-bezier(0, 1, 0, 1.2);
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header__collapsible,
|
||||
|
|
@ -2748,6 +2838,7 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
max-height: 3.3em;
|
||||
min-height: 2.7em !important;
|
||||
padding-block: 0;
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
opacity: 0.9;
|
||||
|
|
@ -3150,6 +3241,9 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
height: 100% !important;
|
||||
background-size: cover !important;
|
||||
}
|
||||
#mastodon .status::before {
|
||||
content: unset;
|
||||
}
|
||||
#mastodon .status__action-bar {
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
|
@ -3171,10 +3265,6 @@ body:not(.flavour-glitch) #mastodon .account-timeline__header .account__header_
|
|||
#mastodon .notification__filter-bar + .scrollable {
|
||||
border-radius: var(--radius) var(--radius) 0 0 !important;
|
||||
}
|
||||
#mastodon .modal-root__modal .status.light {
|
||||
overflow: hidden !important;
|
||||
padding-inline-start: 70px !important;
|
||||
}
|
||||
#mastodon .columns-area {
|
||||
padding-bottom: 0 !important;
|
||||
overflow: hidden !important;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue