Update to mastomodern 1.10.5
This commit is contained in:
Essem
parent
aaf54c6395
commit
1a1ff228b3
2 changed files with 563 additions and 759 deletions
|
|
@ -4,12 +4,20 @@
|
|||
--radius-round: 24px;
|
||||
--hover-color: rgba(170,170,170,0.07);
|
||||
--elevated-color: rgba(150,150,200,0.1);
|
||||
--elevated-tint: rgba(200,200,240,0.07);
|
||||
--border-color: rgba(120,120,200,0.2);
|
||||
--border-color-2: #787878;
|
||||
--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);
|
||||
}
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.06);
|
||||
z-index: -1;
|
||||
}
|
||||
:not(body):not(.scrollable)::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
margin-block: 10px;
|
||||
|
|
@ -50,7 +58,7 @@ select,
|
|||
textarea,
|
||||
.compose-form__upload-thumbnail,
|
||||
.button,
|
||||
button:not(.column-header__button),
|
||||
:not(.notification__filter-bar) > button:not(.column-header__button),
|
||||
video,
|
||||
.privacy-dropdown__dropdown,
|
||||
.react-toggle-track,
|
||||
|
|
@ -413,6 +421,7 @@ a:focus-visible,
|
|||
.search__input {
|
||||
border: 0 !important;
|
||||
}
|
||||
.account__section-headline,
|
||||
.notification__filter-bar,
|
||||
.column-header {
|
||||
border-inline: 0;
|
||||
|
|
@ -795,6 +804,19 @@ a:focus-visible,
|
|||
.columns-area__panels__main :not(.scrollable--flex) > .scrollable {
|
||||
padding-bottom: 40vh !important;
|
||||
}
|
||||
#mastodon .column {
|
||||
background: var(--background-color);
|
||||
}
|
||||
#mastodon .column::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--elevated-tint);
|
||||
pointer-events: none;
|
||||
}
|
||||
#mastodon .columns-area {
|
||||
box-shadow: 0 8px 24px 12px rgba(0,0,0,0.02);
|
||||
}
|
||||
#mastodon .column-header__wrapper ~ .scrollable {
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
|
@ -1038,7 +1060,7 @@ a:focus-visible,
|
|||
margin-top: calc(0px - var(--radius)) !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: inherit;
|
||||
background: var(--background-color);
|
||||
isolation: isolate;
|
||||
}
|
||||
@media (max-width: 890px) {
|
||||
|
|
@ -1047,6 +1069,13 @@ a:focus-visible,
|
|||
}
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bar::before {
|
||||
content: "";
|
||||
background: var(--elevated-tint);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bar::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline: 0;
|
||||
|
|
@ -2162,6 +2191,9 @@ a:focus-visible,
|
|||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
#mastodon .status__wrapper {
|
||||
background: none;
|
||||
}
|
||||
#mastodon .status,
|
||||
#mastodon .scrollable .account {
|
||||
padding-block: 15px;
|
||||
|
|
@ -2193,11 +2225,11 @@ a:focus-visible,
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#mastodon .notification .status {
|
||||
#mastodon .status__prepend + .status:not(.status-direct) {
|
||||
padding-top: 0;
|
||||
}
|
||||
#mastodon .notification .status .status__info {
|
||||
margin-top: 10px !important;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
#mastodon .notification .status .status__content ~ .media-gallery,
|
||||
#mastodon .notification .status .status__content ~ [style*="aspect-ratio:"] {
|
||||
|
|
@ -2238,9 +2270,6 @@ a:focus-visible,
|
|||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
#mastodon .status__prepend {
|
||||
margin-bottom: -15px !important;
|
||||
}
|
||||
#mastodon .notification__message > span,
|
||||
#mastodon .notification__message > span > span {
|
||||
display: flex;
|
||||
|
|
@ -2428,19 +2457,6 @@ a:focus-visible,
|
|||
#mastodon .status__content__spoiler-link:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct,
|
||||
#mastodon .status-direct,
|
||||
#mastodon .status__wrapper-direct,
|
||||
#mastodon .conversation {
|
||||
background: none;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct .status__prepend,
|
||||
#mastodon .status-direct .status__prepend,
|
||||
#mastodon .status__wrapper-direct .status__prepend,
|
||||
#mastodon .conversation .status__prepend {
|
||||
position: absolute;
|
||||
font-size: 0;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct .status__content,
|
||||
#mastodon .status-direct .status__content,
|
||||
#mastodon .status__wrapper-direct .status__content,
|
||||
|
|
@ -2467,23 +2483,12 @@ a:focus-visible,
|
|||
.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 .status__wrapper-direct:not(.detailed-status__wrapper-direct) .status__prepend {
|
||||
position: absolute;
|
||||
font-size: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
#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 .icon-at,
|
||||
#mastodon .status-direct .status__visibility-icon {
|
||||
color: var(--accent, #8c8dff);
|
||||
}
|
||||
|
|
@ -2677,6 +2682,20 @@ a:focus-visible,
|
|||
#mastodon .picture-in-picture .status__content {
|
||||
min-height: unset !important;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper {
|
||||
isolation: isolate;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--elevated-tint);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper .detailed-status {
|
||||
box-shadow: none;
|
||||
}
|
||||
#mastodon .picture-in-picture {
|
||||
z-index: 101;
|
||||
}
|
||||
|
|
@ -2816,6 +2835,7 @@ a:focus-visible,
|
|||
.layout-single-column .tabs-bar__wrapper .column-header__collapsible,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible {
|
||||
transition: none;
|
||||
background: var(--modal-background-color);
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .collapsed,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .collapsed {
|
||||
|
|
@ -2871,11 +2891,6 @@ a:focus-visible,
|
|||
.layout-single-column .tabs-bar__wrapper .column-header > button,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header > button {
|
||||
z-index: 2;
|
||||
display: inline;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header > button svg,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header > button svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header__buttons button,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button {
|
||||
|
|
@ -2911,19 +2926,12 @@ a:focus-visible,
|
|||
inset: 0;
|
||||
top: calc(100% + 5px);
|
||||
bottom: -5px;
|
||||
background: inherit;
|
||||
background: var(--modal-background-color);
|
||||
z-index: -1;
|
||||
transition: inset 0.1s;
|
||||
border-radius: 100px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header__buttons button::after,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--elevated-color);
|
||||
border-radius: 100%;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header__buttons button.active::before,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button.active::before {
|
||||
inset: -10px -300px;
|
||||
|
|
@ -2962,8 +2970,7 @@ a:focus-visible,
|
|||
}
|
||||
#mastodon .column-settings__row,
|
||||
#mastodon .column-settings__hashtags {
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 1em;
|
||||
gap: 0;
|
||||
}
|
||||
#mastodon .column-settings__section {
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -2972,7 +2979,8 @@ a:focus-visible,
|
|||
#mastodon .column-select__control {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
#mastodon .setting-toggle {
|
||||
#mastodon .setting-toggle,
|
||||
#mastodon .app-form__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
|
|
@ -2982,23 +2990,28 @@ a:focus-visible,
|
|||
margin-bottom: 2px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
#mastodon .setting-toggle:first-child {
|
||||
#mastodon .setting-toggle:first-child,
|
||||
#mastodon .app-form__toggle:first-child {
|
||||
border-top-left-radius: var(--radius);
|
||||
border-top-right-radius: var(--radius);
|
||||
}
|
||||
#mastodon .setting-toggle:last-child {
|
||||
#mastodon .setting-toggle:last-child,
|
||||
#mastodon .app-form__toggle:last-child {
|
||||
border-bottom-left-radius: var(--radius);
|
||||
border-bottom-right-radius: var(--radius);
|
||||
}
|
||||
#mastodon .setting-toggle .react-toggle {
|
||||
#mastodon .setting-toggle .react-toggle,
|
||||
#mastodon .app-form__toggle .react-toggle {
|
||||
order: 2;
|
||||
}
|
||||
#mastodon .setting-toggle .setting-toggle__label {
|
||||
#mastodon .setting-toggle .setting-toggle__label,
|
||||
#mastodon .app-form__toggle .setting-toggle__label {
|
||||
margin-bottom: 0 !important;
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
}
|
||||
#mastodon .setting-toggle::before {
|
||||
#mastodon .setting-toggle::before,
|
||||
#mastodon .app-form__toggle::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
|
@ -3008,37 +3021,40 @@ a:focus-visible,
|
|||
pointer-events: none;
|
||||
}
|
||||
#mastodon .setting-toggle:hover::before,
|
||||
#mastodon .setting-toggle:focus-within::before {
|
||||
#mastodon .app-form__toggle:hover::before,
|
||||
#mastodon .setting-toggle:focus-within::before,
|
||||
#mastodon .app-form__toggle:focus-within::before {
|
||||
opacity: 1;
|
||||
}
|
||||
#mastodon .navigation-panel {
|
||||
#mastodon .navigation-panel.navigation-panel {
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - var(--top) - 50px + var(--radius));
|
||||
padding-bottom: 10px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
margin-top: calc(0px - var(--radius));
|
||||
padding-top: calc(10px + var(--radius));
|
||||
}
|
||||
#mastodon .navigation-panel > hr {
|
||||
#mastodon .navigation-panel.navigation-panel > hr {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .navigation-panel hr {
|
||||
#mastodon .navigation-panel.navigation-panel hr {
|
||||
margin-inline: 15px;
|
||||
}
|
||||
@media (min-width: 1175px) {
|
||||
#mastodon .navigation-panel {
|
||||
#mastodon .navigation-panel.navigation-panel {
|
||||
padding-top: calc(var(--radius) + 10px);
|
||||
margin-top: calc(50px - var(--radius));
|
||||
}
|
||||
#mastodon .navigation-panel .navigation-panel__logo .column-link,
|
||||
#mastodon .navigation-panel .navigation-panel__logo hr {
|
||||
#mastodon .navigation-panel.navigation-panel .navigation-panel__logo .column-link,
|
||||
#mastodon .navigation-panel.navigation-panel .navigation-panel__logo hr {
|
||||
display: none !important;
|
||||
}
|
||||
#mastodon .navigation-panel .switch-to-advanced {
|
||||
#mastodon .navigation-panel.navigation-panel .switch-to-advanced {
|
||||
border-radius: var(--radius);
|
||||
margin-top: 0;
|
||||
}
|
||||
#mastodon .navigation-panel [href="/settings/preferences"] {
|
||||
#mastodon .navigation-panel.navigation-panel [href="/settings/preferences"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -3250,6 +3266,7 @@ a:focus-visible,
|
|||
margin-inline-end: 280px;
|
||||
padding-top: 12px;
|
||||
position: static;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
.layout-single-column #mastodon .columns-area__panels__main {
|
||||
margin-inline: 10px !important;
|
||||
|
|
@ -3340,9 +3357,6 @@ a:focus-visible,
|
|||
#mastodon .picture-in-picture__footer {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#mastodon .columns-area--mobile > .column > .column-header__wrapper {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .column-header {
|
||||
border-inline: 0;
|
||||
}
|
||||
|
|
@ -3353,24 +3367,12 @@ a:focus-visible,
|
|||
height: auto;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
gap: 10px;
|
||||
gap: 5px 10px;
|
||||
flex-wrap: wrap;
|
||||
padding-block: 8px;
|
||||
border: 0 !important;
|
||||
overflow: visible;
|
||||
}
|
||||
.ui__header::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline-end: 54px;
|
||||
top: 100%;
|
||||
width: var(--radius);
|
||||
height: var(--radius);
|
||||
background: inherit;
|
||||
mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000);
|
||||
-webkit-mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000);
|
||||
z-index: 9999;
|
||||
}
|
||||
.rtl .ui__header::after {
|
||||
transform: scaleX(-1);
|
||||
backdrop-filter: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
.ui__header .ui__header__logo {
|
||||
padding-block: 5px !important;
|
||||
|
|
@ -3378,7 +3380,7 @@ a:focus-visible,
|
|||
.ui__header .ui__header__links {
|
||||
min-width: max-content;
|
||||
position: sticky;
|
||||
inset-inline-end: 50px;
|
||||
inset-inline-end: 55px;
|
||||
background: inherit;
|
||||
}
|
||||
:has(body) .ui__header .ui__header__links {
|
||||
|
|
@ -3397,7 +3399,7 @@ a:focus-visible,
|
|||
width: 60px;
|
||||
font-size: 0;
|
||||
box-shadow: var(--shadow-low);
|
||||
background: inherit;
|
||||
background: var(--surface-background-color);
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
|
|
@ -3452,141 +3454,140 @@ a:focus-visible,
|
|||
}
|
||||
#mastodon .tabs-bar__wrapper {
|
||||
top: 0;
|
||||
background: none;
|
||||
z-index: 200;
|
||||
}
|
||||
#mastodon .tabs-bar__wrapper::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--elevated-tint);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
#mastodon .column-back-button.column-back-button {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
#mastodon:has(*) [href="/publish"] {
|
||||
bottom: 70px !important;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels {
|
||||
flex-direction: column;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__main {
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
#mastodon:has(*) .tabs-bar__wrapper {
|
||||
transition: none !important;
|
||||
}
|
||||
#mastodon:has(*):has(.column-header__buttons:empty) .tabs-bar__wrapper {
|
||||
margin-top: -50px;
|
||||
margin-bottom: 2px;
|
||||
height: 48px;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational {
|
||||
display: contents;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
|
||||
position: relative !important;
|
||||
inset: unset !important;
|
||||
order: -1;
|
||||
width: unset;
|
||||
height: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0 8px;
|
||||
height: 5em;
|
||||
gap: 10px;
|
||||
border-block: 1px solid;
|
||||
overflow: scroll hidden;
|
||||
align-items: center;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational hr {
|
||||
display: none;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name > span,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__sparkline {
|
||||
display: none;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name {
|
||||
all: unset;
|
||||
display: contents !important;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal::before,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4::before,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item::before,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name::before,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal::after,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4::after,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item::after,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name::after {
|
||||
content: unset;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 a span::after {
|
||||
content: ":" !important;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .flex-spacer {
|
||||
border-right: 1px solid var(--border-color);
|
||||
height: 50%;
|
||||
margin: 10px;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .getting-started__trends {
|
||||
all: unset;
|
||||
display: contents !important;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational a,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 > span {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.8em 1em;
|
||||
font-weight: 600;
|
||||
font-size: 1.1em;
|
||||
text-align: center;
|
||||
min-width: max-content;
|
||||
transition: padding 0.2s;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational a::before,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 > span::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;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational a i,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 > span i {
|
||||
font-size: 1em;
|
||||
width: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational a.active,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 > span.active {
|
||||
padding-inline: 1.2em;
|
||||
position: relative;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational a.active::before,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 > span.active::before {
|
||||
inset: 0 !important;
|
||||
opacity: 0.1;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational a > span:not(:first-child),
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 > span > span:not(:first-child) {
|
||||
margin-left: 0.7em;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational span {
|
||||
display: unset;
|
||||
@supports selector(.foxxo:has(.waf)) {
|
||||
#mastodon [href="/publish"] {
|
||||
bottom: 70px !important;
|
||||
}
|
||||
#mastodon .columns-area__panels {
|
||||
flex-direction: column;
|
||||
}
|
||||
#mastodon .columns-area__panels__main {
|
||||
width: 100%;
|
||||
border-radius: var(--radius) !important;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
overflow: clip !important;
|
||||
}
|
||||
#mastodon .tabs-bar__wrapper {
|
||||
transition: none !important;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational {
|
||||
display: contents;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
|
||||
position: relative !important;
|
||||
inset: unset !important;
|
||||
order: -1;
|
||||
width: unset;
|
||||
height: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational .navigation-panel {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0 8px;
|
||||
height: 5em;
|
||||
border-top: 1px solid;
|
||||
overflow: scroll hidden;
|
||||
align-items: center;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational hr {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item__name > span,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item__sparkline {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational .navigation-panel__legal,
|
||||
#mastodon .columns-area__panels__pane--navigational h4,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item__name {
|
||||
all: unset;
|
||||
display: contents !important;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational .navigation-panel__legal::before,
|
||||
#mastodon .columns-area__panels__pane--navigational h4::before,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item::before,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item__name::before,
|
||||
#mastodon .columns-area__panels__pane--navigational .navigation-panel__legal::after,
|
||||
#mastodon .columns-area__panels__pane--navigational h4::after,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item::after,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item__name::after {
|
||||
content: unset;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational h4 a span::after {
|
||||
content: ":" !important;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .flex-spacer {
|
||||
border-right: 1px solid var(--border-color);
|
||||
height: 50%;
|
||||
margin: 10px;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .getting-started__trends {
|
||||
all: unset;
|
||||
display: contents !important;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational a,
|
||||
#mastodon .columns-area__panels__pane--navigational h4 > span {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
font-size: 1.1em;
|
||||
text-align: center;
|
||||
min-width: max-content;
|
||||
transition: padding 0.2s;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational a::before,
|
||||
#mastodon .columns-area__panels__pane--navigational h4 > span::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;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational a svg,
|
||||
#mastodon .columns-area__panels__pane--navigational h4 > span svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational a.active,
|
||||
#mastodon .columns-area__panels__pane--navigational h4 > span.active {
|
||||
padding-inline: 1.2em;
|
||||
margin-inline: 4px;
|
||||
position: relative;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational a.active::before,
|
||||
#mastodon .columns-area__panels__pane--navigational h4 > span.active::before {
|
||||
inset: 0 !important;
|
||||
opacity: 0.1;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational span {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .columns-area__panels__main {
|
||||
margin-top: 2px !important;
|
||||
|
|
@ -3601,14 +3602,20 @@ a:focus-visible,
|
|||
position: fixed;
|
||||
bottom: 0;
|
||||
inset-inline: 0;
|
||||
background: inherit;
|
||||
background: var(--background-color-tint, inherit);
|
||||
border-top: 1px solid var(--divider);
|
||||
z-index: 200;
|
||||
height: 60px;
|
||||
filter: brightness(1.2);
|
||||
height: 61px;
|
||||
visibility: visible;
|
||||
z-index: -1;
|
||||
backdrop-filter: blur(10px);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::after {
|
||||
background: var(--elevated-tint);
|
||||
height: 60px;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel {
|
||||
padding-inline: 14px;
|
||||
border-top: none;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
|
@ -3631,138 +3638,13 @@ a:focus-visible,
|
|||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column {
|
||||
min-height: 100vh;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link {
|
||||
margin-inline: -0.2em;
|
||||
padding-inline: 0.7em;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] {
|
||||
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%;
|
||||
transform: translateX(10%);
|
||||
box-sizing: border-box;
|
||||
padding: 1px !important;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home']::before {
|
||||
inset-inline: 6px;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] span {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
transition: font-size 0.4s, margin 0.7s, opacity 0.2s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] i {
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] {
|
||||
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: 19.25%;
|
||||
transform: translateX(10%);
|
||||
box-sizing: border-box;
|
||||
padding: 1px !important;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications']::before {
|
||||
inset-inline: 6px;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] span {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
transition: font-size 0.4s, margin 0.7s, opacity 0.2s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] i {
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] {
|
||||
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: 38.5%;
|
||||
transform: translateX(10%);
|
||||
box-sizing: border-box;
|
||||
padding: 1px !important;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore']::before {
|
||||
inset-inline: 6px;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] span {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
transition: font-size 0.4s, margin 0.7s, opacity 0.2s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] i {
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] {
|
||||
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: 57.75%;
|
||||
transform: translateX(10%);
|
||||
box-sizing: border-box;
|
||||
padding: 1px !important;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local']::before {
|
||||
inset-inline: 6px;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] span {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
transition: font-size 0.4s, margin 0.7s, opacity 0.2s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] i {
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.1s;
|
||||
:root {
|
||||
--selector: '.column-link[href='/home'],.column-link[href='/notifications'],.column-link[href='/explore'],.column-link[href='/public/local'],.column-link[href='/lists']';
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'],
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'],
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'],
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'],
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] {
|
||||
position: fixed !important;
|
||||
display: flex;
|
||||
|
|
@ -3776,14 +3658,22 @@ a:focus-visible,
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 19%;
|
||||
left: 77%;
|
||||
left: 0;
|
||||
transform: translateX(10%);
|
||||
box-sizing: border-box;
|
||||
padding: 1px !important;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home']::before,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications']::before,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore']::before,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local']::before,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists']::before {
|
||||
inset-inline: 6px;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] span,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] span,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] span,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] span,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] span {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
|
|
@ -3791,14 +3681,29 @@ a:focus-visible,
|
|||
opacity: 0;
|
||||
transition: font-size 0.4s, margin 0.7s, opacity 0.2s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] i {
|
||||
transform: scale(0.9);
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] svg,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] svg,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] svg,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] svg,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .columns-area__panels__pane__inner {
|
||||
position: sticky !important;
|
||||
top: 10px !important;
|
||||
z-index: 200;
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] {
|
||||
left: 0%;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] {
|
||||
left: 19.25%;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] {
|
||||
left: 38.5%;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] {
|
||||
left: 57.75%;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] {
|
||||
left: 77%;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper {
|
||||
position: static;
|
||||
|
|
@ -3838,22 +3743,12 @@ a:focus-visible,
|
|||
#mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__collapsible {
|
||||
visibility: visible;
|
||||
}
|
||||
#mastodon .columns-area__panels {
|
||||
justify-content: flex-start;
|
||||
max-width: 100% !important;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
#mastodon .columns-area__panels__main {
|
||||
padding: 0 !important;
|
||||
max-width: unset;
|
||||
border-start-end-radius: var(--radius);
|
||||
overflow: clip !important;
|
||||
flex-grow: 1;
|
||||
margin-top: 1px;
|
||||
}
|
||||
#mastodon .columns-area__panels__main > .columns-area--mobile {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.is-composing .columns-area__panels__main {
|
||||
padding-bottom: 40px !important;
|
||||
}
|
||||
|
|
@ -3862,17 +3757,10 @@ a:focus-visible,
|
|||
#mastodon .columns-area__panels__main > div {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
#mastodon .column {
|
||||
flex-grow: 1;
|
||||
overflow: clip;
|
||||
}
|
||||
#mastodon .dismissable-banner {
|
||||
margin: 0;
|
||||
padding-left: 4px;
|
||||
}
|
||||
#mastodon .status {
|
||||
padding-top: 14px !important;
|
||||
}
|
||||
#mastodon .status .status__avatar {
|
||||
width: 42px !important;
|
||||
min-width: 45px !important;
|
||||
|
|
@ -3902,7 +3790,7 @@ a:focus-visible,
|
|||
padding-top: 200px;
|
||||
height: calc(100vh + 200px - 55px);
|
||||
border: 0;
|
||||
margin-inline-start: 1px;
|
||||
border-inline-start: 1px solid;
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
#mastodon .columns-area {
|
||||
|
|
@ -4675,6 +4563,7 @@ a:focus-visible,
|
|||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header {
|
||||
border-radius: var(--radius-round);
|
||||
background: var(--elevated-tint);
|
||||
margin-inline: 10px;
|
||||
overflow: hidden;
|
||||
border: 0 !important;
|
||||
|
|
@ -4692,6 +4581,7 @@ a:focus-visible,
|
|||
z-index: 2;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer > .drawer__pager {
|
||||
border: 0;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer > .drawer__pager > .drawer__inner:not(.darker) {
|
||||
|
|
@ -4701,7 +4591,6 @@ a:focus-visible,
|
|||
width: calc(100% + 10px);
|
||||
padding-inline-start: 6px;
|
||||
padding-inline-end: 4px;
|
||||
padding-top: 20px;
|
||||
height: calc(100% + 20px);
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer .drawer__inner__mastodon {
|
||||
|
|
@ -4726,9 +4615,22 @@ a:focus-visible,
|
|||
padding: 0 !important;
|
||||
border-radius: var(--radius-round) var(--radius-round) 0 0;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer__inner.darker::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--elevated-tint);
|
||||
pointer-events: none;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .getting-started__trends {
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .column-header {
|
||||
border-top: 0;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .column-header__title {
|
||||
padding-block: 0;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .status {
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
|
|
@ -4737,4 +4639,4 @@ a:focus-visible,
|
|||
}
|
||||
.modal-root__container {
|
||||
animation: bounceIn 0.7s;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,20 @@
|
|||
--radius-round: 24px;
|
||||
--hover-color: rgba(170,170,170,0.07);
|
||||
--elevated-color: rgba(150,150,200,0.1);
|
||||
--elevated-tint: rgba(200,200,240,0.07);
|
||||
--border-color: rgba(120,120,200,0.2);
|
||||
--border-color-2: #787878;
|
||||
--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);
|
||||
}
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.06);
|
||||
z-index: -1;
|
||||
}
|
||||
:not(body):not(.scrollable)::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
margin-block: 10px;
|
||||
|
|
@ -50,7 +58,7 @@ select,
|
|||
textarea,
|
||||
.compose-form__upload-thumbnail,
|
||||
.button,
|
||||
button:not(.column-header__button),
|
||||
:not(.notification__filter-bar) > button:not(.column-header__button),
|
||||
video,
|
||||
.privacy-dropdown__dropdown,
|
||||
.react-toggle-track,
|
||||
|
|
@ -413,6 +421,7 @@ a:focus-visible,
|
|||
.search__input {
|
||||
border: 0 !important;
|
||||
}
|
||||
.account__section-headline,
|
||||
.notification__filter-bar,
|
||||
.column-header {
|
||||
border-inline: 0;
|
||||
|
|
@ -795,6 +804,19 @@ a:focus-visible,
|
|||
.columns-area__panels__main :not(.scrollable--flex) > .scrollable {
|
||||
padding-bottom: 40vh !important;
|
||||
}
|
||||
#mastodon .column {
|
||||
background: var(--background-color);
|
||||
}
|
||||
#mastodon .column::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--elevated-tint);
|
||||
pointer-events: none;
|
||||
}
|
||||
#mastodon .columns-area {
|
||||
box-shadow: 0 8px 24px 12px rgba(0,0,0,0.02);
|
||||
}
|
||||
#mastodon .column-header__wrapper ~ .scrollable {
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
|
@ -1038,7 +1060,7 @@ a:focus-visible,
|
|||
margin-top: calc(0px - var(--radius)) !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: inherit;
|
||||
background: var(--background-color);
|
||||
isolation: isolate;
|
||||
}
|
||||
@media (max-width: 890px) {
|
||||
|
|
@ -1047,6 +1069,13 @@ a:focus-visible,
|
|||
}
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bar::before {
|
||||
content: "";
|
||||
background: var(--elevated-tint);
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bar::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline: 0;
|
||||
|
|
@ -2162,6 +2191,9 @@ a:focus-visible,
|
|||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
#mastodon .status__wrapper {
|
||||
background: none;
|
||||
}
|
||||
#mastodon .status,
|
||||
#mastodon .scrollable .account {
|
||||
padding-block: 15px;
|
||||
|
|
@ -2193,11 +2225,11 @@ a:focus-visible,
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#mastodon .notification .status {
|
||||
#mastodon .status__prepend + .status:not(.status-direct) {
|
||||
padding-top: 0;
|
||||
}
|
||||
#mastodon .notification .status .status__info {
|
||||
margin-top: 10px !important;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
#mastodon .notification .status .status__content ~ .media-gallery,
|
||||
#mastodon .notification .status .status__content ~ [style*="aspect-ratio:"] {
|
||||
|
|
@ -2238,9 +2270,6 @@ a:focus-visible,
|
|||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
#mastodon .status__prepend {
|
||||
margin-bottom: -15px !important;
|
||||
}
|
||||
#mastodon .notification__message > span,
|
||||
#mastodon .notification__message > span > span {
|
||||
display: flex;
|
||||
|
|
@ -2428,19 +2457,6 @@ a:focus-visible,
|
|||
#mastodon .status__content__spoiler-link:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct,
|
||||
#mastodon .status-direct,
|
||||
#mastodon .status__wrapper-direct,
|
||||
#mastodon .conversation {
|
||||
background: none;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct .status__prepend,
|
||||
#mastodon .status-direct .status__prepend,
|
||||
#mastodon .status__wrapper-direct .status__prepend,
|
||||
#mastodon .conversation .status__prepend {
|
||||
position: absolute;
|
||||
font-size: 0;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct .status__content,
|
||||
#mastodon .status-direct .status__content,
|
||||
#mastodon .status__wrapper-direct .status__content,
|
||||
|
|
@ -2467,23 +2483,12 @@ a:focus-visible,
|
|||
.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 .status__wrapper-direct:not(.detailed-status__wrapper-direct) .status__prepend {
|
||||
position: absolute;
|
||||
font-size: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
#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 .icon-at,
|
||||
#mastodon .status-direct .status__visibility-icon {
|
||||
color: var(--accent, #8c8dff);
|
||||
}
|
||||
|
|
@ -2677,6 +2682,20 @@ a:focus-visible,
|
|||
#mastodon .picture-in-picture .status__content {
|
||||
min-height: unset !important;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper {
|
||||
isolation: isolate;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--elevated-tint);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper .detailed-status {
|
||||
box-shadow: none;
|
||||
}
|
||||
#mastodon .picture-in-picture {
|
||||
z-index: 101;
|
||||
}
|
||||
|
|
@ -2816,6 +2835,7 @@ a:focus-visible,
|
|||
.layout-single-column .tabs-bar__wrapper .column-header__collapsible,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__collapsible {
|
||||
transition: none;
|
||||
background: var(--modal-background-color);
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .collapsed,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .collapsed {
|
||||
|
|
@ -2871,11 +2891,6 @@ a:focus-visible,
|
|||
.layout-single-column .tabs-bar__wrapper .column-header > button,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header > button {
|
||||
z-index: 2;
|
||||
display: inline;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header > button svg,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header > button svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header__buttons button,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button {
|
||||
|
|
@ -2911,19 +2926,12 @@ a:focus-visible,
|
|||
inset: 0;
|
||||
top: calc(100% + 5px);
|
||||
bottom: -5px;
|
||||
background: inherit;
|
||||
background: var(--modal-background-color);
|
||||
z-index: -1;
|
||||
transition: inset 0.1s;
|
||||
border-radius: 100px;
|
||||
pointer-events: none;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header__buttons button::after,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button::after {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--elevated-color);
|
||||
border-radius: 100%;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header__buttons button.active::before,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button.active::before {
|
||||
inset: -10px -300px;
|
||||
|
|
@ -2962,8 +2970,7 @@ a:focus-visible,
|
|||
}
|
||||
#mastodon .column-settings__row,
|
||||
#mastodon .column-settings__hashtags {
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 1em;
|
||||
gap: 0;
|
||||
}
|
||||
#mastodon .column-settings__section {
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -2972,7 +2979,8 @@ a:focus-visible,
|
|||
#mastodon .column-select__control {
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
#mastodon .setting-toggle {
|
||||
#mastodon .setting-toggle,
|
||||
#mastodon .app-form__toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
|
|
@ -2982,23 +2990,28 @@ a:focus-visible,
|
|||
margin-bottom: 2px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
#mastodon .setting-toggle:first-child {
|
||||
#mastodon .setting-toggle:first-child,
|
||||
#mastodon .app-form__toggle:first-child {
|
||||
border-top-left-radius: var(--radius);
|
||||
border-top-right-radius: var(--radius);
|
||||
}
|
||||
#mastodon .setting-toggle:last-child {
|
||||
#mastodon .setting-toggle:last-child,
|
||||
#mastodon .app-form__toggle:last-child {
|
||||
border-bottom-left-radius: var(--radius);
|
||||
border-bottom-right-radius: var(--radius);
|
||||
}
|
||||
#mastodon .setting-toggle .react-toggle {
|
||||
#mastodon .setting-toggle .react-toggle,
|
||||
#mastodon .app-form__toggle .react-toggle {
|
||||
order: 2;
|
||||
}
|
||||
#mastodon .setting-toggle .setting-toggle__label {
|
||||
#mastodon .setting-toggle .setting-toggle__label,
|
||||
#mastodon .app-form__toggle .setting-toggle__label {
|
||||
margin-bottom: 0 !important;
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
}
|
||||
#mastodon .setting-toggle::before {
|
||||
#mastodon .setting-toggle::before,
|
||||
#mastodon .app-form__toggle::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
|
|
@ -3008,37 +3021,40 @@ a:focus-visible,
|
|||
pointer-events: none;
|
||||
}
|
||||
#mastodon .setting-toggle:hover::before,
|
||||
#mastodon .setting-toggle:focus-within::before {
|
||||
#mastodon .app-form__toggle:hover::before,
|
||||
#mastodon .setting-toggle:focus-within::before,
|
||||
#mastodon .app-form__toggle:focus-within::before {
|
||||
opacity: 1;
|
||||
}
|
||||
#mastodon .navigation-panel {
|
||||
#mastodon .navigation-panel.navigation-panel {
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - var(--top) - 50px + var(--radius));
|
||||
padding-bottom: 10px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
margin-top: calc(0px - var(--radius));
|
||||
padding-top: calc(10px + var(--radius));
|
||||
}
|
||||
#mastodon .navigation-panel > hr {
|
||||
#mastodon .navigation-panel.navigation-panel > hr {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .navigation-panel hr {
|
||||
#mastodon .navigation-panel.navigation-panel hr {
|
||||
margin-inline: 15px;
|
||||
}
|
||||
@media (min-width: 1175px) {
|
||||
#mastodon .navigation-panel {
|
||||
#mastodon .navigation-panel.navigation-panel {
|
||||
padding-top: calc(var(--radius) + 10px);
|
||||
margin-top: calc(50px - var(--radius));
|
||||
}
|
||||
#mastodon .navigation-panel .navigation-panel__logo .column-link,
|
||||
#mastodon .navigation-panel .navigation-panel__logo hr {
|
||||
#mastodon .navigation-panel.navigation-panel .navigation-panel__logo .column-link,
|
||||
#mastodon .navigation-panel.navigation-panel .navigation-panel__logo hr {
|
||||
display: none !important;
|
||||
}
|
||||
#mastodon .navigation-panel .switch-to-advanced {
|
||||
#mastodon .navigation-panel.navigation-panel .switch-to-advanced {
|
||||
border-radius: var(--radius);
|
||||
margin-top: 0;
|
||||
}
|
||||
#mastodon .navigation-panel [href="/settings/preferences"] {
|
||||
#mastodon .navigation-panel.navigation-panel [href="/settings/preferences"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -3250,6 +3266,7 @@ a:focus-visible,
|
|||
margin-inline-end: 280px;
|
||||
padding-top: 12px;
|
||||
position: static;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
.layout-single-column #mastodon .columns-area__panels__main {
|
||||
margin-inline: 10px !important;
|
||||
|
|
@ -3340,9 +3357,6 @@ a:focus-visible,
|
|||
#mastodon .picture-in-picture__footer {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#mastodon .columns-area--mobile > .column > .column-header__wrapper {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .column-header {
|
||||
border-inline: 0;
|
||||
}
|
||||
|
|
@ -3353,24 +3367,12 @@ a:focus-visible,
|
|||
height: auto;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
gap: 10px;
|
||||
gap: 5px 10px;
|
||||
flex-wrap: wrap;
|
||||
padding-block: 8px;
|
||||
border: 0 !important;
|
||||
overflow: visible;
|
||||
}
|
||||
.ui__header::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline-end: 54px;
|
||||
top: 100%;
|
||||
width: var(--radius);
|
||||
height: var(--radius);
|
||||
background: inherit;
|
||||
mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000);
|
||||
-webkit-mask: radial-gradient(var(--radius) at 0px var(--radius), rgba(0,0,0,0) 100%, #000);
|
||||
z-index: 9999;
|
||||
}
|
||||
.rtl .ui__header::after {
|
||||
transform: scaleX(-1);
|
||||
backdrop-filter: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
.ui__header .ui__header__logo {
|
||||
padding-block: 5px !important;
|
||||
|
|
@ -3378,7 +3380,7 @@ a:focus-visible,
|
|||
.ui__header .ui__header__links {
|
||||
min-width: max-content;
|
||||
position: sticky;
|
||||
inset-inline-end: 50px;
|
||||
inset-inline-end: 55px;
|
||||
background: inherit;
|
||||
}
|
||||
:has(body) .ui__header .ui__header__links {
|
||||
|
|
@ -3397,7 +3399,7 @@ a:focus-visible,
|
|||
width: 60px;
|
||||
font-size: 0;
|
||||
box-shadow: var(--shadow-low);
|
||||
background: inherit;
|
||||
background: var(--surface-background-color);
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
|
|
@ -3452,141 +3454,140 @@ a:focus-visible,
|
|||
}
|
||||
#mastodon .tabs-bar__wrapper {
|
||||
top: 0;
|
||||
background: none;
|
||||
z-index: 200;
|
||||
}
|
||||
#mastodon .tabs-bar__wrapper::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--elevated-tint);
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
#mastodon .column-back-button.column-back-button {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
#mastodon:has(*) [href="/publish"] {
|
||||
bottom: 70px !important;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels {
|
||||
flex-direction: column;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__main {
|
||||
width: 100%;
|
||||
border-radius: 0 !important;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
#mastodon:has(*) .tabs-bar__wrapper {
|
||||
transition: none !important;
|
||||
}
|
||||
#mastodon:has(*):has(.column-header__buttons:empty) .tabs-bar__wrapper {
|
||||
margin-top: -50px;
|
||||
margin-bottom: 2px;
|
||||
height: 48px;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational {
|
||||
display: contents;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
|
||||
position: relative !important;
|
||||
inset: unset !important;
|
||||
order: -1;
|
||||
width: unset;
|
||||
height: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0 8px;
|
||||
height: 5em;
|
||||
gap: 10px;
|
||||
border-block: 1px solid;
|
||||
overflow: scroll hidden;
|
||||
align-items: center;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational hr {
|
||||
display: none;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name > span,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__sparkline {
|
||||
display: none;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name {
|
||||
all: unset;
|
||||
display: contents !important;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal::before,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4::before,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item::before,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name::before,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .navigation-panel__legal::after,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4::after,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item::after,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational .trends__item__name::after {
|
||||
content: unset;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 a span::after {
|
||||
content: ":" !important;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .flex-spacer {
|
||||
border-right: 1px solid var(--border-color);
|
||||
height: 50%;
|
||||
margin: 10px;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .getting-started__trends {
|
||||
all: unset;
|
||||
display: contents !important;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational a,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 > span {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
padding: 0.8em 1em;
|
||||
font-weight: 600;
|
||||
font-size: 1.1em;
|
||||
text-align: center;
|
||||
min-width: max-content;
|
||||
transition: padding 0.2s;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational a::before,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 > span::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;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational a i,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 > span i {
|
||||
font-size: 1em;
|
||||
width: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational a.active,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 > span.active {
|
||||
padding-inline: 1.2em;
|
||||
position: relative;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational a.active::before,
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 > span.active::before {
|
||||
inset: 0 !important;
|
||||
opacity: 0.1;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational a > span:not(:first-child),
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational h4 > span > span:not(:first-child) {
|
||||
margin-left: 0.7em;
|
||||
}
|
||||
#mastodon:has(*) .columns-area__panels__pane--navigational span {
|
||||
display: unset;
|
||||
@supports selector(.foxxo:has(.waf)) {
|
||||
#mastodon [href="/publish"] {
|
||||
bottom: 70px !important;
|
||||
}
|
||||
#mastodon .columns-area__panels {
|
||||
flex-direction: column;
|
||||
}
|
||||
#mastodon .columns-area__panels__main {
|
||||
width: 100%;
|
||||
border-radius: var(--radius) !important;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
overflow: clip !important;
|
||||
}
|
||||
#mastodon .tabs-bar__wrapper {
|
||||
transition: none !important;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational {
|
||||
display: contents;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
|
||||
position: relative !important;
|
||||
inset: unset !important;
|
||||
order: -1;
|
||||
width: unset;
|
||||
height: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational .navigation-panel {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0 8px;
|
||||
height: 5em;
|
||||
border-top: 1px solid;
|
||||
overflow: scroll hidden;
|
||||
align-items: center;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational .navigation-panel::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational hr {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item__name > span,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item__sparkline {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational .navigation-panel__legal,
|
||||
#mastodon .columns-area__panels__pane--navigational h4,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item__name {
|
||||
all: unset;
|
||||
display: contents !important;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational .navigation-panel__legal::before,
|
||||
#mastodon .columns-area__panels__pane--navigational h4::before,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item::before,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item__name::before,
|
||||
#mastodon .columns-area__panels__pane--navigational .navigation-panel__legal::after,
|
||||
#mastodon .columns-area__panels__pane--navigational h4::after,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item::after,
|
||||
#mastodon .columns-area__panels__pane--navigational .trends__item__name::after {
|
||||
content: unset;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational h4 a span::after {
|
||||
content: ":" !important;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .flex-spacer {
|
||||
border-right: 1px solid var(--border-color);
|
||||
height: 50%;
|
||||
margin: 10px;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational:has(.getting-started__trends):has(.navigation-panel__sign-in-banner) .getting-started__trends {
|
||||
all: unset;
|
||||
display: contents !important;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational:has(.getting-started__trends) .trends__item:last-child a {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational a,
|
||||
#mastodon .columns-area__panels__pane--navigational h4 > span {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
font-size: 1.1em;
|
||||
text-align: center;
|
||||
min-width: max-content;
|
||||
transition: padding 0.2s;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational a::before,
|
||||
#mastodon .columns-area__panels__pane--navigational h4 > span::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;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational a svg,
|
||||
#mastodon .columns-area__panels__pane--navigational h4 > span svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational a.active,
|
||||
#mastodon .columns-area__panels__pane--navigational h4 > span.active {
|
||||
padding-inline: 1.2em;
|
||||
margin-inline: 4px;
|
||||
position: relative;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational a.active::before,
|
||||
#mastodon .columns-area__panels__pane--navigational h4 > span.active::before {
|
||||
inset: 0 !important;
|
||||
opacity: 0.1;
|
||||
}
|
||||
#mastodon .columns-area__panels__pane--navigational span {
|
||||
display: unset;
|
||||
}
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .columns-area__panels__main {
|
||||
margin-top: 2px !important;
|
||||
|
|
@ -3601,14 +3602,20 @@ a:focus-visible,
|
|||
position: fixed;
|
||||
bottom: 0;
|
||||
inset-inline: 0;
|
||||
background: inherit;
|
||||
background: var(--background-color-tint, inherit);
|
||||
border-top: 1px solid var(--divider);
|
||||
z-index: 200;
|
||||
height: 60px;
|
||||
filter: brightness(1.2);
|
||||
height: 61px;
|
||||
visibility: visible;
|
||||
z-index: -1;
|
||||
backdrop-filter: blur(10px);
|
||||
border-top: 1px solid var(--background-border-color);
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::after {
|
||||
background: var(--elevated-tint);
|
||||
height: 60px;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .navigation-panel {
|
||||
padding-inline: 14px;
|
||||
border-top: none;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
|
@ -3631,138 +3638,13 @@ a:focus-visible,
|
|||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column {
|
||||
min-height: 100vh;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link {
|
||||
margin-inline: -0.2em;
|
||||
padding-inline: 0.7em;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] {
|
||||
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%;
|
||||
transform: translateX(10%);
|
||||
box-sizing: border-box;
|
||||
padding: 1px !important;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home']::before {
|
||||
inset-inline: 6px;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] span {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
transition: font-size 0.4s, margin 0.7s, opacity 0.2s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] i {
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] {
|
||||
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: 19.25%;
|
||||
transform: translateX(10%);
|
||||
box-sizing: border-box;
|
||||
padding: 1px !important;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications']::before {
|
||||
inset-inline: 6px;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] span {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
transition: font-size 0.4s, margin 0.7s, opacity 0.2s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] i {
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] {
|
||||
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: 38.5%;
|
||||
transform: translateX(10%);
|
||||
box-sizing: border-box;
|
||||
padding: 1px !important;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore']::before {
|
||||
inset-inline: 6px;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] span {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
transition: font-size 0.4s, margin 0.7s, opacity 0.2s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] i {
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] {
|
||||
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: 57.75%;
|
||||
transform: translateX(10%);
|
||||
box-sizing: border-box;
|
||||
padding: 1px !important;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local']::before {
|
||||
inset-inline: 6px;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] span {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
line-height: 1;
|
||||
opacity: 0;
|
||||
transition: font-size 0.4s, margin 0.7s, opacity 0.2s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] i {
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.1s;
|
||||
:root {
|
||||
--selector: '.column-link[href='/home'],.column-link[href='/notifications'],.column-link[href='/explore'],.column-link[href='/public/local'],.column-link[href='/lists']';
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'],
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'],
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'],
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'],
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] {
|
||||
position: fixed !important;
|
||||
display: flex;
|
||||
|
|
@ -3776,14 +3658,22 @@ a:focus-visible,
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 19%;
|
||||
left: 77%;
|
||||
left: 0;
|
||||
transform: translateX(10%);
|
||||
box-sizing: border-box;
|
||||
padding: 1px !important;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home']::before,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications']::before,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore']::before,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local']::before,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists']::before {
|
||||
inset-inline: 6px;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] span,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] span,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] span,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] span,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] span {
|
||||
margin: 0;
|
||||
font-size: 0;
|
||||
|
|
@ -3791,14 +3681,29 @@ a:focus-visible,
|
|||
opacity: 0;
|
||||
transition: font-size 0.4s, margin 0.7s, opacity 0.2s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] i {
|
||||
transform: scale(0.9);
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] svg,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] svg,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] svg,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] svg,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .columns-area__panels__pane__inner {
|
||||
position: sticky !important;
|
||||
top: 10px !important;
|
||||
z-index: 200;
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/home'] {
|
||||
left: 0%;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/notifications'] {
|
||||
left: 19.25%;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/explore'] {
|
||||
left: 38.5%;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/public/local'] {
|
||||
left: 57.75%;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .column-link[href='/lists'] {
|
||||
left: 77%;
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper {
|
||||
position: static;
|
||||
|
|
@ -3838,22 +3743,12 @@ a:focus-visible,
|
|||
#mastodon:not(:has(.navigation-panel__sign-in-banner)):has(.column-link.active:not([href='/home']):not([href='/notifications']):not([href='/explore']):not([href='/public/local']):not([href='/lists']):not([href^="/lists"])) .tabs-bar__wrapper .column-header__collapsible {
|
||||
visibility: visible;
|
||||
}
|
||||
#mastodon .columns-area__panels {
|
||||
justify-content: flex-start;
|
||||
max-width: 100% !important;
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
#mastodon .columns-area__panels__main {
|
||||
padding: 0 !important;
|
||||
max-width: unset;
|
||||
border-start-end-radius: var(--radius);
|
||||
overflow: clip !important;
|
||||
flex-grow: 1;
|
||||
margin-top: 1px;
|
||||
}
|
||||
#mastodon .columns-area__panels__main > .columns-area--mobile {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.is-composing .columns-area__panels__main {
|
||||
padding-bottom: 40px !important;
|
||||
}
|
||||
|
|
@ -3862,17 +3757,10 @@ a:focus-visible,
|
|||
#mastodon .columns-area__panels__main > div {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
#mastodon .column {
|
||||
flex-grow: 1;
|
||||
overflow: clip;
|
||||
}
|
||||
#mastodon .dismissable-banner {
|
||||
margin: 0;
|
||||
padding-left: 4px;
|
||||
}
|
||||
#mastodon .status {
|
||||
padding-top: 14px !important;
|
||||
}
|
||||
#mastodon .status .status__avatar {
|
||||
width: 42px !important;
|
||||
min-width: 45px !important;
|
||||
|
|
@ -3902,7 +3790,7 @@ a:focus-visible,
|
|||
padding-top: 200px;
|
||||
height: calc(100vh + 200px - 55px);
|
||||
border: 0;
|
||||
margin-inline-start: 1px;
|
||||
border-inline-start: 1px solid;
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
#mastodon .columns-area {
|
||||
|
|
@ -4675,6 +4563,7 @@ a:focus-visible,
|
|||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header {
|
||||
border-radius: var(--radius-round);
|
||||
background: var(--elevated-tint);
|
||||
margin-inline: 10px;
|
||||
overflow: hidden;
|
||||
border: 0 !important;
|
||||
|
|
@ -4692,6 +4581,7 @@ a:focus-visible,
|
|||
z-index: 2;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer > .drawer__pager {
|
||||
border: 0;
|
||||
overflow: visible !important;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer > .drawer__pager > .drawer__inner:not(.darker) {
|
||||
|
|
@ -4701,7 +4591,6 @@ a:focus-visible,
|
|||
width: calc(100% + 10px);
|
||||
padding-inline-start: 6px;
|
||||
padding-inline-end: 4px;
|
||||
padding-top: 20px;
|
||||
height: calc(100% + 20px);
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer .drawer__inner__mastodon {
|
||||
|
|
@ -4726,9 +4615,22 @@ a:focus-visible,
|
|||
padding: 0 !important;
|
||||
border-radius: var(--radius-round) var(--radius-round) 0 0;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer__inner.darker::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--elevated-tint);
|
||||
pointer-events: none;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .getting-started__trends {
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .column-header {
|
||||
border-top: 0;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .column-header__title {
|
||||
padding-block: 0;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .status {
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue