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

Subtler design for the onboarding banners

Browse source
This commit is contained in:
Niléane 2023-11-24 18:07:44 +01:00
commit cfe010a910
No known key found for this signature in database
3 changed files with 33 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

19
TangerineUI-cherry.css
View file

@ -3260,21 +3260,26 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-top: 0; margin-top: 0;
} }
} }
.app-body .dismissable-banner__message,
.app-body .dismissable-banner__action .icon-button { .app-body .dismissable-banner__action .icon-button {
color: var(--color-accent-fg); color: var(--color-accent);
} }
.app-body .dismissable-banner__message h1 { .app-body .dismissable-banner__message h1 {
color: var(--color-accent-fg); color: var(--color-content-fg);
margin-top: 10px; 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 { .app-body .dismissable-banner__message__actions__wrapper {
flex-flow: row-reverse; flex-flow: row-reverse;
} }
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { .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-left: 10px;
padding-right: 10px; padding-right: 10px;
padding-bottom: 10px;
} }
.app-body .dismissable-banner__background-image { .app-body .dismissable-banner__background-image {
display: none; display: none;
@ -3284,10 +3289,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
line-height: 28px; line-height: 28px;
padding: 6px 17px; padding: 6px 17px;
} }
@media (prefers-color-scheme: dark) { .app-body .dismissable-banner__message__actions {
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { gap: 5px;
background: linear-gradient(to top, rgba(230, 137, 51, .5), rgba(230, 137, 51, .3));
}
} }

19
TangerineUI-purple.css
View file

@ -3260,21 +3260,26 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-top: 0; margin-top: 0;
} }
} }
.app-body .dismissable-banner__message,
.app-body .dismissable-banner__action .icon-button { .app-body .dismissable-banner__action .icon-button {
color: var(--color-accent-fg); color: var(--color-accent);
} }
.app-body .dismissable-banner__message h1 { .app-body .dismissable-banner__message h1 {
color: var(--color-accent-fg); color: var(--color-content-fg);
margin-top: 10px; 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 { .app-body .dismissable-banner__message__actions__wrapper {
flex-flow: row-reverse; flex-flow: row-reverse;
} }
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { .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-left: 10px;
padding-right: 10px; padding-right: 10px;
padding-bottom: 10px;
} }
.app-body .dismissable-banner__background-image { .app-body .dismissable-banner__background-image {
display: none; display: none;
@ -3284,10 +3289,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
line-height: 28px; line-height: 28px;
padding: 6px 17px; padding: 6px 17px;
} }
@media (prefers-color-scheme: dark) { .app-body .dismissable-banner__message__actions {
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { gap: 5px;
background: linear-gradient(to top, rgba(230, 137, 51, .5), rgba(230, 137, 51, .3));
}
} }

19
TangerineUI.css
View file

@ -3260,21 +3260,26 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
margin-top: 0; margin-top: 0;
} }
} }
.app-body .dismissable-banner__message,
.app-body .dismissable-banner__action .icon-button { .app-body .dismissable-banner__action .icon-button {
color: var(--color-accent-fg); color: var(--color-accent);
} }
.app-body .dismissable-banner__message h1 { .app-body .dismissable-banner__message h1 {
color: var(--color-accent-fg); color: var(--color-content-fg);
margin-top: 10px; 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 { .app-body .dismissable-banner__message__actions__wrapper {
flex-flow: row-reverse; flex-flow: row-reverse;
} }
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { .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-left: 10px;
padding-right: 10px; padding-right: 10px;
padding-bottom: 10px;
} }
.app-body .dismissable-banner__background-image { .app-body .dismissable-banner__background-image {
display: none; display: none;
@ -3284,10 +3289,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
line-height: 28px; line-height: 28px;
padding: 6px 17px; padding: 6px 17px;
} }
@media (prefers-color-scheme: dark) { .app-body .dismissable-banner__message__actions {
.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { gap: 5px;
background: linear-gradient(to top, rgba(230, 137, 51, .5), rgba(230, 137, 51, .3));
}
} }