Improved support for Mastodon's new dismissable banner

TangerineUI-purple.css

@@ -1,5 +1,5 @@
 /*  TangerineUI 🍊 for Mastodon ・ Purple variant 🪻
-    version: 1.7.4
+    version: 1.8
 
     A Tangerine redesign for Mastodon's Web UI.
     https://github.com/nileane/TangerineUI-for-Mastodon/
@@ -444,6 +444,12 @@ body.layout-single-column  {
 .layout-single-column .fa-at.column-header__icon:before {
     content: var(--icon-direct-messages);
 }
+.layout-single-column .fa-at.status__prepend-icon {
+    transform: scale(.7);
+}
+.layout-single-column .fa-at.status__prepend-icon::before {
+    content: var(--icon-direct-messages);
+}
 /* Bookmarks icon */
 .layout-single-column .column-link .fa-bookmark::before {
     content: var(--icon-bookmark-column-link);
@@ -850,6 +856,7 @@ body.layout-single-column  {
     padding-top: 2px;
     padding-left: 0;
     padding-right: 0;
+    margin-bottom: 0;
     height: 25px;
     color: var(--color-content-fg);
 }
@@ -857,6 +864,9 @@ body.layout-single-column  {
     width: 56px;
     text-align: right;
 }
+.layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper {
+    width: 46px;
+}
 .layout-single-column .status-card,
 .layout-single-column .status-card.compact {
     background-color: var(--color-content-secondary-bg);
@@ -1009,6 +1019,7 @@ body.layout-single-column  {
 .layout-single-column .follow_requests-unlocked_explanation {
     background-color: var(--color-accent-bg);
     color: var(--color-content-fg);
+    border-bottom: 0;
 }
 .layout-single-column .follow_requests-unlocked_explanation a {
     color: var(--color-accent);
@@ -1865,6 +1876,28 @@ body.layout-single-column  {
 .layout-single-column .dismissable-banner__action .icon-button {
     color: var(--color-accent-fg);
 }
+.layout-single-column .dismissable-banner__message h1 {
+    color: var(--color-accent-fg);
+    margin-top: 10px;
+}
+.layout-single-column .dismissable-banner__message__actions__wrapper {
+    flex-flow: row-reverse;
+}
+.layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) {
+    background: linear-gradient(to bottom, var(--color-accent), rgba(99, 99, 255, 0.4));
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-bottom: 2px;
+}
+.layout-single-column .dismissable-banner__background-image {
+    bottom: -35%;
+    opacity: .3;
+}
+.layout-single-column .dismissable-banner__message__actions .button,
+.layout-single-column .dismissable-banner__message__actions .button.button-tertiary {
+    line-height: 28px;
+    padding: 6px 17px;
+}
 
 
 

TangerineUI.css

@@ -1,5 +1,5 @@
 /*  TangerineUI 🍊 for Mastodon
-    version: 1.7.4
+    version: 1.8
 
     A Tangerine redesign for Mastodon's Web UI.
     https://github.com/nileane/TangerineUI-for-Mastodon/
@@ -444,6 +444,12 @@ body.layout-single-column  {
 .layout-single-column .fa-at.column-header__icon:before {
     content: var(--icon-direct-messages);
 }
+.layout-single-column .fa-at.status__prepend-icon {
+    transform: scale(.7);
+}
+.layout-single-column .fa-at.status__prepend-icon::before {
+    content: var(--icon-direct-messages);
+}
 /* Bookmarks icon */
 .layout-single-column .column-link .fa-bookmark::before {
     content: var(--icon-bookmark-column-link);
@@ -850,6 +856,7 @@ body.layout-single-column  {
     padding-top: 2px;
     padding-left: 0;
     padding-right: 0;
+    margin-bottom: 0;
     height: 25px;
     color: var(--color-content-fg);
 }
@@ -857,6 +864,9 @@ body.layout-single-column  {
     width: 56px;
     text-align: right;
 }
+.layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper {
+    width: 46px;
+}
 .layout-single-column .status-card,
 .layout-single-column .status-card.compact {
     background-color: var(--color-content-secondary-bg);
@@ -1009,6 +1019,7 @@ body.layout-single-column  {
 .layout-single-column .follow_requests-unlocked_explanation {
     background-color: var(--color-accent-bg);
     color: var(--color-content-fg);
+    border-bottom: 0;
 }
 .layout-single-column .follow_requests-unlocked_explanation a {
     color: var(--color-accent);
@@ -1865,6 +1876,28 @@ body.layout-single-column  {
 .layout-single-column .dismissable-banner__action .icon-button {
     color: var(--color-accent-fg);
 }
+.layout-single-column .dismissable-banner__message h1 {
+    color: var(--color-accent-fg);
+    margin-top: 10px;
+}
+.layout-single-column .dismissable-banner__message__actions__wrapper {
+    flex-flow: row-reverse;
+}
+.layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) {
+    background: linear-gradient(to bottom, var(--color-accent), rgba(247, 105, 2, 0.4));
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-bottom: 2px;
+}
+.layout-single-column .dismissable-banner__background-image {
+    bottom: -35%;
+    opacity: .3;
+}
+.layout-single-column .dismissable-banner__message__actions .button,
+.layout-single-column .dismissable-banner__message__actions .button.button-tertiary {
+    line-height: 28px;
+    padding: 6px 17px;
+}
 
 
 

mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss

@@ -1,5 +1,5 @@
 /*  TangerineUI 🍊 for Mastodon ・ Purple variant 🪻
-    version: 1.7.4
+    version: 1.8
 
     A Tangerine redesign for Mastodon's Web UI.
     https://github.com/nileane/TangerineUI-for-Mastodon/
@@ -444,6 +444,12 @@ body.layout-single-column  {
 .layout-single-column .fa-at.column-header__icon:before {
     content: var(--icon-direct-messages);
 }
+.layout-single-column .fa-at.status__prepend-icon {
+    transform: scale(.7);
+}
+.layout-single-column .fa-at.status__prepend-icon::before {
+    content: var(--icon-direct-messages);
+}
 /* Bookmarks icon */
 .layout-single-column .column-link .fa-bookmark::before {
     content: var(--icon-bookmark-column-link);
@@ -850,6 +856,7 @@ body.layout-single-column  {
     padding-top: 2px;
     padding-left: 0;
     padding-right: 0;
+    margin-bottom: 0;
     height: 25px;
     color: var(--color-content-fg);
 }
@@ -857,6 +864,9 @@ body.layout-single-column  {
     width: 56px;
     text-align: right;
 }
+.layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper {
+    width: 46px;
+}
 .layout-single-column .status-card,
 .layout-single-column .status-card.compact {
     background-color: var(--color-content-secondary-bg);
@@ -1009,6 +1019,7 @@ body.layout-single-column  {
 .layout-single-column .follow_requests-unlocked_explanation {
     background-color: var(--color-accent-bg);
     color: var(--color-content-fg);
+    border-bottom: 0;
 }
 .layout-single-column .follow_requests-unlocked_explanation a {
     color: var(--color-accent);
@@ -1865,6 +1876,28 @@ body.layout-single-column  {
 .layout-single-column .dismissable-banner__action .icon-button {
     color: var(--color-accent-fg);
 }
+.layout-single-column .dismissable-banner__message h1 {
+    color: var(--color-accent-fg);
+    margin-top: 10px;
+}
+.layout-single-column .dismissable-banner__message__actions__wrapper {
+    flex-flow: row-reverse;
+}
+.layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) {
+    background: linear-gradient(to bottom, var(--color-accent), rgba(99, 99, 255, 0.4));
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-bottom: 2px;
+}
+.layout-single-column .dismissable-banner__background-image {
+    bottom: -35%;
+    opacity: .3;
+}
+.layout-single-column .dismissable-banner__message__actions .button,
+.layout-single-column .dismissable-banner__message__actions .button.button-tertiary {
+    line-height: 28px;
+    padding: 6px 17px;
+}
 
 
 

mastodon/app/javascript/styles/tangerineui/layout-single-column.scss

@@ -1,5 +1,5 @@
 /*  TangerineUI 🍊 for Mastodon
-    version: 1.7.4
+    version: 1.8
 
     A Tangerine redesign for Mastodon's Web UI.
     https://github.com/nileane/TangerineUI-for-Mastodon/
@@ -444,6 +444,12 @@ body.layout-single-column  {
 .layout-single-column .fa-at.column-header__icon:before {
     content: var(--icon-direct-messages);
 }
+.layout-single-column .fa-at.status__prepend-icon {
+    transform: scale(.7);
+}
+.layout-single-column .fa-at.status__prepend-icon::before {
+    content: var(--icon-direct-messages);
+}
 /* Bookmarks icon */
 .layout-single-column .column-link .fa-bookmark::before {
     content: var(--icon-bookmark-column-link);
@@ -850,6 +856,7 @@ body.layout-single-column  {
     padding-top: 2px;
     padding-left: 0;
     padding-right: 0;
+    margin-bottom: 0;
     height: 25px;
     color: var(--color-content-fg);
 }
@@ -857,6 +864,9 @@ body.layout-single-column  {
     width: 56px;
     text-align: right;
 }
+.layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper {
+    width: 46px;
+}
 .layout-single-column .status-card,
 .layout-single-column .status-card.compact {
     background-color: var(--color-content-secondary-bg);
@@ -1009,6 +1019,7 @@ body.layout-single-column  {
 .layout-single-column .follow_requests-unlocked_explanation {
     background-color: var(--color-accent-bg);
     color: var(--color-content-fg);
+    border-bottom: 0;
 }
 .layout-single-column .follow_requests-unlocked_explanation a {
     color: var(--color-accent);
@@ -1865,6 +1876,28 @@ body.layout-single-column  {
 .layout-single-column .dismissable-banner__action .icon-button {
     color: var(--color-accent-fg);
 }
+.layout-single-column .dismissable-banner__message h1 {
+    color: var(--color-accent-fg);
+    margin-top: 10px;
+}
+.layout-single-column .dismissable-banner__message__actions__wrapper {
+    flex-flow: row-reverse;
+}
+.layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) {
+    background: linear-gradient(to bottom, var(--color-accent), rgba(247, 105, 2, 0.4));
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-bottom: 2px;
+}
+.layout-single-column .dismissable-banner__background-image {
+    bottom: -35%;
+    opacity: .3;
+}
+.layout-single-column .dismissable-banner__message__actions .button,
+.layout-single-column .dismissable-banner__message__actions .button.button-tertiary {
+    line-height: 28px;
+    padding: 6px 17px;
+}