Does your “We just updated this page…” banner started lookin bad compared to your app design?
In fact, that is a pretty easy fix. Just add css with the selector “.bad-revision” to your app’s like this:
That’s it!
Here is the CSS to use to replicate the example above:
padding: clamp(24px, 3vw, 32px) clamp(16px, 4vw, 24px);
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
font-size: clamp(0.95rem, 1.5vw, 1.05rem) !important;
background: linear-gradient(180deg, rgba(238, 244, 250, 0.7), rgba(208, 218, 230, 0.8)) !important;
backdrop-filter: saturate(120%) blur(6px);
font-weight: 600;
color: #1e1e1e;
position: absolute;
text-align: center;
top: 32px;
left: 50%;
transform: translateX(-50%);
min-width: 300px;
max-width: 90%;
box-sizing: border-box;
z-index: 20000;
line-height: 1.4;
cursor: pointer;
box-shadow: 0px 8px 32px 0px rgba(30, 30, 30, 0.6);
border-radius: 24px;
border: 1px solid #cacaca;
transition: box-shadow 180ms ease, transform 160ms ease, background 200ms ease, border-color 200ms ease;
transform-origin: center !important;
}
.bad-revision:hover {
transform: translateX(-50%) scale(1.02);
background: linear-gradient(180deg, rgba(238, 244, 250, 0.9), rgba(208, 218, 230, 1)) !important;
box-shadow: 0px 8px 32px 4px rgba(30, 30, 30, 0.8);
}
.bad-revision:active {
transform: translateX(-50%) scale(0.98);
box-shadow: 0px 0px 8px -10px rgba(30, 30, 30, 0.1);
}
Don’t forget to wrap it with a tag if you don’t have it already.
