mirror of
https://git.gay/freeplay/Mastodon-Modern.git
synced 2026-01-15 16:32:57 -03:00
2.1.0 (Mastodon 4.4.0-nightly.2025-06-13)
- Fixes the mobile UI with Masto's new navbar - Alt text modals are larger again
This commit is contained in:
Freeplay
646
modern.css
646
modern.css
@@ -16,7 +16,7 @@
|
||||
--column-shadow: 0 8px 24px 12px rgba(0,0,0,0.02);
|
||||
--background-border-color: var(--border-color);
|
||||
}
|
||||
@media (max-width: 889px) {
|
||||
@media (max-width: 759px) {
|
||||
:root {
|
||||
--panel-radius: 0px;
|
||||
}
|
||||
@@ -74,7 +74,7 @@ a:focus-visible,
|
||||
outline-offset: -2px;
|
||||
}
|
||||
:not(.radio-button__input):not(span) {
|
||||
border-color: var(--border-color) !important;
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
.nothing-here,
|
||||
.column-inline-form,
|
||||
@@ -120,6 +120,7 @@ a:focus-visible,
|
||||
padding-block: 10px;
|
||||
}
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
body:not(.reduce-motion) .ui__navigation-bar__item,
|
||||
body:not(.reduce-motion) .load-more,
|
||||
body:not(.reduce-motion) .setting-toggle,
|
||||
body:not(.reduce-motion) .column-header__back-button,
|
||||
@@ -136,6 +137,7 @@ a:focus-visible,
|
||||
body:not(.reduce-motion) .account {
|
||||
transition: transform 0.4s cubic-bezier(0, 0, 0, 3), background 0.2s, opacity 0.2s !important;
|
||||
}
|
||||
body:not(.reduce-motion) .ui__navigation-bar__item:active,
|
||||
body:not(.reduce-motion) .load-more:active,
|
||||
body:not(.reduce-motion) .setting-toggle:active,
|
||||
body:not(.reduce-motion) .column-header__back-button:active,
|
||||
@@ -150,6 +152,7 @@ a:focus-visible,
|
||||
body:not(.reduce-motion) .status-card:active,
|
||||
body:not(.reduce-motion) .audio-player:active,
|
||||
body:not(.reduce-motion) .account:active,
|
||||
body:not(.reduce-motion) .ui__navigation-bar__item:focus-visible,
|
||||
body:not(.reduce-motion) .load-more:focus-visible,
|
||||
body:not(.reduce-motion) .setting-toggle:focus-visible,
|
||||
body:not(.reduce-motion) .column-header__back-button:focus-visible,
|
||||
@@ -309,6 +312,30 @@ a:focus-visible,
|
||||
filter: opacity(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes slideUpFadeBig {
|
||||
from {
|
||||
transform: translateY(200px);
|
||||
filter: opacity(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slideUpFadeBig {
|
||||
from {
|
||||
transform: translateY(200px);
|
||||
filter: opacity(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes slideUpFadeBig {
|
||||
from {
|
||||
transform: translateY(200px);
|
||||
filter: opacity(0);
|
||||
}
|
||||
}
|
||||
@keyframes slideUpFadeBig {
|
||||
from {
|
||||
transform: translateY(200px);
|
||||
filter: opacity(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes slideDownFade {
|
||||
from {
|
||||
transform: translateY(-20px);
|
||||
@@ -695,6 +722,14 @@ a:focus-visible,
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
@media (min-width: 1175px) {
|
||||
.columns-area {
|
||||
border-radius: var(--radius) var(--radius) 0 0 !important;
|
||||
}
|
||||
.columns-area > :first-child {
|
||||
border-radius: var(--radius) var(--radius) 0 0 !important;
|
||||
}
|
||||
}
|
||||
.columns-area__panels__main {
|
||||
overflow: visible !important;
|
||||
contain: inline-size style !important;
|
||||
@@ -713,7 +748,7 @@ a:focus-visible,
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 890px) {
|
||||
@media (min-width: 760px) {
|
||||
.columns-area__panels__main {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
@@ -722,11 +757,6 @@ a:focus-visible,
|
||||
.columns-area__panels__main .columns-area {
|
||||
grid-column: 1;
|
||||
overflow: clip !important;
|
||||
border-radius: var(--radius) var(--radius) 0 0 !important;
|
||||
}
|
||||
.columns-area__panels__main .column > :first-child,
|
||||
.columns-area__panels__main .columns-area > :first-child {
|
||||
border-radius: var(--radius) var(--radius) 0 0 !important;
|
||||
}
|
||||
}
|
||||
.columns-area__panels__main > div {
|
||||
@@ -743,7 +773,7 @@ a:focus-visible,
|
||||
background: var(--elevated-tint);
|
||||
pointer-events: none;
|
||||
}
|
||||
@media (min-width: 890px) {
|
||||
@media (min-width: 760px) {
|
||||
.layout-single-column .scrollable > [tabindex="-1"]:first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@@ -796,7 +826,7 @@ a:focus-visible,
|
||||
padding-top: 0;
|
||||
transition: margin 0.2s cubic-bezier(0, 0, 0, 1.1), top 0.4s;
|
||||
}
|
||||
@media (min-width: 890px) {
|
||||
@media (min-width: 760px) {
|
||||
.tabs-bar__wrapper {
|
||||
margin-top: -100vh;
|
||||
}
|
||||
@@ -813,10 +843,7 @@ a:focus-visible,
|
||||
border-top-right-radius: 0 !important;
|
||||
}
|
||||
.column-header__title {
|
||||
display: inline;
|
||||
}
|
||||
.column-header__title svg {
|
||||
vertical-align: -0.4em;
|
||||
gap: 12px;
|
||||
}
|
||||
.announcements,
|
||||
.column-header__collapsible:not(.collapsed) {
|
||||
@@ -906,7 +933,7 @@ a:focus-visible,
|
||||
opacity: 1;
|
||||
transition: transform 0.3s, opacity 0.1s;
|
||||
}
|
||||
@media (min-width: 890px) {
|
||||
@media (min-width: 760px) {
|
||||
.tabs-bar__wrapper {
|
||||
inset-inline: unset !important;
|
||||
height: 50px !important;
|
||||
@@ -932,18 +959,18 @@ a:focus-visible,
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 890px) and (max-width: 1319px) {
|
||||
@media (min-width: 760px) and (max-width: 1319px) {
|
||||
.tabs-bar__wrapper {
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 890px) and (max-width: 1174px) {
|
||||
@media (min-width: 760px) and (max-width: 1174px) {
|
||||
.tabs-bar__wrapper {
|
||||
width: 265px;
|
||||
top: 10px !important;
|
||||
}
|
||||
}
|
||||
@media (min-width: 890px) {
|
||||
@media (min-width: 760px) {
|
||||
.column-back-button--slim {
|
||||
margin-left: auto !important;
|
||||
order: -1;
|
||||
@@ -1045,7 +1072,7 @@ a:focus-visible,
|
||||
.app-form__toggle:focus-within::before {
|
||||
opacity: 1;
|
||||
}
|
||||
@media (min-width: 890px) and (max-width: 1174px) {
|
||||
@media (min-width: 760px) and (max-width: 1174px) {
|
||||
.column-back-button--slim > .column-back-button {
|
||||
margin-top: -55px !important;
|
||||
top: unset !important;
|
||||
@@ -1064,9 +1091,6 @@ a:focus-visible,
|
||||
.navigation-panel.navigation-panel hr {
|
||||
display: none;
|
||||
}
|
||||
.navigation-panel.navigation-panel .navigation-panel__menu {
|
||||
display: contents;
|
||||
}
|
||||
@media (min-width: 1175px) {
|
||||
.navigation-panel.navigation-panel {
|
||||
padding-top: calc(var(--radius) + 10px);
|
||||
@@ -1083,13 +1107,10 @@ a:focus-visible,
|
||||
border-radius: var(--radius);
|
||||
margin-top: 0;
|
||||
}
|
||||
.navigation-panel.navigation-panel [href="/settings/preferences"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.column-link {
|
||||
border: 0;
|
||||
gap: 0;
|
||||
gap: 12px;
|
||||
}
|
||||
.icon-with-badge__badge {
|
||||
display: flex !important;
|
||||
@@ -1105,22 +1126,14 @@ a:focus-visible,
|
||||
top: -10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.column-header__back-button,
|
||||
.column-back-button > svg,
|
||||
.column-link__icon,
|
||||
.column-header > button .column-header__icon {
|
||||
margin-inline-end: 0.7em;
|
||||
font-size: 16px !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
@media (min-width: 890px) {
|
||||
@media (min-width: 760px) {
|
||||
.column-link {
|
||||
flex-grow: 100 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
align-content: center;
|
||||
max-height: 3em;
|
||||
min-height: 2.7em !important;
|
||||
min-height: 3em !important;
|
||||
padding-block: 0;
|
||||
border-radius: 100px;
|
||||
position: relative;
|
||||
@@ -1148,18 +1161,6 @@ a:focus-visible,
|
||||
.column-link:focus:before {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.column-link[href="/lists"] + div hr {
|
||||
display: none;
|
||||
}
|
||||
.column-link[href="/lists"] + div .column-link {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.column-link[href="/lists"] + div .column-link i {
|
||||
opacity: 0.2;
|
||||
}
|
||||
.navigation-panel.navigation-panel .getting-started__trends {
|
||||
display: unset !important;
|
||||
}
|
||||
}
|
||||
.navigation-panel.navigation-panel .trends__item {
|
||||
margin: 0 !important;
|
||||
@@ -1567,7 +1568,7 @@ a:focus-visible,
|
||||
border-top: 1px solid var(--border-color);
|
||||
pointer-events: none;
|
||||
}
|
||||
@media (min-width: 890px) {
|
||||
@media (min-width: 760px) {
|
||||
.layout-single-column .item-list > article > div::after {
|
||||
inset-inline: calc(var(--radius) + 10px);
|
||||
}
|
||||
@@ -1788,7 +1789,7 @@ a:focus-visible,
|
||||
background: var(--background-color);
|
||||
isolation: isolate;
|
||||
}
|
||||
@media (max-width: 890px) {
|
||||
@media (max-width: 760px) {
|
||||
.account__header__bar {
|
||||
padding-inline: 15px;
|
||||
}
|
||||
@@ -1883,6 +1884,7 @@ a:focus-visible,
|
||||
overflow: hidden;
|
||||
border: 0 !important;
|
||||
padding: 8px 12px !important;
|
||||
margin: 0 !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
@@ -1989,7 +1991,7 @@ a:focus-visible,
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
@media (max-width: 890px) {
|
||||
@media (max-width: 760px) {
|
||||
.account-authorize__wrapper {
|
||||
margin-inline: 10px;
|
||||
}
|
||||
@@ -2584,325 +2586,121 @@ a:focus-visible,
|
||||
font-size: 1.1em !important;
|
||||
line-height: 2;
|
||||
}
|
||||
@media (min-width: 890px) and (max-width: 1175px) {
|
||||
.ui__header {
|
||||
background: none !important;
|
||||
backdrop-filter: none;
|
||||
@media (min-width: 760px) and (max-width: 1175px) {
|
||||
.columns-area__panels__pane--navigational {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.navigation-panel__menu {
|
||||
padding: 10px;
|
||||
}
|
||||
.navigation-panel__compose-button {
|
||||
margin-block: 10px;
|
||||
margin-inline: 6px;
|
||||
padding-inline: 16px;
|
||||
border-radius: 100px;
|
||||
justify-content: center;
|
||||
}
|
||||
.navigation-panel__sign-in-banner {
|
||||
display: block !important;
|
||||
margin-block: 10px;
|
||||
padding-block: 10px;
|
||||
border-block: 1px solid var(--border-color);
|
||||
}
|
||||
}
|
||||
@media (max-width: 759px) {
|
||||
.tabs-bar__wrapper::before,
|
||||
.ui__navigation-bar::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--elevated-color);
|
||||
z-index: -1;
|
||||
}
|
||||
.ui__navigation-bar {
|
||||
color: var(--on-input-color);
|
||||
height: 70px;
|
||||
padding-inline: 5px;
|
||||
}
|
||||
.ui__navigation-bar__item {
|
||||
position: relative;
|
||||
margin-inline-end: 285px;
|
||||
border: 0 !important;
|
||||
}
|
||||
.navigation-panel {
|
||||
padding-inline: 10px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 889px) {
|
||||
.ui__header {
|
||||
border-bottom: 0;
|
||||
box-sizing: content-box;
|
||||
height: auto;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
gap: 5px 10px;
|
||||
flex-wrap: wrap;
|
||||
padding-block: 12px;
|
||||
border: 0 !important;
|
||||
backdrop-filter: none !important;
|
||||
background: none !important;
|
||||
gap: 6px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.ui__header .ui__header__logo {
|
||||
padding-block: 5px !important;
|
||||
}
|
||||
.ui__header .ui__header__links {
|
||||
min-width: max-content;
|
||||
position: sticky;
|
||||
inset-inline-end: 55px;
|
||||
background: inherit;
|
||||
}
|
||||
:has(body) .ui__header .ui__header__links {
|
||||
right: 0;
|
||||
}
|
||||
.ui__header [href="/search"] {
|
||||
display: none;
|
||||
}
|
||||
.ui__header [href="/publish"] {
|
||||
position: fixed;
|
||||
bottom: 15px;
|
||||
inset-inline-end: 15px;
|
||||
border-radius: 100px !important;
|
||||
border-radius: var(--radius) !important;
|
||||
height: 60px;
|
||||
.ui__navigation-bar__item::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
font-size: 0;
|
||||
box-shadow: var(--shadow-low);
|
||||
background: var(--surface-background-color);
|
||||
border-color: var(--border-color);
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
user-drag: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
touch-action: manipulation;
|
||||
animation: scaleIn 0.2s cubic-bezier(0, 0, 0, 1.1);
|
||||
visibility: visible;
|
||||
top: 10px;
|
||||
bottom: 30px;
|
||||
background: currentColor;
|
||||
border-radius: 100px;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transform: scaleX(0.8);
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
}
|
||||
.ui__header [href="/publish"]::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: inherit;
|
||||
transition: transform 0.4s cubic-bezier(0, 0, 0, 1) !important;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNMjAwLTEyMHEtMzMgMC01Ni41LTIzLjVUMTIwLTIwMHYtNTYwcTAtMzMgMjMuNS01Ni41VDIwMC04NDBoMzU3bC04MCA4MEgyMDB2NTYwaDU2MHYtMjc4bDgwLTgwdjM1OHEwIDMzLTIzLjUgNTYuNVQ3NjAtMTIwSDIwMFptMjgwLTM2MFpNMzYwLTM2MHYtMTcwbDM2Ny0zNjdxMTItMTIgMjctMTh0MzAtNnExNiAwIDMwLjUgNnQyNi41IDE4bDU2IDU3cTExIDEyIDE3IDI2LjV0NiAyOS41cTAgMTUtNS41IDI5LjVUODk3LTcyOEw1MzAtMzYwSDM2MFptNDgxLTQyNC01Ni01NiA1NiA1NlpNNDQwLTQ0MGg1NmwyMzItMjMyLTI4LTI4LTI5LTI4LTIzMSAyMzF2NTdabTI2MC0yNjAtMjktMjggMjkgMjggMjggMjgtMjgtMjhaIi8+PC9zdmc+");
|
||||
.ui__navigation-bar__item::after {
|
||||
content: attr(aria-label);
|
||||
font-size: 12px;
|
||||
max-width: 100%;
|
||||
padding-inline: 4px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body:not(:has(.column-link.active)) .ui__header [href="/publish"]:not(:focus) {
|
||||
transform: scale(0.97) !important;
|
||||
opacity: 0 !important;
|
||||
pointer-events: none;
|
||||
.ui__navigation-bar__item.active {
|
||||
opacity: 1;
|
||||
}
|
||||
.ui__header [href^="/@"],
|
||||
.ui__header a.permalink[href] {
|
||||
position: fixed;
|
||||
inset-inline-end: 1px;
|
||||
width: 53px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: inherit;
|
||||
}
|
||||
:has(body) .ui__header [href^="/@"],
|
||||
:has(body) .ui__header a.permalink[href] {
|
||||
position: static !important;
|
||||
width: unset;
|
||||
}
|
||||
.tabs-bar__wrapper {
|
||||
top: 0;
|
||||
z-index: 200;
|
||||
}
|
||||
.tabs-bar__wrapper::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--elevated-tint);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
@supports selector(.foxxo:has(.waf)) {
|
||||
[href="/publish"] {
|
||||
bottom: 70px !important;
|
||||
}
|
||||
.columns-area__panels {
|
||||
flex-direction: column;
|
||||
}
|
||||
.columns-area__panels__main {
|
||||
width: 100%;
|
||||
border-radius: var(--radius) !important;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
overflow: clip !important;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.tabs-bar__wrapper {
|
||||
transition: none !important;
|
||||
.ui__navigation-bar__item.active::before {
|
||||
opacity: 0.15;
|
||||
transform: none;
|
||||
}
|
||||
.columns-area__panels__pane--navigational {
|
||||
display: contents;
|
||||
z-index: 100;
|
||||
padding: 40px 10px;
|
||||
padding-top: 60vh;
|
||||
min-width: unset;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
overscroll-behavior: contain;
|
||||
visibility: hidden;
|
||||
transition: visibility 0s 0.2s;
|
||||
}
|
||||
.columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
|
||||
position: static !important;
|
||||
order: -1;
|
||||
width: unset;
|
||||
height: auto;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
inset: unset;
|
||||
height: max-content;
|
||||
border-radius: 24px;
|
||||
margin-top: auto;
|
||||
transform: translateY(100vh) !important;
|
||||
transition: transform 0.2s cubic-bezier(0, 0, 1, 0), opacity 1s;
|
||||
}
|
||||
.columns-area__panels__pane--navigational .navigation-panel__compose-button {
|
||||
display: none;
|
||||
}
|
||||
html:not(:has(.sign-in-banner)) .columns-area__panels__pane--navigational [href="/home"],
|
||||
html:not(:has(.sign-in-banner)) .columns-area__panels__pane--navigational [href="/explore"],
|
||||
html:not(:has(.sign-in-banner)) .columns-area__panels__pane--navigational [href="/notifications"] {
|
||||
display: none;
|
||||
}
|
||||
.columns-area__panels__pane--navigational .navigation-panel {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
border-top: 1px solid;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
height: auto;
|
||||
}
|
||||
.columns-area__panels__pane--navigational .navigation-panel .flex-spacer {
|
||||
display: none;
|
||||
}
|
||||
.columns-area__panels__pane--navigational hr {
|
||||
display: none;
|
||||
}
|
||||
.columns-area__panels__pane--navigational .trends__item__name > span,
|
||||
.columns-area__panels__pane--navigational .trends__item__sparkline {
|
||||
display: none;
|
||||
}
|
||||
.columns-area__panels__pane--navigational h4 a span::after {
|
||||
content: ":" !important;
|
||||
}
|
||||
.columns-area__panels__pane--navigational .navigation-panel__legal {
|
||||
display: contents;
|
||||
}
|
||||
.columns-area__panels__pane--navigational a {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
font-size: 1.1em;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
min-width: max-content;
|
||||
justify-content: center;
|
||||
transition: padding 0.2s;
|
||||
padding-inline: 6px;
|
||||
gap: 6px;
|
||||
.columns-area__panels__pane--navigational .navigation-panel__menu {
|
||||
padding: 10px 5px !important;
|
||||
}
|
||||
.columns-area__panels__pane--navigational a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: currentcolor;
|
||||
opacity: 0;
|
||||
border-radius: inherit;
|
||||
transition: inset 0.4s cubic-bezier(0, 0, 0, 1.2), opacity 0.2s;
|
||||
}
|
||||
.columns-area__panels__pane--navigational a svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
.columns-area__panels__pane--navigational a.active {
|
||||
position: relative;
|
||||
}
|
||||
.columns-area__panels__pane--navigational a.active::before {
|
||||
inset: 0 !important;
|
||||
opacity: 0.1;
|
||||
}
|
||||
.columns-area__panels__pane--navigational span {
|
||||
display: unset !important;
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
max-width: max-content;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .columns-area__panels__main {
|
||||
margin-top: 2px !important;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .columns-area--mobile .column {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .ui__header {
|
||||
z-index: 199;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .ui__header::before,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .ui__header::after {
|
||||
all: unset;
|
||||
content: "";
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
inset-inline: 0;
|
||||
background: var(--background-color);
|
||||
z-index: 200;
|
||||
height: 60px;
|
||||
.columns-area__panels__pane--navigational.columns-area__panels__pane--overlay {
|
||||
visibility: visible;
|
||||
z-index: -1;
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
transition: none;
|
||||
animation: slideUpFadeBig 0.3s cubic-bezier(0, 0.9, 0, 1.05) forwards;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .ui__header::after {
|
||||
background: var(--elevated-tint);
|
||||
border: 0;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel {
|
||||
flex-wrap: wrap;
|
||||
border-top: none;
|
||||
margin-bottom: 8px;
|
||||
padding-block: 0;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel a span {
|
||||
display: none !important;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel [href="/settings/preferences"] {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
inset-inline-end: 60px;
|
||||
z-index: 900;
|
||||
padding-block: 0;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
:root {
|
||||
--selector: '.column-link[href='/home'],.column-link[href='/notifications'],.column-link[href='/explore'],.column-link[href='/public/local'],.column-link[href='/lists']';
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'],
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'],
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'],
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'],
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] {
|
||||
position: fixed !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
bottom: 4px;
|
||||
z-index: 201;
|
||||
font-size: 1.7em;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 19%;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 1px !important;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home']::before,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications']::before,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore']::before,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local']::before,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists']::before {
|
||||
inset-inline: 6px;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] span,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] span,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] span,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] span,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] span {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
transition: font-size 0.4s, margin 0.7s, opacity 0.2s;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] svg,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] svg,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] svg,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] svg,
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] {
|
||||
left: 2%;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] {
|
||||
left: 21.25%;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] {
|
||||
left: 40.5%;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] {
|
||||
left: 59.75%;
|
||||
}
|
||||
:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] {
|
||||
left: 79%;
|
||||
.columns-area__panels__pane--navigational.columns-area__panels__pane--overlay .columns-area__panels__pane__inner {
|
||||
transform: none !important;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
#hover-card,
|
||||
@@ -2957,7 +2755,7 @@ a:focus-visible,
|
||||
.modal-root__container {
|
||||
animation: bounceIn 0.7s;
|
||||
}
|
||||
@media (max-width: 890px) {
|
||||
@media (max-width: 760px) {
|
||||
.modal-root__modal {
|
||||
margin-top: auto;
|
||||
max-width: 100%;
|
||||
@@ -2982,142 +2780,35 @@ a:focus-visible,
|
||||
.picture-in-picture .picture-in-picture__footer {
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] {
|
||||
background: var(--background-color);
|
||||
.modal-root__modal:has(.focal-point) {
|
||||
width: unset;
|
||||
max-width: 90vw;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"],
|
||||
.report-modal[style="max-width: 960px;"] * {
|
||||
color: inherit !important;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .report-modal__comment {
|
||||
min-width: unset;
|
||||
width: 370px;
|
||||
max-width: unset;
|
||||
flex: none;
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .setting-text__wrapper {
|
||||
border-radius: var(--radius);
|
||||
.modal-root__modal:has(.focal-point) .dialog-modal__content {
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .setting-text__wrapper textarea {
|
||||
border: 0;
|
||||
max-height: unset !important;
|
||||
background: none;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .focal-point-modal__content {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
max-height: 100vh;
|
||||
flex-grow: 0 !important;
|
||||
.modal-root__modal:has(.focal-point) .dialog-modal__content__preview {
|
||||
padding: 0 !important;
|
||||
min-height: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .focal-point {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .audio-player,
|
||||
.report-modal[style="max-width: 960px;"] .focal-point img {
|
||||
width: unset !important;
|
||||
height: unset !important;
|
||||
max-height: 100% !important;
|
||||
.modal-root__modal:has(.focal-point) .dialog-modal__content__preview img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .audio-player {
|
||||
margin: 10px !important;
|
||||
width: 600px !important;
|
||||
max-width: calc(100% - 20px) !important;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .focal-point__reticle {
|
||||
box-shadow: 0 0 300px 200px rgba(0,0,0,0.2);
|
||||
}
|
||||
@media not all and (max-width: 900px) {
|
||||
.report-modal[style="max-width: 960px;"] {
|
||||
max-width: max-content !important;
|
||||
max-height: 98vh;
|
||||
border: 0;
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
width: 98vw;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .report-modal__container {
|
||||
flex-wrap: nowrap;
|
||||
border: 0;
|
||||
max-width: max-content;
|
||||
max-height: 100%;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .report-modal__target {
|
||||
position: absolute;
|
||||
padding: 24px 20px 12px;
|
||||
font-weight: bold;
|
||||
width: 348px;
|
||||
box-sizing: border-box;
|
||||
text-align: start;
|
||||
background: inherit;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .report-modal__close {
|
||||
position: fixed !important;
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
order: 2;
|
||||
color: #fff;
|
||||
background: var(--modal-background-color);
|
||||
padding: 12px;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .report-modal__comment {
|
||||
padding-top: calc(30px + 2em);
|
||||
padding-bottom: 160px;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .focal-point-modal__content,
|
||||
.report-modal[style="max-width: 960px;"] .focal-point {
|
||||
overflow: visible;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .focal-point img {
|
||||
min-width: 500px;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .focal-point__preview {
|
||||
inset-inline-start: -220px;
|
||||
right: unset;
|
||||
bottom: 20px;
|
||||
pointer-events: none;
|
||||
text-align: end;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .focal-point__preview strong {
|
||||
color: inherit;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .focal-point__preview div {
|
||||
border-radius: var(--radius);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.report-modal[style="max-width: 960px;"] {
|
||||
height: auto;
|
||||
width: 100vw;
|
||||
max-width: unset !important;
|
||||
max-height: 100% !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .report-modal__container {
|
||||
height: auto;
|
||||
max-height: unset;
|
||||
min-height: 0;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .report-modal__container {
|
||||
flex-direction: column-reverse;
|
||||
flex-wrap: nowrap;
|
||||
flex-grow: 1;
|
||||
.modal-root__modal:has(.focal-point) .focal-point__reticle {
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.report-modal[style="max-width: 960px;"] .report-modal__comment {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
max-height: 70%;
|
||||
flex: 0 0 auto;
|
||||
height: unset;
|
||||
order: unset;
|
||||
.modal-root__modal:has(.focal-point) .focal-point {
|
||||
min-height: 0 !important;
|
||||
}
|
||||
.modal-root__modal:has(.focal-point) .focal-point:not(:hover) .focal-point__reticle {
|
||||
box-shadow: none;
|
||||
}
|
||||
.emoji-picker-dropdown__menu {
|
||||
border-radius: var(--radius);
|
||||
@@ -3166,4 +2857,3 @@ a:focus-visible,
|
||||
.emoji-picker-dropdown__modifiers {
|
||||
top: 16px;
|
||||
}
|
||||
|
||||
|
||||
595
modern.user.css
595
modern.user.css
@@ -6,17 +6,14 @@
|
||||
// textbox in the left panel following this format:
|
||||
// *://domain.tld/*
|
||||
|
||||
/* Update 2.0.4 (Mastodon 4.4)
|
||||
- Fixed filtered notification filter controls (#6)
|
||||
Glitch-soc:
|
||||
- Fixed unclickable timestamp
|
||||
- broken padding and clipping in post content
|
||||
w/ help from pull req #7
|
||||
/* Update 2.1.0 (Mastodon 4.4.0-nightly.2025-06-13)
|
||||
- Fixes the mobile UI with Masto's new navbar
|
||||
- Alt text modals are larger again
|
||||
*/
|
||||
|
||||
/* ==UserStyle==
|
||||
@name MastoModern
|
||||
@version 2.0.4
|
||||
@version 2.1.0
|
||||
@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
|
||||
@@ -45,7 +42,7 @@ w/ help from pull req #7
|
||||
/ {
|
||||
responsiveW1 = 1320px
|
||||
responsiveW2 = 1175px
|
||||
mobileW = 890px
|
||||
mobileW = 760px
|
||||
|
||||
transBounce1 = .2s cubic-bezier(0,0,0,1.1)
|
||||
|
||||
@@ -151,7 +148,7 @@ w/ help from pull req #7
|
||||
}
|
||||
}
|
||||
:not(.radio-button__input):not(span) {
|
||||
border-color var(--border-color) !important
|
||||
border-color var(--border-color)
|
||||
}
|
||||
|
||||
.nothing-here
|
||||
@@ -201,6 +198,7 @@ w/ help from pull req #7
|
||||
/ {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
body:not(.reduce-motion) {
|
||||
.ui__navigation-bar__item,
|
||||
.load-more, .setting-toggle, .column-header__back-button, .column-back-button,
|
||||
.trends__item, .story, .account__avatar, .button,
|
||||
.media-gallery__item, .column-link, select, .status-card, .audio-player, .account {
|
||||
@@ -252,6 +250,12 @@ w/ help from pull req #7
|
||||
filter opacity(0)
|
||||
}
|
||||
}
|
||||
@keyframes slideUpFadeBig {
|
||||
from {
|
||||
transform translateY(200px)
|
||||
filter opacity(0)
|
||||
}
|
||||
}
|
||||
@keyframes slideDownFade {
|
||||
from {
|
||||
transform translateY(-20px)
|
||||
@@ -590,6 +594,12 @@ w/ help from pull req #7
|
||||
box-shadow var(--column-shadow)
|
||||
padding 0
|
||||
overflow visible
|
||||
@media (min-width responsiveW2) {
|
||||
border-radius var(--radius) var(--radius) 0 0 !important
|
||||
& > :first-child {
|
||||
border-radius var(--radius) var(--radius) 0 0 !important
|
||||
}
|
||||
}
|
||||
}
|
||||
.columns-area__panels__main {
|
||||
@media (min-width responsiveW2) {
|
||||
@@ -608,10 +618,6 @@ w/ help from pull req #7
|
||||
.column, .columns-area {
|
||||
grid-column 1
|
||||
overflow clip !important
|
||||
border-radius var(--radius) var(--radius) 0 0 !important
|
||||
> :first-child {
|
||||
border-radius var(--radius) var(--radius) 0 0 !important
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -712,10 +718,7 @@ w/ help from pull req #7
|
||||
}
|
||||
}
|
||||
/.column-header__title {
|
||||
display inline
|
||||
svg {
|
||||
vertical-align -.4em
|
||||
}
|
||||
gap 12px
|
||||
}
|
||||
/.announcements, /.column-header__collapsible:not(.collapsed) {
|
||||
flex-direction column-reverse
|
||||
@@ -772,7 +775,6 @@ w/ help from pull req #7
|
||||
margin-inline-start 0
|
||||
font-size .9em
|
||||
padding-inline 10px
|
||||
//transform none !important
|
||||
&:not(.active) {
|
||||
background var(--elevated-color) !important
|
||||
z-index 2
|
||||
@@ -1003,9 +1005,6 @@ w/ help from pull req #7
|
||||
hr {
|
||||
display none
|
||||
}
|
||||
.navigation-panel__menu {
|
||||
display contents
|
||||
}
|
||||
|
||||
@media (min-width responsiveW2) {
|
||||
if sideHeader {
|
||||
@@ -1027,13 +1026,10 @@ w/ help from pull req #7
|
||||
border-radius var(--radius)
|
||||
margin-top 0
|
||||
}
|
||||
[href="/settings/preferences"] {
|
||||
display none !important
|
||||
}
|
||||
}
|
||||
/.column-link {
|
||||
border 0
|
||||
gap 0
|
||||
gap 12px
|
||||
}
|
||||
/.icon-with-badge__badge {
|
||||
display flex !important
|
||||
@@ -1049,13 +1045,6 @@ w/ help from pull req #7
|
||||
top -10px
|
||||
box-sizing border-box
|
||||
}
|
||||
/.column-header__back-button
|
||||
/.column-back-button > svg
|
||||
/.column-link__icon, /.column-header > button .column-header__icon {
|
||||
margin-inline-end .7em
|
||||
font-size 16px !important
|
||||
padding-right 0 !important
|
||||
}
|
||||
@media (min-width mobileW) {
|
||||
/.column-link {
|
||||
flex-grow 100 !important
|
||||
@@ -1063,7 +1052,7 @@ w/ help from pull req #7
|
||||
align-items center !important
|
||||
align-content center
|
||||
max-height 3em
|
||||
min-height 2.7em !important
|
||||
min-height 3em !important
|
||||
padding-block 0
|
||||
border-radius 100px
|
||||
position relative
|
||||
@@ -1078,7 +1067,6 @@ w/ help from pull req #7
|
||||
width unset !important
|
||||
height unset !important
|
||||
inset 0px 0px !important
|
||||
// min-height 43px
|
||||
opacity 0 !important
|
||||
background-color rgba(150,150,150,0.1)
|
||||
transition opacity .2s
|
||||
@@ -1092,23 +1080,6 @@ w/ help from pull req #7
|
||||
opacity 1 !important
|
||||
}
|
||||
}
|
||||
&[href="/lists"] {
|
||||
& + div {
|
||||
hr {
|
||||
display none
|
||||
}
|
||||
.column-link {
|
||||
margin-bottom 2px
|
||||
|
||||
i {
|
||||
opacity .2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.getting-started__trends {
|
||||
display unset !important
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1827,6 +1798,7 @@ w/ help from pull req #7
|
||||
}
|
||||
border 0 !important
|
||||
padding 8px 12px !important
|
||||
margin 0 !important
|
||||
position relative
|
||||
overflow hidden
|
||||
flex-grow 1
|
||||
@@ -2473,23 +2445,24 @@ w/ help from pull req #7
|
||||
//// TABLET
|
||||
/ {
|
||||
@media (min-width mobileW) and (max-width responsiveW2) {
|
||||
.ui__header {
|
||||
background none !important
|
||||
backdrop-filter none
|
||||
position relative
|
||||
if !navOnLeft {
|
||||
margin-inline-end 285px
|
||||
.columns-area__panels__pane--navigational {
|
||||
margin-top 50px
|
||||
}
|
||||
if navOnLeft {
|
||||
margin-inline-start 285px
|
||||
.navigation-panel__menu {
|
||||
padding 10px
|
||||
}
|
||||
border 0 !important
|
||||
}
|
||||
.navigation-panel {
|
||||
padding-inline 10px
|
||||
if !sideHeader {
|
||||
margin-top -55px !important
|
||||
.navigation-panel__compose-button {
|
||||
margin-block 10px
|
||||
margin-inline 6px
|
||||
padding-inline 16px
|
||||
border-radius 100px
|
||||
justify-content center
|
||||
}
|
||||
.navigation-panel__sign-in-banner {
|
||||
display block !important
|
||||
margin-block 10px
|
||||
padding-block 10px
|
||||
border-block 1px solid var(--border-color)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2498,303 +2471,104 @@ w/ help from pull req #7
|
||||
//// MOBILE
|
||||
/ {
|
||||
@media (max-width mobileW - 1) {
|
||||
/.ui__header {
|
||||
border-bottom 0
|
||||
box-sizing content-box
|
||||
height auto
|
||||
position relative
|
||||
box-sizing border-box
|
||||
gap 5px 10px
|
||||
flex-wrap wrap
|
||||
padding-block 12px
|
||||
border 0 !important
|
||||
backdrop-filter none !important
|
||||
background none !important
|
||||
.ui__header__logo {
|
||||
padding-block 5px !important
|
||||
}
|
||||
.ui__header__links {
|
||||
min-width max-content
|
||||
position sticky
|
||||
inset-inline-end 55px
|
||||
background inherit
|
||||
:has(body) & {
|
||||
right 0
|
||||
}
|
||||
}
|
||||
[href="/search"] {
|
||||
display none
|
||||
}
|
||||
[href="/publish"] {
|
||||
position fixed
|
||||
bottom 15px
|
||||
inset-inline-end 15px
|
||||
border-radius 100px !important
|
||||
border-radius var(--radius) !important
|
||||
height 60px
|
||||
width 60px
|
||||
font-size 0
|
||||
box-shadow var(--shadow-low)
|
||||
background var(--surface-background-color)
|
||||
border-color var(--border-color)
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
user-drag: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
touch-action manipulation
|
||||
animation scaleIn transBounce1
|
||||
visibility visible
|
||||
|
||||
.tabs-bar__wrapper, .ui__navigation-bar {
|
||||
&::before {
|
||||
content ""
|
||||
position absolute
|
||||
inset 0
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
border-radius inherit
|
||||
transition transform .4s cubic-bezier(0,0,0,1) !important
|
||||
background-position center
|
||||
background-repeat no-repeat
|
||||
background-image url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjZThlYWVkIj48cGF0aCBkPSJNMjAwLTEyMHEtMzMgMC01Ni41LTIzLjVUMTIwLTIwMHYtNTYwcTAtMzMgMjMuNS01Ni41VDIwMC04NDBoMzU3bC04MCA4MEgyMDB2NTYwaDU2MHYtMjc4bDgwLTgwdjM1OHEwIDMzLTIzLjUgNTYuNVQ3NjAtMTIwSDIwMFptMjgwLTM2MFpNMzYwLTM2MHYtMTcwbDM2Ny0zNjdxMTItMTIgMjctMTh0MzAtNnExNiAwIDMwLjUgNnQyNi41IDE4bDU2IDU3cTExIDEyIDE3IDI2LjV0NiAyOS41cTAgMTUtNS41IDI5LjVUODk3LTcyOEw1MzAtMzYwSDM2MFptNDgxLTQyNC01Ni01NiA1NiA1NlpNNDQwLTQ0MGg1NmwyMzItMjMyLTI4LTI4LTI5LTI4LTIzMSAyMzF2NTdabTI2MC0yNjAtMjktMjggMjkgMjggMjggMjgtMjgtMjhaIi8+PC9zdmc+")
|
||||
}
|
||||
/body:not(:has(.column-link.active)) &:not(:focus) {
|
||||
transform scale(0.97) !important
|
||||
opacity 0 !important
|
||||
pointer-events none
|
||||
background var(--elevated-color)
|
||||
z-index -1
|
||||
}
|
||||
}
|
||||
[href^="/@"], a.permalink[href] {
|
||||
position fixed
|
||||
inset-inline-end 1px
|
||||
width 53px
|
||||
display flex
|
||||
justify-content center
|
||||
background inherit
|
||||
.ui__navigation-bar {
|
||||
color var(--on-input-color)
|
||||
height 70px
|
||||
padding-inline 5px
|
||||
}
|
||||
:has(body) & {
|
||||
[href^="/@"], a.permalink[href] {
|
||||
position static !important
|
||||
width unset
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs-bar__wrapper {
|
||||
top 0
|
||||
z-index 200
|
||||
&::after {
|
||||
.ui__navigation-bar__item {
|
||||
position relative
|
||||
border 0 !important
|
||||
padding-block 12px
|
||||
gap 6px
|
||||
opacity .7
|
||||
&::before {
|
||||
content ""
|
||||
position absolute
|
||||
inset 0
|
||||
background var(--elevated-tint)
|
||||
pointer-events none
|
||||
z-index 2
|
||||
width 60px
|
||||
top 10px
|
||||
bottom 30px
|
||||
background currentColor
|
||||
border-radius 100px
|
||||
z-index -1
|
||||
opacity 0
|
||||
transform scaleX(.8)
|
||||
transition opacity .2s, transform .2s
|
||||
}
|
||||
&::after {
|
||||
content attr(aria-label)
|
||||
font-size 12px
|
||||
max-width 100%
|
||||
padding-inline 4px
|
||||
text-overflow ellipsis
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
box-sizing border-box
|
||||
}
|
||||
&.active {
|
||||
opacity 1
|
||||
&::before {
|
||||
opacity .15
|
||||
transform none
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation
|
||||
@supports unquote("selector(.foxxo:has(.waf))") {
|
||||
[href="/publish"] {
|
||||
bottom 70px !important
|
||||
}
|
||||
.columns-area__panels {
|
||||
flex-direction column
|
||||
}
|
||||
.columns-area__panels__main {
|
||||
width 100%
|
||||
border-radius var(--radius) !important
|
||||
margin 0 !important
|
||||
border 0 !important
|
||||
overflow clip !important
|
||||
flex-grow 1
|
||||
}
|
||||
.tabs-bar__wrapper {
|
||||
transition none !important
|
||||
}
|
||||
|
||||
.columns-area__panels__pane--navigational {
|
||||
display contents
|
||||
z-index 100
|
||||
padding 40px 10px
|
||||
padding-top 60vh
|
||||
min-width unset
|
||||
overflow-y scroll
|
||||
box-sizing border-box
|
||||
overscroll-behavior contain
|
||||
visibility hidden
|
||||
transition visibility 0s 0.2s
|
||||
.columns-area__panels__pane__inner {
|
||||
position static !important
|
||||
order -1
|
||||
width unset
|
||||
height auto
|
||||
white-space nowrap
|
||||
width 100%
|
||||
position relative
|
||||
inset unset
|
||||
height max-content
|
||||
border-radius 24px
|
||||
margin-top auto
|
||||
transform translateY(100vh) !important
|
||||
transition transform .2s cubic-bezier(0,0,1,0), opacity 1s
|
||||
}
|
||||
.navigation-panel__compose-button {
|
||||
display none
|
||||
}
|
||||
html:not(:has(.sign-in-banner)) & {
|
||||
[href="/home"],
|
||||
[href="/explore"],
|
||||
[href="/notifications"] {
|
||||
display none
|
||||
}
|
||||
}
|
||||
.navigation-panel {
|
||||
flex-direction row
|
||||
margin 0
|
||||
padding 12px
|
||||
border-top 1px solid
|
||||
align-items center
|
||||
overflow visible
|
||||
height auto
|
||||
.flex-spacer {
|
||||
display none
|
||||
}
|
||||
}
|
||||
hr {
|
||||
display none
|
||||
}
|
||||
.trends__item__name > span, .trends__item__sparkline {
|
||||
display none
|
||||
}
|
||||
h4 a span::after {
|
||||
content ":" !important
|
||||
}
|
||||
.navigation-panel__legal {
|
||||
display contents
|
||||
}
|
||||
a {
|
||||
position relative
|
||||
overflow hidden
|
||||
border-radius var(--radius)
|
||||
font-weight 600
|
||||
font-size 1.1em
|
||||
flex-grow 1
|
||||
text-align center
|
||||
min-width max-content
|
||||
justify-content center
|
||||
transition padding .2s
|
||||
padding-inline 6px
|
||||
gap 6px
|
||||
&::before {
|
||||
content ""
|
||||
position absolute
|
||||
inset 0
|
||||
background currentcolor
|
||||
opacity 0
|
||||
border-radius inherit
|
||||
transition inset .4s cubic-bezier(0,0,0,1.2), opacity .2s
|
||||
.navigation-panel__menu {
|
||||
padding 10px 5px !important
|
||||
}
|
||||
svg {
|
||||
width 1em
|
||||
height @width
|
||||
margin-inline-end 0 !important
|
||||
}
|
||||
&.active {
|
||||
position relative
|
||||
&::before {
|
||||
inset 0 !important
|
||||
opacity .1
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
display unset !important
|
||||
width 0
|
||||
flex-grow 1
|
||||
max-width max-content
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// bottom bar
|
||||
|
||||
&:not(:has(.navigation-panel__sign-in-banner)) {
|
||||
.columns-area__panels__main {
|
||||
margin-top 2px !important
|
||||
}
|
||||
.columns-area--mobile .column {
|
||||
padding-bottom 60px
|
||||
}
|
||||
.ui__header {
|
||||
z-index 199
|
||||
&::before, &::after {
|
||||
all unset
|
||||
content ""
|
||||
position fixed
|
||||
bottom 0
|
||||
inset-inline 0
|
||||
background var(--background-color)
|
||||
z-index 200
|
||||
height 60px
|
||||
&.columns-area__panels__pane--overlay {
|
||||
visibility visible
|
||||
z-index -1
|
||||
border-top 1px solid var(--background-border-color)
|
||||
}
|
||||
&::after {
|
||||
background var(--elevated-tint)
|
||||
border 0
|
||||
}
|
||||
}
|
||||
.navigation-panel {
|
||||
flex-wrap wrap
|
||||
border-top none
|
||||
margin-bottom 8px
|
||||
padding-block 0
|
||||
a {
|
||||
span {
|
||||
display none !important
|
||||
}
|
||||
}
|
||||
[href="/settings/preferences"] {
|
||||
position absolute
|
||||
top 12px
|
||||
inset-inline-end 60px
|
||||
z-index 900
|
||||
padding-block 0
|
||||
height 35px
|
||||
width 35px
|
||||
box-sizing border-box
|
||||
margin 0
|
||||
border 1px solid var(--border-color)
|
||||
}
|
||||
}
|
||||
|
||||
bottomBarButtons = "'/home'" "'/notifications'" "'/explore'" "'/public/local'" "'/lists'"
|
||||
bottomBarItemsSelector() {
|
||||
waf = ""
|
||||
for i in arguments {
|
||||
waf += ( ",.column-link[href=" + i + "]" )
|
||||
}
|
||||
return substr(waf, 1)
|
||||
}
|
||||
/:root {
|
||||
--selector bottomBarItemsSelector(bottomBarButtons)
|
||||
}
|
||||
{bottomBarItemsSelector(bottomBarButtons)} {
|
||||
position fixed !important
|
||||
display flex
|
||||
flex-direction column
|
||||
bottom 4px
|
||||
z-index 201
|
||||
font-size 1.7em
|
||||
margin 0 !important
|
||||
padding 0 !important
|
||||
height 50px
|
||||
align-items center
|
||||
justify-content center
|
||||
width 19%
|
||||
left 0
|
||||
box-sizing border-box
|
||||
padding 1px !important
|
||||
&::before {
|
||||
inset-inline 6px
|
||||
}
|
||||
span {
|
||||
margin 0
|
||||
font-size 0
|
||||
line-height 1
|
||||
opacity 0
|
||||
transition font-size .4s, margin .7s, opacity .2s
|
||||
}
|
||||
svg {
|
||||
width 24px
|
||||
height @width
|
||||
transition transform .1s
|
||||
}
|
||||
}
|
||||
for row, i in bottomBarButtons {
|
||||
.column-link[href={row}] {
|
||||
left 2% + (20% * i) - (.75% * i)
|
||||
transition none
|
||||
// for some reason transitioning the .pane__inner stutters
|
||||
// a ton even with !important, so we're just doing an animation
|
||||
// on the container instead !
|
||||
animation slideUpFadeBig .3s cubic-bezier(0,0.9,0,1.05) forwards
|
||||
.columns-area__panels__pane__inner {
|
||||
transform none !important
|
||||
transition none
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2883,140 +2657,37 @@ w/ help from pull req #7
|
||||
|
||||
/// ALT TEXT MODAL
|
||||
/ {
|
||||
.report-modal[style="max-width: 960px;"] {
|
||||
background var(--background-color)
|
||||
&, * {
|
||||
color inherit !important
|
||||
}
|
||||
.report-modal__comment {
|
||||
min-width unset
|
||||
width 370px
|
||||
max-width unset
|
||||
flex none
|
||||
padding 20px
|
||||
height 100%
|
||||
overflow-y auto
|
||||
}
|
||||
.setting-text__wrapper {
|
||||
border-radius var(--radius)
|
||||
.modal-root__modal:has(.focal-point) {
|
||||
width unset
|
||||
max-width 90vw
|
||||
.dialog-modal__content {
|
||||
overflow hidden
|
||||
background none
|
||||
textarea {
|
||||
border 0
|
||||
max-height unset !important
|
||||
background none
|
||||
display flex
|
||||
flex-direction column
|
||||
}
|
||||
}
|
||||
.focal-point-modal__content {
|
||||
position sticky
|
||||
top 0
|
||||
max-height 100vh
|
||||
flex-grow 0 !important
|
||||
.dialog-modal__content__preview {
|
||||
padding 0 !important
|
||||
min-height 0
|
||||
max-width 100%
|
||||
}
|
||||
.focal-point {
|
||||
width 100%
|
||||
height 100%
|
||||
}
|
||||
.audio-player
|
||||
.focal-point img {
|
||||
width unset !important
|
||||
height unset !important
|
||||
max-height 100% !important
|
||||
img {
|
||||
max-width 100% !important
|
||||
max-height 100% !important
|
||||
border-radius 0
|
||||
max-height unset
|
||||
min-height 0
|
||||
}
|
||||
.audio-player {
|
||||
margin 10px !important
|
||||
width 600px !important
|
||||
max-width calc(100% - 20px) !important
|
||||
}
|
||||
.focal-point__reticle {
|
||||
box-shadow: 0 0 300px 200px rgba(0,0,0,0.2);
|
||||
transition box-shadow .2s;
|
||||
}
|
||||
|
||||
@media not all and (max-width: 900px) {
|
||||
max-width max-content !important
|
||||
max-height 98vh
|
||||
border 0
|
||||
box-shadow var(--shadow)
|
||||
overflow hidden
|
||||
border-radius var(--radius)
|
||||
width 98vw
|
||||
|
||||
.report-modal__container {
|
||||
flex-wrap nowrap
|
||||
border 0
|
||||
max-width max-content
|
||||
max-height 100%
|
||||
}
|
||||
|
||||
.report-modal__target {
|
||||
position: absolute;
|
||||
padding: 24px 20px 12px;
|
||||
font-weight: bold;
|
||||
width 348px
|
||||
box-sizing border-box
|
||||
text-align start
|
||||
background inherit
|
||||
}
|
||||
.report-modal__close {
|
||||
position: fixed !important;
|
||||
right: 12px;
|
||||
top: 12px;
|
||||
order: 2;
|
||||
color: white;
|
||||
background: var(--modal-background-color);
|
||||
padding: 12px;
|
||||
}
|
||||
.report-modal__comment {
|
||||
padding-top: calc(30px + 2em);
|
||||
padding-bottom 160px
|
||||
}
|
||||
.focal-point-modal__content
|
||||
.focal-point {
|
||||
overflow visible
|
||||
}
|
||||
.focal-point img {
|
||||
min-width 500px
|
||||
}
|
||||
.focal-point__preview {
|
||||
inset-inline-start -220px
|
||||
right unset
|
||||
bottom 20px
|
||||
pointer-events none
|
||||
text-align end
|
||||
strong {
|
||||
color inherit
|
||||
}
|
||||
div {
|
||||
border-radius var(--radius)
|
||||
min-height 0 !important
|
||||
&:not(:hover) .focal-point__reticle {
|
||||
box-shadow none
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width 900px) {
|
||||
height auto
|
||||
width 100vw
|
||||
max-width unset !important
|
||||
border-radius 0
|
||||
.report-modal__container {
|
||||
height auto
|
||||
min-height 0
|
||||
}
|
||||
.report-modal__container {
|
||||
flex-direction column-reverse
|
||||
flex-wrap nowrap
|
||||
flex-grow 1
|
||||
}
|
||||
.report-modal__comment {
|
||||
width 100%
|
||||
border 0
|
||||
max-height 70%
|
||||
flex 0 0 auto
|
||||
height unset
|
||||
order unset
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 630px) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user