mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-29 08:52:25 +00:00
Merge branch 'unstable' into codex/update-sidebar-panel-padding-and-rebuild-css
This commit is contained in:
10 files changed
+221
-19
No files matched your search
@@ -43,6 +43,9 @@ jobs:
|
||||
if: steps.node-modules-cache.outputs.cache-hit != 'true'
|
||||
run: npm ci
|
||||
|
||||
- name: Install ripgrep
|
||||
run: sudo apt-get update && sudo apt-get install -y ripgrep
|
||||
|
||||
- name: Run lint suite
|
||||
run: npm run lint
|
||||
|
||||
|
||||
@@ -1,2 +1,4 @@
|
||||
: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-base:var(--color-page);--surface-overlay-banner:var(--surface-overlay-banner-base);--surface-overlay-banner-opaque:var(--surface-overlay-banner-base);--surface-overlay-banner-strong:color-mix(in srgb,var(--surface-overlay-banner-base) 82%,transparent);--surface-overlay-banner-soft:color-mix(in srgb,var(--surface-overlay-banner-base) 56%,transparent);--surface-overlay-banner-faint:color-mix(in srgb,var(--surface-overlay-banner-base) 18%,transparent);--surface-overlay-banner-transparent:transparent;--surface-overlay-banner-gradient:linear-gradient(to bottom,var(--surface-overlay-banner-opaque) 0%,var(--surface-overlay-banner-strong) 38%,var(--surface-overlay-banner-soft) 70%,var(--surface-overlay-banner-faint) 88%,var(--surface-overlay-banner-transparent) 100%);--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:18px;--blur-modal-alert:14px;--blur-thumbnail-blur:18px;--modal-nav-backdrop-blur:6px;--app-header-centerline-offset:calc(var(--space-sm) + var(--space-2xl-plus)/2);--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-app-header:40;--z-overlay-nav:60;--z-overlay-floating:70;--z-overlay-popover:140;--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;--z-modal-top-root:140;--z-modal-top-overlay:150;--z-modal-top-content:160;--overlay-backdrop-color:var(--color-overlay-backdrop);--overlay-backdrop-blur:12px;--sidebar-width-expanded:16rem;--sidebar-width-collapsed:4rem;--sidebarLine 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:80%}@media (min-width:768px){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{--app-header-centerline:calc(env(safe-area-inset-top, 0) + var(--app-header-centerline-offset));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}#uiOverlay{position:fixed;inset:0;pointer-events:none;z-index:var(--z-overlay-popover)}#uiOverlay>*{pointer-events:auto}#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{pointer-events:none;opacity:0;visibility:hidden;z-index:var(--z-sidebar-overlay)}.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-sm);padding-bottom:var(--space-sm)}.app-shell__header{position:sticky;top:env(safe-area-inset-top,0);z-index:var(--z-app-header);padding-top:calc(var(--space-sm) + env(safe-area-inset-top, 0));padding-bottom:var(--space-sm);background-color:transparent;background-image:var(--surface-overlay-banner-gradient);background-repeat:no-repeat;background-size:100% 100%}.ds-metric-probe{position:absolute;top:0;left:0;visibilLine 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-base:var(--color-page);--surface-overlay-banner:var(--surface-overlay-banner-base);--surface-overlay-banner-opaque:var(--surface-overlay-banner-base);--surface-overlay-banner-strong:color-mix(in srgb,var(--surface-overlay-banner-base) 82%,transparent);--surface-overlay-banner-soft:color-mix(in srgb,var(--surface-overlay-banner-base) 56%,transparent);--surface-overlay-banner-faint:color-mix(in srgb,var(--surface-overlay-banner-base) 18%,transparent);--surface-overlay-banner-transparent:transparent;--surface-overlay-banner-gradient-header:linear-gradient(to bottom,var(--surface-overlay-banner-opaque) 0%,var(--surface-overlay-banner-strong) 38%,var(--surface-overlay-banner-soft) 70%,var(--surface-overlay-banner-faint) 88%,var(--surface-overlay-banner-transparent) 100%);--surface-overlay-banner-gradient-channel:linear-gradient(to top,var(--surface-overlay-banner-opaque) 0%,var(--surface-overlay-banner-strong) 38%,var(--surface-overlay-banner-soft) 70%,var(--surface-overlay-banner-faint) 88%,var(--surface-overlay-banner-transparent) 100%);--surface-overlay-banner-gradient:var(
|
||||
--surface-overlay-banner-gradient-header
|
||||
);--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:18px;--blur-modal-alert:14px;--blur-thumbnail-blur:18px;--modal-nav-backdrop-blur:6px;--app-header-centerline-offset:calc(var(--space-sm) + var(--space-2xl-plus)/2);--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-app-header:40;--z-overlay-nav:60;--z-overlay-floating:70;--z-overlay-popover:140;--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;--z-modal-top-root:140;--z-modal-top-overlay:150;--z-modal-top-content:160;--overlay-backdrop-color:var(--color-overlay-backdrop);--overlay-backdrop-blur:12px;--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-sm);--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-dropup-scroll-reserve:calc(var(--scrollbar-thin-width) + var(--space-xs) + var(--space-2xs)/2);--sidebar-dropup-max-height:18rem;--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;--overlay-panel-radius:var(--radius-lg);--overlay-panel-shadow:var(--shadow-lg);--overlay-panel-padding-inline:var(--popup-padding-inline);--overlay-panel-padding-block:var(--popup-padding-block);--toast-translate:-1.5rem;--sidebar-mobile-gutter:3rem;--popup-padding-inline:1rem;--popup-padding-block:0.75rem;--video-modal-primary-fr:1.85fr;--video-modal-secondary-min:260px;--video-modal-secondary-fr:1fr;--revert-modal-sidebar-min:240px;--revert-modal-sidebar-width:280px;--popover-inline-safe-max:calc(100vw - var(--space-xl));--progress-heLine 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:80%}@media (min-width:768px){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{--app-header-centerline:calc(env(safe-area-inset-top, 0) + var(--app-header-centerline-offset));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}#uiOverlay{position:fixed;inset:0;pointer-events:none;z-index:var(--z-overlay-popover)}#uiOverlay>*{pointer-events:auto}#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{pointer-events:none;opacity:0;visibility:hidden;z-index:var(--z-sidebar-overlay)}.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-sm);padding-bottom:var(--space-sm)}.app-shell__header{position:sticky;top:env(safe-area-inset-top,0);z-index:var(--z-app-header);padding-top:calc(var(--space-sm) + env(safe-area-inset-top, 0));padding-bottom:var(--space-sm);background-color:transparent;background-image:var(--surface-overlay-banner-gradient-header);background-repeat:no-repeat;background-size:100% 100%}.ds-metric-probe{position:absolute;top:0;left:0;Line truncated
|
||||
@@ -142,7 +142,7 @@
|
||||
padding-top: calc(var(--space-sm) + env(safe-area-inset-top, 0));
|
||||
padding-bottom: var(--space-sm);
|
||||
background-color: transparent;
|
||||
background-image: var(--surface-overlay-banner-gradient);
|
||||
background-image: var(--surface-overlay-banner-gradient-header);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
+12
-1
@@ -36,7 +36,7 @@
|
||||
transparent
|
||||
);
|
||||
--surface-overlay-banner-transparent: transparent;
|
||||
--surface-overlay-banner-gradient: linear-gradient(
|
||||
--surface-overlay-banner-gradient-header: linear-gradient(
|
||||
to bottom,
|
||||
var(--surface-overlay-banner-opaque) 0%,
|
||||
var(--surface-overlay-banner-strong) 38%,
|
||||
@@ -44,6 +44,17 @@
|
||||
var(--surface-overlay-banner-faint) 88%,
|
||||
var(--surface-overlay-banner-transparent) 100%
|
||||
);
|
||||
--surface-overlay-banner-gradient-channel: linear-gradient(
|
||||
to top,
|
||||
var(--surface-overlay-banner-opaque) 0%,
|
||||
var(--surface-overlay-banner-strong) 38%,
|
||||
var(--surface-overlay-banner-soft) 70%,
|
||||
var(--surface-overlay-banner-faint) 88%,
|
||||
var(--surface-overlay-banner-transparent) 100%
|
||||
);
|
||||
--surface-overlay-banner-gradient: var(
|
||||
--surface-overlay-banner-gradient-header
|
||||
);
|
||||
--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);
|
||||
|
||||
@@ -86,6 +86,99 @@ function resolveHTMLElementCtor(doc) {
|
||||
);
|
||||
}
|
||||
|
||||
function ensureNotificationPortal({ doc, HTMLElementCtor }) {
|
||||
if (!doc || !HTMLElementCtor) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let portal = doc.getElementById("notificationPortal");
|
||||
|
||||
if (!(portal instanceof HTMLElementCtor)) {
|
||||
portal = doc.createElement("div");
|
||||
portal.id = "notificationPortal";
|
||||
portal.className = "notification-portal";
|
||||
portal.setAttribute("role", "region");
|
||||
portal.setAttribute("aria-live", "polite");
|
||||
portal.setAttribute("aria-label", "System notifications");
|
||||
|
||||
const targetParent = doc.body || doc.documentElement || doc;
|
||||
targetParent.appendChild(portal);
|
||||
}
|
||||
|
||||
return portal instanceof HTMLElementCtor ? portal : null;
|
||||
}
|
||||
|
||||
function ensureStatusContainer({ doc, portal, HTMLElementCtor }) {
|
||||
if (!doc || !HTMLElementCtor) {
|
||||
return { container: null, messageTarget: null };
|
||||
}
|
||||
|
||||
let statusContainer = doc.getElementById("statusContainer");
|
||||
|
||||
if (!(statusContainer instanceof HTMLElementCtor)) {
|
||||
statusContainer = doc.createElement("div");
|
||||
statusContainer.id = "statusContainer";
|
||||
statusContainer.className =
|
||||
"notification-banner notification-banner--info status-banner hidden";
|
||||
statusContainer.setAttribute("role", "status");
|
||||
statusContainer.setAttribute("aria-live", "polite");
|
||||
|
||||
const spinner = doc.createElement("span");
|
||||
spinner.className = "status-spinner";
|
||||
spinner.setAttribute("aria-hidden", "true");
|
||||
statusContainer.appendChild(spinner);
|
||||
|
||||
const message = doc.createElement("span");
|
||||
message.className = "status-message";
|
||||
message.dataset.statusMessage = "";
|
||||
statusContainer.appendChild(message);
|
||||
} else {
|
||||
const existingSpinner = statusContainer.querySelector(".status-spinner");
|
||||
if (!(existingSpinner instanceof HTMLElementCtor)) {
|
||||
const spinner = doc.createElement("span");
|
||||
spinner.className = "status-spinner";
|
||||
spinner.setAttribute("aria-hidden", "true");
|
||||
statusContainer.insertBefore(spinner, statusContainer.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
let messageTarget = statusContainer.querySelector("[data-status-message]");
|
||||
|
||||
if (!(messageTarget instanceof HTMLElementCtor)) {
|
||||
messageTarget = doc.createElement("span");
|
||||
messageTarget.className = "status-message";
|
||||
messageTarget.dataset.statusMessage = "";
|
||||
statusContainer.appendChild(messageTarget);
|
||||
}
|
||||
|
||||
if (portal instanceof HTMLElementCtor && statusContainer.parentNode !== portal) {
|
||||
portal.appendChild(statusContainer);
|
||||
}
|
||||
|
||||
return { container: statusContainer, messageTarget };
|
||||
}
|
||||
|
||||
function ensureErrorContainer({ doc, portal, HTMLElementCtor }) {
|
||||
if (!doc || !HTMLElementCtor) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let errorContainer = doc.getElementById("errorContainer");
|
||||
|
||||
if (!(errorContainer instanceof HTMLElementCtor)) {
|
||||
errorContainer = doc.createElement("div");
|
||||
errorContainer.id = "errorContainer";
|
||||
errorContainer.className =
|
||||
"notification-banner notification-banner--critical hidden";
|
||||
}
|
||||
|
||||
if (portal instanceof HTMLElementCtor && errorContainer.parentNode !== portal) {
|
||||
portal.appendChild(errorContainer);
|
||||
}
|
||||
|
||||
return errorContainer instanceof HTMLElementCtor ? errorContainer : null;
|
||||
}
|
||||
|
||||
export function syncNotificationPortalVisibility(docCandidate) {
|
||||
const doc = resolveDocument(docCandidate);
|
||||
if (!doc) {
|
||||
@@ -200,12 +293,15 @@ export function showLoginRequiredToZapNotification({
|
||||
return false;
|
||||
}
|
||||
|
||||
const statusContainer = doc.getElementById("statusContainer");
|
||||
const portal = ensureNotificationPortal({ doc, HTMLElementCtor });
|
||||
|
||||
const { container: statusContainer, messageTarget } = ensureStatusContainer({
|
||||
doc,
|
||||
portal,
|
||||
HTMLElementCtor,
|
||||
});
|
||||
|
||||
if (statusContainer instanceof HTMLElementCtor) {
|
||||
const messageTarget =
|
||||
statusContainer.querySelector("[data-status-message]") || null;
|
||||
|
||||
if (messageTarget && messageTarget instanceof HTMLElementCtor) {
|
||||
messageTarget.textContent = expectedText;
|
||||
} else {
|
||||
@@ -231,7 +327,11 @@ export function showLoginRequiredToZapNotification({
|
||||
return true;
|
||||
}
|
||||
|
||||
const errorContainer = doc.getElementById("errorContainer");
|
||||
const errorContainer = ensureErrorContainer({
|
||||
doc,
|
||||
portal,
|
||||
HTMLElementCtor,
|
||||
});
|
||||
|
||||
if (errorContainer instanceof HTMLElementCtor) {
|
||||
errorContainer.textContent = expectedText;
|
||||
|
||||
+60
-6
@@ -1,4 +1,4 @@
|
||||
import { THEME_ACCENT_OVERRIDES } from "../config/instance-config.js";
|
||||
import { THEME_ACCENT_OVERRIDES as CONFIG_THEME_ACCENT_OVERRIDES } from "../config/instance-config.js";
|
||||
import { userLogger } from "./utils/logger.js";
|
||||
const STORAGE_KEY = "bitvid:theme";
|
||||
const FALLBACK_THEME = "dark";
|
||||
@@ -24,6 +24,7 @@ const boundToggles = new WeakSet();
|
||||
const registeredToggles = new Set();
|
||||
let currentTheme = null;
|
||||
let storageListenerBound = false;
|
||||
let accentOverrides = null;
|
||||
|
||||
const isBrowser = () =>
|
||||
typeof window !== "undefined" && typeof document !== "undefined";
|
||||
@@ -80,17 +81,56 @@ const getRootElement = () => {
|
||||
const normalizeAccentValue = (value) =>
|
||||
typeof value === "string" ? value.trim() : "";
|
||||
|
||||
const cloneAccentOverrides = (overrides) => {
|
||||
if (!overrides || typeof overrides !== "object") {
|
||||
return null;
|
||||
}
|
||||
|
||||
const sanitized = Object.entries(overrides).reduce((accumulator, [themeKey, themeOverrides]) => {
|
||||
if (!themeOverrides || typeof themeOverrides !== "object") {
|
||||
return accumulator;
|
||||
}
|
||||
|
||||
const nextThemeOverrides = Object.entries(themeOverrides).reduce(
|
||||
(themeAccumulator, [token, value]) => {
|
||||
if (Object.prototype.hasOwnProperty.call(ACCENT_CSS_VARIABLES, token)) {
|
||||
themeAccumulator[token] = value;
|
||||
}
|
||||
return themeAccumulator;
|
||||
},
|
||||
{},
|
||||
);
|
||||
|
||||
if (Object.keys(nextThemeOverrides).length > 0) {
|
||||
accumulator[themeKey] = nextThemeOverrides;
|
||||
}
|
||||
|
||||
return accumulator;
|
||||
}, {});
|
||||
return Object.keys(sanitized).length > 0 ? sanitized : null;
|
||||
};
|
||||
|
||||
const setAccentOverrides = (overrides) => {
|
||||
accentOverrides = cloneAccentOverrides(overrides);
|
||||
};
|
||||
|
||||
setAccentOverrides(
|
||||
typeof CONFIG_THEME_ACCENT_OVERRIDES !== "undefined"
|
||||
? CONFIG_THEME_ACCENT_OVERRIDES
|
||||
: null,
|
||||
);
|
||||
|
||||
const applyAccentOverrides = (root, theme) => {
|
||||
if (!root) {
|
||||
return;
|
||||
}
|
||||
|
||||
const themeOverrides =
|
||||
THEME_ACCENT_OVERRIDES &&
|
||||
typeof THEME_ACCENT_OVERRIDES === "object" &&
|
||||
THEME_ACCENT_OVERRIDES[theme] &&
|
||||
typeof THEME_ACCENT_OVERRIDES[theme] === "object"
|
||||
? THEME_ACCENT_OVERRIDES[theme]
|
||||
accentOverrides &&
|
||||
typeof accentOverrides === "object" &&
|
||||
accentOverrides[theme] &&
|
||||
typeof accentOverrides[theme] === "object"
|
||||
? accentOverrides[theme]
|
||||
: null;
|
||||
|
||||
Object.entries(ACCENT_CSS_VARIABLES).forEach(([token, cssVariable]) => {
|
||||
@@ -258,6 +298,20 @@ const applyTheme = (theme, { persist = true } = {}) => {
|
||||
return normalized;
|
||||
};
|
||||
|
||||
export const setThemeAccentOverrides = (overrides) => {
|
||||
setAccentOverrides(overrides);
|
||||
|
||||
const root = getRootElement();
|
||||
if (!root) {
|
||||
return;
|
||||
}
|
||||
|
||||
const theme = currentTheme || FALLBACK_THEME;
|
||||
applyAccentOverrides(root, theme);
|
||||
};
|
||||
|
||||
export const getThemeAccentOverrides = () => cloneAccentOverrides(accentOverrides);
|
||||
|
||||
export const setTheme = (theme) => {
|
||||
if (!isBrowser()) {
|
||||
currentTheme = normalizeTheme(theme) || FALLBACK_THEME;
|
||||
|
||||
@@ -40,6 +40,7 @@ await build({
|
||||
target: ["es2020"],
|
||||
minify: true,
|
||||
sourcemap: false,
|
||||
external: ["../config/instance-config.js", "../../config/instance-config.js"],
|
||||
loader: {
|
||||
".css": "css",
|
||||
".woff": "dataurl",
|
||||
|
||||
+2
-1
@@ -196,7 +196,8 @@ module.exports = {
|
||||
"status-neutral-surface": "var(--status-neutral-surface)"
|
||||
},
|
||||
backgroundImage: {
|
||||
"overlay-banner": "var(--surface-overlay-banner-gradient)"
|
||||
"overlay-header": "var(--surface-overlay-banner-gradient-header)",
|
||||
"overlay-channel": "var(--surface-overlay-banner-gradient-channel)"
|
||||
},
|
||||
borderColor: {
|
||||
surface: "var(--border-default)",
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
import { devLogger, userLogger } from "../js/utils/logger.js";
|
||||
import { initThemeController } from "../../js/themeController.js";
|
||||
import {
|
||||
initThemeController,
|
||||
setThemeAccentOverrides,
|
||||
} from "../../js/themeController.js";
|
||||
import { createBeaconApp } from "../app.js";
|
||||
|
||||
const CONFIG_MODULE_ID = "../../config/instance-config.js";
|
||||
|
||||
function resolveGlobalScope() {
|
||||
return (
|
||||
(typeof window !== "undefined" && window) ||
|
||||
@@ -22,7 +27,32 @@ function resolveWebTorrent() {
|
||||
|
||||
let appInstance = null;
|
||||
|
||||
const initializeThemeController = () => {
|
||||
const loadThemeAccentOverrides = async () => {
|
||||
try {
|
||||
const configModule = await import(CONFIG_MODULE_ID);
|
||||
if (configModule && typeof configModule.THEME_ACCENT_OVERRIDES !== "undefined") {
|
||||
return configModule.THEME_ACCENT_OVERRIDES;
|
||||
}
|
||||
} catch (error) {
|
||||
devLogger.warn(
|
||||
`[beacon] Failed to load theme accent overrides from ${CONFIG_MODULE_ID}`,
|
||||
error,
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const initializeThemeController = async () => {
|
||||
try {
|
||||
const overrides = await loadThemeAccentOverrides();
|
||||
if (overrides) {
|
||||
setThemeAccentOverrides(overrides);
|
||||
}
|
||||
} catch (error) {
|
||||
devLogger.warn("[beacon] Unable to hydrate theme accent overrides", error);
|
||||
}
|
||||
|
||||
try {
|
||||
initThemeController();
|
||||
} catch (error) {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
referrerpolicy="no-referrer"
|
||||
data-fallback-src="assets/jpg/bitvid.jpg"
|
||||
/>
|
||||
<div class="pointer-events-none absolute inset-0 rounded-lg bg-overlay-banner"></div>
|
||||
<div class="pointer-events-none absolute inset-0 rounded-lg bg-overlay-channel"></div>
|
||||
|
||||
<div
|
||||
class="absolute bottom-4 left-4 right-4 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"
|
||||
|
||||
Reference in new issue
Block a user