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

Improved support for Mastodon's new dismissable banner

Browse source
This commit is contained in:
Niléane 2023-07-23 12:00:37 +02:00
commit 3d8abf92d9
No known key found for this signature in database
4 changed files with 136 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
}

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

@ -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;
}