chinwag/ChinwagUI
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Copy CSS files to installation folder

Browse source
This commit is contained in:
nileane 2023-11-24 17:26:44 +00:00 • committed by github-actions[bot]
commit 2fcf1e8689
3 changed files with 280 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

112
mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss
View file

@ -371,7 +371,8 @@ body.app-body {
.status__action-bar .icon-close,
.detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close,
.icon-sign-out
.icon-sign-out,
.account__header__tabs__buttons .icon-undefined
)
path {
display: none;
@ -419,7 +420,8 @@ body.app-body {
.status__action-bar .icon-close,
.detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close,
.icon-sign-out
.icon-sign-out,
.account__header__tabs__buttons .icon-undefined
) {
background-repeat: no-repeat;
background-size: 100%;
@ -709,6 +711,9 @@ body.app-body {
.app-body .follow-request-banner .button .icon-times {
background-image: var(--icon-reject);
}
.app-body .account__header__tabs__buttons .icon-undefined {
background-image: var(--icon-share);
}
@media screen and (max-width:1174px) {
.app-body .navigation-panel .column-link .icon-home {
@ -3035,6 +3040,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .story:is(:active, :focus, :hover) :is(.story__details__publisher, .story__details__shared) {
color: var(--color-accent);
}
.app-body .story.expanded {
gap: 10px;
padding-bottom: 20px;
}
.app-body .story.expanded .story__thumbnail {
margin: 0 0 -25px;
}
@ -3244,28 +3253,30 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
}
@media screen and (min-width:890px) and (max-width:1174px) {
.app-body .dismissable-banner {
margin-top: 10px;
}
.app-body .explore__links .dismissable-banner {
margin-top: 0;
}
}
.app-body .dismissable-banner__message,
.app-body .dismissable-banner__action .icon-button {
color: var(--color-accent-fg);
color: var(--color-accent);
}
.app-body .dismissable-banner__message h1 {
color: var(--color-accent-fg);
color: var(--color-content-fg);
margin-top: 10px;
margin-bottom: 8px;
}
.app-body .dismissable-banner__message {
color: var(--color-content-fg);
font-weight: normal;
}
.app-body .dismissable-banner__message__actions__wrapper {
flex-flow: row-reverse;
}
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) {
background: linear-gradient(to bottom, rgba(247, 105, 2, 0.8), rgba(247, 105, 2, 0.5));
background: var(--color-content-bg);
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.app-body .dismissable-banner__background-image {
display: none;
@ -3275,10 +3286,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
line-height: 28px;
padding: 6px 17px;
}
@media (prefers-color-scheme: dark) {
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) {
background: linear-gradient(to top, rgba(230, 137, 51, .5), rgba(230, 137, 51, .3));
}
.app-body .dismissable-banner__message__actions {
gap: 5px;
}
@ -3879,8 +3888,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
.app-body .copypaste input,
.app-body .interaction-modal__login__input {
border-color: var(--color-accent);
background-color: var(--color-accent-lines);
border-color: var(--color-lines);
background-color: var(--color-content-secondary-bg);
color: var(--color-content-fg);
border-radius: 8px;
}
@ -3891,12 +3900,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-bottom-right-radius: 8px;
}
.app-body .interaction-modal__login__input input::placeholder {
color: var(--color-accent);
color: var(--color-content-fg-muted);
}
.app-body .interaction-modal__login.focused .interaction-modal__login__input {
background-color: var(--color-content-bg);
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent);
}
.app-body .interaction-modal__login .search__popout {
border-color: var(--color-lines);
@ -3905,7 +3913,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
padding: 8px 18px;
}
.app-body .modal-root__overlay {
background-color: hsla(0, 0%, 79.5%, 0.7);
background-color: hsla(0, 0%, 23.5%, 0.7);
}
@media (prefers-color-scheme: dark) {
.app-body .modal-root__overlay {
@ -4159,10 +4167,10 @@ a:is(.active,
background-color: var(--color-accent-bg);
}
.app-body .onboarding__steps__item__icon,
.app-body .onboarding__steps__item__description h6,
.app-body .onboarding__link {
color: var(--color-accent);
}
.app-body .onboarding__steps__item__description h6,
.app-body .onboarding__steps__item__description p,
.app-body .onboarding__lead,
.app-body .onboarding__lead strong {
@ -4173,6 +4181,66 @@ a:is(.active,
fill: var(--color-accent);
}
.app-body .onboarding__profile .app-form__avatar-input {
border-color: var(--color-content-bg);
border-radius: 50%;
border-width: 5px;
}
.app-body .onboarding__profile .app-form__avatar-input img {
border-radius: 50%;
background: var(--color-content-secondary-bg);
}
.app-body .onboarding__profile .app-form__header-input img {
background: var(--color-secondary-bg);
}
.app-body .simple_form .input.with_block_label > label,
.app-body .simple_form .input.with_block_label .hint,
.app-body .app-form__toggle__label strong,
.app-body .simple_form .hint {
color: var(--color-fg);
}
.app-body .app-form__toggle__toggle > div {
border-color: var(--color-lines);
}
.app-form__avatar-input.selected .icon,
.app-form__header-input.selected .icon {
color: var(--color-accent);
}
.app-body .simple_form
:is(
input[type=datetime-local],
input[type=email],
input[type=number],
input[type=password],
input[type=text],
input[type=url],
textarea
) {
background-color: var(--color-content-secondary-bg);
border-color: var(--color-lines);
border-radius: 8px;
color: var(--color-content-fg);
}
.app-body .simple_form
:is(
input[type=datetime-local],
input[type=email],
input[type=number],
input[type=password],
input[type=text],
input[type=url],
textarea
):is(:active, :focus) {
border-color: var(--color-accent);
}
.app-body .column-title {
margin: -20px -20px 30px;
padding: 40px;
}
.app-body .column-title:has(+ .simple_form) {
margin-bottom: 0;
background-color: var(--color-content-secondary-bg);
}
.app-body .follow-recommendations {
background-color: var(--color-content-bg);
}
@ -4476,6 +4544,12 @@ a:is(.active,
border: 1px solid var(--color-lines);
background-color: var(--color-content-bg);
}
@media screen and (min-width:1175px) {
.app-body:not(:has(#tabs-bar__portal > *)) .column > .scrollable.privacy-policy {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
}

114
mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss
View file

@ -145,7 +145,7 @@
--icon-emoji: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTI4YTk2LDk2LDAsMSwxLTk2LTk2QTk2LDk2LDAsMCwxLDIyNCwxMjhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDI0QTEwNCwxMDQsMCwxLDAsMjMyLDEyOCwxMDQuMTEsMTA0LjExLDAsMCwwLDEyOCwyNFptMCwxOTJhODgsODgsMCwxLDEsODgtODhBODguMSw4OC4xLDAsMCwxLDEyOCwyMTZaTTgwLDEwOGExMiwxMiwwLDEsMSwxMiwxMkExMiwxMiwwLDAsMSw4MCwxMDhabTk2LDBhMTIsMTIsMCwxLDEtMTItMTJBMTIsMTIsMCwwLDEsMTc2LDEwOFptLTEuMDgsNDhjLTEwLjI5LDE3Ljc5LTI3LjM5LDI4LTQ2LjkyLDI4cy0zNi42My0xMC4yLTQ2LjkyLTI4YTgsOCwwLDEsMSwxMy44NC04YzcuNDcsMTIuOTEsMTkuMjEsMjAsMzMuMDgsMjBzMjUuNjEtNy4xLDMzLjA4LTIwYTgsOCwwLDEsMSwxMy44NCw4WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-emoji-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTI4YTk2LDk2LDAsMSwxLTk2LTk2QTk2LDk2LDAsMCwxLDIyNCwxMjhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDI0QTEwNCwxMDQsMCwxLDAsMjMyLDEyOCwxMDQuMTEsMTA0LjExLDAsMCwwLDEyOCwyNFptMCwxOTJhODgsODgsMCwxLDEsODgtODhBODguMSw4OC4xLDAsMCwxLDEyOCwyMTZaTTgwLDEwOGExMiwxMiwwLDEsMSwxMiwxMkExMiwxMiwwLDAsMSw4MCwxMDhabTk2LDBhMTIsMTIsMCwxLDEtMTItMTJBMTIsMTIsMCwwLDEsMTc2LDEwOFptLTEuMDgsNDhjLTEwLjI5LDE3Ljc5LTI3LjM5LDI4LTQ2LjkyLDI4cy0zNi42My0xMC4yLTQ2LjkyLTI4YTgsOCwwLDEsMSwxMy44NC04YzcuNDcsMTIuOTEsMTkuMjEsMjAsMzMuMDgsMjBzMjUuNjEtNy4xLDMzLjA4LTIwYTgsOCwwLDEsMSwxMy44NCw4WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-link: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHN0eWxlPSItLW5vaXItaW5saW5lLWZpbGw6ICM1ZjlhZmY7IiBkYXRhLW5vaXItaW5saW5lLWZpbGw9IiI+PHBhdGggZD0iTTIwOS45NCwxMTMuOTRsLTI4LDI4YTQ3Ljc2LDQ3Ljc2LDAsMCwxLTI2LjUyLDEzLjQ4LDQ3Ljc2LDQ3Ljc2LDAsMCwxLTEzLjQ4LDI2LjUybC0yOCwyOGE0OCw0OCwwLDAsMS02Ny44OC02Ny44OGwyOC0yOGE0Ny43Niw0Ny43NiwwLDAsMSwyNi41Mi0xMy40OCw0Ny43Niw0Ny43NiwwLDAsMSwxMy40OC0yNi41MmwyOC0yOGE0OCw0OCwwLDAsMSw2Ny44OCw2Ny44OFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0xMzcuNTQsMTg2LjM2YTgsOCwwLDAsMSwwLDExLjMxbC0xNy45NCwxOEE1Niw1NiwwLDAsMSw0MC4zOCwxMzYuNEw2OC41LDEwOC4yOUE1Niw1NiwwLDAsMSwxNDUuMzEsMTA2YTgsOCwwLDEsMS0xMC42NCwxMiw0MCw0MCwwLDAsMC01NC44NSwxLjYzTDUxLjcsMTQ3LjcyYTQwLDQwLDAsMSwwLDU2LjU4LDU2LjU4bDE3Ljk0LTE3Ljk0QTgsOCwwLDAsMSwxMzcuNTQsMTg2LjM2Wm03OC4wOC0xNDZhNTYuMDgsNTYuMDgsMCwwLDAtNzkuMjIsMEwxMTguNDYsNTguMzNhOCw4LDAsMCwwLDExLjMyLDExLjMxTDE0Ny43Miw1MS43YTQwLDQwLDAsMCwxLDU2LjU4LDU2LjU4TDE3Ni4xOCwxMzYuNEE0MCw0MCwwLDAsMSwxMjEuMzMsMTM4LDgsOCwwLDEsMCwxMTAuNjksMTUwYTU2LDU2LDAsMCwwLDc2LjgxLTIuMjdsMjguMTItMjguMTFBNTYuMDgsNTYuMDgsMCwwLDAsMjE1LjYyLDQwLjM4WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-share: ur:("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTA0bC00OCw0OFY1NloiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0yMjkuNjYsOTguMzRsLTQ4LTQ4QTgsOCwwLDAsMCwxNjgsNTZWOTZoLTNBMTAzLjk0LDEwMy45NCwwLDAsMCw2NC4yNSwxNzRhOCw4LDAsMCwwLDE1LjUsNEE4OCw4OCwwLDAsMSwxNjUsMTEyaDN2NDBhOCw4LDAsMCwwLDEzLjY2LDUuNjZsNDgtNDhBOCw4LDAsMCwwLDIyOS42Niw5OC4zNFpNMTg0LDEzMi42OVY3NS4zMUwyMTIuNjksMTA0Wk0yMDAsMjE2YTgsOCwwLDAsMS04LDhINDBhMTYsMTYsMCwwLDEtMTYtMTZWODhhOCw4LDAsMCwxLDE2LDBWMjA4SDE5MkE4LDgsMCwwLDEsMjAwLDIxNloiPjwvcGF0aD48L3N2Zz4=");
--icon-share: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTA0bC00OCw0OFY1NloiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0yMjkuNjYsOTguMzRsLTQ4LTQ4QTgsOCwwLDAsMCwxNjgsNTZWOTZoLTNBMTAzLjk0LDEwMy45NCwwLDAsMCw2NC4yNSwxNzRhOCw4LDAsMCwwLDE1LjUsNEE4OCw4OCwwLDAsMSwxNjUsMTEyaDN2NDBhOCw4LDAsMCwwLDEzLjY2LDUuNjZsNDgtNDhBOCw4LDAsMCwwLDIyOS42Niw5OC4zNFpNMTg0LDEzMi42OVY3NS4zMUwyMTIuNjksMTA0Wk0yMDAsMjE2YTgsOCwwLDAsMS04LDhINDBhMTYsMTYsMCwwLDEtMTYtMTZWODhhOCw4LDAsMCwxLDE2LDBWMjA4SDE5MkE4LDgsMCwwLDEsMjAwLDIxNloiPjwvcGF0aD48L3N2Zz4=");
--icon-compose: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTIwdjg4YTE2LDE2LDAsMCwxLTE2LDE2SDQ4YTE2LDE2LDAsMCwxLTE2LTE2VjQ4QTE2LDE2LDAsMCwxLDQ4LDMyaDg4YTgsOCwwLDAsMSwwLDE2SDQ4VjIwOEgyMDhWMTIwYTgsOCwwLDAsMSwxNiwwWm01LjY2LTUwLjM0LTk2LDk2QTgsOCwwLDAsMSwxMjgsMTY4SDk2YTgsOCwwLDAsMS04LThWMTI4YTgsOCwwLDAsMSwyLjM0LTUuNjZsOTYtOTZhOCw4LDAsMCwxLDExLjMyLDBsMzIsMzJBOCw4LDAsMCwxLDIyOS42Niw2OS42NlptLTE3LTUuNjZMMTkyLDQzLjMxLDE3OS4zMSw1NiwyMDAsNzYuNjlaIj48L3BhdGg+PC9zdmc+");
}
@media (prefers-color-scheme: dark) {
@ -371,7 +371,8 @@ body.app-body {
.status__action-bar .icon-close,
.detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close,
.icon-sign-out
.icon-sign-out,
.account__header__tabs__buttons .icon-undefined
)
path {
display: none;
@ -419,7 +420,8 @@ body.app-body {
.status__action-bar .icon-close,
.detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close,
.icon-sign-out
.icon-sign-out,
.account__header__tabs__buttons .icon-undefined
) {
background-repeat: no-repeat;
background-size: 100%;
@ -709,6 +711,9 @@ body.app-body {
.app-body .follow-request-banner .button .icon-times {
background-image: var(--icon-reject);
}
.app-body .account__header__tabs__buttons .icon-undefined {
background-image: var(--icon-share);
}
@media screen and (max-width:1174px) {
.app-body .navigation-panel .column-link .icon-home {
@ -3035,6 +3040,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .story:is(:active, :focus, :hover) :is(.story__details__publisher, .story__details__shared) {
color: var(--color-accent);
}
.app-body .story.expanded {
gap: 10px;
padding-bottom: 20px;
}
.app-body .story.expanded .story__thumbnail {
margin: 0 0 -25px;
}
@ -3244,28 +3253,30 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
}
@media screen and (min-width:890px) and (max-width:1174px) {
.app-body .dismissable-banner {
margin-top: 10px;
}
.app-body .explore__links .dismissable-banner {
margin-top: 0;
}
}
.app-body .dismissable-banner__message,
.app-body .dismissable-banner__action .icon-button {
color: var(--color-accent-fg);
color: var(--color-accent);
}
.app-body .dismissable-banner__message h1 {
color: var(--color-accent-fg);
color: var(--color-content-fg);
margin-top: 10px;
margin-bottom: 8px;
}
.app-body .dismissable-banner__message {
color: var(--color-content-fg);
font-weight: normal;
}
.app-body .dismissable-banner__message__actions__wrapper {
flex-flow: row-reverse;
}
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) {
background: linear-gradient(to bottom, rgba(247, 105, 2, 0.8), rgba(247, 105, 2, 0.5));
background: var(--color-content-bg);
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.app-body .dismissable-banner__background-image {
display: none;
@ -3275,10 +3286,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
line-height: 28px;
padding: 6px 17px;
}
@media (prefers-color-scheme: dark) {
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) {
background: linear-gradient(to top, rgba(230, 137, 51, .5), rgba(230, 137, 51, .3));
}
.app-body .dismissable-banner__message__actions {
gap: 5px;
}
@ -3879,8 +3888,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
.app-body .copypaste input,
.app-body .interaction-modal__login__input {
border-color: var(--color-accent);
background-color: var(--color-accent-lines);
border-color: var(--color-lines);
background-color: var(--color-content-secondary-bg);
color: var(--color-content-fg);
border-radius: 8px;
}
@ -3891,12 +3900,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-bottom-right-radius: 8px;
}
.app-body .interaction-modal__login__input input::placeholder {
color: var(--color-accent);
color: var(--color-content-fg-muted);
}
.app-body .interaction-modal__login.focused .interaction-modal__login__input {
background-color: var(--color-content-bg);
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent);
}
.app-body .interaction-modal__login .search__popout {
border-color: var(--color-lines);
@ -3905,7 +3913,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
padding: 8px 18px;
}
.app-body .modal-root__overlay {
background-color: hsla(0, 0%, 79.5%, 0.7);
background-color: hsla(0, 0%, 23.5%, 0.7);
}
@media (prefers-color-scheme: dark) {
.app-body .modal-root__overlay {
@ -4159,10 +4167,10 @@ a:is(.active,
background-color: var(--color-accent-bg);
}
.app-body .onboarding__steps__item__icon,
.app-body .onboarding__steps__item__description h6,
.app-body .onboarding__link {
color: var(--color-accent);
}
.app-body .onboarding__steps__item__description h6,
.app-body .onboarding__steps__item__description p,
.app-body .onboarding__lead,
.app-body .onboarding__lead strong {
@ -4173,6 +4181,66 @@ a:is(.active,
fill: var(--color-accent);
}
.app-body .onboarding__profile .app-form__avatar-input {
border-color: var(--color-content-bg);
border-radius: 50%;
border-width: 5px;
}
.app-body .onboarding__profile .app-form__avatar-input img {
border-radius: 50%;
background: var(--color-content-secondary-bg);
}
.app-body .onboarding__profile .app-form__header-input img {
background: var(--color-secondary-bg);
}
.app-body .simple_form .input.with_block_label > label,
.app-body .simple_form .input.with_block_label .hint,
.app-body .app-form__toggle__label strong,
.app-body .simple_form .hint {
color: var(--color-fg);
}
.app-body .app-form__toggle__toggle > div {
border-color: var(--color-lines);
}
.app-form__avatar-input.selected .icon,
.app-form__header-input.selected .icon {
color: var(--color-accent);
}
.app-body .simple_form
:is(
input[type=datetime-local],
input[type=email],
input[type=number],
input[type=password],
input[type=text],
input[type=url],
textarea
) {
background-color: var(--color-content-secondary-bg);
border-color: var(--color-lines);
border-radius: 8px;
color: var(--color-content-fg);
}
.app-body .simple_form
:is(
input[type=datetime-local],
input[type=email],
input[type=number],
input[type=password],
input[type=text],
input[type=url],
textarea
):is(:active, :focus) {
border-color: var(--color-accent);
}
.app-body .column-title {
margin: -20px -20px 30px;
padding: 40px;
}
.app-body .column-title:has(+ .simple_form) {
margin-bottom: 0;
background-color: var(--color-content-secondary-bg);
}
.app-body .follow-recommendations {
background-color: var(--color-content-bg);
}
@ -4476,6 +4544,12 @@ a:is(.active,
border: 1px solid var(--color-lines);
background-color: var(--color-content-bg);
}
@media screen and (min-width:1175px) {
.app-body:not(:has(#tabs-bar__portal > *)) .column > .scrollable.privacy-policy {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
}

112
mastodon/app/javascript/styles/tangerineui/tangerineui.scss
View file

@ -371,7 +371,8 @@ body.app-body {
.status__action-bar .icon-close,
.detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close,
.icon-sign-out
.icon-sign-out,
.account__header__tabs__buttons .icon-undefined
)
path {
display: none;
@ -419,7 +420,8 @@ body.app-body {
.status__action-bar .icon-close,
.detailed-status__action-bar .icon-close,
.account__header__tabs__buttons .icon-close,
.icon-sign-out
.icon-sign-out,
.account__header__tabs__buttons .icon-undefined
) {
background-repeat: no-repeat;
background-size: 100%;
@ -709,6 +711,9 @@ body.app-body {
.app-body .follow-request-banner .button .icon-times {
background-image: var(--icon-reject);
}
.app-body .account__header__tabs__buttons .icon-undefined {
background-image: var(--icon-share);
}
@media screen and (max-width:1174px) {
.app-body .navigation-panel .column-link .icon-home {
@ -3035,6 +3040,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
.app-body .story:is(:active, :focus, :hover) :is(.story__details__publisher, .story__details__shared) {
color: var(--color-accent);
}
.app-body .story.expanded {
gap: 10px;
padding-bottom: 20px;
}
.app-body .story.expanded .story__thumbnail {
margin: 0 0 -25px;
}
@ -3244,28 +3253,30 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
}
@media screen and (min-width:890px) and (max-width:1174px) {
.app-body .dismissable-banner {
margin-top: 10px;
}
.app-body .explore__links .dismissable-banner {
margin-top: 0;
}
}
.app-body .dismissable-banner__message,
.app-body .dismissable-banner__action .icon-button {
color: var(--color-accent-fg);
color: var(--color-accent);
}
.app-body .dismissable-banner__message h1 {
color: var(--color-accent-fg);
color: var(--color-content-fg);
margin-top: 10px;
margin-bottom: 8px;
}
.app-body .dismissable-banner__message {
color: var(--color-content-fg);
font-weight: normal;
}
.app-body .dismissable-banner__message__actions__wrapper {
flex-flow: row-reverse;
}
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) {
background: linear-gradient(to bottom, rgba(247, 105, 2, 0.8), rgba(247, 105, 2, 0.5));
background: var(--color-content-bg);
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.app-body .dismissable-banner__background-image {
display: none;
@ -3275,10 +3286,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
line-height: 28px;
padding: 6px 17px;
}
@media (prefers-color-scheme: dark) {
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) {
background: linear-gradient(to top, rgba(230, 137, 51, .5), rgba(230, 137, 51, .3));
}
.app-body .dismissable-banner__message__actions {
gap: 5px;
}
@ -3879,8 +3888,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
.app-body .copypaste input,
.app-body .interaction-modal__login__input {
border-color: var(--color-accent);
background-color: var(--color-accent-lines);
border-color: var(--color-lines);
background-color: var(--color-content-secondary-bg);
color: var(--color-content-fg);
border-radius: 8px;
}
@ -3891,12 +3900,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
border-bottom-right-radius: 8px;
}
.app-body .interaction-modal__login__input input::placeholder {
color: var(--color-accent);
color: var(--color-content-fg-muted);
}
.app-body .interaction-modal__login.focused .interaction-modal__login__input {
background-color: var(--color-content-bg);
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent);
}
.app-body .interaction-modal__login .search__popout {
border-color: var(--color-lines);
@ -3905,7 +3913,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
padding: 8px 18px;
}
.app-body .modal-root__overlay {
background-color: hsla(0, 0%, 79.5%, 0.7);
background-color: hsla(0, 0%, 23.5%, 0.7);
}
@media (prefers-color-scheme: dark) {
.app-body .modal-root__overlay {
@ -4159,10 +4167,10 @@ a:is(.active,
background-color: var(--color-accent-bg);
}
.app-body .onboarding__steps__item__icon,
.app-body .onboarding__steps__item__description h6,
.app-body .onboarding__link {
color: var(--color-accent);
}
.app-body .onboarding__steps__item__description h6,
.app-body .onboarding__steps__item__description p,
.app-body .onboarding__lead,
.app-body .onboarding__lead strong {
@ -4173,6 +4181,66 @@ a:is(.active,
fill: var(--color-accent);
}
.app-body .onboarding__profile .app-form__avatar-input {
border-color: var(--color-content-bg);
border-radius: 50%;
border-width: 5px;
}
.app-body .onboarding__profile .app-form__avatar-input img {
border-radius: 50%;
background: var(--color-content-secondary-bg);
}
.app-body .onboarding__profile .app-form__header-input img {
background: var(--color-secondary-bg);
}
.app-body .simple_form .input.with_block_label > label,
.app-body .simple_form .input.with_block_label .hint,
.app-body .app-form__toggle__label strong,
.app-body .simple_form .hint {
color: var(--color-fg);
}
.app-body .app-form__toggle__toggle > div {
border-color: var(--color-lines);
}
.app-form__avatar-input.selected .icon,
.app-form__header-input.selected .icon {
color: var(--color-accent);
}
.app-body .simple_form
:is(
input[type=datetime-local],
input[type=email],
input[type=number],
input[type=password],
input[type=text],
input[type=url],
textarea
) {
background-color: var(--color-content-secondary-bg);
border-color: var(--color-lines);
border-radius: 8px;
color: var(--color-content-fg);
}
.app-body .simple_form
:is(
input[type=datetime-local],
input[type=email],
input[type=number],
input[type=password],
input[type=text],
input[type=url],
textarea
):is(:active, :focus) {
border-color: var(--color-accent);
}
.app-body .column-title {
margin: -20px -20px 30px;
padding: 40px;
}
.app-body .column-title:has(+ .simple_form) {
margin-bottom: 0;
background-color: var(--color-content-secondary-bg);
}
.app-body .follow-recommendations {
background-color: var(--color-content-bg);
}
@ -4476,6 +4544,12 @@ a:is(.active,
border: 1px solid var(--color-lines);
background-color: var(--color-content-bg);
}
@media screen and (min-width:1175px) {
.app-body:not(:has(#tabs-bar__portal > *)) .column > .scrollable.privacy-policy {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
}