style(next): restyle the alert bar

This commit is contained in:
Adorian Doran 2025-02-16 15:47:44 +02:00
parent cb7b25f054
commit 630eb5ac8d
3 changed files with 28 additions and 1 deletions

View File

@ -142,6 +142,8 @@
--inactive-tab-hover-background-color: #ffffff0f;
--inactive-tab-text-color: #7c7c7c;
--alert-bar-background: #6b6b6b3b;
--right-pane-item-hover-background: #ffffff26;
--right-pane-item-hover-color: white;

View File

@ -136,6 +136,8 @@
--inactive-tab-hover-background-color: #00000016;
--inactive-tab-text-color: #4e4e4e;
--alert-bar-background: #32637b29;
--new-tab-button-background: #d8d8d8;
--new-tab-button-color: #3a3a3a;
--new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

View File

@ -1806,4 +1806,27 @@ div.bookmark-folder-widget .note-link .bx {
.note-icon-widget .icon-list span:hover {
background: var(--hover-item-background-color);
color: var(--hover-item-text-color);
}
}
/* Alert bar */
@keyframes alert-show {
from {
opacity: 0;
} to {
opacity: 1;
}
}
#center-pane div.alert {
position: relative;
margin: 8px 0 0 0;
border: unset;
border-radius: 0;
padding: 8px 16px;
background: var(--alert-bar-background) !important;
font-size: .9em;
font-weight: normal;
animation: alert-show 300ms ease-in;
border-bottom: 2px solid #0000001c !important;
}