mirror of
https://github.com/nileane/TangerineUI-for-Mastodon
synced 2024-11-28 06:48:19 +09:00
Copy CSS files to installation folder
This commit is contained in:
nileane
github-actions[bot]
parent
f76ffd6f6c
commit
ea9468fb0b
@ -301,6 +301,11 @@ body.app-body {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--color-accent-fg);
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* 🖱️ Scrollbars */
|
||||
:root:has(.app-body) *::-webkit-scrollbar-track {
|
||||
background-color: var(--color-bg);
|
||||
@ -559,7 +564,8 @@ body.app-body {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
.app-body .detailed-status__meta .icon {
|
||||
.app-body .detailed-status__meta .icon,
|
||||
.app-body .dropdown-button .icon {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
@ -1116,9 +1122,9 @@ body.app-body {
|
||||
}
|
||||
.app-body .navigation-bar {
|
||||
border-radius: 8px 8px 0 0;
|
||||
padding: 23px 15px 22px 18px;
|
||||
padding: 23px 15px 15px 18px;
|
||||
position: relative;
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
background-color: var(--color-content-bg);
|
||||
border-top: 1px solid var(--color-lines);
|
||||
border-left: 1px solid var(--color-lines);
|
||||
border-right: 1px solid var(--color-lines);
|
||||
@ -1155,8 +1161,9 @@ body.app-body {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.app-body .compose-form .reply-indicator + .navigation-bar,
|
||||
.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within) {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within),
|
||||
.app-body .reply-indicator {
|
||||
background-color: var(--color-content-bg);
|
||||
}
|
||||
.app-body .compose-form__highlightable.active {
|
||||
box-shadow: none;
|
||||
@ -1176,7 +1183,6 @@ body.app-body {
|
||||
}
|
||||
.app-body .compose-form .autosuggest-textarea__textarea {
|
||||
padding-left: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.app-body .compose-form .autosuggest-textarea__textarea::placeholder {
|
||||
font-size: 130%;
|
||||
@ -1209,9 +1215,6 @@ body.app-body {
|
||||
.app-body .autosuggest-account .account__avatar {
|
||||
border: 0;
|
||||
}
|
||||
.app-body .compose-form__dropdowns {
|
||||
gap: 6px;
|
||||
}
|
||||
.app-body .dropdown-button {
|
||||
border-radius: 8px;
|
||||
border-color: var(--color-accent-bg);
|
||||
@ -1228,7 +1231,6 @@ body.app-body {
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
.app-body .reply-indicator {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
border-left: 1px solid var(--color-lines);
|
||||
border-right: 1px solid var(--color-lines);
|
||||
border-top: 1px solid var(--color-lines);
|
||||
@ -1239,6 +1241,9 @@ body.app-body {
|
||||
padding: 18px 15px 0 18px;
|
||||
transition: all .2s;
|
||||
}
|
||||
.app-body .reply-indicator p {
|
||||
overflow: hidden;
|
||||
}
|
||||
.app-body .reply-indicator__line:before {
|
||||
background-color: var(--color-accent);
|
||||
z-index: 1;
|
||||
@ -1258,6 +1263,17 @@ body.app-body {
|
||||
.app-body .reply-indicator__attachments {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active) {
|
||||
border: 1px solid var(--color-accent-bg);
|
||||
color: var(--color-accent);
|
||||
border-radius: 8px;
|
||||
transition: all .2s;
|
||||
}
|
||||
.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):hover {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.app-body .compose-form .compose-form__warning {
|
||||
background-color: var(--color-accent-bg);
|
||||
border-left: 1px solid var(--color-lines);
|
||||
@ -1360,7 +1376,17 @@ body.app-body {
|
||||
}
|
||||
|
||||
.compose-form__footer {
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
.app-body .compose-form__dropdowns {
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.app-body .compose-form__actions {
|
||||
border-radius: 0 0 8px 8px;
|
||||
padding: 10px 12px;
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
}
|
||||
.app-body .compose-form__buttons {
|
||||
gap: 1px;
|
||||
@ -1392,19 +1418,46 @@ body.app-body {
|
||||
background-color: var(--color-accent);
|
||||
transition:
|
||||
transform .2s,
|
||||
background-color .2s;
|
||||
background-color .2s,
|
||||
border-color .2s;
|
||||
}
|
||||
.app-body .compose-form__submit .button:active {
|
||||
transform: scale(.95);
|
||||
}
|
||||
.app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button {
|
||||
background-image: var(--icon-send);
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
background-color: var(--color-accent-bg);
|
||||
}
|
||||
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
|
||||
animation: bounce-sml .3s ease-out 1;
|
||||
}
|
||||
|
||||
.app-body .upload-progress__tracker {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
.app-body .upload-progress__backdrop {
|
||||
background-color: var(--color-accent-bg);
|
||||
}
|
||||
.app-body .upload-progress .icon {
|
||||
color: var(--color-accent)
|
||||
}
|
||||
.app-body .upload-progress__message,
|
||||
.app-body .upload-progress__message span {
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.app-body .compose-form__upload .icon-button {
|
||||
background-color: rgba(0, 0, 0, .75);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
color: var(--color-accent-fg);
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
}
|
||||
.app-body .compose-form__upload .icon-button:hover {
|
||||
background-color: #444;
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
|
||||
/* Poll composer */
|
||||
.app-body .compose-form__poll {
|
||||
gap: 3px;
|
||||
@ -3536,6 +3589,65 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
}
|
||||
}
|
||||
|
||||
/* "Trending Now" block at the bottom of the navigation panel */
|
||||
.app-body .getting-started__trends {
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.app-body .getting-started__trends h4:not(:has(> a)) {
|
||||
display: none;
|
||||
}
|
||||
.app-body .getting-started__trends h4 {
|
||||
border-bottom: 0;
|
||||
text-transform: none;
|
||||
order: 9;
|
||||
text-align: end;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.app-body .getting-started__trends h4::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
height: 1px;
|
||||
background-color: var(--color-lines);
|
||||
display: block;
|
||||
}
|
||||
.app-body .getting-started__trends h4 a {
|
||||
padding: 5px 8px;
|
||||
color: var(--color-accent);
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-accent-bg);
|
||||
outline: 8px solid var(--color-bg);
|
||||
border-radius: 8px;
|
||||
transition:
|
||||
border-color .2s,
|
||||
background-color .2s,
|
||||
transform .2s;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
z-index: 2;
|
||||
}
|
||||
.app-body:has(.explore__links .trends__item) .getting-started__trends h4 a {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-fg);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.app-body .getting-started__trends h4 a:hover {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.app-body .getting-started__trends h4 a:active {
|
||||
transform: scale(.95);
|
||||
}
|
||||
.app-body .getting-started__trends h4 a::after {
|
||||
content: " →";
|
||||
}
|
||||
|
||||
|
||||
/* 👤 Account view
|
||||
--------------- */
|
||||
@ -4766,6 +4878,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
.app-body .compare-history-modal .report-modal__target {
|
||||
border-color: var(--color-lines);
|
||||
}
|
||||
.app-body .report-modal {
|
||||
background-color: var(--color-content-bg);
|
||||
}
|
||||
.app-body .interaction-modal {
|
||||
background-color: var(--color-content-bg);
|
||||
box-shadow:
|
||||
@ -5016,6 +5131,22 @@ a:is(.active,
|
||||
.app-body .report-dialog-modal__container {
|
||||
border-color: var(--color-lines);
|
||||
}
|
||||
.app-body .report-modal__comment {
|
||||
color: var(--color-content-fg-muted);
|
||||
}
|
||||
.app-body #upload-modal__description {
|
||||
background-color: var(--color-content-bg);
|
||||
border: 1px solid var(--color-lines);
|
||||
border-radius: 8px;
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.app-body #upload-modal__description:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.app-body .setting-text__wrapper {
|
||||
background-color: var(--color-content-bg);
|
||||
border: 0;
|
||||
}
|
||||
.app-body .report-dialog-modal__textarea {
|
||||
background-color: var(--color-secondary-bg);
|
||||
border: 1px solid var(--color-lines);
|
||||
@ -5169,6 +5300,9 @@ a:is(.active,
|
||||
padding: 7px 18px;
|
||||
}
|
||||
}
|
||||
.app-body .sign-in-banner {
|
||||
padding: 10px 0 10px 10px;
|
||||
}
|
||||
.app-body .sign-in-banner p {
|
||||
color: var(--color-fg);
|
||||
opacity: .5;
|
||||
@ -5634,7 +5768,6 @@ a:is(.active,
|
||||
.app-body .about__footer, /* Hide meta footer */
|
||||
.app-body .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */
|
||||
.app-body .search-banner ~ .search, /* Hide search field for logged out users */
|
||||
.app-body .getting-started__trends h4, /* Hide Trending header in sidebar */
|
||||
.app-body .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -301,6 +301,11 @@ body.app-body {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--color-accent-fg);
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* 🖱️ Scrollbars */
|
||||
:root:has(.app-body) *::-webkit-scrollbar-track {
|
||||
background-color: var(--color-bg);
|
||||
@ -559,7 +564,8 @@ body.app-body {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
.app-body .detailed-status__meta .icon {
|
||||
.app-body .detailed-status__meta .icon,
|
||||
.app-body .dropdown-button .icon {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
@ -1116,9 +1122,9 @@ body.app-body {
|
||||
}
|
||||
.app-body .navigation-bar {
|
||||
border-radius: 8px 8px 0 0;
|
||||
padding: 23px 15px 22px 18px;
|
||||
padding: 23px 15px 15px 18px;
|
||||
position: relative;
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
background-color: var(--color-content-bg);
|
||||
border-top: 1px solid var(--color-lines);
|
||||
border-left: 1px solid var(--color-lines);
|
||||
border-right: 1px solid var(--color-lines);
|
||||
@ -1155,8 +1161,9 @@ body.app-body {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.app-body .compose-form .reply-indicator + .navigation-bar,
|
||||
.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within) {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within),
|
||||
.app-body .reply-indicator {
|
||||
background-color: var(--color-content-bg);
|
||||
}
|
||||
.app-body .compose-form__highlightable.active {
|
||||
box-shadow: none;
|
||||
@ -1176,7 +1183,6 @@ body.app-body {
|
||||
}
|
||||
.app-body .compose-form .autosuggest-textarea__textarea {
|
||||
padding-left: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.app-body .compose-form .autosuggest-textarea__textarea::placeholder {
|
||||
font-size: 130%;
|
||||
@ -1209,9 +1215,6 @@ body.app-body {
|
||||
.app-body .autosuggest-account .account__avatar {
|
||||
border: 0;
|
||||
}
|
||||
.app-body .compose-form__dropdowns {
|
||||
gap: 6px;
|
||||
}
|
||||
.app-body .dropdown-button {
|
||||
border-radius: 8px;
|
||||
border-color: var(--color-accent-bg);
|
||||
@ -1228,7 +1231,6 @@ body.app-body {
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
.app-body .reply-indicator {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
border-left: 1px solid var(--color-lines);
|
||||
border-right: 1px solid var(--color-lines);
|
||||
border-top: 1px solid var(--color-lines);
|
||||
@ -1239,6 +1241,9 @@ body.app-body {
|
||||
padding: 18px 15px 0 18px;
|
||||
transition: all .2s;
|
||||
}
|
||||
.app-body .reply-indicator p {
|
||||
overflow: hidden;
|
||||
}
|
||||
.app-body .reply-indicator__line:before {
|
||||
background-color: var(--color-accent);
|
||||
z-index: 1;
|
||||
@ -1258,6 +1263,17 @@ body.app-body {
|
||||
.app-body .reply-indicator__attachments {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active) {
|
||||
border: 1px solid var(--color-accent-bg);
|
||||
color: var(--color-accent);
|
||||
border-radius: 8px;
|
||||
transition: all .2s;
|
||||
}
|
||||
.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):hover {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.app-body .compose-form .compose-form__warning {
|
||||
background-color: var(--color-accent-bg);
|
||||
border-left: 1px solid var(--color-lines);
|
||||
@ -1360,7 +1376,17 @@ body.app-body {
|
||||
}
|
||||
|
||||
.compose-form__footer {
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
.app-body .compose-form__dropdowns {
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.app-body .compose-form__actions {
|
||||
border-radius: 0 0 8px 8px;
|
||||
padding: 10px 12px;
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
}
|
||||
.app-body .compose-form__buttons {
|
||||
gap: 1px;
|
||||
@ -1392,19 +1418,46 @@ body.app-body {
|
||||
background-color: var(--color-accent);
|
||||
transition:
|
||||
transform .2s,
|
||||
background-color .2s;
|
||||
background-color .2s,
|
||||
border-color .2s;
|
||||
}
|
||||
.app-body .compose-form__submit .button:active {
|
||||
transform: scale(.95);
|
||||
}
|
||||
.app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button {
|
||||
background-image: var(--icon-send);
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
background-color: var(--color-accent-bg);
|
||||
}
|
||||
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
|
||||
animation: bounce-sml .3s ease-out 1;
|
||||
}
|
||||
|
||||
.app-body .upload-progress__tracker {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
.app-body .upload-progress__backdrop {
|
||||
background-color: var(--color-accent-bg);
|
||||
}
|
||||
.app-body .upload-progress .icon {
|
||||
color: var(--color-accent)
|
||||
}
|
||||
.app-body .upload-progress__message,
|
||||
.app-body .upload-progress__message span {
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.app-body .compose-form__upload .icon-button {
|
||||
background-color: rgba(0, 0, 0, .75);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
color: var(--color-accent-fg);
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
}
|
||||
.app-body .compose-form__upload .icon-button:hover {
|
||||
background-color: #444;
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
|
||||
/* Poll composer */
|
||||
.app-body .compose-form__poll {
|
||||
gap: 3px;
|
||||
@ -3536,6 +3589,65 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
}
|
||||
}
|
||||
|
||||
/* "Trending Now" block at the bottom of the navigation panel */
|
||||
.app-body .getting-started__trends {
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.app-body .getting-started__trends h4:not(:has(> a)) {
|
||||
display: none;
|
||||
}
|
||||
.app-body .getting-started__trends h4 {
|
||||
border-bottom: 0;
|
||||
text-transform: none;
|
||||
order: 9;
|
||||
text-align: end;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.app-body .getting-started__trends h4::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
height: 1px;
|
||||
background-color: var(--color-lines);
|
||||
display: block;
|
||||
}
|
||||
.app-body .getting-started__trends h4 a {
|
||||
padding: 5px 8px;
|
||||
color: var(--color-accent);
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-accent-bg);
|
||||
outline: 8px solid var(--color-bg);
|
||||
border-radius: 8px;
|
||||
transition:
|
||||
border-color .2s,
|
||||
background-color .2s,
|
||||
transform .2s;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
z-index: 2;
|
||||
}
|
||||
.app-body:has(.explore__links .trends__item) .getting-started__trends h4 a {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-fg);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.app-body .getting-started__trends h4 a:hover {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.app-body .getting-started__trends h4 a:active {
|
||||
transform: scale(.95);
|
||||
}
|
||||
.app-body .getting-started__trends h4 a::after {
|
||||
content: " →";
|
||||
}
|
||||
|
||||
|
||||
/* 👤 Account view
|
||||
--------------- */
|
||||
@ -4766,6 +4878,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
.app-body .compare-history-modal .report-modal__target {
|
||||
border-color: var(--color-lines);
|
||||
}
|
||||
.app-body .report-modal {
|
||||
background-color: var(--color-content-bg);
|
||||
}
|
||||
.app-body .interaction-modal {
|
||||
background-color: var(--color-content-bg);
|
||||
box-shadow:
|
||||
@ -5016,6 +5131,22 @@ a:is(.active,
|
||||
.app-body .report-dialog-modal__container {
|
||||
border-color: var(--color-lines);
|
||||
}
|
||||
.app-body .report-modal__comment {
|
||||
color: var(--color-content-fg-muted);
|
||||
}
|
||||
.app-body #upload-modal__description {
|
||||
background-color: var(--color-content-bg);
|
||||
border: 1px solid var(--color-lines);
|
||||
border-radius: 8px;
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.app-body #upload-modal__description:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.app-body .setting-text__wrapper {
|
||||
background-color: var(--color-content-bg);
|
||||
border: 0;
|
||||
}
|
||||
.app-body .report-dialog-modal__textarea {
|
||||
background-color: var(--color-secondary-bg);
|
||||
border: 1px solid var(--color-lines);
|
||||
@ -5169,6 +5300,9 @@ a:is(.active,
|
||||
padding: 7px 18px;
|
||||
}
|
||||
}
|
||||
.app-body .sign-in-banner {
|
||||
padding: 10px 0 10px 10px;
|
||||
}
|
||||
.app-body .sign-in-banner p {
|
||||
color: var(--color-fg);
|
||||
opacity: .5;
|
||||
@ -5634,7 +5768,6 @@ a:is(.active,
|
||||
.app-body .about__footer, /* Hide meta footer */
|
||||
.app-body .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */
|
||||
.app-body .search-banner ~ .search, /* Hide search field for logged out users */
|
||||
.app-body .getting-started__trends h4, /* Hide Trending header in sidebar */
|
||||
.app-body .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -301,6 +301,11 @@ body.app-body {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: var(--color-accent-fg);
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* 🖱️ Scrollbars */
|
||||
:root:has(.app-body) *::-webkit-scrollbar-track {
|
||||
background-color: var(--color-bg);
|
||||
@ -559,7 +564,8 @@ body.app-body {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
.app-body .detailed-status__meta .icon {
|
||||
.app-body .detailed-status__meta .icon,
|
||||
.app-body .dropdown-button .icon {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
@ -1116,9 +1122,9 @@ body.app-body {
|
||||
}
|
||||
.app-body .navigation-bar {
|
||||
border-radius: 8px 8px 0 0;
|
||||
padding: 23px 15px 22px 18px;
|
||||
padding: 23px 15px 15px 18px;
|
||||
position: relative;
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
background-color: var(--color-content-bg);
|
||||
border-top: 1px solid var(--color-lines);
|
||||
border-left: 1px solid var(--color-lines);
|
||||
border-right: 1px solid var(--color-lines);
|
||||
@ -1155,8 +1161,9 @@ body.app-body {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.app-body .compose-form .reply-indicator + .navigation-bar,
|
||||
.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within) {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within),
|
||||
.app-body .reply-indicator {
|
||||
background-color: var(--color-content-bg);
|
||||
}
|
||||
.app-body .compose-form__highlightable.active {
|
||||
box-shadow: none;
|
||||
@ -1176,7 +1183,6 @@ body.app-body {
|
||||
}
|
||||
.app-body .compose-form .autosuggest-textarea__textarea {
|
||||
padding-left: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.app-body .compose-form .autosuggest-textarea__textarea::placeholder {
|
||||
font-size: 130%;
|
||||
@ -1209,9 +1215,6 @@ body.app-body {
|
||||
.app-body .autosuggest-account .account__avatar {
|
||||
border: 0;
|
||||
}
|
||||
.app-body .compose-form__dropdowns {
|
||||
gap: 6px;
|
||||
}
|
||||
.app-body .dropdown-button {
|
||||
border-radius: 8px;
|
||||
border-color: var(--color-accent-bg);
|
||||
@ -1228,7 +1231,6 @@ body.app-body {
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
.app-body .reply-indicator {
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
border-left: 1px solid var(--color-lines);
|
||||
border-right: 1px solid var(--color-lines);
|
||||
border-top: 1px solid var(--color-lines);
|
||||
@ -1239,6 +1241,9 @@ body.app-body {
|
||||
padding: 18px 15px 0 18px;
|
||||
transition: all .2s;
|
||||
}
|
||||
.app-body .reply-indicator p {
|
||||
overflow: hidden;
|
||||
}
|
||||
.app-body .reply-indicator__line:before {
|
||||
background-color: var(--color-accent);
|
||||
z-index: 1;
|
||||
@ -1258,6 +1263,17 @@ body.app-body {
|
||||
.app-body .reply-indicator__attachments {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active) {
|
||||
border: 1px solid var(--color-accent-bg);
|
||||
color: var(--color-accent);
|
||||
border-radius: 8px;
|
||||
transition: all .2s;
|
||||
}
|
||||
.app-body .navigation-bar .icon-button:not(:has(.icon-bars),.active):hover {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.app-body .compose-form .compose-form__warning {
|
||||
background-color: var(--color-accent-bg);
|
||||
border-left: 1px solid var(--color-lines);
|
||||
@ -1360,7 +1376,17 @@ body.app-body {
|
||||
}
|
||||
|
||||
.compose-form__footer {
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
.app-body .compose-form__dropdowns {
|
||||
gap: 6px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.app-body .compose-form__actions {
|
||||
border-radius: 0 0 8px 8px;
|
||||
padding: 10px 12px;
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
}
|
||||
.app-body .compose-form__buttons {
|
||||
gap: 1px;
|
||||
@ -1392,19 +1418,46 @@ body.app-body {
|
||||
background-color: var(--color-accent);
|
||||
transition:
|
||||
transform .2s,
|
||||
background-color .2s;
|
||||
background-color .2s,
|
||||
border-color .2s;
|
||||
}
|
||||
.app-body .compose-form__submit .button:active {
|
||||
transform: scale(.95);
|
||||
}
|
||||
.app-body .compose-form:has(.autosuggest-textarea__textarea:placeholder-shown) .compose-form__submit .button {
|
||||
background-image: var(--icon-send);
|
||||
background-color: var(--color-content-secondary-bg);
|
||||
background-color: var(--color-accent-bg);
|
||||
}
|
||||
.app-body .compose-form:not(:has(.autosuggest-textarea__textarea:placeholder-shown)) .compose-form__submit {
|
||||
animation: bounce-sml .3s ease-out 1;
|
||||
}
|
||||
|
||||
.app-body .upload-progress__tracker {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
.app-body .upload-progress__backdrop {
|
||||
background-color: var(--color-accent-bg);
|
||||
}
|
||||
.app-body .upload-progress .icon {
|
||||
color: var(--color-accent)
|
||||
}
|
||||
.app-body .upload-progress__message,
|
||||
.app-body .upload-progress__message span {
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.app-body .compose-form__upload .icon-button {
|
||||
background-color: rgba(0, 0, 0, .75);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
color: var(--color-accent-fg);
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
}
|
||||
.app-body .compose-form__upload .icon-button:hover {
|
||||
background-color: #444;
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
|
||||
/* Poll composer */
|
||||
.app-body .compose-form__poll {
|
||||
gap: 3px;
|
||||
@ -3536,6 +3589,65 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
}
|
||||
}
|
||||
|
||||
/* "Trending Now" block at the bottom of the navigation panel */
|
||||
.app-body .getting-started__trends {
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.app-body .getting-started__trends h4:not(:has(> a)) {
|
||||
display: none;
|
||||
}
|
||||
.app-body .getting-started__trends h4 {
|
||||
border-bottom: 0;
|
||||
text-transform: none;
|
||||
order: 9;
|
||||
text-align: end;
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.app-body .getting-started__trends h4::before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
height: 1px;
|
||||
background-color: var(--color-lines);
|
||||
display: block;
|
||||
}
|
||||
.app-body .getting-started__trends h4 a {
|
||||
padding: 5px 8px;
|
||||
color: var(--color-accent);
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-accent-bg);
|
||||
outline: 8px solid var(--color-bg);
|
||||
border-radius: 8px;
|
||||
transition:
|
||||
border-color .2s,
|
||||
background-color .2s,
|
||||
transform .2s;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
z-index: 2;
|
||||
}
|
||||
.app-body:has(.explore__links .trends__item) .getting-started__trends h4 a {
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-accent-fg);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.app-body .getting-started__trends h4 a:hover {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.app-body .getting-started__trends h4 a:active {
|
||||
transform: scale(.95);
|
||||
}
|
||||
.app-body .getting-started__trends h4 a::after {
|
||||
content: " →";
|
||||
}
|
||||
|
||||
|
||||
/* 👤 Account view
|
||||
--------------- */
|
||||
@ -4766,6 +4878,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
|
||||
.app-body .compare-history-modal .report-modal__target {
|
||||
border-color: var(--color-lines);
|
||||
}
|
||||
.app-body .report-modal {
|
||||
background-color: var(--color-content-bg);
|
||||
}
|
||||
.app-body .interaction-modal {
|
||||
background-color: var(--color-content-bg);
|
||||
box-shadow:
|
||||
@ -5016,6 +5131,22 @@ a:is(.active,
|
||||
.app-body .report-dialog-modal__container {
|
||||
border-color: var(--color-lines);
|
||||
}
|
||||
.app-body .report-modal__comment {
|
||||
color: var(--color-content-fg-muted);
|
||||
}
|
||||
.app-body #upload-modal__description {
|
||||
background-color: var(--color-content-bg);
|
||||
border: 1px solid var(--color-lines);
|
||||
border-radius: 8px;
|
||||
color: var(--color-content-fg);
|
||||
}
|
||||
.app-body #upload-modal__description:focus {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.app-body .setting-text__wrapper {
|
||||
background-color: var(--color-content-bg);
|
||||
border: 0;
|
||||
}
|
||||
.app-body .report-dialog-modal__textarea {
|
||||
background-color: var(--color-secondary-bg);
|
||||
border: 1px solid var(--color-lines);
|
||||
@ -5169,6 +5300,9 @@ a:is(.active,
|
||||
padding: 7px 18px;
|
||||
}
|
||||
}
|
||||
.app-body .sign-in-banner {
|
||||
padding: 10px 0 10px 10px;
|
||||
}
|
||||
.app-body .sign-in-banner p {
|
||||
color: var(--color-fg);
|
||||
opacity: .5;
|
||||
@ -5634,7 +5768,6 @@ a:is(.active,
|
||||
.app-body .about__footer, /* Hide meta footer */
|
||||
.app-body .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */
|
||||
.app-body .search-banner ~ .search, /* Hide search field for logged out users */
|
||||
.app-body .getting-started__trends h4, /* Hide Trending header in sidebar */
|
||||
.app-body .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user