body > .n-image-container { position: fixed; } .n-image-preview-container { position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: flex; } .n-image-preview-overlay { z-index: -1; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, .3); } .n-image-preview-overlay.fade-in-transition-enter-active { transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important; } .n-image-preview-overlay.fade-in-transition-leave-active { transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important; } .n-image-preview-overlay.fade-in-transition-enter-from, .n-image-preview-overlay.fade-in-transition-leave-to { opacity: 0; } .n-image-preview-overlay.fade-in-transition-leave-from, .n-image-preview-overlay.fade-in-transition-enter-to { opacity: 1; } .n-image-preview-toolbar { z-index: 1; position: absolute; left: 50%; transform: translateX(-50%); border-radius: var(--n-toolbar-border-radius); height: 48px; bottom: 40px; padding: 0 12px; background: var(--n-toolbar-color); box-shadow: var(--n-toolbar-box-shadow); color: var(--n-toolbar-icon-color); transition: color .3s var(--n-bezier); display: flex; align-items: center; } .n-image-preview-toolbar .n-base-icon { padding: 0 8px; font-size: 28px; cursor: pointer; } .n-image-preview-toolbar.fade-in-transition-enter-active { transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important; } .n-image-preview-toolbar.fade-in-transition-leave-active { transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important; } .n-image-preview-toolbar.fade-in-transition-enter-from, .n-image-preview-toolbar.fade-in-transition-leave-to { opacity: 0; } .n-image-preview-toolbar.fade-in-transition-leave-from, .n-image-preview-toolbar.fade-in-transition-enter-to { opacity: 1; } .n-image-preview-wrapper { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; pointer-events: none; } .n-image-preview-wrapper.fade-in-scale-up-transition-leave-active { transform-origin: inherit; transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1) ; } .n-image-preview-wrapper.fade-in-scale-up-transition-enter-active { transform-origin: inherit; transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1) ; } .n-image-preview-wrapper.fade-in-scale-up-transition-enter-from, .n-image-preview-wrapper.fade-in-scale-up-transition-leave-to { opacity: 0; transform: scale(.9); } .n-image-preview-wrapper.fade-in-scale-up-transition-leave-from, .n-image-preview-wrapper.fade-in-scale-up-transition-enter-to { opacity: 1; transform: scale(1); } .n-image-preview { user-select: none; -webkit-user-select: none; pointer-events: all; margin: auto; max-height: calc(100vh - 32px); max-width: calc(100vw - 32px); transition: transform .3s var(--n-bezier); } .n-image { display: inline-flex; max-height: 100%; max-width: 100%; } .n-image:not(.n-image--preview-disabled) { cursor: pointer; } .n-image img { border-radius: inherit; } .n-drawer { word-break: break-word; line-height: var(--n-line-height); position: absolute; pointer-events: all; box-shadow: var(--n-box-shadow); transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); background-color: var(--n-color); color: var(--n-text-color); box-sizing: border-box; } .n-drawer.slide-in-from-right-transition-leave-active { transition: transform 0.2s cubic-bezier(.4, 0, 1, 1); } .n-drawer.slide-in-from-right-transition-enter-active { transition: transform 0.3s cubic-bezier(0, 0, .2, 1); } .n-drawer.slide-in-from-right-transition-enter-to { transform: translateX(0); } .n-drawer.slide-in-from-right-transition-enter-from { transform: translateX(100%); } .n-drawer.slide-in-from-right-transition-leave-from { transform: translateX(0); } .n-drawer.slide-in-from-right-transition-leave-to { transform: translateX(100%); } .n-drawer.slide-in-from-left-transition-leave-active { transition: transform 0.2s cubic-bezier(.4, 0, 1, 1); } .n-drawer.slide-in-from-left-transition-enter-active { transition: transform 0.3s cubic-bezier(0, 0, .2, 1); } .n-drawer.slide-in-from-left-transition-enter-to { transform: translateX(0); } .n-drawer.slide-in-from-left-transition-enter-from { transform: translateX(-100%); } .n-drawer.slide-in-from-left-transition-leave-from { transform: translateX(0); } .n-drawer.slide-in-from-left-transition-leave-to { transform: translateX(-100%); } .n-drawer.slide-in-from-top-transition-leave-active { transition: transform 0.2s cubic-bezier(.4, 0, 1, 1); } .n-drawer.slide-in-from-top-transition-enter-active { transition: transform 0.3s cubic-bezier(0, 0, .2, 1); } .n-drawer.slide-in-from-top-transition-enter-to { transform: translateY(0); } .n-drawer.slide-in-from-top-transition-enter-from { transform: translateY(-100%); } .n-drawer.slide-in-from-top-transition-leave-from { transform: translateY(0); } .n-drawer.slide-in-from-top-transition-leave-to { transform: translateY(-100%); } .n-drawer.slide-in-from-bottom-transition-leave-active { transition: transform 0.2s cubic-bezier(.4, 0, 1, 1); } .n-drawer.slide-in-from-bottom-transition-enter-active { transition: transform 0.3s cubic-bezier(0, 0, .2, 1); } .n-drawer.slide-in-from-bottom-transition-enter-to { transform: translateY(0); } .n-drawer.slide-in-from-bottom-transition-enter-from { transform: translateY(100%); } .n-drawer.slide-in-from-bottom-transition-leave-from { transform: translateY(0); } .n-drawer.slide-in-from-bottom-transition-leave-to { transform: translateY(100%); } .n-drawer.n-drawer--unselectable { user-select: none; -webkit-user-select: none; } .n-drawer.n-drawer--native-scrollbar .n-drawer-content-wrapper { overflow: auto; height: 100%; } .n-drawer .n-drawer__resize-trigger { position: absolute; background-color: #0000; transition: background-color .3s var(--n-bezier); } .n-drawer .n-drawer__resize-trigger.n-drawer__resize-trigger--hover { background-color: var(--n-resize-trigger-color-hover); } .n-drawer .n-drawer-content-wrapper { box-sizing: border-box; } .n-drawer .n-drawer-content { height: 100%; display: flex; flex-direction: column; } .n-drawer .n-drawer-content.n-drawer-content--native-scrollbar .n-drawer-body-content-wrapper { height: 100%; overflow: auto; } .n-drawer .n-drawer-content .n-drawer-body { flex: 1 0 0; overflow: hidden; } .n-drawer .n-drawer-content .n-drawer-body-content-wrapper { box-sizing: border-box; padding: var(--n-body-padding); } .n-drawer .n-drawer-content .n-drawer-header { font-weight: var(--n-title-font-weight); line-height: 1; font-size: var(--n-title-font-size); color: var(--n-title-text-color); padding: var(--n-header-padding); transition: border .3s var(--n-bezier); border-bottom: 1px solid var(--n-divider-color); border-bottom: var(--n-header-border-bottom); display: flex; justify-content: space-between; align-items: center; } .n-drawer .n-drawer-content .n-drawer-header .n-drawer-header__main { flex: 1; } .n-drawer .n-drawer-content .n-drawer-header .n-drawer-header__close { margin-left: 6px; transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); } .n-drawer .n-drawer-content .n-drawer-footer { display: flex; justify-content: flex-end; border-top: var(--n-footer-border-top); transition: border .3s var(--n-bezier); padding: var(--n-footer-padding); } .n-drawer.n-drawer--right-placement { top: 0; bottom: 0; right: 0; border-top-left-radius: var(--n-border-radius); border-bottom-left-radius: var(--n-border-radius); } .n-drawer.n-drawer--right-placement .n-drawer__resize-trigger { width: 3px; height: 100%; top: 0; left: 0; transform: translateX(-1.5px); cursor: ew-resize; } .n-drawer.n-drawer--left-placement { top: 0; bottom: 0; left: 0; border-top-right-radius: var(--n-border-radius); border-bottom-right-radius: var(--n-border-radius); } .n-drawer.n-drawer--left-placement .n-drawer__resize-trigger { width: 3px; height: 100%; top: 0; right: 0; transform: translateX(1.5px); cursor: ew-resize; } .n-drawer.n-drawer--top-placement { top: 0; left: 0; right: 0; border-bottom-left-radius: var(--n-border-radius); border-bottom-right-radius: var(--n-border-radius); } .n-drawer.n-drawer--top-placement .n-drawer__resize-trigger { width: 100%; height: 3px; bottom: 0; left: 0; transform: translateY(1.5px); cursor: ns-resize; } .n-drawer.n-drawer--bottom-placement { left: 0; bottom: 0; right: 0; border-top-left-radius: var(--n-border-radius); border-top-right-radius: var(--n-border-radius); } .n-drawer.n-drawer--bottom-placement .n-drawer__resize-trigger { width: 100%; height: 3px; top: 0; left: 0; transform: translateY(-1.5px); cursor: ns-resize; } body > .n-drawer-container { position: fixed; } .n-drawer-container { position: relative; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; } .n-drawer-container > * { pointer-events: all; } .n-drawer-mask { background-color: rgba(0, 0, 0, .3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .n-drawer-mask.n-drawer-mask--invisible { background-color: rgba(0, 0, 0, 0) } .n-drawer-mask.fade-in-transition-enter-active { transition: all 0.2s var(--n-bezier-in)!important; } .n-drawer-mask.fade-in-transition-leave-active { transition: all 0.2s var(--n-bezier-out)!important; } .n-drawer-mask.fade-in-transition-enter-from, .n-drawer-mask.fade-in-transition-leave-to { opacity: 0; } .n-drawer-mask.fade-in-transition-leave-from, .n-drawer-mask.fade-in-transition-enter-to { opacity: 1; } .n-card { font-size: var(--n-font-size); line-height: var(--n-line-height); display: flex; flex-direction: column; width: 100%; box-sizing: border-box; position: relative; border-radius: var(--n-border-radius); background-color: var(--n-color); color: var(--n-text-color); word-break: break-word; transition: color .3s var(--n-bezier), background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier), border-color .3s var(--n-bezier); } .n-card.n-modal { background: var(--n-color-modal); } .n-card.n-card--hoverable:hover { box-shadow: var(--n-box-shadow); } .n-card.n-card--content-segmented > .n-card__content { padding-top: var(--n-padding-bottom); } .n-card.n-card--content-soft-segmented > .n-card__content { margin: 0 var(--n-padding-left); padding: var(--n-padding-bottom) 0; } .n-card.n-card--footer-segmented > .n-card__footer { padding-top: var(--n-padding-bottom); } .n-card.n-card--footer-soft-segmented > .n-card__footer { padding: var(--n-padding-bottom) 0; margin: 0 var(--n-padding-left); } .n-card > .n-card-header { box-sizing: border-box; display: flex; align-items: center; font-size: var(--n-title-font-size); padding: var(--n-padding-top) var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left); } .n-card > .n-card-header .n-card-header__main { font-weight: var(--n-title-font-weight); transition: color .3s var(--n-bezier); flex: 1; min-width: 0; color: var(--n-title-text-color); } .n-card > .n-card-header .n-card-header__extra { display: flex; align-items: center; font-size: var(--n-font-size); font-weight: 400; transition: color .3s var(--n-bezier); color: var(--n-text-color); } .n-card > .n-card-header .n-card-header__close { margin: 0 0 0 8px; transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); } .n-card > .n-card__action { box-sizing: border-box; transition: background-color .3s var(--n-bezier), border-color .3s var(--n-bezier); background-clip: padding-box; background-color: var(--n-action-color); } .n-card > .n-card__content { flex: 1; min-width: 0; } .n-card > .n-card__content, .n-card > .n-card__footer { box-sizing: border-box; padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left); font-size: var(--n-font-size); } .n-card > .n-card__content:first-child, .n-card > .n-card__footer:first-child { padding-top: var(--n-padding-bottom); } .n-card > .n-card__action { background-color: var(--n-action-color); padding: var(--n-padding-bottom) var(--n-padding-left); border-bottom-left-radius: var(--n-border-radius); border-bottom-right-radius: var(--n-border-radius); } .n-card .n-card-cover { overflow: hidden; width: 100%; border-radius: var(--n-border-radius) var(--n-border-radius) 0 0; } .n-card .n-card-cover img { display: block; width: 100%; } .n-card.n-card--bordered { border: 1px solid var(--n-border-color); } .n-card.n-card--bordered:target { border-color: var(--n-color-target); } .n-card.n-card--action-segmented > .n-card__action:not(:first-child) { border-top: 1px solid var(--n-border-color); } .n-card.n-card--content-segmented > .n-card__content, .n-card.n-card--content-soft-segmented > .n-card__content { transition: border-color 0.3s var(--n-bezier); } .n-card.n-card--content-segmented > .n-card__content:not(:first-child), .n-card.n-card--content-soft-segmented > .n-card__content:not(:first-child) { border-top: 1px solid var(--n-border-color); } .n-card.n-card--footer-segmented > .n-card__footer, .n-card.n-card--footer-soft-segmented > .n-card__footer { transition: border-color 0.3s var(--n-bezier); } .n-card.n-card--footer-segmented > .n-card__footer:not(:first-child), .n-card.n-card--footer-soft-segmented > .n-card__footer:not(:first-child) { border-top: 1px solid var(--n-border-color); } .n-card.n-card--embedded { background-color: var(--n-color-embedded); } .n-modal .n-card, .n-drawer .n-card { background: var(--n-color-modal); } .n-modal .n-card.n-card--embedded, .n-drawer .n-card.n-card--embedded { background-color: var(--n-color-embedded-modal); } .n-popover .n-card { background: var(--n-color-popover); } .n-popover .n-card.n-card--embedded { background-color: var(--n-color-embedded-popover); } .n-ellipsis { overflow: hidden; } .n-ellipsis:not(.n-ellipsis--line-clamp) { white-space: nowrap; display: inline-block; vertical-align: bottom; max-width: 100%; } .n-ellipsis.n-ellipsis--line-clamp { display: -webkit-inline-box; -webkit-box-orient: vertical; } .n-ellipsis.n-ellipsis--cursor-pointer { cursor: pointer; } .n-breadcrumb { white-space: nowrap; cursor: default; line-height: var(--n-item-line-height); } .n-breadcrumb ul { list-style: none; padding: 0; margin: 0; } .n-breadcrumb a { color: inherit; text-decoration: inherit; } .n-breadcrumb .n-breadcrumb-item { font-size: var(--n-font-size); transition: color .3s var(--n-bezier); display: inline-flex; align-items: center; } .n-breadcrumb .n-breadcrumb-item .n-icon { font-size: 18px; vertical-align: -.2em; transition: color .3s var(--n-bezier); color: var(--n-item-text-color); } .n-breadcrumb .n-breadcrumb-item:not(:last-child).n-breadcrumb-item--clickable .n-breadcrumb-item__link { cursor: pointer; } .n-breadcrumb .n-breadcrumb-item:not(:last-child).n-breadcrumb-item--clickable .n-breadcrumb-item__link:hover { background-color: var(--n-item-color-hover); } .n-breadcrumb .n-breadcrumb-item:not(:last-child).n-breadcrumb-item--clickable .n-breadcrumb-item__link:active { background-color: var(--n-item-color-pressed); } .n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link { padding: 4px; border-radius: var(--n-item-border-radius); transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); color: var(--n-item-text-color); position: relative; } .n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:hover { color: var(--n-item-text-color-hover); } .n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:hover .n-icon { color: var(--n-item-text-color-hover); } .n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:active { color: var(--n-item-text-color-pressed); } .n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:active .n-icon { color: var(--n-item-text-color-pressed); } .n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__separator { margin: 0 8px; color: var(--n-separator-color); transition: color .3s var(--n-bezier); user-select: none; -webkit-user-select: none; } .n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link { font-weight: var(--n-font-weight-active); cursor: unset; color: var(--n-item-text-color-active); } .n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link .n-icon { color: var(--n-item-text-color-active); } .n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__separator { display: none; } .n-scrollbar { overflow: hidden; position: relative; z-index: auto; height: 100%; width: 100%; } .n-scrollbar > .n-scrollbar-container { width: 100%; overflow: scroll; height: 100%; min-height: inherit; max-height: inherit; scrollbar-width: none; } .n-scrollbar > .n-scrollbar-container::-webkit-scrollbar, .n-scrollbar > .n-scrollbar-container::-webkit-scrollbar-track-piece, .n-scrollbar > .n-scrollbar-container::-webkit-scrollbar-thumb { width: 0; height: 0; display: none; } .n-scrollbar > .n-scrollbar-container > .n-scrollbar-content { box-sizing: border-box; min-width: 100%; } .n-scrollbar > .n-scrollbar-rail, .n-scrollbar + .n-scrollbar-rail { position: absolute; pointer-events: none; user-select: none; background: var(--n-scrollbar-rail-color); -webkit-user-select: none; } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--horizontal, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--horizontal { height: var(--n-scrollbar-height); } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--horizontal > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--horizontal > .n-scrollbar-rail__scrollbar { height: var(--n-scrollbar-height); border-radius: var(--n-scrollbar-border-radius); right: 0; } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--horizontal--top, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--horizontal--top { top: var(--n-scrollbar-rail-top-horizontal-top); right: var(--n-scrollbar-rail-right-horizontal-top); bottom: var(--n-scrollbar-rail-bottom-horizontal-top); left: var(--n-scrollbar-rail-left-horizontal-top); } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--horizontal--bottom, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--horizontal--bottom { top: var(--n-scrollbar-rail-top-horizontal-bottom); right: var(--n-scrollbar-rail-right-horizontal-bottom); bottom: var(--n-scrollbar-rail-bottom-horizontal-bottom); left: var(--n-scrollbar-rail-left-horizontal-bottom); } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical { width: var(--n-scrollbar-width); } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar { width: var(--n-scrollbar-width); border-radius: var(--n-scrollbar-border-radius); bottom: 0; } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical--left, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical--left { top: var(--n-scrollbar-rail-top-vertical-left); right: var(--n-scrollbar-rail-right-vertical-left); bottom: var(--n-scrollbar-rail-bottom-vertical-left); left: var(--n-scrollbar-rail-left-vertical-left); } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical--right, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical--right { top: var(--n-scrollbar-rail-top-vertical-right); right: var(--n-scrollbar-rail-right-vertical-right); bottom: var(--n-scrollbar-rail-bottom-vertical-right); left: var(--n-scrollbar-rail-left-vertical-right); } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--disabled > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--disabled > .n-scrollbar-rail__scrollbar { pointer-events: none; } .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar { z-index: 1; position: absolute; cursor: pointer; pointer-events: all; background-color: var(--n-scrollbar-color); transition: background-color .2s var(--n-scrollbar-bezier); } .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-active, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-active { transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important; } .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-active, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-active { transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important; } .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-from, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-from, .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-to, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-to { opacity: 0; } .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-from, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-from, .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-to, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-to { opacity: 1; } .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar:hover, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar:hover { background-color: var(--n-scrollbar-color-hover); } .v-binder-follower-container { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; z-index: auto; } .v-binder-follower-content { position: absolute; z-index: auto; } .v-binder-follower-content > * { pointer-events: all; } .n-popover { transition: box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier), color .3s var(--n-bezier); position: relative; font-size: var(--n-font-size); color: var(--n-text-color); box-shadow: var(--n-box-shadow); word-break: break-word; } .n-popover > .n-scrollbar { height: inherit; max-height: inherit; } .n-popover:not(.n-popover--raw) { background-color: var(--n-color); border-radius: var(--n-border-radius); } .n-popover:not(.n-popover--raw):not(.n-popover--scrollable):not(.n-popover--show-header-or-footer) { padding: var(--n-padding); } .n-popover .n-popover__header { padding: var(--n-padding); border-bottom: 1px solid var(--n-divider-color); transition: border-color .3s var(--n-bezier); } .n-popover .n-popover__footer { padding: var(--n-padding); border-top: 1px solid var(--n-divider-color); transition: border-color .3s var(--n-bezier); } .n-popover.n-popover--scrollable .n-popover__content, .n-popover.n-popover--show-header-or-footer .n-popover__content { padding: var(--n-padding); } .n-popover-shared { transform-origin: inherit; } .n-popover-shared .n-popover-arrow-wrapper { position: absolute; overflow: hidden; pointer-events: none; } .n-popover-shared .n-popover-arrow-wrapper .n-popover-arrow { transition: background-color .3s var(--n-bezier); position: absolute; display: block; width: calc(var(--n-arrow-height) * 1.414); height: calc(var(--n-arrow-height) * 1.414); box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12); transform: rotate(45deg); background-color: var(--n-color); pointer-events: all; } .n-popover-shared.popover-transition-enter-from, .n-popover-shared.popover-transition-leave-to { opacity: 0; transform: scale(.85); } .n-popover-shared.popover-transition-enter-to, .n-popover-shared.popover-transition-leave-from { transform: scale(1); opacity: 1; } .n-popover-shared.popover-transition-enter-active { transition: box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier), color .3s var(--n-bezier), opacity .15s var(--n-bezier-ease-out), transform .15s var(--n-bezier-ease-out); } .n-popover-shared.popover-transition-leave-active { transition: box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier), color .3s var(--n-bezier), opacity .15s var(--n-bezier-ease-in), transform .15s var(--n-bezier-ease-in); } [v-placement="top-start"] > .n-popover-shared { margin-bottom: var(--n-space); } [v-placement="top-start"] > .n-popover-shared.n-popover-shared--show-arrow { margin-bottom: var(--n-space-arrow); } [v-placement="top-start"] > .n-popover-shared.n-popover-shared--overlap { margin: 0; } [v-placement="top-start"] > .n-popover-shared > .n-popover-arrow-wrapper { right: 0; left: 0; top: 0; bottom: 0; top: 100%; bottom: auto; height: var(--n-space-arrow); } [v-placement="top-start"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow { top: calc(var(--n-arrow-height) * 1.414 / -2); left: calc(var(--n-arrow-offset) - var(--v-offset-left)); } [v-placement="top"] > .n-popover-shared { margin-bottom: var(--n-space); } [v-placement="top"] > .n-popover-shared.n-popover-shared--show-arrow { margin-bottom: var(--n-space-arrow); } [v-placement="top"] > .n-popover-shared.n-popover-shared--overlap { margin: 0; } [v-placement="top"] > .n-popover-shared > .n-popover-arrow-wrapper { right: 0; left: 0; top: 0; bottom: 0; top: 100%; bottom: auto; height: var(--n-space-arrow); } [v-placement="top"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow { top: calc(var(--n-arrow-height) * 1.414 / -2); transform: translateX(calc(var(--n-arrow-height) * 1.414 / -2)) rotate(45deg); left: 50%; } [v-placement="top-end"] > .n-popover-shared { margin-bottom: var(--n-space); } [v-placement="top-end"] > .n-popover-shared.n-popover-shared--show-arrow { margin-bottom: var(--n-space-arrow); } [v-placement="top-end"] > .n-popover-shared.n-popover-shared--overlap { margin: 0; } [v-placement="top-end"] > .n-popover-shared > .n-popover-arrow-wrapper { right: 0; left: 0; top: 0; bottom: 0; top: 100%; bottom: auto; height: var(--n-space-arrow); } [v-placement="top-end"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow { top: calc(var(--n-arrow-height) * 1.414 / -2); right: calc(var(--n-arrow-offset) + var(--v-offset-left)); } [v-placement="bottom-start"] > .n-popover-shared { margin-top: var(--n-space); } [v-placement="bottom-start"] > .n-popover-shared.n-popover-shared--show-arrow { margin-top: var(--n-space-arrow); } [v-placement="bottom-start"] > .n-popover-shared.n-popover-shared--overlap { margin: 0; } [v-placement="bottom-start"] > .n-popover-shared > .n-popover-arrow-wrapper { right: 0; left: 0; top: 0; bottom: 0; bottom: 100%; top: auto; height: var(--n-space-arrow); } [v-placement="bottom-start"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow { bottom: calc(var(--n-arrow-height) * 1.414 / -2); left: calc(var(--n-arrow-offset) - var(--v-offset-left)); } [v-placement="bottom"] > .n-popover-shared { margin-top: var(--n-space); } [v-placement="bottom"] > .n-popover-shared.n-popover-shared--show-arrow { margin-top: var(--n-space-arrow); } [v-placement="bottom"] > .n-popover-shared.n-popover-shared--overlap { margin: 0; } [v-placement="bottom"] > .n-popover-shared > .n-popover-arrow-wrapper { right: 0; left: 0; top: 0; bottom: 0; bottom: 100%; top: auto; height: var(--n-space-arrow); } [v-placement="bottom"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow { bottom: calc(var(--n-arrow-height) * 1.414 / -2); transform: translateX(calc(var(--n-arrow-height) * 1.414 / -2)) rotate(45deg); left: 50%; } [v-placement="bottom-end"] > .n-popover-shared { margin-top: var(--n-space); } [v-placement="bottom-end"] > .n-popover-shared.n-popover-shared--show-arrow { margin-top: var(--n-space-arrow); } [v-placement="bottom-end"] > .n-popover-shared.n-popover-shared--overlap { margin: 0; } [v-placement="bottom-end"] > .n-popover-shared > .n-popover-arrow-wrapper { right: 0; left: 0; top: 0; bottom: 0; bottom: 100%; top: auto; height: var(--n-space-arrow); } [v-placement="bottom-end"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow { bottom: calc(var(--n-arrow-height) * 1.414 / -2); right: calc(var(--n-arrow-offset) + var(--v-offset-left)); } [v-placement="left-start"] > .n-popover-shared { margin-right: var(--n-space); } [v-placement="left-start"] > .n-popover-shared.n-popover-shared--show-arrow { margin-right: var(--n-space-arrow); } [v-placement="left-start"] > .n-popover-shared.n-popover-shared--overlap { margin: 0; } [v-placement="left-start"] > .n-popover-shared > .n-popover-arrow-wrapper { right: 0; left: 0; top: 0; bottom: 0; left: 100%; right: auto; width: var(--n-space-arrow); } [v-placement="left-start"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow { left: calc(var(--n-arrow-height) * 1.414 / -2); top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top)); } [v-placement="left"] > .n-popover-shared { margin-right: var(--n-space); } [v-placement="left"] > .n-popover-shared.n-popover-shared--show-arrow { margin-right: var(--n-space-arrow); } [v-placement="left"] > .n-popover-shared.n-popover-shared--overlap { margin: 0; } [v-placement="left"] > .n-popover-shared > .n-popover-arrow-wrapper { right: 0; left: 0; top: 0; bottom: 0; left: 100%; right: auto; width: var(--n-space-arrow); } [v-placement="left"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow { left: calc(var(--n-arrow-height) * 1.414 / -2); transform: translateY(calc(var(--n-arrow-height) * 1.414 / -2)) rotate(45deg); top: 50%; } [v-placement="left-end"] > .n-popover-shared { margin-right: var(--n-space); } [v-placement="left-end"] > .n-popover-shared.n-popover-shared--show-arrow { margin-right: var(--n-space-arrow); } [v-placement="left-end"] > .n-popover-shared.n-popover-shared--overlap { margin: 0; } [v-placement="left-end"] > .n-popover-shared > .n-popover-arrow-wrapper { right: 0; left: 0; top: 0; bottom: 0; left: 100%; right: auto; width: var(--n-space-arrow); } [v-placement="left-end"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow { left: calc(var(--n-arrow-height) * 1.414 / -2); bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top)); } [v-placement="right-start"] > .n-popover-shared { margin-left: var(--n-space); } [v-placement="right-start"] > .n-popover-shared.n-popover-shared--show-arrow { margin-left: var(--n-space-arrow); } [v-placement="right-start"] > .n-popover-shared.n-popover-shared--overlap { margin: 0; } [v-placement="right-start"] > .n-popover-shared > .n-popover-arrow-wrapper { right: 0; left: 0; top: 0; bottom: 0; right: 100%; left: auto; width: var(--n-space-arrow); } [v-placement="right-start"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow { right: calc(var(--n-arrow-height) * 1.414 / -2); top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top)); } [v-placement="right"] > .n-popover-shared { margin-left: var(--n-space); } [v-placement="right"] > .n-popover-shared.n-popover-shared--show-arrow { margin-left: var(--n-space-arrow); } [v-placement="right"] > .n-popover-shared.n-popover-shared--overlap { margin: 0; } [v-placement="right"] > .n-popover-shared > .n-popover-arrow-wrapper { right: 0; left: 0; top: 0; bottom: 0; right: 100%; left: auto; width: var(--n-space-arrow); } [v-placement="right"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow { right: calc(var(--n-arrow-height) * 1.414 / -2); transform: translateY(calc(var(--n-arrow-height) * 1.414 / -2)) rotate(45deg); top: 50%; } [v-placement="right-end"] > .n-popover-shared { margin-left: var(--n-space); } [v-placement="right-end"] > .n-popover-shared.n-popover-shared--show-arrow { margin-left: var(--n-space-arrow); } [v-placement="right-end"] > .n-popover-shared.n-popover-shared--overlap { margin: 0; } [v-placement="right-end"] > .n-popover-shared > .n-popover-arrow-wrapper { right: 0; left: 0; top: 0; bottom: 0; right: 100%; left: auto; width: var(--n-space-arrow); } [v-placement="right-end"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow { right: calc(var(--n-arrow-height) * 1.414 / -2); bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top)); } [v-placement="right-start"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow { top: calc(max(calc((var(--v-target-height, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset-vertical)) - var(--v-offset-top)); } [v-placement="left-start"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow { top: calc(max(calc((var(--v-target-height, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset-vertical)) - var(--v-offset-top)); } [v-placement="top-end"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow { right: calc(max(calc((var(--v-target-width, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset)) + var(--v-offset-left)); } [v-placement="bottom-end"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow { right: calc(max(calc((var(--v-target-width, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset)) + var(--v-offset-left)); } [v-placement="right-end"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow { bottom: calc(max(calc((var(--v-target-height, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset-vertical)) + var(--v-offset-top)); } [v-placement="left-end"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow { bottom: calc(max(calc((var(--v-target-height, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset-vertical)) + var(--v-offset-top)); } [v-placement="top-start"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow { left: calc(max(calc((var(--v-target-width, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset)) - var(--v-offset-left)); } [v-placement="bottom-start"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow { left: calc(max(calc((var(--v-target-width, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset)) - var(--v-offset-left)); } .n-base-wave { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: inherit; } .n-button { margin: 0; font-weight: var(--n-font-weight); line-height: 1; font-family: inherit; padding: var(--n-padding); height: var(--n-height); font-size: var(--n-font-size); border-radius: var(--n-border-radius); color: var(--n-text-color); background-color: var(--n-color); width: var(--n-width); white-space: nowrap; outline: none; position: relative; z-index: auto; border: none; display: inline-flex; flex-wrap: nowrap; flex-shrink: 0; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; text-align: center; cursor: pointer; text-decoration: none; transition: color .3s var(--n-bezier), background-color .3s var(--n-bezier), opacity .3s var(--n-bezier), border-color .3s var(--n-bezier); } .n-button.n-button--color .n-button__border { border-color: var(--n-border-color); } .n-button.n-button--color.n-button--disabled .n-button__border { border-color: var(--n-border-color-disabled); } .n-button.n-button--color:not(.n-button--disabled):focus .n-button__state-border { border-color: var(--n-border-color-focus); } .n-button.n-button--color:not(.n-button--disabled):hover .n-button__state-border { border-color: var(--n-border-color-hover); } .n-button.n-button--color:not(.n-button--disabled):active .n-button__state-border { border-color: var(--n-border-color-pressed); } .n-button.n-button--color:not(.n-button--disabled).n-button--pressed .n-button__state-border { border-color: var(--n-border-color-pressed); } .n-button.n-button--disabled { background-color: var(--n-color-disabled); color: var(--n-text-color-disabled); } .n-button.n-button--disabled .n-button__border { border: var(--n-border-disabled); } .n-button:not(.n-button--disabled):focus { background-color: var(--n-color-focus); color: var(--n-text-color-focus); } .n-button:not(.n-button--disabled):focus .n-button__state-border { border: var(--n-border-focus); } .n-button:not(.n-button--disabled):hover { background-color: var(--n-color-hover); color: var(--n-text-color-hover); } .n-button:not(.n-button--disabled):hover .n-button__state-border { border: var(--n-border-hover); } .n-button:not(.n-button--disabled):active { background-color: var(--n-color-pressed); color: var(--n-text-color-pressed); } .n-button:not(.n-button--disabled):active .n-button__state-border { border: var(--n-border-pressed); } .n-button:not(.n-button--disabled).n-button--pressed { background-color: var(--n-color-pressed); color: var(--n-text-color-pressed); } .n-button:not(.n-button--disabled).n-button--pressed .n-button__state-border { border: var(--n-border-pressed); } .n-button.n-button--loading { cursor: wait; } .n-button .n-base-wave { pointer-events: none; top: 0; right: 0; bottom: 0; left: 0; animation-iteration-count: 1; animation-duration: var(--n-ripple-duration); animation-timing-function: var(--n-bezier-ease-out), var(--n-bezier-ease-out); } .n-button .n-base-wave.n-base-wave--active { z-index: 1; animation-name: button-wave-spread, button-wave-opacity; } .n-button .n-button__border, .n-button .n-button__state-border { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit; transition: border-color .3s var(--n-bezier); pointer-events: none; } .n-button .n-button__border { border: var(--n-border); } .n-button .n-button__state-border { border: var(--n-border); border-color: #0000; z-index: 1; } .n-button .n-button__icon { margin: var(--n-icon-margin); margin-left: 0; height: var(--n-icon-size); width: var(--n-icon-size); max-width: var(--n-icon-size); font-size: var(--n-icon-size); position: relative; flex-shrink: 0; } .n-button .n-button__icon .n-icon-slot { height: var(--n-icon-size); width: var(--n-icon-size); position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; } .n-button .n-button__icon .n-icon-slot.icon-switch-transition-enter-from, .n-button .n-button__icon .n-icon-slot.icon-switch-transition-leave-to { transform: translateY(-50%) scale(0.75); left: 0; top: 50%; opacity: 0; } .n-button .n-button__icon .n-icon-slot.icon-switch-transition-enter-to, .n-button .n-button__icon .n-icon-slot.icon-switch-transition-leave-from { transform: scale(1) translateY(-50%); left: 0; top: 50%; opacity: 1; } .n-button .n-button__icon .n-icon-slot.icon-switch-transition-enter-active, .n-button .n-button__icon .n-icon-slot.icon-switch-transition-leave-active { transform-origin: center; position: absolute; left: 0; top: 50%; transition: all .3s cubic-bezier(.4, 0, .2, 1) !important; } .n-button .n-button__icon.fade-in-width-expand-transition-leave-from, .n-button .n-button__icon.fade-in-width-expand-transition-enter-to { opacity: 1; } .n-button .n-button__icon.fade-in-width-expand-transition-leave-to, .n-button .n-button__icon.fade-in-width-expand-transition-enter-from { opacity: 0!important; margin-left: 0!important; margin-right: 0!important; } .n-button .n-button__icon.fade-in-width-expand-transition-leave-active { overflow: hidden; transition: opacity .2s cubic-bezier(.4, 0, .2, 1), max-width .2s cubic-bezier(.4, 0, .2, 1) .1s, margin-left .2s cubic-bezier(.4, 0, .2, 1) .1s, margin-right .2s cubic-bezier(.4, 0, .2, 1) .1s; } .n-button .n-button__icon.fade-in-width-expand-transition-enter-active { overflow: hidden; transition: opacity .2s cubic-bezier(.4, 0, .2, 1) .1s, max-width .2s cubic-bezier(.4, 0, .2, 1), margin-left .2s cubic-bezier(.4, 0, .2, 1), margin-right .2s cubic-bezier(.4, 0, .2, 1); } .n-button .n-button__content { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; } .n-button .n-button__content ~ .n-button__icon { margin: var(--n-icon-margin); margin-right: 0; } .n-button.n-button--block { display: flex; width: 100%; } .n-button.n-button--dashed .n-button__border, .n-button.n-button--dashed .n-button__state-border { border-style: dashed !important; } .n-button.n-button--disabled { cursor: not-allowed; opacity: var(--n-opacity-disabled); } @keyframes button-wave-spread { from { box-shadow: 0 0 0.5px 0 var(--n-ripple-color); } to { box-shadow: 0 0 0.5px 4.5px var(--n-ripple-color); } } @keyframes button-wave-opacity { from { opacity: var(--n-wave-opacity); } to { opacity: 0; } } .n-loading-bar-container { z-index: 5999; position: fixed; top: 0; left: 0; right: 0; height: 2px; } .n-loading-bar-container.fade-in-transition-enter-active { transition: all 0.3s cubic-bezier(.4, 0, .2, 1)!important; } .n-loading-bar-container.fade-in-transition-leave-active { transition: all 0.8s cubic-bezier(.4, 0, .2, 1)!important; } .n-loading-bar-container.fade-in-transition-enter-from, .n-loading-bar-container.fade-in-transition-leave-to { opacity: 0; } .n-loading-bar-container.fade-in-transition-leave-from, .n-loading-bar-container.fade-in-transition-enter-to { opacity: 1; } .n-loading-bar-container .n-loading-bar { width: 100%; transition: max-width 4s linear, background .2s linear; height: var(--n-height); } .n-loading-bar-container .n-loading-bar.n-loading-bar--starting { background: var(--n-color-loading); } .n-loading-bar-container .n-loading-bar.n-loading-bar--finishing { background: var(--n-color-loading); transition: max-width .2s linear, background .2s linear; } .n-loading-bar-container .n-loading-bar.n-loading-bar--error { background: var(--n-color-error); transition: max-width .2s linear, background .2s linear; } body { margin: 0; font-size: 14px; font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.6; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body input { font-family: inherit; font-size: inherit; } .n-notification-container { z-index: 4000; position: fixed; overflow: visible; display: flex; flex-direction: column; align-items: flex-end; } .n-notification-container > .n-scrollbar { width: initial; overflow: visible; height: -moz-fit-content !important; height: fit-content !important; max-height: 100vh !important; } .n-notification-container > .n-scrollbar > .n-scrollbar-container { height: -moz-fit-content !important; height: fit-content !important; max-height: 100vh !important; } .n-notification-container > .n-scrollbar > .n-scrollbar-container .n-scrollbar-content { padding-top: 12px; padding-bottom: 33px; } .n-notification-container.n-notification-container--top, .n-notification-container.n-notification-container--top-right, .n-notification-container.n-notification-container--top-left { top: 12px; } .n-notification-container.n-notification-container--top.transitioning > .n-scrollbar > .n-scrollbar-container, .n-notification-container.n-notification-container--top-right.transitioning > .n-scrollbar > .n-scrollbar-container, .n-notification-container.n-notification-container--top-left.transitioning > .n-scrollbar > .n-scrollbar-container { min-height: 100vh !important; } .n-notification-container.n-notification-container--bottom, .n-notification-container.n-notification-container--bottom-right, .n-notification-container.n-notification-container--bottom-left { bottom: 12px; } .n-notification-container.n-notification-container--bottom > .n-scrollbar > .n-scrollbar-container .n-scrollbar-content, .n-notification-container.n-notification-container--bottom-right > .n-scrollbar > .n-scrollbar-container .n-scrollbar-content, .n-notification-container.n-notification-container--bottom-left > .n-scrollbar > .n-scrollbar-container .n-scrollbar-content { padding-bottom: 12px; } .n-notification-container.n-notification-container--bottom .n-notification-wrapper, .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper, .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper { display: flex; align-items: flex-end; margin-bottom: 0; margin-top: 12px; } .n-notification-container.n-notification-container--top, .n-notification-container.n-notification-container--bottom { left: 50%; transform: translateX(-50%); } .n-notification-container.n-notification-container--top .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--bottom .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--top .n-notification-wrapper.notification-transition-leave-to, .n-notification-container.n-notification-container--bottom .n-notification-wrapper.notification-transition-leave-to { transform: scale(0.85); } .n-notification-container.n-notification-container--top .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--bottom .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--top .n-notification-wrapper.notification-transition-enter-to, .n-notification-container.n-notification-container--bottom .n-notification-wrapper.notification-transition-enter-to { transform: scale(1); } .n-notification-container.n-notification-container--top .n-notification-wrapper { transform-origin: top center; } .n-notification-container.n-notification-container--bottom .n-notification-wrapper { transform-origin: bottom center; } .n-notification-container.n-notification-container--top-right .n-notification, .n-notification-container.n-notification-container--bottom-right .n-notification { margin-left: 28px; margin-right: 16px; } .n-notification-container.n-notification-container--top-left .n-notification, .n-notification-container.n-notification-container--bottom-left .n-notification { margin-left: 16px; margin-right: 28px; } .n-notification-container.n-notification-container--top-right { right: 0; } .n-notification-container.n-notification-container--top-right .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--top-right .n-notification-wrapper.notification-transition-leave-to { transform: translate(calc(100%), 0); } .n-notification-container.n-notification-container--top-right .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--top-right .n-notification-wrapper.notification-transition-enter-to { transform: translate(0, 0); } .n-notification-container.n-notification-container--top-left { left: 0; } .n-notification-container.n-notification-container--top-left .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--top-left .n-notification-wrapper.notification-transition-leave-to { transform: translate(calc(-100%), 0); } .n-notification-container.n-notification-container--top-left .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--top-left .n-notification-wrapper.notification-transition-enter-to { transform: translate(0, 0); } .n-notification-container.n-notification-container--bottom-right { right: 0; } .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper.notification-transition-leave-to { transform: translate(calc(100%), 0); } .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper.notification-transition-enter-to { transform: translate(0, 0); } .n-notification-container.n-notification-container--bottom-left { left: 0; } .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper.notification-transition-leave-to { transform: translate(calc(-100%), 0); } .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper.notification-transition-enter-to { transform: translate(0, 0); } .n-notification-container.n-notification-container--scrollable.n-notification-container--top-right { top: 0; } .n-notification-container.n-notification-container--scrollable.n-notification-container--top-left { top: 0; } .n-notification-container.n-notification-container--scrollable.n-notification-container--bottom-right { bottom: 0; } .n-notification-container.n-notification-container--scrollable.n-notification-container--bottom-left { bottom: 0; } .n-notification-container .n-notification-wrapper { margin-bottom: 12px; } .n-notification-container .n-notification-wrapper.notification-transition-enter-from, .n-notification-container .n-notification-wrapper.notification-transition-leave-to { opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; } .n-notification-container .n-notification-wrapper.notification-transition-leave-from, .n-notification-container .n-notification-wrapper.notification-transition-enter-to { opacity: 1; } .n-notification-container .n-notification-wrapper.notification-transition-leave-active { transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier), opacity .3s var(--n-bezier), transform .3s var(--n-bezier-ease-in), max-height .3s var(--n-bezier), margin-top .3s linear, margin-bottom .3s linear, box-shadow .3s var(--n-bezier); } .n-notification-container .n-notification-wrapper.notification-transition-enter-active { transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier), opacity .3s var(--n-bezier), transform .3s var(--n-bezier-ease-out), max-height .3s var(--n-bezier), margin-top .3s linear, margin-bottom .3s linear, box-shadow .3s var(--n-bezier); } .n-notification-container .n-notification { background-color: var(--n-color); color: var(--n-text-color); transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier), opacity .3s var(--n-bezier), box-shadow .3s var(--n-bezier); font-family: inherit; font-size: var(--n-font-size); font-weight: 400; position: relative; display: flex; overflow: hidden; flex-shrink: 0; padding-left: var(--n-padding-left); padding-right: var(--n-padding-right); width: var(--n-width); max-width: calc(100vw - 16px - 16px); border-radius: var(--n-border-radius); box-shadow: var(--n-box-shadow); box-sizing: border-box; opacity: 1; } .n-notification-container .n-notification .n-notification__avatar .n-icon { color: var(--n-icon-color); } .n-notification-container .n-notification .n-notification__avatar .n-base-icon { color: var(--n-icon-color); } .n-notification-container .n-notification.n-notification--show-avatar .n-notification-main { margin-left: 40px; width: calc(100% - 40px); } .n-notification-container .n-notification.n-notification--closable .n-notification-main > *:first-child { padding-right: 20px; } .n-notification-container .n-notification.n-notification--closable .n-notification__close { position: absolute; top: 0; right: 0; margin: var(--n-close-margin); transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); } .n-notification-container .n-notification .n-notification__avatar { position: absolute; top: var(--n-padding-top); left: var(--n-padding-left); width: 28px; height: 28px; font-size: 28px; display: flex; align-items: center; justify-content: center; } .n-notification-container .n-notification .n-notification__avatar .n-icon { transition: color .3s var(--n-bezier); } .n-notification-container .n-notification .n-notification-main { padding-top: var(--n-padding-top); padding-bottom: var(--n-padding-bottom); box-sizing: border-box; display: flex; flex-direction: column; margin-left: 8px; width: calc(100% - 8px); } .n-notification-container .n-notification .n-notification-main .n-notification-main-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } .n-notification-container .n-notification .n-notification-main .n-notification-main-footer .n-notification-main-footer__meta { font-size: var(--n-meta-font-size); transition: color .3s var(--n-bezier-ease-out); color: var(--n-description-text-color); } .n-notification-container .n-notification .n-notification-main .n-notification-main-footer .n-notification-main-footer__action { cursor: pointer; transition: color .3s var(--n-bezier-ease-out); color: var(--n-action-text-color); } .n-notification-container .n-notification .n-notification-main .n-notification-main__header { font-weight: var(--n-title-font-weight); font-size: var(--n-title-font-size); transition: color .3s var(--n-bezier-ease-out); color: var(--n-title-text-color); } .n-notification-container .n-notification .n-notification-main .n-notification-main__description { margin-top: 8px; font-size: var(--n-description-font-size); white-space: pre-wrap; word-wrap: break-word; transition: color .3s var(--n-bezier-ease-out); color: var(--n-description-text-color); } .n-notification-container .n-notification .n-notification-main .n-notification-main__content { line-height: var(--n-line-height); margin: 12px 0 0 0; font-family: inherit; white-space: pre-wrap; word-wrap: break-word; transition: color .3s var(--n-bezier-ease-out); color: var(--n-text-color); } .n-notification-container .n-notification .n-notification-main .n-notification-main__content:first-child { margin: 0; }