mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Refine notification overlays
This commit is contained in:
thePR0M3TH3AN committed
1 parent
0f999a20e9
commit
4e60b5e8bc
5 files changed
+177
-25
No files matched your search
@@ -1,2 +1,2 @@
|
||||
:root{--surface-base:var(--color-surface);--surface-alt:var(--color-surface-alt);--surface-raised:var(--color-card);--surface-raised-private:var(--color-card-private);--surface-raised-critical:var(--color-card-critical);--surface-panel:var(--color-panel);--surface-panel-hover:var(--color-panel-hover);--surface-sunken:var(--color-surface-sunken);--surface-muted:var(--color-surface-muted);--surface-veil:var(--color-overlay-veil);--surface-inverse:var(--color-page);--surface-overlay:var(--color-overlay);--surface-overlay-muted:var(--color-overlay-muted);--surface-overlay-strong:var(--color-overlay-strong);--surface-overlay-darker:var(--color-overlay-darker);--surface-overlay-black:var(--color-overlay-black);--surface-overlay-banner:var(--color-overlay-banner);--surface-overlay-panel:var(--color-overlay-panel);--surface-overlay-panel-soft:var(--color-overlay-panel-soft);--surface-overlay-panel-tint:var(--color-overlay-panel-tint);--surface-overlay-panel-glass:var(--color-overlay-panel-glass);--surface-overlay-panel-glass-soft:var(--color-overlay-panel-glass-soft);--surface-modal-backdrop:var(--color-modal-backdrop);--surface-modal:var(--color-modal-surface);--blur-modal-backdrop:28px;--blur-modal-alert:14px;--blur-thumbnail-blur:18px;--modal-nav-backdrop-blur:6px;--border-default:var(--color-border);--border-subtle:var(--color-border-subtle);--border-strong:var(--color-border-translucent-stronger);--border-overlay:var(--color-border-translucent);--border-overlay-strong:var(--color-border-translucent-strongest);--border-overlay-glow:var(--color-border-translucent-glow);--border-neutral-soft:var(--color-border-neutral-soft);--border-info-soft:var(--color-border-info-soft);--border-sidebar-strong:var(--color-border-sidebar-strong);--border-width-hairline:1px;--border-width-fine:0.5px;--text-primary:var(--color-text);--text-inverse:var(--color-text-inverse);--text-muted:var(--color-text-muted);--text-muted-strong:var(--color-muted-strong);--text-subtle:var(--color-subtle-text);--text-frosted-primary:var(--color-text-frosted);--text-frosted-strong:var(--color-text-frosted-strong);--text-frosted-soft:var(--color-text-frosted-soft);--status-info:var(--color-info);--status-info-strong:var(--color-info-strong);--status-info-surface:var(--color-info-glass);--status-info-border:var(--color-info-border);--status-info-on:var(--color-info-on);--status-success:var(--color-success);--status-success-strong:var(--color-success-strong);--status-success-surface:var(--color-success-surface);--status-success-border:var(--color-success-border);--status-success-on:var(--color-success-on);--status-warning:var(--color-warning);--status-warning-strong:var(--color-warning-strong);--status-warning-surface:var(--color-warning-surface);--status-warning-border:var(--color-warning-border);--status-warning-on:var(--color-warning-on);--status-danger:var(--color-critical);--status-danger-strong:var(--color-critical-strong);--status-danger-surface:var(--color-danger-surface);--status-danger-border:var(--color-danger-border);--status-danger-on:var(--color-danger-on);--status-private:var(--color-private);--status-private-strong:var(--color-private-strong);--status-private-surface:var(--color-private-surface);--status-private-border:var(--color-private-border);--status-private-on:var(--color-private-on);--status-neutral:var(--color-muted);--status-neutral-strong:var(--color-muted-strong);--status-neutral-surface:var(--color-neutral-surface);--status-neutral-border:var(--color-neutral-border);--status-neutral-on:var(--color-neutral-on);--scrollbar-width:0.5rem;--scrollbar-track:var(--color-white-soft);--scrollbar-thumb:var(--color-white-softer);--scrollbar-thumb-hover:var(--color-white-softest);--z-overlay-nav:60;--z-overlay-floating:70;--z-overlay-toast:80;--z-sidebar-overlay:10;--z-sidebar:20;--z-modal-root:100;--z-modal-overlay:110;--z-modal-content:120;--z-modal-player:130;--overlay-backdrop-color:var(--color-overlay-backdrop);--overlay-backdrop-blur:18px;--sidebar-width-expanded:16rem;--sidebar-width-collapsed:4rem;--sidebar-width:var(--sidebar-width-expanded);--sidebar-control-size:2.75rem;--sidebar-content-gap:1rem;--space-sidebar-shell-inline:var(--space-lg);--space-sidebar-shell-block-start:var(--space-lg);--space-sidebar-shell-block-end:1.75rem;--space-sidebar-scroll-gap:1.75rem;--space-sidebar-panel-gap:1.35rem;--space-sidebar-panel-padding-block:1.35rem;--space-sidebar-panel-padding-inline:1.1rem;--space-sidebar-footer-gap:0.85rem;--space-sidebar-trigger-padding-block:0.78rem;--space-sidebar-popover-offset:0.85rem;--space-sidebar-popover-padding-block:0.85rem;--space-sidebar-popover-padding-inline:0.65rem;--space-sidebar-popover-gap:0.45rem;--space-sidebar-nav-padding-block:0.7rem;--space-sidebar-subnav-padding-block:0.55rem;--space-sidebar-nav-translate:0.35rem;--grid-card-min-width:20rem;--popover-backdrop-blur:12px;--toast-translate:0.75rem;--sidebar-mobile-gutter:3rem;--popup-padding-inline:1rem;--popup-padding-block:0.75rem;--video-mLine truncated
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar,body.modal-open #sidebarOverlay{pointer-events:none;opacity:0;visibility:hidden}body.modal-open #sidebar{z-index:var(--z-sidebar-overlay)}body.modal-open #sidebarOverlay{z-index:calc(var(--z-sidebar-overlay) - 1)}.ng-cloak,.ng-hide:not(.ng-hide-animate),.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}ng\:form{display:block}.\!container{width:100%!important}.container{width:100%}@media (min-width:25rem){.\!container{max-width:25rem!important}.container{max-width:25rem}}@media (min-width:30rem){.\!container{max-width:30rem!important}.container{max-width:30rem}}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}#playerModal.ds-header{display:flex}.ds-header{display:flex;align-items:center;justify-content:flex-start;padding-top:var(--space-md);padding-bottom:var(--space-md)}.ds-metric-probe{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;contain:layout size style;inline-size:0;block-size:var(--ds-metric-probe-length,0);overflow:hidden}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offLine truncated
|
||||
:root{--surface-base:var(--color-surface);--surface-alt:var(--color-surface-alt);--surface-raised:var(--color-card);--surface-raised-private:var(--color-card-private);--surface-raised-critical:var(--color-card-critical);--surface-panel:var(--color-panel);--surface-panel-hover:var(--color-panel-hover);--surface-sunken:var(--color-surface-sunken);--surface-muted:var(--color-surface-muted);--surface-veil:var(--color-overlay-veil);--surface-inverse:var(--color-page);--surface-overlay:var(--color-overlay);--surface-overlay-muted:var(--color-overlay-muted);--surface-overlay-strong:var(--color-overlay-strong);--surface-overlay-darker:var(--color-overlay-darker);--surface-overlay-black:var(--color-overlay-black);--surface-overlay-banner:var(--color-overlay-banner);--surface-overlay-panel:var(--color-overlay-panel);--surface-overlay-panel-soft:var(--color-overlay-panel-soft);--surface-overlay-panel-tint:var(--color-overlay-panel-tint);--surface-overlay-panel-glass:var(--color-overlay-panel-glass);--surface-overlay-panel-glass-soft:var(--color-overlay-panel-glass-soft);--surface-modal-backdrop:var(--color-modal-backdrop);--surface-modal:var(--color-modal-surface);--blur-modal-backdrop:28px;--blur-modal-alert:14px;--blur-thumbnail-blur:18px;--modal-nav-backdrop-blur:6px;--border-default:var(--color-border);--border-subtle:var(--color-border-subtle);--border-strong:var(--color-border-translucent-stronger);--border-overlay:var(--color-border-translucent);--border-overlay-strong:var(--color-border-translucent-strongest);--border-overlay-glow:var(--color-border-translucent-glow);--border-neutral-soft:var(--color-border-neutral-soft);--border-info-soft:var(--color-border-info-soft);--border-sidebar-strong:var(--color-border-sidebar-strong);--border-width-hairline:1px;--border-width-fine:0.5px;--text-primary:var(--color-text);--text-inverse:var(--color-text-inverse);--text-muted:var(--color-text-muted);--text-muted-strong:var(--color-muted-strong);--text-subtle:var(--color-subtle-text);--text-frosted-primary:var(--color-text-frosted);--text-frosted-strong:var(--color-text-frosted-strong);--text-frosted-soft:var(--color-text-frosted-soft);--status-info:var(--color-info);--status-info-strong:var(--color-info-strong);--status-info-surface:var(--color-info-glass);--status-info-border:var(--color-info-border);--status-info-on:var(--color-info-on);--status-success:var(--color-success);--status-success-strong:var(--color-success-strong);--status-success-surface:var(--color-success-surface);--status-success-border:var(--color-success-border);--status-success-on:var(--color-success-on);--status-warning:var(--color-warning);--status-warning-strong:var(--color-warning-strong);--status-warning-surface:var(--color-warning-surface);--status-warning-border:var(--color-warning-border);--status-warning-on:var(--color-warning-on);--status-danger:var(--color-critical);--status-danger-strong:var(--color-critical-strong);--status-danger-surface:var(--color-danger-surface);--status-danger-border:var(--color-danger-border);--status-danger-on:var(--color-danger-on);--status-private:var(--color-private);--status-private-strong:var(--color-private-strong);--status-private-surface:var(--color-private-surface);--status-private-border:var(--color-private-border);--status-private-on:var(--color-private-on);--status-neutral:var(--color-muted);--status-neutral-strong:var(--color-muted-strong);--status-neutral-surface:var(--color-neutral-surface);--status-neutral-border:var(--color-neutral-border);--status-neutral-on:var(--color-neutral-on);--scrollbar-width:0.5rem;--scrollbar-track:var(--color-white-soft);--scrollbar-thumb:var(--color-white-softer);--scrollbar-thumb-hover:var(--color-white-softest);--z-overlay-nav:60;--z-overlay-floating:70;--z-overlay-toast:180;--z-sidebar-overlay:10;--z-sidebar:20;--z-modal-root:100;--z-modal-overlay:110;--z-modal-content:120;--z-modal-player:130;--overlay-backdrop-color:var(--color-overlay-backdrop);--overlay-backdrop-blur:18px;--sidebar-width-expanded:16rem;--sidebar-width-collapsed:4rem;--sidebar-width:var(--sidebar-width-expanded);--sidebar-control-size:2.75rem;--sidebar-content-gap:1rem;--space-sidebar-shell-inline:var(--space-lg);--space-sidebar-shell-block-start:var(--space-lg);--space-sidebar-shell-block-end:1.75rem;--space-sidebar-scroll-gap:1.75rem;--space-sidebar-panel-gap:1.35rem;--space-sidebar-panel-padding-block:1.35rem;--space-sidebar-panel-padding-inline:1.1rem;--space-sidebar-footer-gap:0.85rem;--space-sidebar-trigger-padding-block:0.78rem;--space-sidebar-popover-offset:0.85rem;--space-sidebar-popover-padding-block:0.85rem;--space-sidebar-popover-padding-inline:0.65rem;--space-sidebar-popover-gap:0.45rem;--space-sidebar-nav-padding-block:0.7rem;--space-sidebar-subnav-padding-block:0.55rem;--space-sidebar-nav-translate:0.35rem;--grid-card-min-width:20rem;--popover-backdrop-blur:12px;--toast-translate:-1.5rem;--sidebar-mobile-gutter:3rem;--popup-padding-inline:1rem;--popup-padding-block:0.75rem;--video-Line truncated
|
||||
/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-family-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--font-family-mono);font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}html{font-size:100%}@media (min-width:1024px){html{font-size:75%}}*,:after,:before{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}body{font-family:var(--font-family-sans);background-color:var(--color-page);color:var(--color-text-strong);line-height:1.5;margin:0;padding:0;overflow-x:hidden}#editNip71TagsFieldset>legend,#nip71TagsFieldset>legend{margin-left:0;padding:0}#app{background-color:var(--color-page);color:inherit}body.modal-open,html.modal-open{overflow:hidden;height:100%}body.modal-open #app{overflow:hidden}body.modal-open #sidebar,body.modal-open #sidebarOverlay{pointer-events:none;opacity:0;visibility:hidden}body.modal-open #sidebar{z-index:var(--z-sidebar-overlay)}body.modal-open #sidebarOverlay{z-index:calc(var(--z-sidebar-overlay) - 1)}.ng-cloak,.ng-hide:not(.ng-hide-animate),.x-ng-cloak,[data-ng-cloak],[ng-cloak],[ng\:cloak],[x-ng-cloak]{display:none!important}ng\:form{display:block}.\!container{width:100%!important}.container{width:100%}@media (min-width:25rem){.\!container{max-width:25rem!important}.container{max-width:25rem}}@media (min-width:30rem){.\!container{max-width:30rem!important}.container{max-width:30rem}}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}#playerModal.ds-header{display:flex}.ds-header{display:flex;align-items:center;justify-content:flex-start;padding-top:var(--space-md);padding-bottom:var(--space-md)}.ds-metric-probe{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none;contain:layout size style;inline-size:0;block-size:var(--ds-metric-probe-length,0);overflow:hidden}.focus-ring{outline:2px solid transparent;outline-offset:2px}.focus-ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offLine truncated
|
||||
+161
-9
@@ -1885,26 +1885,168 @@
|
||||
background-color: var(--color-black);
|
||||
}
|
||||
|
||||
.status-banner {
|
||||
.notification-portal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: var(--z-overlay-toast);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
padding: calc(var(--space-xl) + env(safe-area-inset-top, 0px)) var(--space-lg)
|
||||
var(--space-lg);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translateY(var(--toast-translate));
|
||||
transition: transform var(--motion-duration-base) var(--motion-ease-out),
|
||||
opacity var(--motion-duration-base) var(--motion-ease-out);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.notification-portal {
|
||||
align-items: flex-end;
|
||||
padding-inline: var(--space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
.notification-portal:has(.notification-banner:not(.hidden)) {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.notification-banner,
|
||||
.torrent-toast {
|
||||
--notify-accent: var(--color-accent-strong);
|
||||
--notify-accent-strong: var(--color-accent);
|
||||
--notify-border: var(--surface-overlay-panel-tint);
|
||||
--notify-background: var(--surface-overlay-panel);
|
||||
--notify-foreground: var(--color-text);
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
padding: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: var(--color-overlay-panel);
|
||||
color: var(--color-subtle);
|
||||
gap: var(--space-md);
|
||||
width: min(28rem, 100%);
|
||||
padding: var(--space-md) var(--space-xl);
|
||||
border-radius: var(--radius-xl);
|
||||
border: 1px solid var(--notify-border);
|
||||
background: var(--notify-background);
|
||||
color: var(--notify-foreground);
|
||||
box-shadow: 0 32px 64px var(--color-shadow-notification);
|
||||
backdrop-filter: blur(var(--overlay-backdrop-blur));
|
||||
pointer-events: auto;
|
||||
isolation: isolate;
|
||||
@apply text-sm font-semibold leading-snug;
|
||||
transition: transform var(--motion-duration-base) var(--motion-ease-out),
|
||||
opacity var(--motion-duration-base) var(--motion-ease-out);
|
||||
}
|
||||
|
||||
.notification-banner::before,
|
||||
.torrent-toast::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--notify-accent) 0%,
|
||||
var(--notify-accent-strong) 100%
|
||||
);
|
||||
opacity: 0.18;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.notification-banner > *,
|
||||
.torrent-toast > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.notification-dismiss {
|
||||
@apply inline-flex h-8 w-8 items-center justify-center rounded-full border border-transparent transition duration-base ease-out;
|
||||
color: inherit;
|
||||
opacity: 0.75;
|
||||
background-color: var(--notify-dismiss-background);
|
||||
}
|
||||
|
||||
.notification-dismiss:hover,
|
||||
.notification-dismiss:focus-visible {
|
||||
opacity: 1;
|
||||
background-color: var(--notify-dismiss-background-hover);
|
||||
}
|
||||
|
||||
.notification-dismiss svg {
|
||||
@apply h-4 w-4;
|
||||
}
|
||||
|
||||
.notification-banner:not(.hidden) {
|
||||
animation: notification-slide-in var(--motion-duration-base)
|
||||
var(--motion-ease-out);
|
||||
}
|
||||
|
||||
.notification-banner--critical,
|
||||
.torrent-toast--error {
|
||||
--notify-accent: var(--color-critical-strong);
|
||||
--notify-accent-strong: var(--color-critical);
|
||||
--notify-border: var(--color-ring-critical-soft);
|
||||
--notify-background: var(--color-card-critical);
|
||||
--notify-foreground: var(--color-critical-strong);
|
||||
}
|
||||
|
||||
.notification-banner--success,
|
||||
.torrent-toast--success {
|
||||
--notify-accent: var(--status-success-strong);
|
||||
--notify-accent-strong: var(--status-success);
|
||||
--notify-border: var(--status-success-border);
|
||||
--notify-background: var(--status-success-surface);
|
||||
--notify-foreground: var(--status-success-on);
|
||||
}
|
||||
|
||||
.notification-banner--info,
|
||||
.torrent-toast--info {
|
||||
--notify-accent: var(--color-info-strong);
|
||||
--notify-accent-strong: var(--color-info);
|
||||
--notify-border: var(--color-info-border);
|
||||
--notify-background: var(--status-info-surface);
|
||||
}
|
||||
|
||||
.notification-banner--warning,
|
||||
.torrent-toast--warn {
|
||||
--notify-accent: var(--color-warning-strong);
|
||||
--notify-accent-strong: var(--color-warning);
|
||||
--notify-border: var(--status-warning-border);
|
||||
--notify-background: var(--status-warning-surface);
|
||||
--notify-foreground: var(--status-warning-on);
|
||||
}
|
||||
|
||||
.status-banner .status-spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
border: var(--space-3xs) solid var(--color-border-neutral-soft);
|
||||
border: var(--space-3xs) solid var(--color-info-border);
|
||||
border-radius: var(--radius-full);
|
||||
border-top-color: var(--color-page-alt);
|
||||
border-top-color: var(--color-info);
|
||||
flex-shrink: 0;
|
||||
height: var(--icon-size-md);
|
||||
width: var(--icon-size-md);
|
||||
}
|
||||
|
||||
.status-banner .status-message {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
@keyframes notification-slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(var(--toast-translate));
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.status-spinner--inline {
|
||||
animation: spin 1s linear infinite;
|
||||
border: var(--space-3xs) solid var(--color-border-info-soft);
|
||||
@@ -2802,6 +2944,9 @@
|
||||
.modal-nav,
|
||||
.popover__panel,
|
||||
.progress-bar-fill,
|
||||
.notification-banner,
|
||||
.notification-portal,
|
||||
.torrent-toast,
|
||||
.status-banner .status-spinner,
|
||||
.status-spinner--inline,
|
||||
.video-modal__panel,
|
||||
@@ -2849,10 +2994,17 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.notification-banner,
|
||||
.torrent-toast,
|
||||
.status-banner .status-spinner,
|
||||
.status-spinner--inline {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.notification-portal {
|
||||
transform: none !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
|
||||
+2
-2
@@ -94,7 +94,7 @@
|
||||
--scrollbar-thumb-hover: var(--color-white-softest);
|
||||
--z-overlay-nav: 60;
|
||||
--z-overlay-floating: 70;
|
||||
--z-overlay-toast: 80;
|
||||
--z-overlay-toast: 180;
|
||||
--z-sidebar-overlay: 10;
|
||||
--z-sidebar: 20;
|
||||
--z-modal-root: 100;
|
||||
@@ -126,7 +126,7 @@
|
||||
--space-sidebar-nav-translate: 0.35rem;
|
||||
--grid-card-min-width: 20rem;
|
||||
--popover-backdrop-blur: 12px;
|
||||
--toast-translate: 0.75rem;
|
||||
--toast-translate: -1.5rem;
|
||||
--sidebar-mobile-gutter: 3rem;
|
||||
--popup-padding-inline: 1rem;
|
||||
--popup-padding-block: 0.75rem;
|
||||
|
||||
+4
-3
@@ -268,6 +268,7 @@
|
||||
<!-- Notification Portal -->
|
||||
<div
|
||||
id="notificationPortal"
|
||||
class="notification-portal"
|
||||
role="region"
|
||||
aria-live="polite"
|
||||
aria-label="System notifications"
|
||||
@@ -275,14 +276,14 @@
|
||||
<!-- Error Container -->
|
||||
<div
|
||||
id="errorContainer"
|
||||
class="card mb-4 hidden p-md text-sm text-critical-strong"
|
||||
class="notification-banner notification-banner--critical hidden"
|
||||
data-state="critical"
|
||||
></div>
|
||||
|
||||
<!-- Status Container -->
|
||||
<div
|
||||
id="statusContainer"
|
||||
class="status-banner hidden"
|
||||
class="notification-banner notification-banner--info status-banner hidden"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
@@ -293,7 +294,7 @@
|
||||
<!-- Success Container -->
|
||||
<div
|
||||
id="successContainer"
|
||||
class="card mb-4 hidden p-md text-sm text-info-strong"
|
||||
class="notification-banner notification-banner--success hidden"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -38,13 +38,18 @@ function ensureContainer(doc) {
|
||||
"pointer-events-none",
|
||||
"fixed",
|
||||
"inset-x-0",
|
||||
"top-4",
|
||||
"top-0",
|
||||
"z-overlay-toast",
|
||||
"flex",
|
||||
"w-full",
|
||||
"flex-col",
|
||||
"items-center",
|
||||
"gap-3",
|
||||
"px-4",
|
||||
"pt-6",
|
||||
"sm:items-end",
|
||||
"sm:px-6",
|
||||
"sm:pt-8",
|
||||
].join(" ");
|
||||
|
||||
const body = documentRef.body || documentRef.getElementsByTagName?.("body")?.[0];
|
||||
@@ -66,17 +71,11 @@ function buildToastElement(documentRef, message, typeClass) {
|
||||
const closeButton = documentRef.createElement("button");
|
||||
closeButton.type = "button";
|
||||
closeButton.className = [
|
||||
"notification-dismiss",
|
||||
"focus-ring",
|
||||
"absolute",
|
||||
"right-3",
|
||||
"top-3",
|
||||
"rounded",
|
||||
"p-1",
|
||||
"text-current/70",
|
||||
"hover:text-current",
|
||||
"focus-visible:outline",
|
||||
"focus-visible:outline-2",
|
||||
"focus-visible:outline-offset-2",
|
||||
"focus-visible:outline-info",
|
||||
].join(" ");
|
||||
closeButton.setAttribute("aria-label", "Dismiss notification");
|
||||
closeButton.innerHTML =
|
||||
|
||||
Reference in new issue
Block a user