diff --git a/app/javascript/flavours/glitch/styles/modern/diff.css b/app/javascript/flavours/glitch/styles/modern/diff.css index f7804d0ef..e8af4f4a9 100644 --- a/app/javascript/flavours/glitch/styles/modern/diff.css +++ b/app/javascript/flavours/glitch/styles/modern/diff.css @@ -79,14 +79,17 @@ body.app-body.flavour-modern-glitch display: none; } -body.app-body.flavour-modern-glitch > #mastodon .status > .status__content { +body.app-body.flavour-modern-glitch + > #mastodon + .status:not(.status-direct) + > .status__content { margin-block: -90px -100px !important; padding-block: 100px !important; } body.app-body.flavour-modern-glitch > #mastodon - .status + .status:not(.status-direct) > .status__content .status__content__text { margin-top: 0; @@ -94,7 +97,7 @@ body.app-body.flavour-modern-glitch body.app-body.flavour-modern-glitch > #mastodon - .status + .status:not(.status-direct) > .status__content > :last-child:not(.status__content__text) { margin-bottom: 5px !important; @@ -136,7 +139,7 @@ body.app-body.flavour-modern-glitch > #mastodon .status__action-bar-spacer { } body.app-body.flavour-modern-glitch > #mastodon .status__relative-time { - margin-inline: 5px !important; + margin-inline: auto 5px !important; z-index: 2; flex-grow: 0 !important; } diff --git a/app/javascript/flavours/glitch/styles/modern/modern.css b/app/javascript/flavours/glitch/styles/modern/modern.css index 5ecda7e97..b3bb962f7 100644 --- a/app/javascript/flavours/glitch/styles/modern/modern.css +++ b/app/javascript/flavours/glitch/styles/modern/modern.css @@ -419,7 +419,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; @@ -474,12 +474,6 @@ a:focus-visible, transition: padding 0.4s; --top: 20px; } - .columns-area__panels__pane { - height: unset !important; - } - .columns-area__panels__pane .columns-area__panels__pane__inner { - height: calc(100% + 20px) !important; - } } @media (min-width: 1320px) { .columns-area__panels { @@ -734,7 +728,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; @@ -1463,7 +1458,7 @@ body:not(.flavour-modern-glitch) .account-card, .scrollable :not(.focusable) > .account, .timeline-hint { - overflow: clip; + overflow: hidden; transition: background 0.2s, box-shadow 0.4s, @@ -2648,12 +2643,6 @@ body:not(.flavour-modern-glitch) 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; @@ -2663,6 +2652,12 @@ body:not(.flavour-modern-glitch) 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; } @@ -2910,16 +2905,18 @@ body:not(.flavour-modern-glitch) 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; @@ -2949,6 +2946,91 @@ body:not(.flavour-modern-glitch) #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, @@ -3408,6 +3490,7 @@ body:not(.flavour-modern-glitch) .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, @@ -3560,6 +3643,7 @@ body:not(.flavour-modern-glitch) max-height: 3.3em; min-height: 2.7em !important; padding-block: 0; + border-radius: 100px; position: relative; box-sizing: border-box; opacity: 0.9; @@ -3997,6 +4081,9 @@ body:not(.flavour-modern-glitch) height: 100% !important; background-size: cover !important; } + #mastodon .status::before { + content: unset; + } #mastodon .status__action-bar { margin-bottom: -5px; } @@ -4018,10 +4105,6 @@ body:not(.flavour-modern-glitch) #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;