.njt-nofi-container {
z-index: 10000;
width: 100%;
top: 0;
left: 0;
}
.njt-nofi-container[data-position='fixed'],
.njt-nofi-container:not([data-position]) {
position: fixed;
}
.njt-nofi-container[data-position='absolute'] {
position: absolute;
} .njt-nofi-container[data-placement='bottom'] {
top: auto;
bottom: 0;
} .njt-nofi-container-content {
opacity: 0;
pointer-events: none;
}
.njt-nofi-container-content.njt-nofi-visible {
opacity: 1;
pointer-events: auto;
} .njt-nofi-notification-bar {
position: relative;
display: flex;
align-items: center;
padding: 0 10px;
width: 100%;
box-sizing: border-box;
transform: translateY( -100% ); background: var( --njt-bar-bg, #9af4cf );
color: var( --njt-bar-color, #1919cf );
} @keyframes njt-nofi-slide-in {
from {
opacity: 0;
transform: translateY( -100% );
}
to {
opacity: 1;
transform: translateY( 0 );
}
}
.njt-nofi-container-content.njt-nofi-visible .njt-nofi-notification-bar {
animation: njt-nofi-slide-in 0.4s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
} .njt-nofi-container[data-placement='bottom'] .njt-nofi-notification-bar {
transform: translateY( 100% );
}
@keyframes njt-nofi-slide-in-bottom {
from {
opacity: 0;
transform: translateY( 100% );
}
to {
opacity: 1;
transform: translateY( 0 );
}
}
.njt-nofi-container-content.njt-nofi-visible
.njt-nofi-container[data-placement='bottom'] .njt-nofi-notification-bar {
animation-name: njt-nofi-slide-in-bottom;
} .njt-nofi-container-content.njt-nofi-collapsed .njt-nofi-content {
display: none;
} .njt-nofi-content {
width: 100%;
margin: auto;
padding: 10px 50px;
box-sizing: border-box;
align-items: center;
flex-wrap: wrap;
gap: 16px; }
.njt-nofi-content-desktop {
display: flex;
}
.njt-nofi-content-mobile {
display: none;
} .njt-nofi-content-deskop {
display: flex;
} .diplay-device-deskop,
.diplay-device-mobile { } .njt-nofi-text {
color: inherit;
}
.njt-nofi-button {
transition: transform 0.5s;
min-width: fit-content;
}
.njt-nofi-button:hover {
transform: scale( 1.05 );
}
.njt-nofi-button-text {
display: inline-block;
text-decoration: none;
padding: 8px 12px;
border-radius: 3px; } .njt-nofi-close,
.njt-nofi-toggle {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
border: none;
background: #0000002e;
border-radius: 50%;
cursor: pointer;
color: inherit;
padding: 0;
transition: transform 0.5s, background 0.2s ease;
}
.njt-nofi-close:hover,
.njt-nofi-toggle:hover {
transform: scale( 1.1 );
}
.njt-nofi-close:focus,
.njt-nofi-toggle:focus,
.njt-nofi-close:focus-visible,
.njt-nofi-toggle:focus-visible {
outline: 2px solid #4a90e2;
outline-offset: 2px;
}
.njt-nofi-close-icon {
pointer-events: none;
width: 11px;
height: 11px;
} .njt-nofi-container-content.njt-nofi-collapsed .njt-nofi-toggle {
transform: rotate( 45deg );
}
.njt-nofi-container-content.njt-nofi-collapsed .njt-nofi-toggle:hover {
transform: rotate( 45deg ) scale( 1.1 );
} .admin-bar .njt-nofi-container[data-position='fixed'],
.admin-bar .njt-nofi-container[data-position='absolute'] {
top: 32px;
}
@media screen and (max-width: 782px) {
.admin-bar .njt-nofi-container[data-position='fixed'],
.admin-bar .njt-nofi-container[data-position='absolute'] {
top: 46px;
}
} .admin-bar .njt-nofi-container[data-placement='bottom'] {
top: auto;
bottom: 0;
} @media only screen and (max-width: 480px) {
.njt-nofi-content {
padding: 10px 20px; } .njt-nofi-has-mobile .njt-nofi-content-desktop {
display: none;
}
.njt-nofi-content-mobile {
display: flex;
}
} .customize-partial-edit-shortcuts-shown
.njt-nofi-container
.customize-partial-edit-shortcut-button {
left: 5px;
top: 10px;
}
.customize-partial-edit-shortcuts-shown
.njt-nofi-container
.customize-partial-edit-shortcut {
position: inherit;
}
.njt-nofi-container .customize-partial-refreshing {
opacity: 1;
transition: opacity 0.25s;
cursor: progress;
} @media (prefers-reduced-motion: reduce) {
.njt-nofi-close,
.njt-nofi-toggle,
.njt-nofi-button {
transition: none !important;
} .njt-nofi-notification-bar {
transform: none !important;
animation: none !important;
}
}