137 lines
2.6 KiB
CSS
137 lines
2.6 KiB
CSS
.notice-banner {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 9999;
|
|
display: none;
|
|
justify-content: center;
|
|
padding: 10px 14px;
|
|
color: #102033;
|
|
font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
|
|
background: linear-gradient(90deg, #fff7d6, #dff7ff);
|
|
border-bottom: 1px solid rgba(16, 32, 51, 0.14);
|
|
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.notice-banner.is-visible {
|
|
display: flex;
|
|
}
|
|
|
|
.notice-banner__inner {
|
|
width: min(100%, 1120px);
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.notice-banner__badge {
|
|
min-width: 40px;
|
|
padding: 4px 9px;
|
|
border-radius: 999px;
|
|
color: #ffffff;
|
|
background: #2563eb;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.notice-banner[data-level="warning"] .notice-banner__badge {
|
|
background: #b45309;
|
|
}
|
|
|
|
.notice-banner[data-level="error"] .notice-banner__badge {
|
|
background: #be123c;
|
|
}
|
|
|
|
.notice-banner[data-level="success"] .notice-banner__badge {
|
|
background: #047857;
|
|
}
|
|
|
|
.notice-banner__content {
|
|
min-width: 0;
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.notice-banner__title {
|
|
margin-right: 6px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.notice-banner__message {
|
|
color: rgba(16, 32, 51, 0.84);
|
|
}
|
|
|
|
.notice-banner__link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 30px;
|
|
padding: 0 12px;
|
|
border-radius: 999px;
|
|
color: #ffffff;
|
|
background: #075985;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.notice-banner__link:hover {
|
|
background: #0369a1;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.notice-banner__close {
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
color: #102033;
|
|
background: rgba(16, 32, 51, 0.08);
|
|
font-size: 20px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.notice-banner__close:hover {
|
|
background: rgba(16, 32, 51, 0.14);
|
|
}
|
|
|
|
body.has-notice-banner {
|
|
padding-top: calc(var(--notice-body-pad-top, 0px) + var(--notice-banner-height, 0px) + 12px) !important;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.notice-banner {
|
|
padding: 9px 10px;
|
|
}
|
|
|
|
.notice-banner__inner {
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.notice-banner__link {
|
|
grid-column: 2 / 3;
|
|
justify-self: start;
|
|
}
|
|
|
|
.notice-banner__content {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.notice-banner {
|
|
display: none !important;
|
|
}
|
|
|
|
body.has-notice-banner {
|
|
padding-top: var(--notice-body-pad-top, 0px) !important;
|
|
}
|
|
}
|