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

Improvements to dismissable banners in specific cases (borders and rounded corners)

Browse source
This commit is contained in:
Niléane 2023-08-02 15:28:17 +02:00
commit 042e83a517
No known key found for this signature in database
4 changed files with 116 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

30
TangerineUI-purple.css
View file

@ -254,6 +254,10 @@ body.layout-single-column {
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
} }
.layout-single-column .dismissable-banner + .scrollable {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* *️⃣ Icons /* *️⃣ Icons
@ -2423,13 +2427,37 @@ body.layout-single-column {
padding: 10px 10px 0; padding: 10px 10px 0;
} }
} }
/* Dismissable banners */
.layout-single-column .dismissable-banner { .layout-single-column .dismissable-banner {
background-color: var(--color-accent); background-color: var(--color-accent);
box-shadow: 0 5px var(--color-content-bg); box-shadow: 0 5px var(--color-content-bg);
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
border: 0; border: 1px solid var(--color-lines);
margin: 0; margin: 0;
} }
.layout-single-column .explore__links .dismissable-banner {
border: 0;
border-radius: 7px 7px 0 0;
}
@media screen and (max-width:889px) {
.layout-single-column .dismissable-banner,
.layout-single-column .explore__links .dismissable-banner {
border-radius: 0;
border-left: 0;
border-right: 0;
}
}
@media screen and (min-width:890px) and (max-width:1174px) {
.layout-single-column .dismissable-banner {
margin-top: 10px;
}
.layout-single-column .explore__links .dismissable-banner {
margin-top: 0;
}
}
.layout-single-column .dismissable-banner__message, .layout-single-column .dismissable-banner__message,
.layout-single-column .dismissable-banner__action .icon-button { .layout-single-column .dismissable-banner__action .icon-button {
color: var(--color-accent-fg); color: var(--color-accent-fg);

30
TangerineUI.css
View file

@ -254,6 +254,10 @@ body.layout-single-column {
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
} }
.layout-single-column .dismissable-banner + .scrollable {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* *️⃣ Icons /* *️⃣ Icons
@ -2423,13 +2427,37 @@ body.layout-single-column {
padding: 10px 10px 0; padding: 10px 10px 0;
} }
} }
/* Dismissable banners */
.layout-single-column .dismissable-banner { .layout-single-column .dismissable-banner {
background-color: var(--color-accent); background-color: var(--color-accent);
box-shadow: 0 5px var(--color-content-bg); box-shadow: 0 5px var(--color-content-bg);
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
border: 0; border: 1px solid var(--color-lines);
margin: 0; margin: 0;
} }
.layout-single-column .explore__links .dismissable-banner {
border: 0;
border-radius: 7px 7px 0 0;
}
@media screen and (max-width:889px) {
.layout-single-column .dismissable-banner,
.layout-single-column .explore__links .dismissable-banner {
border-radius: 0;
border-left: 0;
border-right: 0;
}
}
@media screen and (min-width:890px) and (max-width:1174px) {
.layout-single-column .dismissable-banner {
margin-top: 10px;
}
.layout-single-column .explore__links .dismissable-banner {
margin-top: 0;
}
}
.layout-single-column .dismissable-banner__message, .layout-single-column .dismissable-banner__message,
.layout-single-column .dismissable-banner__action .icon-button { .layout-single-column .dismissable-banner__action .icon-button {
color: var(--color-accent-fg); color: var(--color-accent-fg);

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

@ -254,6 +254,10 @@ body.layout-single-column {
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
} }
.layout-single-column .dismissable-banner + .scrollable {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* *️⃣ Icons /* *️⃣ Icons
@ -2423,13 +2427,37 @@ body.layout-single-column {
padding: 10px 10px 0; padding: 10px 10px 0;
} }
} }
/* Dismissable banners */
.layout-single-column .dismissable-banner { .layout-single-column .dismissable-banner {
background-color: var(--color-accent); background-color: var(--color-accent);
box-shadow: 0 5px var(--color-content-bg); box-shadow: 0 5px var(--color-content-bg);
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
border: 0; border: 1px solid var(--color-lines);
margin: 0; margin: 0;
} }
.layout-single-column .explore__links .dismissable-banner {
border: 0;
border-radius: 7px 7px 0 0;
}
@media screen and (max-width:889px) {
.layout-single-column .dismissable-banner,
.layout-single-column .explore__links .dismissable-banner {
border-radius: 0;
border-left: 0;
border-right: 0;
}
}
@media screen and (min-width:890px) and (max-width:1174px) {
.layout-single-column .dismissable-banner {
margin-top: 10px;
}
.layout-single-column .explore__links .dismissable-banner {
margin-top: 0;
}
}
.layout-single-column .dismissable-banner__message, .layout-single-column .dismissable-banner__message,
.layout-single-column .dismissable-banner__action .icon-button { .layout-single-column .dismissable-banner__action .icon-button {
color: var(--color-accent-fg); color: var(--color-accent-fg);

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

@ -254,6 +254,10 @@ body.layout-single-column {
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
} }
.layout-single-column .dismissable-banner + .scrollable {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* *️⃣ Icons /* *️⃣ Icons
@ -2423,13 +2427,37 @@ body.layout-single-column {
padding: 10px 10px 0; padding: 10px 10px 0;
} }
} }
/* Dismissable banners */
.layout-single-column .dismissable-banner { .layout-single-column .dismissable-banner {
background-color: var(--color-accent); background-color: var(--color-accent);
box-shadow: 0 5px var(--color-content-bg); box-shadow: 0 5px var(--color-content-bg);
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
border: 0; border: 1px solid var(--color-lines);
margin: 0; margin: 0;
} }
.layout-single-column .explore__links .dismissable-banner {
border: 0;
border-radius: 7px 7px 0 0;
}
@media screen and (max-width:889px) {
.layout-single-column .dismissable-banner,
.layout-single-column .explore__links .dismissable-banner {
border-radius: 0;
border-left: 0;
border-right: 0;
}
}
@media screen and (min-width:890px) and (max-width:1174px) {
.layout-single-column .dismissable-banner {
margin-top: 10px;
}
.layout-single-column .explore__links .dismissable-banner {
margin-top: 0;
}
}
.layout-single-column .dismissable-banner__message, .layout-single-column .dismissable-banner__message,
.layout-single-column .dismissable-banner__action .icon-button { .layout-single-column .dismissable-banner__action .icon-button {
color: var(--color-accent-fg); color: var(--color-accent-fg);