mirror of
https://git.gay/freeplay/Mastodon-Modern.git
synced 2026-01-15 08:22:57 -03:00
1.10.4 - Fixes for Mastodon's new design (Masto 4.3.0)
This commit is contained in:
Freeplay
661
modern.css
661
modern.css
@@ -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,8 @@ a:focus-visible,
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#mastodon .notification .status {
|
||||
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 +2267,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 +2454,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 +2480,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: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 +2679,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 +2832,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 +2888,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 +2923,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 +2967,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 +2976,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 +2987,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 +3018,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 +3263,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 +3354,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 +3364,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 +3377,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 +3396,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 +3451,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 +3599,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 +3635,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 +3655,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 +3678,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 +3740,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 +3754,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 +3787,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 +4560,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 +4578,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 +4588,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 +4612,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;
|
||||
}
|
||||
|
||||
332
modern.user.css
332
modern.user.css
@@ -6,9 +6,9 @@
|
||||
// *://domain.tld/*
|
||||
|
||||
|
||||
/* Update 1.10.3
|
||||
- Fixed misplaced character count in RTL
|
||||
- Fix post button being unclickable on long posts on mobile & glitch-soc
|
||||
/* Update 1.10.4
|
||||
FOR ADMINS: Do not update until Mastodon 4.3.0, unless on nightly
|
||||
- Fixes for Mastodon's bordered design
|
||||
*/
|
||||
|
||||
/* ==UserStyle==
|
||||
@@ -22,10 +22,10 @@
|
||||
|
||||
-- AUTHOR STUFF --
|
||||
@namespace Freeplay
|
||||
@author Freeplay (https://freeplay.codeberg.page/)
|
||||
@author Freeplay (https://freeplay.floof.company/)
|
||||
==/UserStyle== */
|
||||
|
||||
@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social"), domain("mastodon.cloud"), domain("bark.lgbt"), domain("wetdry.world"), domain("md.ilyamikcoder.com"), domain("techhub.social"), domain("mastodon.world"), domain("toot.io"), domain("catcatnya.com"), domain("mstdn.constellatory.net") {
|
||||
@-moz-document domain("mastodon.coffee"), domain("socel.net"), domain("brands.town"), domain("mstdn.social"), domain("social.vivaldi.net"), domain("masto.ai"), domain("mastodon.art"), domain("tech.lgbt"), domain("mastodon.social"), domain("mastodon.online"), domain("mastodon.lol"), domain("floss.social"), domain("mas.to"), domain("c.im"), domain("nerdculture.de"), domain("maly.io"), domain("corteximplant.com"), domain("queer.party"), domain("fosstodon.org"), domain("meow.social"), domain("raru.re"), domain("ani.work"), domain("kolektiva.social"), domain("home.social"), domain("mstdn.plus"), domain("mastodon.sdf.org"), domain("toot.community"), domain("sfba.social"), domain("hachyderm.io"), domain("mindly.social"), domain("mastodon.cloud"), domain("bark.lgbt"), domain("wetdry.world"), domain("md.ilyamikcoder.com"), domain("techhub.social"), domain("mastodon.world"), domain("toot.io"), domain("catcatnya.com"), domain("mstdn.constellatory.net"), domain("yiff.life") {
|
||||
/ { // This is just so I can easily collapse everything, shouldn't affect compiled code
|
||||
responsiveW1 = 1320px
|
||||
responsiveW2 = 1175px
|
||||
@@ -42,6 +42,7 @@
|
||||
--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 rgba(120,120,120, 1)
|
||||
--shadow 0 10px 40px -10px rgba(0,0,0,0.15)
|
||||
@@ -50,6 +51,14 @@
|
||||
|
||||
// --accent // not applied everywhere, just for if you have custom color scheme and want to match it
|
||||
}
|
||||
|
||||
body::before {
|
||||
content ""
|
||||
position fixed
|
||||
inset 0
|
||||
background rgba(0,0,0,0.06)
|
||||
z-index -1
|
||||
}
|
||||
|
||||
:not(body):not(.scrollable) {
|
||||
&::-webkit-scrollbar {
|
||||
@@ -152,7 +161,7 @@
|
||||
}
|
||||
input, .input-copy, select, textarea,
|
||||
.compose-form__upload-thumbnail, .button,
|
||||
button:not(.column-header__button), video, .privacy-dropdown__dropdown, .react-toggle-track,
|
||||
:not(.notification__filter-bar) > button:not(.column-header__button), video, .privacy-dropdown__dropdown, .react-toggle-track,
|
||||
.reply-indicator, .compose-form__warning {
|
||||
border-radius var(--radius) !important
|
||||
}
|
||||
@@ -268,7 +277,7 @@
|
||||
.audio-player, .search__input {
|
||||
border 0 !important
|
||||
}
|
||||
.notification__filter-bar,
|
||||
.account__section-headline, .notification__filter-bar,
|
||||
.column-header {
|
||||
border-inline 0
|
||||
}
|
||||
@@ -682,6 +691,19 @@
|
||||
padding-bottom 40vh !important
|
||||
}
|
||||
}
|
||||
.column {
|
||||
background var(--background-color)
|
||||
&::before {
|
||||
content ""
|
||||
position absolute
|
||||
inset 0
|
||||
background var(--elevated-tint)
|
||||
pointer-events none
|
||||
}
|
||||
}
|
||||
.columns-area {
|
||||
box-shadow 0 8px 24px 12px rgba(0,0,0,0.02)
|
||||
}
|
||||
.column-header__wrapper ~ .scrollable {
|
||||
overflow auto !important
|
||||
}
|
||||
@@ -822,10 +844,18 @@
|
||||
margin-top calc(0px - var(--radius)) !important
|
||||
display flex
|
||||
flex-direction column
|
||||
background inherit
|
||||
background var(--background-color)
|
||||
isolation isolate
|
||||
|
||||
&::before {
|
||||
content ""
|
||||
background var(--elevated-tint)
|
||||
position absolute
|
||||
inset 0
|
||||
pointer-events none
|
||||
}
|
||||
|
||||
&::after {
|
||||
content ""
|
||||
position absolute
|
||||
inset-inline 0
|
||||
@@ -1549,6 +1579,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.status__wrapper {
|
||||
background none
|
||||
}
|
||||
|
||||
.status, .scrollable .account {
|
||||
padding-block 15px
|
||||
&::before {
|
||||
@@ -1582,9 +1616,9 @@
|
||||
}
|
||||
}
|
||||
.notification .status {
|
||||
padding-top 0
|
||||
//padding-top 0
|
||||
.status__info {
|
||||
margin-top 10px !important
|
||||
margin-top 0px !important
|
||||
}
|
||||
.status__content ~ .media-gallery,
|
||||
.status__content ~ [style*="aspect-ratio:"] {
|
||||
@@ -1624,9 +1658,6 @@
|
||||
max-width 100%
|
||||
}
|
||||
}
|
||||
.status__prepend {
|
||||
margin-bottom -15px !important
|
||||
}
|
||||
.notification__message {
|
||||
> span, > span > span {
|
||||
display flex
|
||||
@@ -1819,12 +1850,6 @@
|
||||
}
|
||||
}
|
||||
.detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation {
|
||||
background none
|
||||
.status__prepend {
|
||||
position absolute
|
||||
font-size 0
|
||||
}
|
||||
|
||||
.status__content {
|
||||
position relative !important
|
||||
background var(--elevated-color)
|
||||
@@ -1846,24 +1871,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__wrapper-direct {
|
||||
.fa-at, .status__visibility-icon {
|
||||
font-family inherit
|
||||
font-weight 600
|
||||
color var(--accent, #8c8dff)
|
||||
width auto !important
|
||||
&::before {
|
||||
font-family FontAwesome !important
|
||||
}
|
||||
&::after {
|
||||
content attr(title)
|
||||
margin-left .4em
|
||||
}
|
||||
.status__wrapper:not(.detailed-status__wrapper-direct) {
|
||||
.status__prepend {
|
||||
position absolute
|
||||
font-size 0
|
||||
opacity 0
|
||||
}
|
||||
}
|
||||
.status-direct {
|
||||
.fa-at, .status__visibility-icon {
|
||||
.icon-at, .status__visibility-icon {
|
||||
color var(--accent, #8c8dff)
|
||||
}
|
||||
.status__info .status__relative-time {
|
||||
@@ -2038,6 +2054,20 @@
|
||||
min-height unset !important
|
||||
}
|
||||
}
|
||||
.detailed-status__wrapper {
|
||||
isolation isolate
|
||||
&::before {
|
||||
content ""
|
||||
position absolute
|
||||
inset 0
|
||||
background var(--elevated-tint)
|
||||
pointer-events none
|
||||
z-index -1
|
||||
}
|
||||
.detailed-status {
|
||||
box-shadow none
|
||||
}
|
||||
}
|
||||
.picture-in-picture {
|
||||
z-index 101
|
||||
.picture-in-picture__header {
|
||||
@@ -2140,6 +2170,7 @@
|
||||
}
|
||||
.column-header__collapsible {
|
||||
transition none
|
||||
background var(--modal-background-color)
|
||||
}
|
||||
.collapsed {
|
||||
display none
|
||||
@@ -2205,10 +2236,6 @@
|
||||
}
|
||||
.column-header > button {
|
||||
z-index 2
|
||||
display inline
|
||||
svg {
|
||||
vertical-align middle
|
||||
}
|
||||
}
|
||||
.column-header__buttons button {
|
||||
transition background .2s, transform .3s !important
|
||||
@@ -2237,19 +2264,12 @@
|
||||
inset 0
|
||||
top calc(100% + 5px)
|
||||
bottom -5px
|
||||
background inherit
|
||||
background var(--modal-background-color)
|
||||
z-index -1
|
||||
transition inset .1s
|
||||
border-radius 100px
|
||||
pointer-events none
|
||||
}
|
||||
&::after {
|
||||
// content ""
|
||||
position absolute
|
||||
inset 0
|
||||
background var(--elevated-color)
|
||||
border-radius 100%
|
||||
}
|
||||
&.active {
|
||||
// filter contrast(1.1)
|
||||
// z-index -1
|
||||
@@ -2280,8 +2300,7 @@
|
||||
}
|
||||
}
|
||||
.column-settings__row, .column-settings__hashtags {
|
||||
border-radius var(--radius)
|
||||
margin-bottom 1em
|
||||
gap 0
|
||||
}
|
||||
.column-settings__section {
|
||||
margin-bottom 4px
|
||||
@@ -2290,7 +2309,7 @@
|
||||
.column-select__control {
|
||||
border-radius var(--radius)
|
||||
}
|
||||
.setting-toggle {
|
||||
.setting-toggle, .app-form__toggle {
|
||||
display flex
|
||||
// flex-direction row-reverse
|
||||
align-items center
|
||||
@@ -2337,11 +2356,12 @@
|
||||
}
|
||||
|
||||
|
||||
.navigation-panel {
|
||||
.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))
|
||||
> hr {
|
||||
@@ -2607,6 +2627,7 @@
|
||||
padding-top 12px
|
||||
// z-index 0
|
||||
position static
|
||||
backdrop-filter none
|
||||
}
|
||||
.columns-area__panels__main {
|
||||
margin-inline 10px !important
|
||||
@@ -2622,11 +2643,8 @@
|
||||
.navigation-panel {
|
||||
background none
|
||||
border 0
|
||||
// padding-top 10px
|
||||
width 265px !important
|
||||
// height calc(100vh - 50px) !important
|
||||
padding-bottom 10px
|
||||
// padding-inline 10px
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2634,9 +2652,6 @@
|
||||
// Mobile
|
||||
@media (max-width mobileW - 1) {
|
||||
compactStatuses()
|
||||
.columns-area--mobile > .column > .column-header__wrapper {
|
||||
display none
|
||||
}
|
||||
.column-header {
|
||||
border-inline 0
|
||||
}
|
||||
@@ -2647,34 +2662,19 @@
|
||||
height auto
|
||||
position relative
|
||||
box-sizing border-box
|
||||
gap 10px
|
||||
gap 5px 10px
|
||||
flex-wrap wrap
|
||||
padding-block 8px
|
||||
border 0 !important
|
||||
overflow visible
|
||||
|
||||
&::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),#0000 100%,#000)
|
||||
-webkit-mask @mask
|
||||
z-index 9999
|
||||
|
||||
/.rtl & {
|
||||
transform scaleX(-1)
|
||||
}
|
||||
}
|
||||
|
||||
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 50px
|
||||
inset-inline-end 55px
|
||||
background inherit
|
||||
:has(body) & {
|
||||
right 0
|
||||
@@ -2693,7 +2693,7 @@
|
||||
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;
|
||||
@@ -2750,15 +2750,22 @@
|
||||
}
|
||||
.tabs-bar__wrapper {
|
||||
top 0
|
||||
background none
|
||||
z-index 200
|
||||
&::after {
|
||||
content ""
|
||||
position absolute
|
||||
inset 0
|
||||
background var(--elevated-tint)
|
||||
pointer-events none
|
||||
z-index 2
|
||||
}
|
||||
}
|
||||
.column-back-button.column-back-button {
|
||||
border-radius 0 !important
|
||||
}
|
||||
|
||||
// Navigation
|
||||
&:has(*) { // would've rather used @supports but stylus is dumb apparently
|
||||
@supports unquote("selector(.foxxo:has(.waf))") {
|
||||
[href="/publish"] {
|
||||
bottom 70px !important
|
||||
}
|
||||
@@ -2767,20 +2774,14 @@
|
||||
}
|
||||
.columns-area__panels__main {
|
||||
width 100%
|
||||
border-radius 0 !important
|
||||
border-radius var(--radius) !important
|
||||
margin 0 !important
|
||||
border 0 !important
|
||||
overflow clip !important
|
||||
}
|
||||
.tabs-bar__wrapper {
|
||||
transition none !important
|
||||
}
|
||||
&:has(.column-header__buttons:empty) {
|
||||
.tabs-bar__wrapper {
|
||||
margin-top -50px
|
||||
margin-bottom 2px
|
||||
height 48px
|
||||
}
|
||||
}
|
||||
|
||||
.columns-area__panels__pane--navigational {
|
||||
display contents
|
||||
@@ -2798,8 +2799,7 @@
|
||||
padding 0
|
||||
padding 0 8px
|
||||
height 5em
|
||||
gap 10px
|
||||
border-block 1px solid
|
||||
border-top 1px solid
|
||||
overflow scroll hidden
|
||||
align-items center
|
||||
&::-webkit-scrollbar {
|
||||
@@ -2841,11 +2841,9 @@
|
||||
}
|
||||
}
|
||||
a, h4 > span {
|
||||
// background var(--elevated-color)
|
||||
position relative
|
||||
overflow hidden
|
||||
border-radius var(--radius)
|
||||
padding .8em 1em
|
||||
font-weight 600
|
||||
font-size 1.1em
|
||||
text-align center
|
||||
@@ -2860,22 +2858,19 @@
|
||||
border-radius inherit
|
||||
transition inset .4s cubic-bezier(0,0,0,1.2), opacity .2s
|
||||
}
|
||||
i {
|
||||
font-size 1em
|
||||
width auto
|
||||
margin-right 0
|
||||
svg {
|
||||
width 1em
|
||||
height @width
|
||||
}
|
||||
&.active {
|
||||
padding-inline 1.2em
|
||||
margin-inline 4px
|
||||
position relative
|
||||
&::before {
|
||||
inset 0 !important
|
||||
opacity .1
|
||||
}
|
||||
}
|
||||
> span:not(:first-child) {
|
||||
margin-left .7em
|
||||
}
|
||||
}
|
||||
span {
|
||||
display unset
|
||||
@@ -2891,8 +2886,6 @@
|
||||
margin-top 2px !important
|
||||
}
|
||||
.ui__header {
|
||||
// position static !important
|
||||
// visibility collapse
|
||||
z-index 199
|
||||
&::before, &::after {
|
||||
all unset
|
||||
@@ -2900,15 +2893,22 @@
|
||||
position fixed
|
||||
bottom 0
|
||||
inset-inline 0
|
||||
background inherit
|
||||
background var(--background-color-tint)
|
||||
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)
|
||||
}
|
||||
&::after {
|
||||
background var(--elevated-tint)
|
||||
height 60px
|
||||
//filter brightness(1.1)
|
||||
}
|
||||
}
|
||||
.navigation-panel {
|
||||
padding-inline 14px
|
||||
border-top none
|
||||
margin-top -10px
|
||||
a {
|
||||
@@ -2932,44 +2932,53 @@
|
||||
.column {
|
||||
min-height 100vh
|
||||
}
|
||||
.column-link {
|
||||
margin-inline -.2em
|
||||
padding-inline .7em
|
||||
}
|
||||
|
||||
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
|
||||
transform translateX(10%)
|
||||
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}] {
|
||||
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 (20% * i) - (.75% * i)
|
||||
transform translateX(10%)
|
||||
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
|
||||
}
|
||||
i {
|
||||
transform scale(.9)
|
||||
transition transform .1s
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2983,11 +2992,6 @@
|
||||
return n
|
||||
}
|
||||
&:has(.column-link.active{bottomBarNotSelector(bottomBarButtons)}:not([href^="/lists"])) {
|
||||
.columns-area__panels__pane__inner {
|
||||
position sticky !important
|
||||
top 10px !important
|
||||
z-index 200
|
||||
}
|
||||
.tabs-bar__wrapper {
|
||||
// position sticky
|
||||
position static
|
||||
@@ -3028,24 +3032,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-area__panels {
|
||||
// overflow-x scroll !important
|
||||
justify-content flex-start
|
||||
max-width 100% !important
|
||||
flex-wrap nowrap !important
|
||||
}
|
||||
.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
|
||||
// order 2
|
||||
> .columns-area--mobile {
|
||||
overflow visible !important
|
||||
}
|
||||
~/ .is-composing .columns-area__panels__main {
|
||||
padding-bottom 40px !important
|
||||
}
|
||||
@@ -3054,17 +3045,12 @@
|
||||
}
|
||||
|
||||
}
|
||||
.column {
|
||||
flex-grow 1
|
||||
overflow clip
|
||||
}
|
||||
|
||||
.dismissable-banner {
|
||||
margin 0
|
||||
padding-left 4px
|
||||
}
|
||||
.status {
|
||||
padding-top 14px !important
|
||||
.status__avatar {
|
||||
width 42px !important
|
||||
min-width 45px !important
|
||||
@@ -3082,8 +3068,7 @@
|
||||
}
|
||||
|
||||
.status__action-bar {
|
||||
margin-bottom -5px
|
||||
|
||||
margin-bottom -5px
|
||||
.icon-button {
|
||||
margin 0 !important
|
||||
justify-content center
|
||||
@@ -3099,7 +3084,7 @@
|
||||
padding-top 200px
|
||||
height calc(100vh + 200px - 55px)
|
||||
border 0
|
||||
margin-inline-start 1px
|
||||
border-inline-start 1px solid
|
||||
padding-bottom 90px
|
||||
}
|
||||
|
||||
@@ -3522,6 +3507,7 @@
|
||||
// width 285px
|
||||
.drawer__header {
|
||||
border-radius var(--radius-round)
|
||||
background var(--elevated-tint)
|
||||
margin-inline 10px
|
||||
overflow hidden
|
||||
border 0 !important
|
||||
@@ -3539,6 +3525,7 @@
|
||||
z-index 2
|
||||
}
|
||||
& > .drawer__pager {
|
||||
border 0
|
||||
overflow visible !important
|
||||
& > .drawer__inner:not(.darker) {
|
||||
top -20px
|
||||
@@ -3549,7 +3536,6 @@
|
||||
width calc(100% + 10px)
|
||||
padding-inline-start 6px
|
||||
padding-inline-end 4px
|
||||
padding-top 20px
|
||||
height calc(100% + 20px)
|
||||
}
|
||||
}
|
||||
@@ -3575,10 +3561,24 @@
|
||||
.drawer__inner.darker {
|
||||
padding 0 !important
|
||||
border-radius var(--radius-round) var(--radius-round) 0 0
|
||||
&::before {
|
||||
content ""
|
||||
position absolute
|
||||
inset 0
|
||||
background var(--elevated-tint)
|
||||
pointer-events none
|
||||
}
|
||||
}
|
||||
.getting-started__trends {
|
||||
padding 0px 20px
|
||||
}
|
||||
|
||||
.column-header {
|
||||
border-top 0
|
||||
}
|
||||
.column-header__title {
|
||||
padding-block 0
|
||||
}
|
||||
|
||||
.status {
|
||||
padding-bottom 10px !important
|
||||
|
||||
Reference in New Issue
Block a user