mirror of
https://git.gay/freeplay/Mastodon-Modern.git
synced 2026-01-15 08:22:57 -03:00
1.10.0
- Post slide up animation is now just a fade - Fixed overflowing video in notifications - Banner glow should work better now on Chromium - Styled account rows - Other fixes & spacing glitch-soc: - Fixed cut off header - Advanced view getting started column
This commit is contained in:
Freeplay
@@ -104,8 +104,8 @@ body.app-body.flavour-glitch > #mastodon .reactions-bar button:not(.active) {
|
||||
body.app-body.flavour-glitch > #mastodon .reactions-bar:empty {
|
||||
display: none;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .collapsed > .status__info .notification__message {
|
||||
padding-bottom: 0 !important;
|
||||
body.app-body.flavour-glitch > #mastodon .notification__message + .status {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .notification > .notification__message {
|
||||
padding-inline: 15px !important;
|
||||
@@ -119,22 +119,6 @@ body.app-body.flavour-glitch > #mastodon .notification__favourite-icon-wrapper i
|
||||
width: 1.28571429em !important;
|
||||
text-align: center;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .status__prepend,
|
||||
body.app-body.flavour-glitch > #mastodon .status__info .notification__message {
|
||||
padding-bottom: 15px !important;
|
||||
padding-top: 0 !important;
|
||||
margin-top: -5px !important;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .status__prepend .status__prepend-icon-wrapper,
|
||||
body.app-body.flavour-glitch > #mastodon .status__info .notification__message .status__prepend-icon-wrapper {
|
||||
all: unset;
|
||||
margin-inline-end: 10px;
|
||||
display: flex;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .status__prepend .status__prepend-icon-wrapper i,
|
||||
body.app-body.flavour-glitch > #mastodon .status__info .notification__message .status__prepend-icon-wrapper i {
|
||||
margin: auto;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .detailed-status__wrapper .focusable:not(.status)::before {
|
||||
content: unset !important;
|
||||
}
|
||||
@@ -150,9 +134,6 @@ body.app-body.flavour-glitch > #mastodon .pillbar-button {
|
||||
border-radius: 0 !important;
|
||||
padding: 6px;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .account__header__account-note {
|
||||
margin-block: 10px 0;
|
||||
}
|
||||
body.app-body.flavour-glitch > #mastodon .account__header__account-note:focus-within {
|
||||
border-radius: var(--radius) !important;
|
||||
}
|
||||
@@ -185,5 +166,7 @@ body.app-body.flavour-glitch > #mastodon .account-card .media-modal__close::befo
|
||||
flex-grow: 0.2;
|
||||
}
|
||||
.layout-multiple-columns.flavour-glitch .drawer__inner {
|
||||
margin-top: -10px;
|
||||
margin-top: -20px;
|
||||
max-height: unset !important;
|
||||
min-height: calc(100% + 40px);
|
||||
}
|
||||
318
modern.css
318
modern.css
@@ -406,6 +406,8 @@ a:focus-visible,
|
||||
}
|
||||
.scrollable,
|
||||
.detailed-status__action-bar,
|
||||
.column-back-button,
|
||||
.column-header__collapsible.collapsed,
|
||||
.column-header__collapsible-inner,
|
||||
.audio-player,
|
||||
.search__input {
|
||||
@@ -507,6 +509,7 @@ a:focus-visible,
|
||||
}
|
||||
.emoji-mart-category-list button {
|
||||
position: relative;
|
||||
padding: 0 !important;
|
||||
padding-top: 100% !important;
|
||||
}
|
||||
.emoji-mart-category-list button img,
|
||||
@@ -540,18 +543,22 @@ a:focus-visible,
|
||||
#mastodon .compose-panel > * {
|
||||
padding-inline: 0;
|
||||
}
|
||||
#mastodon .compose-panel > .navigation-bar {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
#mastodon .compose-panel .search,
|
||||
.drawer .search {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
#mastodon .search {
|
||||
border-radius: var(--radius);
|
||||
margin-inline: -5px;
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
#mastodon .search label {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#mastodon .search input {
|
||||
border-radius: var(--radius-round) !important;
|
||||
padding-inline-start: 20px !important;
|
||||
padding-inline-end: 40px !important;
|
||||
}
|
||||
#mastodon .search .search__icon > i {
|
||||
margin-inline: 5px;
|
||||
@@ -572,6 +579,13 @@ a:focus-visible,
|
||||
#mastodon .compose-form {
|
||||
min-height: unset;
|
||||
overflow: unset;
|
||||
gap: 15px;
|
||||
}
|
||||
#mastodon .compose-form > * {
|
||||
margin: 0 !important;
|
||||
}
|
||||
#mastodon .compose-form > [aria-hidden="true"] {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .compose-form > .navigation-bar {
|
||||
margin-top: 10px;
|
||||
@@ -610,6 +624,7 @@ a:focus-visible,
|
||||
#mastodon .compose-form .compose-form__publish-button-wrapper {
|
||||
overflow: visible !important;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
#mastodon .compose-form .compose-form__upload__actions {
|
||||
z-index: 5;
|
||||
@@ -938,7 +953,7 @@ a:focus-visible,
|
||||
margin-bottom: 10px;
|
||||
background-color: inherit;
|
||||
border-radius: var(--radius) !important;
|
||||
animation: slideUp backwards 0.4s cubic-bezier(0, 1, 1, 1);
|
||||
animation: fade backwards 0.4s cubic-bezier(0, 1, 1, 1);
|
||||
}
|
||||
#mastodon .account-timeline__header .account__moved-note {
|
||||
box-sizing: border-box;
|
||||
@@ -978,43 +993,51 @@ a:focus-visible,
|
||||
top: var(--radius);
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border: 0;
|
||||
padding: 0 20px;
|
||||
padding-inline: 20px;
|
||||
border-radius: var(--radius) var(--radius) 0 0;
|
||||
margin-top: calc(0px - var(--radius)) !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: inherit;
|
||||
isolation: isolate;
|
||||
}
|
||||
@media (max-width: 890px) {
|
||||
#mastodon .account-timeline__header .account__header__bar {
|
||||
padding-inline: 15px;
|
||||
}
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bar::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline: 0;
|
||||
height: 95px;
|
||||
background: inherit;
|
||||
z-index: -1;
|
||||
border-radius: var(--radius);
|
||||
mask: linear-gradient(to bottom, transparent, #000);
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bar .account__header__tabs {
|
||||
overflow: visible !important;
|
||||
position: relative;
|
||||
align-items: flex-end;
|
||||
padding: 0;
|
||||
height: unset !important;
|
||||
margin-top: -55px !important;
|
||||
isolation: isolate;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bar .account__header__tabs::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -20px;
|
||||
right: -20px;
|
||||
bottom: -100px;
|
||||
top: -55px;
|
||||
inset-inline: 0;
|
||||
height: 150px;
|
||||
backdrop-filter: blur(40px);
|
||||
filter: brightness(1.1);
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
z-index: -1;
|
||||
z-index: -2;
|
||||
clip-path: inset(55px 0 0 0 round var(--radius));
|
||||
mask: linear-gradient(transparent 55px, #000 50px, transparent);
|
||||
-webkit-mask: linear-gradient(transparent 55px, #000 50px, transparent);
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bar .account__header__tabs ~ div {
|
||||
z-index: 2;
|
||||
@@ -1049,31 +1072,29 @@ a:focus-visible,
|
||||
gap: 0 0.4em;
|
||||
font-weight: 600;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__extra {
|
||||
margin-top: 5px;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bio {
|
||||
margin: 0;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bio > * {
|
||||
padding-inline: 0;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bio .account__header__content {
|
||||
padding: 0px;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__badges {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__badges span {
|
||||
font-weight: 600;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bio {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__bio > * {
|
||||
padding-inline: 0;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__content {
|
||||
padding-top: 0;
|
||||
}
|
||||
#mastodon .account-timeline__header .account__header__extra {
|
||||
margin-top: 1em;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields,
|
||||
#mastodon .account__header__fields,
|
||||
#mastodon .account__header__account-note {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px;
|
||||
margin-bottom: 20px;
|
||||
background: none;
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
@@ -1081,19 +1102,12 @@ a:focus-visible,
|
||||
max-width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__fields:not(:first-child),
|
||||
#mastodon .account__header__account-note.account__header__fields:not(:first-child) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: -10px;
|
||||
#mastodon .account__header__fields:first-child,
|
||||
#mastodon .account__header__account-note:first-child {
|
||||
margin-block: 5px 15px;
|
||||
}
|
||||
.public-account-bio .account__header__fields {
|
||||
padding: 20px !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl,
|
||||
#mastodon .account__header__account-note dl,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note {
|
||||
#mastodon .account__header__fields dl,
|
||||
#mastodon .account__header__account-note dl {
|
||||
display: inline;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
@@ -1103,37 +1117,27 @@ a:focus-visible,
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl:not(.verified),
|
||||
#mastodon .account__header__account-note dl:not(.verified),
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:not(.verified),
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note:not(.verified) {
|
||||
#mastodon .account__header__fields dl:not(.verified),
|
||||
#mastodon .account__header__account-note dl:not(.verified) {
|
||||
background-color: var(--elevated-color);
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dt,
|
||||
#mastodon .account__header__account-note dl dt,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dt,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dt {
|
||||
#mastodon .account__header__fields dl dt,
|
||||
#mastodon .account__header__account-note dl dt {
|
||||
all: unset;
|
||||
color: unset;
|
||||
opacity: 0.9;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd,
|
||||
#mastodon .account__header__account-note dl dd,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd {
|
||||
#mastodon .account__header__fields dl dd,
|
||||
#mastodon .account__header__account-note dl dd {
|
||||
padding: 0;
|
||||
white-space: unset;
|
||||
max-height: unset;
|
||||
text-align: unset;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd > span > a:first-child:last-child::after,
|
||||
#mastodon .account__header__fields dl dd > span > a:first-child:last-child::after,
|
||||
#mastodon .account__header__account-note dl dd > span > a:first-child:last-child::after,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child::after,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child::after,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd .h-card:first-child:last-child a::after,
|
||||
#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a::after,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a::after,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a::after {
|
||||
#mastodon .account__header__fields dl dd .h-card:first-child:last-child a::after,
|
||||
#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -1141,58 +1145,42 @@ a:focus-visible,
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd > span > a:first-child:last-child:hover:after,
|
||||
#mastodon .account__header__fields dl dd > span > a:first-child:last-child:hover:after,
|
||||
#mastodon .account__header__account-note dl dd > span > a:first-child:last-child:hover:after,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:hover:after,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:hover:after,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd .h-card:first-child:last-child a:hover:after,
|
||||
#mastodon .account__header__fields dl dd .h-card:first-child:last-child a:hover:after,
|
||||
#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a:hover:after,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:hover:after,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:hover:after,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd > span > a:first-child:last-child:focus:after,
|
||||
#mastodon .account__header__fields dl dd > span > a:first-child:last-child:focus:after,
|
||||
#mastodon .account__header__account-note dl dd > span > a:first-child:last-child:focus:after,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:focus:after,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd > span > a:first-child:last-child:focus:after,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd .h-card:first-child:last-child a:focus:after,
|
||||
#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a:focus:after,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:focus:after,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd .h-card:first-child:last-child a:focus:after {
|
||||
#mastodon .account__header__fields dl dd .h-card:first-child:last-child a:focus:after,
|
||||
#mastodon .account__header__account-note dl dd .h-card:first-child:last-child a:focus:after {
|
||||
opacity: 1;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified,
|
||||
#mastodon .account__header__account-note dl dd.verified,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified {
|
||||
#mastodon .account__header__fields dl dd.verified,
|
||||
#mastodon .account__header__account-note dl dd.verified {
|
||||
overflow: visible !important;
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::before,
|
||||
#mastodon .account__header__fields dl dd.verified a::before,
|
||||
#mastodon .account__header__account-note dl dd.verified a::before,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::before,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::before,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::after,
|
||||
#mastodon .account__header__account-note dl dd.verified a::after,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::after,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::after {
|
||||
#mastodon .account__header__fields dl dd.verified a::after,
|
||||
#mastodon .account__header__account-note dl dd.verified a::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: currentcolor;
|
||||
opacity: 0.2;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields dl dd.verified a::after,
|
||||
#mastodon .account__header__account-note dl dd.verified a::after,
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note dd.verified a::after,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note dd.verified a::after {
|
||||
#mastodon .account__header__fields dl dd.verified a::after,
|
||||
#mastodon .account__header__account-note dl dd.verified a::after {
|
||||
background: linear-gradient(20deg, currentcolor, transparent) !important;
|
||||
opacity: 0.2 !important;
|
||||
z-index: -2;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note {
|
||||
#mastodon .account__header__fields.account__header__account-note,
|
||||
#mastodon .account__header__account-note.account__header__account-note {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px !important;
|
||||
gap: 0;
|
||||
border: 0;
|
||||
padding: 0 !important;
|
||||
@@ -1202,8 +1190,8 @@ a:focus-visible,
|
||||
font-size: 12px;
|
||||
width: unset;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note label,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note label {
|
||||
#mastodon .account__header__fields.account__header__account-note label,
|
||||
#mastodon .account__header__account-note.account__header__account-note label {
|
||||
z-index: 2;
|
||||
padding: 0 !important;
|
||||
padding-inline-end: 0.7em !important;
|
||||
@@ -1213,20 +1201,20 @@ a:focus-visible,
|
||||
font-weight: inherit;
|
||||
vertical-align: unset;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:focus-within,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note:focus-within {
|
||||
#mastodon .account__header__fields.account__header__account-note:focus-within,
|
||||
#mastodon .account__header__account-note.account__header__account-note:focus-within {
|
||||
padding: 0.5em 0.7em !important;
|
||||
margin-inline: -5px !important;
|
||||
border: 1px solid;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note:not(:focus-within),
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note:not(:focus-within) {
|
||||
#mastodon .account__header__fields.account__header__account-note:not(:focus-within),
|
||||
#mastodon .account__header__account-note.account__header__account-note:not(:focus-within) {
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid;
|
||||
padding-bottom: 0.4em !important;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note textarea,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note textarea {
|
||||
#mastodon .account__header__fields.account__header__account-note textarea,
|
||||
#mastodon .account__header__account-note.account__header__account-note textarea {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
margin: 0 !important;
|
||||
@@ -1242,12 +1230,12 @@ a:focus-visible,
|
||||
vertical-align: unset;
|
||||
background: none;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note textarea::placeholder,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note textarea::placeholder {
|
||||
#mastodon .account__header__fields.account__header__account-note textarea::placeholder,
|
||||
#mastodon .account__header__account-note.account__header__account-note textarea::placeholder {
|
||||
font-weight: 600;
|
||||
}
|
||||
#mastodon :not(.admin-account-bio) > div > .account__header__fields.account__header__account-note.account__header__account-note label,
|
||||
#mastodon .account__header__account-note.account__header__account-note.account__header__account-note label {
|
||||
#mastodon .account__header__fields.account__header__account-note label,
|
||||
#mastodon .account__header__account-note.account__header__account-note label {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
padding-inline: 14px;
|
||||
@@ -1286,6 +1274,9 @@ a:focus-visible,
|
||||
#mastodon :not(.explore__search-header) + .account__section-headline:not(:first-child) button::before {
|
||||
border-color: transparent transparent var(--border-color);
|
||||
}
|
||||
#mastodon .account__disclaimer {
|
||||
border-top: 1px solid;
|
||||
}
|
||||
#mastodon .account-gallery__container {
|
||||
border-radius: var(--radius);
|
||||
overflow: clip;
|
||||
@@ -1528,6 +1519,58 @@ a:focus-visible,
|
||||
#mastodon .account-card::after {
|
||||
content: unset !important;
|
||||
}
|
||||
#mastodon .account__wrapper {
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#mastodon .account__wrapper .account__display-name {
|
||||
flex-grow: 100;
|
||||
}
|
||||
#mastodon .account__wrapper .account__contents {
|
||||
line-height: 1.4;
|
||||
flex-basis: 70%;
|
||||
width: 100px;
|
||||
flex-grow: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#mastodon .account__wrapper .account__contents * {
|
||||
line-height: unset !important;
|
||||
}
|
||||
#mastodon .account__wrapper .account__contents .display-name {
|
||||
height: unset;
|
||||
margin: 0;
|
||||
width: 27ch !important;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#mastodon .account__wrapper .account__contents .display-name span {
|
||||
display: block;
|
||||
}
|
||||
#mastodon .account__wrapper .account__contents .account__details {
|
||||
flex-direction: column;
|
||||
width: 25ch;
|
||||
}
|
||||
#mastodon .account__wrapper .account__contents .account__details span {
|
||||
white-space: break-spaces !important;
|
||||
}
|
||||
#mastodon .account__wrapper .account__contents .account__details:has(.verified-badge) > span:first-child {
|
||||
display: none;
|
||||
}
|
||||
#mastodon .account__wrapper .account__relationship {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
min-width: 10ch;
|
||||
gap: 10px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#mastodon .account__wrapper .account__relationship button {
|
||||
background: var(--elevated-color);
|
||||
color: inherit;
|
||||
}
|
||||
#mastodon .scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper::after {
|
||||
content: unset;
|
||||
}
|
||||
@@ -1540,8 +1583,8 @@ a:focus-visible,
|
||||
.scrollable :not(.focusable) > .account,
|
||||
.timeline-hint {
|
||||
overflow: hidden;
|
||||
transition: background 0.2s, box-shadow 0.4s, margin 0.2s, border 0.2s;
|
||||
animation: slideUp backwards 0.4s cubic-bezier(0, 1, 1, 1);
|
||||
transition: background 0.2s, box-shadow 0.4s, border 0.2s;
|
||||
animation: fade 0.4s backwards cubic-bezier(0, 1, 1, 1);
|
||||
position: relative;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
@@ -1569,8 +1612,7 @@ a:focus-visible,
|
||||
.account-card.account-card,
|
||||
.scrollable :not(.focusable) > .account.account-card,
|
||||
.timeline-hint.account-card {
|
||||
animation-name: slideUpFade;
|
||||
animation-delay: 0.44s;
|
||||
animation: slideUpFade backwards 0.44s cubic-bezier(0, 1, 1, 1);
|
||||
}
|
||||
.focusable.trends__item:nth-child(1),
|
||||
.entry.trends__item:nth-child(1),
|
||||
@@ -2126,6 +2168,8 @@ a:focus-visible,
|
||||
width: 100px;
|
||||
margin: 0 !important;
|
||||
opacity: 0.5;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
#mastodon .notification .status .status__content ~ [style*="aspect-ratio:"] .video-player__controls {
|
||||
display: none;
|
||||
@@ -2347,6 +2391,15 @@ a:focus-visible,
|
||||
#mastodon .status__content__spoiler-link:focus::after {
|
||||
opacity: 1;
|
||||
}
|
||||
#mastodon .detailed-status__wrapper-direct .detailed-status {
|
||||
background: none;
|
||||
}
|
||||
#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,
|
||||
@@ -2775,10 +2828,6 @@ a:focus-visible,
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-back-button,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-back-button {
|
||||
background: none;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header {
|
||||
background: none !important;
|
||||
@@ -2788,6 +2837,11 @@ 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 {
|
||||
@@ -2798,7 +2852,7 @@ a:focus-visible,
|
||||
margin: 5px;
|
||||
margin-inline-start: 0;
|
||||
font-size: 0.9em;
|
||||
padding-inline: 15px;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header__buttons button .column-header__icon,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button .column-header__icon {
|
||||
@@ -2808,6 +2862,14 @@ a:focus-visible,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button:not(.active) {
|
||||
background: var(--elevated-color) !important;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header__buttons button svg,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button svg {
|
||||
margin: 0;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header__buttons button span,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button span {
|
||||
display: none;
|
||||
}
|
||||
.layout-single-column .tabs-bar__wrapper .column-header__buttons button::before,
|
||||
.layout-single-column .column-back-button--slim .column-back-button .column-header__buttons button::before {
|
||||
content: "";
|
||||
@@ -3047,28 +3109,28 @@ a:focus-visible,
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.getting-started,
|
||||
#mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable {
|
||||
#mastodon .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable {
|
||||
position: relative;
|
||||
padding: 5px 10px !important;
|
||||
}
|
||||
.getting-started .getting-started__wrapper,
|
||||
#mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__wrapper {
|
||||
#mastodon .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable .getting-started__wrapper {
|
||||
background: none;
|
||||
}
|
||||
.getting-started .getting-started__wrapper a,
|
||||
#mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__wrapper a,
|
||||
#mastodon .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable .getting-started__wrapper a,
|
||||
.getting-started .getting-started__wrapper .column-subheading,
|
||||
#mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__wrapper .column-subheading {
|
||||
#mastodon .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable .getting-started__wrapper .column-subheading {
|
||||
border: 0 !important;
|
||||
padding: 20px;
|
||||
background: none;
|
||||
}
|
||||
.getting-started .getting-started__footer,
|
||||
#mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__footer {
|
||||
#mastodon .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable .getting-started__footer {
|
||||
padding-inline: 20px;
|
||||
}
|
||||
.getting-started .getting-started__footer a span,
|
||||
#mastodon .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable .getting-started__footer a span {
|
||||
#mastodon .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable .getting-started__footer a span {
|
||||
font-size: 1.1em !important;
|
||||
line-height: 2;
|
||||
}
|
||||
@@ -3500,6 +3562,7 @@ a:focus-visible,
|
||||
}
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::before,
|
||||
#mastodon:not(:has(.navigation-panel__sign-in-banner)) .ui__header::after {
|
||||
all: unset;
|
||||
content: "";
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@@ -3543,7 +3606,7 @@ a:focus-visible,
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
bottom: 4px;
|
||||
z-index: 200;
|
||||
z-index: 201;
|
||||
font-size: 1.7em;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
@@ -3575,7 +3638,7 @@ a:focus-visible,
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
bottom: 4px;
|
||||
z-index: 200;
|
||||
z-index: 201;
|
||||
font-size: 1.7em;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
@@ -3607,7 +3670,7 @@ a:focus-visible,
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
bottom: 4px;
|
||||
z-index: 200;
|
||||
z-index: 201;
|
||||
font-size: 1.7em;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
@@ -3639,7 +3702,7 @@ a:focus-visible,
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
bottom: 4px;
|
||||
z-index: 200;
|
||||
z-index: 201;
|
||||
font-size: 1.7em;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
@@ -3671,7 +3734,7 @@ a:focus-visible,
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
bottom: 4px;
|
||||
z-index: 200;
|
||||
z-index: 201;
|
||||
font-size: 1.7em;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
@@ -3741,10 +3804,6 @@ 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 .explore__search-header,
|
||||
#mastodon .search input {
|
||||
background: var(--elevated-color);
|
||||
}
|
||||
#mastodon .columns-area__panels {
|
||||
justify-content: flex-start;
|
||||
max-width: 100% !important;
|
||||
@@ -4577,6 +4636,7 @@ a:focus-visible,
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer {
|
||||
padding-inline: 6px !important;
|
||||
padding-top: 20px !important;
|
||||
overflow: clip;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer .drawer__header {
|
||||
border-radius: var(--radius-round);
|
||||
@@ -4617,6 +4677,10 @@ a:focus-visible,
|
||||
.layout-multiple-columns #mastodon .columns-area .search {
|
||||
margin-inline: 10px;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .compose-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer__inner:not(.darker),
|
||||
.layout-multiple-columns #mastodon .columns-area .drawer__inner__mastodon {
|
||||
background-color: transparent;
|
||||
|
||||
258
modern.user.css
258
modern.user.css
@@ -6,14 +6,20 @@
|
||||
// *://domain.tld/*
|
||||
|
||||
|
||||
/* Update 1.9.1
|
||||
- tweaks & other fixes
|
||||
- fixed large status buttons on glitch-soc in some cases due to new icons
|
||||
/* Update 1.10.0
|
||||
- Post slide up animation is now just a fade
|
||||
- Fixed overflowing video in notifications
|
||||
- Banner glow should work better now on Chromium
|
||||
- Styled account rows
|
||||
- Other fixes & spacing
|
||||
glitch-soc:
|
||||
- Fixed cut off header
|
||||
- Advanced view getting started column
|
||||
*/
|
||||
|
||||
/* ==UserStyle==
|
||||
@name Mastodon Modern
|
||||
@version 1.9.1
|
||||
@version 1.10.0
|
||||
@description Drastically improves the look & feel of Mastodon
|
||||
@updateURL https://codeberg.org/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css
|
||||
@homepageURL https://codeberg.org/Freeplay/Mastodon-Modern
|
||||
@@ -25,7 +31,7 @@
|
||||
@author Freeplay (https://freeplay.codeberg.page/)
|
||||
==/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") {
|
||||
@-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") {
|
||||
/ { // This is just so I can easily collapse everything, shouldn't affect compiled code
|
||||
responsiveW1 = 1320px
|
||||
responsiveW2 = 1175px
|
||||
@@ -134,7 +140,6 @@
|
||||
text-align right
|
||||
}
|
||||
}
|
||||
|
||||
a, button, label {
|
||||
user-select none
|
||||
}
|
||||
@@ -265,7 +270,7 @@
|
||||
}
|
||||
.scrollable,
|
||||
.detailed-status__action-bar,
|
||||
.column-header__collapsible-inner,
|
||||
.column-back-button, .column-header__collapsible.collapsed, .column-header__collapsible-inner,
|
||||
.audio-player, .search__input {
|
||||
border 0 !important
|
||||
}
|
||||
@@ -371,6 +376,7 @@
|
||||
}
|
||||
button {
|
||||
position relative
|
||||
padding 0 !important
|
||||
padding-top 100% !important
|
||||
img, span {
|
||||
height calc(100% - 10px) !important
|
||||
@@ -408,19 +414,22 @@
|
||||
> * {
|
||||
padding-inline 0
|
||||
}
|
||||
> .navigation-bar {
|
||||
padding-top 0 !important
|
||||
}
|
||||
.search, /.drawer .search {
|
||||
margin-bottom 25px
|
||||
}
|
||||
}
|
||||
.search {
|
||||
border-radius var(--radius)
|
||||
margin-inline -5px
|
||||
margin-bottom 15px !important
|
||||
label {
|
||||
// padding-inline 20px
|
||||
box-sizing border-box
|
||||
}
|
||||
input {
|
||||
border-radius var(--radius-round) !important
|
||||
padding-inline-start 20px !important
|
||||
padding-inline-end 40px !important
|
||||
}
|
||||
.search__icon > i {
|
||||
margin-inline 5px
|
||||
@@ -444,6 +453,13 @@
|
||||
.compose-form {
|
||||
min-height unset
|
||||
overflow unset
|
||||
gap 15px
|
||||
> * {
|
||||
margin 0 !important
|
||||
}
|
||||
> [aria-hidden="true"] {
|
||||
display none
|
||||
}
|
||||
> .navigation-bar {
|
||||
margin-top 10px
|
||||
}
|
||||
@@ -482,6 +498,7 @@
|
||||
.compose-form__publish-button-wrapper {
|
||||
overflow visible !important
|
||||
max-width 100%
|
||||
padding 0
|
||||
}
|
||||
.compose-form__upload__actions {
|
||||
z-index 5
|
||||
@@ -719,7 +736,7 @@
|
||||
margin-bottom 10px
|
||||
background-color inherit
|
||||
border-radius var(--radius) !important
|
||||
animation slideUp backwards .4s cubic-bezier(0,1,1,1)
|
||||
animation fade backwards .4s cubic-bezier(0,1,1,1)
|
||||
.account__moved-note {
|
||||
box-sizing border-box
|
||||
border-radius var(--radius)
|
||||
@@ -760,8 +777,10 @@
|
||||
}
|
||||
}
|
||||
.account__header__bar {
|
||||
position relative
|
||||
z-index 2
|
||||
border 0
|
||||
padding 0 20px
|
||||
padding-inline 20px
|
||||
@media (max-width mobileW) {
|
||||
padding-inline 15px
|
||||
}
|
||||
@@ -770,31 +789,38 @@
|
||||
display flex
|
||||
flex-direction column
|
||||
background inherit
|
||||
isolation isolate
|
||||
|
||||
&::before {
|
||||
content ""
|
||||
position absolute
|
||||
inset-inline 0
|
||||
height 150px - 55px
|
||||
background inherit
|
||||
z-index -1
|
||||
border-radius var(--radius)
|
||||
mask linear-gradient(to bottom, transparent, black)
|
||||
}
|
||||
|
||||
.account__header__tabs {
|
||||
overflow visible !important
|
||||
position relative
|
||||
align-items flex-end
|
||||
padding 0
|
||||
// padding-top 10px
|
||||
height unset !important
|
||||
margin-top -55px !important
|
||||
isolation isolate
|
||||
&::before { // Add blur below the account header
|
||||
content ""
|
||||
position absolute
|
||||
top 0
|
||||
left -20px
|
||||
right -20px
|
||||
bottom -100px
|
||||
top -55px
|
||||
inset-inline 0
|
||||
height 150px
|
||||
backdrop-filter blur(40px)
|
||||
filter brightness(1.1)
|
||||
pointer-events none
|
||||
opacity .7
|
||||
z-index -1
|
||||
clip-path: inset(55px 0 0 0 round var(--radius));
|
||||
mask linear-gradient(transparent 55px, black 50px, transparent)
|
||||
-webkit-mask @mask
|
||||
z-index -2
|
||||
clip-path inset(55px 0 0 0 round var(--radius));
|
||||
}
|
||||
& ~ div {
|
||||
z-index 2
|
||||
@@ -831,32 +857,31 @@
|
||||
font-weight 600
|
||||
}
|
||||
}
|
||||
.account__header__extra {
|
||||
margin-top 5px
|
||||
}
|
||||
.account__header__bio {
|
||||
margin 0
|
||||
> * {
|
||||
padding-inline 0
|
||||
}
|
||||
.account__header__content {
|
||||
padding 0px
|
||||
}
|
||||
}
|
||||
.account__header__badges {
|
||||
margin-top 10px
|
||||
span {
|
||||
font-weight 600
|
||||
}
|
||||
}
|
||||
.account__header__bio {
|
||||
padding 0
|
||||
margin 0
|
||||
> * {
|
||||
padding-inline 0
|
||||
}
|
||||
}
|
||||
.account__header__content {
|
||||
padding-top 0
|
||||
}
|
||||
|
||||
.account__header__extra {
|
||||
margin-top 1em
|
||||
}
|
||||
}
|
||||
:not(.admin-account-bio) > div > .account__header__fields, .account__header__account-note {
|
||||
// account fields
|
||||
.account__header__fields, .account__header__account-note {
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
gap 2px
|
||||
margin-bottom 20px
|
||||
//margin-bottom 20px
|
||||
background none
|
||||
// margin-inline -10px
|
||||
border-radius var(--radius)
|
||||
@@ -865,15 +890,10 @@
|
||||
// max-width calc(100% + 20px)
|
||||
max-width 100%
|
||||
border 0
|
||||
&.account__header__fields:not(:first-child) {
|
||||
margin-top 10px
|
||||
margin-bottom -10px
|
||||
&:first-child {
|
||||
margin-block 5px 15px
|
||||
}
|
||||
/ .public-account-bio .account__header__fields {
|
||||
padding 20px !important
|
||||
padding-bottom 0 !important
|
||||
}
|
||||
dl, &.account__header__account-note.account__header__account-note {
|
||||
dl {
|
||||
// border-radius var(--radius)
|
||||
display inline
|
||||
border-radius 0
|
||||
@@ -937,17 +957,13 @@
|
||||
|
||||
|
||||
}
|
||||
&.account__header__account-note.account__header__account-note {
|
||||
// padding 0 !important
|
||||
&.account__header__account-note {
|
||||
display flex
|
||||
margin-bottom 10px
|
||||
margin-bottom 10px !important
|
||||
gap 0
|
||||
border 0
|
||||
padding 0 !important
|
||||
margin-inline 0 !important
|
||||
// padding .4em .8em !important
|
||||
// transition padding .01s, margin .01s
|
||||
// display inline
|
||||
background none !important
|
||||
border-radius 8px
|
||||
font-size 12px
|
||||
@@ -1002,6 +1018,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
// account tabs
|
||||
:not(.explore__search-header) + .account__section-headline:not(:first-child) {
|
||||
background none
|
||||
position relative
|
||||
@@ -1029,6 +1046,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.account__disclaimer {
|
||||
border-top 1px solid
|
||||
}
|
||||
|
||||
// Gallery
|
||||
.account-gallery__container {
|
||||
@@ -1283,6 +1303,62 @@
|
||||
content unset !important
|
||||
}
|
||||
}
|
||||
// ACCOUNT ROWS
|
||||
.account__wrapper {
|
||||
gap 15px
|
||||
flex-wrap wrap
|
||||
.account__display-name {
|
||||
flex-grow 100
|
||||
}
|
||||
.account__contents {
|
||||
line-height 1.4
|
||||
flex-basis 70%
|
||||
width 100px
|
||||
flex-grow 100
|
||||
display flex
|
||||
align-items center
|
||||
justify-content space-between
|
||||
gap 0 20px
|
||||
flex-wrap wrap
|
||||
* {
|
||||
line-height unset !important
|
||||
}
|
||||
.display-name {
|
||||
height unset
|
||||
margin 0
|
||||
width 27ch !important
|
||||
flex-grow 1
|
||||
span {
|
||||
display block
|
||||
}
|
||||
}
|
||||
.account__details {
|
||||
flex-direction column
|
||||
width 25ch
|
||||
span {
|
||||
white-space break-spaces !important
|
||||
}
|
||||
}
|
||||
.account__details:has(.verified-badge) {
|
||||
> span:first-child {
|
||||
display none
|
||||
}
|
||||
}
|
||||
}
|
||||
.account__relationship {
|
||||
display flex !important
|
||||
flex-wrap wrap
|
||||
justify-content flex-end
|
||||
min-width 10ch
|
||||
gap 10px
|
||||
flex-grow 1
|
||||
button {
|
||||
background var(--elevated-color)
|
||||
//border 1px solid
|
||||
color inherit
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// STATUSES
|
||||
.scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper {
|
||||
@@ -1293,13 +1369,12 @@
|
||||
|
||||
/{statuses-list} {
|
||||
overflow hidden
|
||||
transition background .2s, box-shadow .4s, margin .2s, border .2s
|
||||
animation slideUp backwards .4s cubic-bezier(0,1,1,1)
|
||||
transition background .2s, box-shadow .4s, border .2s
|
||||
animation fade .4s backwards cubic-bezier(0,1,1,1)
|
||||
position relative
|
||||
border-radius var(--radius)
|
||||
&.trends__item, &.story, &.account-card {
|
||||
animation-name slideUpFade
|
||||
animation-delay .04s * 11
|
||||
animation slideUpFade backwards (.04s * 11) cubic-bezier(0,1,1,1)
|
||||
for row in 1..11 {
|
||||
&:nth-child({row}) {
|
||||
animation-delay .04s * row
|
||||
@@ -1483,6 +1558,8 @@
|
||||
width 100px
|
||||
margin 0 !important
|
||||
opacity .5
|
||||
overflow hidden
|
||||
border-radius var(--radius)
|
||||
}
|
||||
.status__content ~ [style*="aspect-ratio:"] {
|
||||
.video-player__controls {
|
||||
@@ -1707,7 +1784,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.detailed-status__wrapper-direct {
|
||||
.detailed-status {
|
||||
background none
|
||||
}
|
||||
}
|
||||
.detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation {
|
||||
background none
|
||||
.status__prepend {
|
||||
position absolute
|
||||
font-size 0
|
||||
@@ -2085,9 +2168,6 @@
|
||||
border-radius var(--radius)
|
||||
overflow hidden
|
||||
}
|
||||
.column-back-button {
|
||||
background none
|
||||
}
|
||||
|
||||
.column-header {
|
||||
background none !important
|
||||
@@ -2096,6 +2176,10 @@
|
||||
}
|
||||
.column-header > button {
|
||||
z-index 2
|
||||
display inline
|
||||
svg {
|
||||
vertical-align middle
|
||||
}
|
||||
}
|
||||
.column-header__buttons button {
|
||||
transition background .2s, transform .3s !important
|
||||
@@ -2105,14 +2189,19 @@
|
||||
margin 5px
|
||||
margin-inline-start 0
|
||||
font-size .9em
|
||||
padding-inline 15px
|
||||
padding-inline 10px
|
||||
.column-header__icon {
|
||||
margin-inline-end 0
|
||||
}
|
||||
&:not(.active) {
|
||||
background var(--elevated-color) !important
|
||||
}
|
||||
|
||||
svg {
|
||||
margin 0
|
||||
}
|
||||
span {
|
||||
display none
|
||||
}
|
||||
&::before {
|
||||
content ""
|
||||
position absolute
|
||||
@@ -2368,7 +2457,7 @@
|
||||
|
||||
|
||||
|
||||
/.getting-started, .column.column[data-column="getting-started"] > .optionally-scrollable.optionally-scrollable { // specificitiy yay
|
||||
/.getting-started, .column[aria-labelledby="Getting-started"] > .scrollable.scrollable.scrollable { // specificitiy yay
|
||||
position relative
|
||||
padding 5px 10px !important
|
||||
.getting-started__wrapper {
|
||||
@@ -2777,6 +2866,7 @@
|
||||
// visibility collapse
|
||||
z-index 199
|
||||
&::before, &::after {
|
||||
all unset
|
||||
content ""
|
||||
position fixed
|
||||
bottom 0
|
||||
@@ -2784,10 +2874,8 @@
|
||||
background inherit
|
||||
z-index 200
|
||||
height 60px
|
||||
// border-top 1px solid var(--border-color)
|
||||
filter brightness(1.2)
|
||||
visibility visible
|
||||
// opacity .9
|
||||
}
|
||||
}
|
||||
.navigation-panel {
|
||||
@@ -2827,7 +2915,7 @@
|
||||
display flex
|
||||
flex-direction column
|
||||
bottom 4px
|
||||
z-index 200
|
||||
z-index 201
|
||||
font-size 1.7em
|
||||
margin 0 !important
|
||||
padding 0 !important
|
||||
@@ -2911,11 +2999,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.explore__search-header, .search input {
|
||||
background var(--elevated-color)
|
||||
}
|
||||
|
||||
.columns-area__panels {
|
||||
// overflow-x scroll !important
|
||||
@@ -3405,6 +3488,7 @@
|
||||
.drawer {
|
||||
padding-inline 6px !important
|
||||
padding-top 20px !important
|
||||
overflow clip
|
||||
// width 285px
|
||||
.drawer__header {
|
||||
border-radius var(--radius-round)
|
||||
@@ -3426,10 +3510,6 @@
|
||||
}
|
||||
& > .drawer__pager {
|
||||
overflow visible !important
|
||||
&, & > .drawer__inner:not(.darker) {
|
||||
// overflow visible
|
||||
|
||||
}
|
||||
& > .drawer__inner:not(.darker) {
|
||||
top -20px
|
||||
// inset-inline -6px
|
||||
@@ -3452,11 +3532,16 @@
|
||||
.search {
|
||||
margin-inline 10px
|
||||
}
|
||||
.compose-form {
|
||||
display flex
|
||||
flex-direction column
|
||||
}
|
||||
.drawer__inner:not(.darker), .drawer__inner__mastodon {
|
||||
background-color transparent
|
||||
border 0 !important
|
||||
background-color transparent !important
|
||||
}
|
||||
|
||||
.drawer__inner.darker {
|
||||
padding 0 !important
|
||||
border-radius var(--radius-round) var(--radius-round) 0 0
|
||||
@@ -3612,8 +3697,10 @@
|
||||
}
|
||||
|
||||
// Notifications
|
||||
.collapsed > .status__info .notification__message {
|
||||
padding-bottom 0 !important
|
||||
.notification__message {
|
||||
& + .status {
|
||||
padding-top 0 !important
|
||||
}
|
||||
}
|
||||
.notification {
|
||||
> .notification__message {
|
||||
@@ -3629,20 +3716,6 @@
|
||||
text-align center
|
||||
}
|
||||
}
|
||||
.status__prepend, .status__info .notification__message {
|
||||
padding-bottom 15px !important
|
||||
padding-top 0 !important
|
||||
margin-top -5px !important
|
||||
.status__prepend-icon-wrapper {
|
||||
all unset
|
||||
margin-inline-end 10px
|
||||
display flex
|
||||
i {
|
||||
margin auto
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__wrapper {
|
||||
.focusable:not(.status) {
|
||||
&::before {
|
||||
@@ -3668,7 +3741,6 @@
|
||||
// Profile page
|
||||
// notes
|
||||
.account__header__account-note {
|
||||
margin-block 10px 0
|
||||
&:focus-within {
|
||||
border-radius var(--radius) !important
|
||||
}
|
||||
@@ -3707,7 +3779,9 @@
|
||||
flex-grow .2
|
||||
}
|
||||
.drawer__inner {
|
||||
margin-top -10px
|
||||
margin-top -20px
|
||||
max-height unset !important
|
||||
min-height calc(100% + 40px)
|
||||
//padding-top 30px !important
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user