Copy CSS files to installation folder

mastodon/app/javascript/styles/tangerineui-cherry/tangerineui-cherry.scss

@@ -327,6 +327,7 @@ body.app-body  {
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
     border: 0;
+    padding-bottom: 1px;
 }
 .app-body .dismissable-banner + .scrollable {
     border-top-left-radius: 0;
@@ -2826,6 +2827,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .account__header__bar {
     border: 0;
 }
+.app-body .account__header__bar .avatar {
+    transition: transform .3s;
+}
+.app-body .account__header__bar .avatar:active {
+    transform: scale(.92);
+}
 .app-body .account__header__bar .avatar .account__avatar {
     border-radius: 50%;
     border-width: 5px;
@@ -4035,6 +4042,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .interaction-modal {
     background-color: var(--color-content-bg);
+    box-shadow:
+        0 20px 25px -5px rgba(0, 0, 0, .25),
+        0 8px 10px -6px rgba(0, 0, 0, .25);
 }
 .app-body .interaction-modal,
 .app-body .interaction-modal__lead h3 {
@@ -4088,14 +4098,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     padding: 8px 18px;
 }
 .app-body .modal-root__overlay {
-    background-color: hsla(0, 0%, 23.5%, 0.7);
+    background-color: rgba(255, 255, 255, .9) !important;
 }
 @media (prefers-color-scheme: dark) {
     .app-body .modal-root__overlay {
-        background-color: hsla(0, 0%, 0%, 0.7);
+        background-color: rgba(3, 3, 3, .8) !important;
     }
 }
-.app-body .modal-root__modal,
+.app-body .interaction-modal,
 .app-body .boost-modal__container,
 .app-body .mute-modal__container,
 .app-body .block-modal__container {
@@ -4146,12 +4156,6 @@ a:is(.active,
 
 
 /* Media modals */
-.app-body .modal-root__overlay {
-    background-color: transparent !important;
-}
-.app-body .modal-root__modal.media-modal {
-    background-color: rgba(255, 255, 255, .9);
-}
 .app-body .media-modal__overlay .picture-in-picture__footer {
     background-color: transparent;
 }
@@ -4172,11 +4176,6 @@ a:is(.active,
 .app-body .media-modal__page-dot {
     background-color: var(--color-content-fg);
 }
-@media (prefers-color-scheme: dark) {
-    .app-body .modal-root__modal.media-modal {
-        background-color: rgba(3, 3, 3, .8);
-    }
-}
 .app-body .media-modal__overlay .icon-external-link path {
     fill: var(--color-accent);
 }
@@ -4367,6 +4366,10 @@ a:is(.active,
 .app-body .button:is(.button-secondary, .button-tertiary) {
     padding: 10px 18px;
 }
+.app-body .sign-in-banner .button:active,
+.app-body .button:is(.button-secondary, .button-tertiary):active {
+    transform: scale(.95);
+}
 @media screen and (max-width:1174px) {
     .app-body .button.button-tertiary {
         padding: 7px 18px;
@@ -4630,6 +4633,7 @@ a:is(.active,
     border: 1px solid var(--color-lines);
     display: flex;
     flex-flow: column;
+    padding-bottom: 20px;
 }
 @media screen and (max-width:889px) {
     .app-body .scrollable.about {
@@ -4659,8 +4663,6 @@ a:is(.active,
 .app-body .about__footer {
     order: 7;
 }
-.app-body .about__header h1,
-.app-body .about__header p,
 .app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title {
     display: none;
 }
@@ -4678,8 +4680,20 @@ a:is(.active,
 .app-body .about__meta {
     margin-bottom: 10px;
 }
-.app-body .about__header h1 {
+.app-body .about__header > h1 {
-    margin-bottom: 0;
+    color: var(--color-content-fg);
+    margin: 30px 0 0 20px;
+    text-align: left;
+    font-variant: small-caps;
+    font-size: 20px;
+}
+.app-body .about__header > h1 + p {
+    color: var(--color-content-fg);
+    opacity: .8;
+    text-align: left;
+    margin-left: 20px;
+    margin-bottom: 15px;
+    font-size: 14px;
 }
 @media screen and (min-width:890px) {
     .app-body .scrollable.about {
@@ -4765,10 +4779,13 @@ a:is(.active,
 .app-body .about__section__body .prose a:hover,
 .app-body .prose a strong {
     color: var(--color-accent);
-    text-decoration: none;
+    text-decoration-line: underline;
+    text-decoration-color: var(--color-accent-bg);
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
 }
 .app-body .about__section__body .prose a:hover {
-    text-decoration: underline;
+    text-decoration-color: var(--color-accent);
 }
 .app-body .about__section__body .prose small.lang_label {
     margin-left: -2em;
@@ -4801,6 +4818,12 @@ a:is(.active,
     background-color: var(--color-content-secondary-bg);
 }
 
+@media screen and (min-width:1175px) {
+    .app-body .about :is(.link-footer, .about__footer) {
+        display: none;
+    }
+}
+
 
 
 /* Privacy Policy page */ 

mastodon/app/javascript/styles/tangerineui-purple/tangerineui-purple.scss

@@ -326,6 +326,7 @@ body.app-body  {
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
     border: 0;
+    padding-bottom: 1px;
 }
 .app-body .dismissable-banner + .scrollable {
     border-top-left-radius: 0;
@@ -2825,6 +2826,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .account__header__bar {
     border: 0;
 }
+.app-body .account__header__bar .avatar {
+    transition: transform .3s;
+}
+.app-body .account__header__bar .avatar:active {
+    transform: scale(.92);
+}
 .app-body .account__header__bar .avatar .account__avatar {
     border-radius: 50%;
     border-width: 5px;
@@ -4034,6 +4041,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .interaction-modal {
     background-color: var(--color-content-bg);
+    box-shadow:
+        0 20px 25px -5px rgba(0, 0, 0, .25),
+        0 8px 10px -6px rgba(0, 0, 0, .25);
 }
 .app-body .interaction-modal,
 .app-body .interaction-modal__lead h3 {
@@ -4087,14 +4097,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     padding: 8px 18px;
 }
 .app-body .modal-root__overlay {
-    background-color: hsla(0, 0%, 23.5%, 0.7);
+    background-color: rgba(255, 255, 255, .9) !important;
 }
 @media (prefers-color-scheme: dark) {
     .app-body .modal-root__overlay {
-        background-color: hsla(0, 0%, 0%, 0.7);
+        background-color: rgba(3, 3, 3, .8) !important;
     }
 }
-.app-body .modal-root__modal,
+.app-body .interaction-modal,
 .app-body .boost-modal__container,
 .app-body .mute-modal__container,
 .app-body .block-modal__container {
@@ -4145,12 +4155,6 @@ a:is(.active,
 
 
 /* Media modals */
-.app-body .modal-root__overlay {
-    background-color: transparent !important;
-}
-.app-body .modal-root__modal.media-modal {
-    background-color: rgba(255, 255, 255, .9);
-}
 .app-body .media-modal__overlay .picture-in-picture__footer {
     background-color: transparent;
 }
@@ -4171,11 +4175,6 @@ a:is(.active,
 .app-body .media-modal__page-dot {
     background-color: var(--color-content-fg);
 }
-@media (prefers-color-scheme: dark) {
-    .app-body .modal-root__modal.media-modal {
-        background-color: rgba(3, 3, 3, .8);
-    }
-}
 .app-body .media-modal__overlay .icon-external-link path {
     fill: var(--color-accent);
 }
@@ -4366,6 +4365,10 @@ a:is(.active,
 .app-body .button:is(.button-secondary, .button-tertiary) {
     padding: 10px 18px;
 }
+.app-body .sign-in-banner .button:active,
+.app-body .button:is(.button-secondary, .button-tertiary):active {
+    transform: scale(.95);
+}
 @media screen and (max-width:1174px) {
     .app-body .button.button-tertiary {
         padding: 7px 18px;
@@ -4629,6 +4632,7 @@ a:is(.active,
     border: 1px solid var(--color-lines);
     display: flex;
     flex-flow: column;
+    padding-bottom: 20px;
 }
 @media screen and (max-width:889px) {
     .app-body .scrollable.about {
@@ -4658,8 +4662,6 @@ a:is(.active,
 .app-body .about__footer {
     order: 7;
 }
-.app-body .about__header h1,
-.app-body .about__header p,
 .app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title {
     display: none;
 }
@@ -4677,8 +4679,20 @@ a:is(.active,
 .app-body .about__meta {
     margin-bottom: 10px;
 }
-.app-body .about__header h1 {
+.app-body .about__header > h1 {
-    margin-bottom: 0;
+    color: var(--color-content-fg);
+    margin: 30px 0 0 20px;
+    text-align: left;
+    font-variant: small-caps;
+    font-size: 20px;
+}
+.app-body .about__header > h1 + p {
+    color: var(--color-content-fg);
+    opacity: .8;
+    text-align: left;
+    margin-left: 20px;
+    margin-bottom: 15px;
+    font-size: 14px;
 }
 @media screen and (min-width:890px) {
     .app-body .scrollable.about {
@@ -4764,10 +4778,13 @@ a:is(.active,
 .app-body .about__section__body .prose a:hover,
 .app-body .prose a strong {
     color: var(--color-accent);
-    text-decoration: none;
+    text-decoration-line: underline;
+    text-decoration-color: var(--color-accent-bg);
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
 }
 .app-body .about__section__body .prose a:hover {
-    text-decoration: underline;
+    text-decoration-color: var(--color-accent);
 }
 .app-body .about__section__body .prose small.lang_label {
     margin-left: -2em;
@@ -4800,6 +4817,12 @@ a:is(.active,
     background-color: var(--color-content-secondary-bg);
 }
 
+@media screen and (min-width:1175px) {
+    .app-body .about :is(.link-footer, .about__footer) {
+        display: none;
+    }
+}
+
 
 
 /* Privacy Policy page */ 

mastodon/app/javascript/styles/tangerineui/tangerineui.scss

@@ -326,6 +326,7 @@ body.app-body  {
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
     border: 0;
+    padding-bottom: 1px;
 }
 .app-body .dismissable-banner + .scrollable {
     border-top-left-radius: 0;
@@ -2825,6 +2826,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 .app-body .account__header__bar {
     border: 0;
 }
+.app-body .account__header__bar .avatar {
+    transition: transform .3s;
+}
+.app-body .account__header__bar .avatar:active {
+    transform: scale(.92);
+}
 .app-body .account__header__bar .avatar .account__avatar {
     border-radius: 50%;
     border-width: 5px;
@@ -4034,6 +4041,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .interaction-modal {
     background-color: var(--color-content-bg);
+    box-shadow:
+        0 20px 25px -5px rgba(0, 0, 0, .25),
+        0 8px 10px -6px rgba(0, 0, 0, .25);
 }
 .app-body .interaction-modal,
 .app-body .interaction-modal__lead h3 {
@@ -4087,14 +4097,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     padding: 8px 18px;
 }
 .app-body .modal-root__overlay {
-    background-color: hsla(0, 0%, 23.5%, 0.7);
+    background-color: rgba(255, 255, 255, .9) !important;
 }
 @media (prefers-color-scheme: dark) {
     .app-body .modal-root__overlay {
-        background-color: hsla(0, 0%, 0%, 0.7);
+        background-color: rgba(3, 3, 3, .8) !important;
     }
 }
-.app-body .modal-root__modal,
+.app-body .interaction-modal,
 .app-body .boost-modal__container,
 .app-body .mute-modal__container,
 .app-body .block-modal__container {
@@ -4145,12 +4155,6 @@ a:is(.active,
 
 
 /* Media modals */
-.app-body .modal-root__overlay {
-    background-color: transparent !important;
-}
-.app-body .modal-root__modal.media-modal {
-    background-color: rgba(255, 255, 255, .9);
-}
 .app-body .media-modal__overlay .picture-in-picture__footer {
     background-color: transparent;
 }
@@ -4171,11 +4175,6 @@ a:is(.active,
 .app-body .media-modal__page-dot {
     background-color: var(--color-content-fg);
 }
-@media (prefers-color-scheme: dark) {
-    .app-body .modal-root__modal.media-modal {
-        background-color: rgba(3, 3, 3, .8);
-    }
-}
 .app-body .media-modal__overlay .icon-external-link path {
     fill: var(--color-accent);
 }
@@ -4366,6 +4365,10 @@ a:is(.active,
 .app-body .button:is(.button-secondary, .button-tertiary) {
     padding: 10px 18px;
 }
+.app-body .sign-in-banner .button:active,
+.app-body .button:is(.button-secondary, .button-tertiary):active {
+    transform: scale(.95);
+}
 @media screen and (max-width:1174px) {
     .app-body .button.button-tertiary {
         padding: 7px 18px;
@@ -4629,6 +4632,7 @@ a:is(.active,
     border: 1px solid var(--color-lines);
     display: flex;
     flex-flow: column;
+    padding-bottom: 20px;
 }
 @media screen and (max-width:889px) {
     .app-body .scrollable.about {
@@ -4658,8 +4662,6 @@ a:is(.active,
 .app-body .about__footer {
     order: 7;
 }
-.app-body .about__header h1,
-.app-body .about__header p,
 .app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title {
     display: none;
 }
@@ -4677,8 +4679,20 @@ a:is(.active,
 .app-body .about__meta {
     margin-bottom: 10px;
 }
-.app-body .about__header h1 {
+.app-body .about__header > h1 {
-    margin-bottom: 0;
+    color: var(--color-content-fg);
+    margin: 30px 0 0 20px;
+    text-align: left;
+    font-variant: small-caps;
+    font-size: 20px;
+}
+.app-body .about__header > h1 + p {
+    color: var(--color-content-fg);
+    opacity: .8;
+    text-align: left;
+    margin-left: 20px;
+    margin-bottom: 15px;
+    font-size: 14px;
 }
 @media screen and (min-width:890px) {
     .app-body .scrollable.about {
@@ -4764,10 +4778,13 @@ a:is(.active,
 .app-body .about__section__body .prose a:hover,
 .app-body .prose a strong {
     color: var(--color-accent);
-    text-decoration: none;
+    text-decoration-line: underline;
+    text-decoration-color: var(--color-accent-bg);
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
 }
 .app-body .about__section__body .prose a:hover {
-    text-decoration: underline;
+    text-decoration-color: var(--color-accent);
 }
 .app-body .about__section__body .prose small.lang_label {
     margin-left: -2em;
@@ -4800,6 +4817,12 @@ a:is(.active,
     background-color: var(--color-content-secondary-bg);
 }
 
+@media screen and (min-width:1175px) {
+    .app-body .about :is(.link-footer, .about__footer) {
+        display: none;
+    }
+}
+
 
 
 /* Privacy Policy page */