mirror of
https://github.com/zulip/zulip.git
synced 2026-07-12 21:04:41 +08:00
3275fcc96e
This commit serves as the base commit for redesigning the alert banners by migrating them to use the new banner component. We use a new name to refer to these banners — "Popup banners", which is more descriptive about their behavior. The Popup banners are appended to the container in a stacking order, i.e., the most recent popup banner appears on the top and the oldest one is sent to the bottom of the stack. These banners also inherit the animations from the alert banners for visual appeal. This commit also fixes the bug where clicking on the "Try now" button in the popup banner resulting from an error in the `/json/messages` endpoint resulted in call to restart_get_events in server_events.js instead of load_messages in message_fetch.ts. Fixes #31282.
200 lines
4.5 KiB
CSS
200 lines
4.5 KiB
CSS
.banner-wrapper {
|
|
container: banner / inline-size;
|
|
}
|
|
|
|
.banner {
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
grid-template: var(--banner-grid-template-rows-lg) / var(
|
|
--banner-grid-template-columns-lg
|
|
);
|
|
grid-template-areas: var(--banner-grid-template-areas-lg);
|
|
place-items: start;
|
|
font-size: 0.9375em;
|
|
border: 1px solid;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.banner-link {
|
|
color: var(--color-text-link);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--color-text-link-decoration);
|
|
|
|
&:hover {
|
|
color: var(--color-text-link-hover);
|
|
text-decoration-color: var(--color-text-link-decoration-hover);
|
|
}
|
|
|
|
&:active {
|
|
color: var(--color-text-link-active);
|
|
text-decoration-color: currentcolor;
|
|
}
|
|
}
|
|
|
|
.banner-label {
|
|
grid-area: banner-label;
|
|
padding: 0.3333em 0 0.2667em;
|
|
line-height: 1.2667;
|
|
}
|
|
|
|
.banner-action-buttons {
|
|
grid-area: banner-action-buttons;
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.banner-close-button {
|
|
display: flex;
|
|
grid-area: banner-close-button;
|
|
padding: 0.6875em;
|
|
margin-left: 5px;
|
|
|
|
&:focus-visible {
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
.navbar-alert-banner {
|
|
grid-template-columns:
|
|
var(--banner-horizontal-padding) minmax(0, 1fr)
|
|
auto 0 auto minmax(0, 1fr) minmax(0, auto) var(
|
|
--banner-horizontal-padding
|
|
);
|
|
border: unset;
|
|
border-bottom: 1px solid;
|
|
border-radius: 0;
|
|
place-items: start center;
|
|
}
|
|
|
|
.navbar-alert-banner .banner-action-buttons {
|
|
justify-content: center;
|
|
}
|
|
|
|
@container banner (width >= 44em) and (width < 63em) {
|
|
.navbar-alert-banner[data-process="desktop-notifications"] {
|
|
grid-template: var(--banner-grid-template-rows-md) / var(
|
|
--banner-grid-template-columns-md
|
|
);
|
|
grid-template-areas: var(--banner-grid-template-areas-md);
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@container banner (width < 44em) {
|
|
.banner {
|
|
grid-template: var(--banner-grid-template-rows-md) / var(
|
|
--banner-grid-template-columns-md
|
|
);
|
|
grid-template-areas: var(--banner-grid-template-areas-md);
|
|
}
|
|
|
|
.banner-action-buttons {
|
|
flex-wrap: wrap;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.navbar-alert-banner {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@container banner (width < 25em) {
|
|
.banner {
|
|
grid-template-areas: var(--banner-grid-template-areas-sm);
|
|
}
|
|
|
|
.banner-action-buttons {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.banner-neutral {
|
|
background-color: var(--color-background-neutral-banner);
|
|
color: var(--color-text-neutral-banner);
|
|
border-color: var(--color-border-neutral-banner);
|
|
}
|
|
|
|
.banner-brand {
|
|
background-color: var(--color-background-brand-banner);
|
|
color: var(--color-text-brand-banner);
|
|
border-color: var(--color-border-brand-banner);
|
|
}
|
|
|
|
.banner-info {
|
|
background-color: var(--color-background-info-banner);
|
|
color: var(--color-text-info-banner);
|
|
border-color: var(--color-border-info-banner);
|
|
}
|
|
|
|
.banner-success {
|
|
background-color: var(--color-background-success-banner);
|
|
color: var(--color-text-success-banner);
|
|
border-color: var(--color-border-success-banner);
|
|
}
|
|
|
|
.banner-warning {
|
|
background-color: var(--color-background-warning-banner);
|
|
color: var(--color-text-warning-banner);
|
|
border-color: var(--color-border-warning-banner);
|
|
}
|
|
|
|
.banner-danger {
|
|
background-color: var(--color-background-danger-banner);
|
|
color: var(--color-text-danger-banner);
|
|
border-color: var(--color-border-danger-banner);
|
|
}
|
|
|
|
@keyframes popup-banner-fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(
|
|
calc(-1 * var(--popup-banner-translate-y-distance))
|
|
);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes popup-banner-fadeOut {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(
|
|
calc(-1 * var(--popup-banner-translate-y-distance))
|
|
);
|
|
}
|
|
}
|
|
|
|
.popup-banner-animations {
|
|
animation-name: popup-banner-fadeIn;
|
|
animation-duration: 0.3s;
|
|
animation-fill-mode: forwards;
|
|
|
|
&.fade-out {
|
|
animation-name: popup-banner-fadeOut;
|
|
}
|
|
}
|
|
|
|
.popup-banner {
|
|
@extend .popup-banner-animations;
|
|
|
|
pointer-events: auto;
|
|
max-width: 900px;
|
|
width: 100%;
|
|
|
|
/* Here the container width == viewport width,
|
|
so we can work with the media breakpoints. */
|
|
@container banner (width < $lg_min) {
|
|
max-width: 90%;
|
|
}
|
|
}
|