zulip/web/styles/banners.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;
    border: 1px solid;
    border-radius: 6px;
}

.banner-link {
    color: var(--color-text-link);
    text-decoration: none;
    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;
    /* The padding and line-height values for the banner label
       are identical to those of the action buttons', to match
       the height of both of these elements. This is required to
       align the banner children elements vertically, since we
       cannot use flexbox center alignment as we also need to
       account for the UI when the banner has a muli-line label.
    */
    padding: 0.25em 0; /* 4px at 16px/1em */
    line-height: 1.25; /* 20px at 16px/1em */
}

.banner-action-buttons {
    grid-area: banner-action-buttons;
    display: flex;
    gap: 0.5em; /* 8px at 16px/1em */
    margin-left: 0.625em; /* 10px at 16px/1em */
}

.banner-close-button {
    display: flex;
    grid-area: banner-close-button;
    padding: 0.6875em; /* 11px at 16px/1em */
    margin-left: 0.3125em; /* 5px at 16px/1em */

    &: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%;
    }
}