mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-30 17:32:26 +00:00
Refactor torrent beacon styles into design system
This commit is contained in:
thePR0M3TH3AN committed
1 parent
78223b35ee
commit
b9b50efa9c
8 files changed
+369
-161
No files matched your search
@@ -1,3 +1,3 @@
|
||||
:root{--color-page:#fff;--color-page-alt:#f9fafb;--color-surface:#0f172a;--color-surface-alt:#111827;--color-bg:var(--color-surface);--color-card:#1e293b;--color-card-private:#3b1d74;--color-card-critical:#3f0b13;--color-panel:#1f2937;--color-panel-hover:#334155;--color-border:#374151;--color-border-subtle:#d1d5db;--color-primary:#fe0032;--color-secondary:#ff93a5;--color-info:#60a5fa;--color-info-strong:#2563eb;--color-info-pressed:#1d4ed8;--color-muted-strong:#6b7280;--color-text:#f8fafc;--color-text-strong:#0f172a;--color-text-muted:var(--color-muted);--color-muted:#94a3b8;--color-muted-alt:#9ca3af;--color-subtle-text:#e2e8f0;--color-subtle:#e5e7eb;--color-critical:#7f1d1d;--color-critical-strong:#991b1b;--color-warning:#facc15;--color-warning-strong:#d97706;--color-warning-surface:rgba(146,64,14,.24);--color-warning-glass:rgba(250,204,21,.18);--color-neutral-700:#3f3f46;--color-neutral-600:#52525b;--color-white:#fff;--color-black:#000;--color-overlay:#1a2234;--color-overlay-black:rgba(0,0,0,.9);--color-overlay-muted:rgba(15,23,42,.55);--color-overlay-strong:rgba(15,23,42,.75);--color-overlay-darker:rgba(15,23,42,.88);--color-overlay-panel:rgba(26,34,52,.82);--color-overlay-panel-soft:rgba(26,34,52,.65);--color-overlay-panel-tint:rgba(31,41,55,.5);--color-overlay-panel-glass:rgba(28,37,58,.72);--color-overlay-panel-glass-soft:rgba(31,41,55,.55);--color-modal-backdrop:rgba(8,12,24,.58);--color-modal-surface:rgba(20,28,46,.78);--color-overlay-veil:rgba(11,17,32,.96);--color-overlay-banner:rgba(51,65,85,.95);--color-sidebar-surface:rgba(17,24,39,.94);--color-sidebar-surface-alt:rgba(11,22,48,.78);--color-sidebar-border:rgba(148,163,184,.28);--color-sidebar-border-strong:rgba(148,163,184,.42);--color-sidebar-hover:rgba(56,189,248,.18);--color-sidebar-hover-strong:rgba(129,140,248,.28);--color-sidebar-glow:rgba(56,189,248,.35);--color-sidebar-accent-start:rgba(56,189,248,.9);--color-sidebar-accent-end:rgba(129,140,248,.85);--color-sidebar-text-muted:rgba(203,213,225,.75);--color-overlay-panel-gradient-start:rgba(30,41,59,.92);--color-overlay-panel-gradient-end:rgba(15,23,42,.92);--color-surface-tint-subtle:rgba(148,163,184,.08);--color-border-translucent:rgba(148,163,184,.18);--color-border-translucent-strong:rgba(148,163,184,.25);--color-border-translucent-bright:rgba(148,163,184,.32);--color-border-translucent-stronger:rgba(148,163,184,.35);--color-border-translucent-strongest:rgba(148,163,184,.4);--color-border-translucent-glow:rgba(148,163,184,.55);--color-border-translucent-medium:rgba(148,163,184,.2);--color-border-neutral-soft:rgba(229,231,235,.35);--color-border-info-soft:rgba(96,165,250,.35);--color-border-sidebar-strong:rgba(55,65,81,.9);--color-ring-private:rgba(168,85,247,.55);--color-ring-private-hover:rgba(192,132,252,.65);--color-ring-critical:rgba(239,68,68,.4);--color-ring-critical-soft:rgba(239,68,68,.35);--color-ring-critical-hover:rgba(239,68,68,.45);--color-ring-critical-strong:rgba(239,68,68,.55);--color-ring-alert:rgba(220,38,38,.6);--color-gradient-visibility-start:rgba(129,140,248,.4);--color-gradient-visibility-end:rgba(192,132,252,.32);--color-white-soft:hsla(0,0%,100%,.1);--color-white-softer:hsla(0,0%,100%,.3);--color-white-softest:hsla(0,0%,100%,.4);--color-shadow-floating:rgba(8,11,30,.55);--color-shadow-elevated:rgba(8,11,30,.45);--color-shadow-panel:rgba(15,23,42,.35);--color-shadow-notification:rgba(15,23,42,.3);--color-shadow-sidebar:rgba(0,0,0,.45);--color-divider-strong:rgba(15,23,42,.35);--color-text-frosted-strong:rgba(226,232,240,.94);--color-text-frosted:rgba(226,232,240,.9);--color-text-frosted-soft:rgba(226,232,240,.82);--scrollbar-width:0.5rem;--scrollbar-track:var(--color-white-soft);--scrollbar-thumb:var(--color-white-softer);--scrollbar-thumb-hover:var(--color-white-softest);--z-sidebar-overlay:10;--z-sidebar:20;--z-modal-root:100;--z-modal-overlay:110;--z-modal-content:120;--z-modal-player:130;--sidebar-width-expanded:16rem;--sidebar-width-collapsed:4rem;--sidebar-width:var(--sidebar-width-expanded);--sidebar-control-size:2.75rem;--sidebar-content-gap:1rem;--blog-embed-height:100rem;--color-blog-transparent:transparent;--color-blog-cyan-500:#06b6d4;--color-blog-sky-500:#0bf;--color-blog-teal-600:#0e7490;--color-blog-green-800:#14532d;--color-blog-green-700:#15803d;--color-blog-teal-700:#164e63;--color-blog-gray-900:#171717;--color-blog-coffee-900:#1c1917;--color-blog-green-500:#22c55e;--color-blog-gray-800:#2b2b2b;--color-blog-gray-700:#3b3b3b;--color-blog-teal-accent:#3e8b8a;--color-blog-gray-650:#404040;--color-blog-brown-700:#44403c;--color-blog-purple-900:#581c87;--color-blog-gray-500:#666;--color-blog-gray-450:#737373;--color-blog-gray-440:#747474;--color-blog-brown-500:#78716c;--color-blog-rust-700:#7c2d12;--color-blog-purple-700:#7e22ce;--color-blog-purple-accent:#92379c;--color-blog-purple-muted:#96609c;--color-blog-gray-300:#999;--color-blog-purple-500:#a855f7;--color-blog-gray-275:#a9a9a9;--color-blog-red-600:#b91c1c;--color-blog-rust-600:#c2410c;--colLine 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:.25rem}::-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}header{margin-bottom:2rem;padding:1rem 0;display:flex;justify-content:flex-start}header img{height:6rem;width:auto;max-width:none}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)}.\!container{width:100%!important}.container{width:100%}@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}}.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-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover{position:relative;display:inline-flex}.popover__panel{outline:2px solid transparent;outline-offset:2px}.popover__panel:focus-visible{--tw-ring-offset-shadow:var(--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:.25rem}::-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}header{margin-bottom:2rem;padding:1rem 0;display:flex;justify-content:flex-start}header img{height:6rem;width:auto;max-width:none}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: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}}.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-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:var(--color-info);--tw-ring-opacity:0.7;--tw-ring-offset-width:2px;--tw-ring-offset-color:var(--color-surface);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-duration:var(--motion-duration-fast);transition-timing-function:cubic-bezier(0,0,.2,1)}.popover{position:relLine truncated
|
||||
@@ -105,6 +105,28 @@
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
[ng\:cloak],
|
||||
[ng-cloak],
|
||||
[data-ng-cloak],
|
||||
[x-ng-cloak],
|
||||
.ng-cloak,
|
||||
.x-ng-cloak,
|
||||
.ng-hide:not(.ng-hide-animate) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
ng\:form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ng-animate-shim {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ng-anchor {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
@@ -719,6 +741,287 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Torrent helper classes */
|
||||
.torrent-download-anchor {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.torrent-clipboard-textarea {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -9999px;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Angular UI Grid theming */
|
||||
.ui-grid {
|
||||
@apply relative w-full rounded-xl border border-border-translucent bg-surface text-sm text-text shadow-sm;
|
||||
box-sizing: content-box;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.ui-grid-vertical-bar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.ui-grid-header-cell:not(:last-child) .ui-grid-vertical-bar,
|
||||
.ui-grid-cell:not(:last-child) .ui-grid-vertical-bar {
|
||||
width: 1px;
|
||||
background-color: var(--color-border-translucent-medium);
|
||||
}
|
||||
|
||||
.ui-grid-contents-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui-grid-top-panel-background,
|
||||
.ui-grid-footer-panel-background {
|
||||
background-color: var(--color-surface-alt);
|
||||
}
|
||||
|
||||
.ui-grid-header {
|
||||
border-bottom: 1px solid var(--color-border-translucent-medium);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ui-grid-top-panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-weight: 600;
|
||||
background-color: var(--color-surface-alt);
|
||||
color: var(--color-muted-strong);
|
||||
}
|
||||
|
||||
.ui-grid-header-viewport,
|
||||
.ui-grid-footer-viewport {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ui-grid-header-canvas,
|
||||
.ui-grid-footer-canvas {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui-grid-header-cell-wrapper,
|
||||
.ui-grid-footer-cell-wrapper {
|
||||
position: relative;
|
||||
display: table;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ui-grid-header-cell-row,
|
||||
.ui-grid-footer-cell-row {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.ui-grid-header-cell,
|
||||
.ui-grid-footer-cell {
|
||||
position: relative;
|
||||
display: table-cell;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid var(--color-border-translucent-medium);
|
||||
background-color: inherit;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.ui-grid-header-cell:last-child,
|
||||
.ui-grid-footer-cell:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.ui-grid-header-cell .sortable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ui-grid-viewport {
|
||||
min-height: 20px;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.ui-grid-canvas {
|
||||
position: relative;
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.ui-grid-row {
|
||||
border-bottom: 1px solid var(--color-border-translucent);
|
||||
}
|
||||
|
||||
.ui-grid-row:nth-child(odd) .ui-grid-cell {
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
.ui-grid-row:nth-child(even) .ui-grid-cell {
|
||||
background-color: var(--color-surface-alt);
|
||||
}
|
||||
|
||||
.ui-grid-row:last-child .ui-grid-cell {
|
||||
border-bottom-color: var(--color-border-translucent-medium);
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
.ui-grid-row:hover .ui-grid-cell {
|
||||
background-color: var(--color-panel-hover);
|
||||
}
|
||||
|
||||
.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
|
||||
background-color: rgba(37, 99, 235, 0.18);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ui-grid-cell {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid var(--color-border-translucent-medium);
|
||||
}
|
||||
|
||||
.ui-grid-cell:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.ui-grid-cell-contents {
|
||||
box-sizing: border-box;
|
||||
padding: 0.75rem 1rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ui-grid-menu-button {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: var(--color-surface-alt);
|
||||
border: 1px solid var(--color-border-translucent-medium);
|
||||
cursor: pointer;
|
||||
height: 2.5rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.ui-grid-menu {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
padding: 0.5rem 0.75rem 1rem;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-surface-alt);
|
||||
border: 1px solid var(--color-border-translucent-medium);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: 0 22px 48px -18px var(--color-shadow-elevated);
|
||||
}
|
||||
|
||||
/* ng-notify overrides */
|
||||
.ngn {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
z-index: 1200;
|
||||
padding: var(--space-md) var(--space-2xl);
|
||||
text-align: center;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
text-shadow: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.ngn.ngn-visible,
|
||||
.ngn.ngn-enter-active,
|
||||
.ngn.ngn-leave-active {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.ngn-component {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ngn-top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ngn-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.ngn-dismiss {
|
||||
pointer-events: auto;
|
||||
display: none;
|
||||
margin-left: auto;
|
||||
margin-right: var(--space-md);
|
||||
border-radius: 9999px;
|
||||
border: 1px solid transparent;
|
||||
background-color: var(--color-overlay-panel);
|
||||
color: var(--color-subtle);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.ngn-sticky .ngn-dismiss {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ngn-dismiss:hover {
|
||||
background-color: var(--color-overlay-panel-soft);
|
||||
}
|
||||
|
||||
.ngn-info {
|
||||
background-color: var(--color-info-strong);
|
||||
}
|
||||
|
||||
.ngn-error {
|
||||
background-color: var(--color-critical-strong);
|
||||
}
|
||||
|
||||
.ngn-success {
|
||||
background-color: var(--color-info);
|
||||
}
|
||||
|
||||
.ngn-warn {
|
||||
background-color: var(--color-warning-strong);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.ngn-grimace {
|
||||
background-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
@media (max-width: 30rem) {
|
||||
.ngn {
|
||||
font-size: var(--font-size-sm);
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
}
|
||||
|
||||
.ngn-dismiss {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-switcher {
|
||||
@apply card flex flex-col gap-lg;
|
||||
}
|
||||
|
||||
@@ -323,7 +323,7 @@ Angular templates under `torrent/views/` should follow the refreshed structure:
|
||||
- Wrap primary sections in `.card` and layer Tailwind utilities for layout (`grid`, `gap-xl`, `overflow-auto`).
|
||||
- Use `.input`, `.select`, `.btn`, and `.btn-ghost` (with `data-variant="critical"` for destructive actions) instead of legacy `.u-full-width`, `.button`, or `.button-danger` classes.
|
||||
- Prefer token-backed utilities for spacing and typography (`px-6`, `py-6`, `text-muted`) over ad-hoc CSS.
|
||||
- Reuse the `.spinner-overlay` markup for async states so overlays stay consistent with the new palette.
|
||||
- Reuse the fixed overlay spinner pattern (`fixed inset-0 z-[60] flex items-center justify-center bg-overlay-muted/70 backdrop-blur-md` plus an `animate-spin text-info-strong` SVG) for async states so overlays stay consistent with the new palette.
|
||||
|
||||
When adding new torrent affordances, mirror the existing markup: inline 24×24 SVG strokes at 2px, `.focus-ring` on interactive anchors, and `.bv-stack` for vertical rhythm. This keeps the beacon aligned with the design system without reintroducing the deprecated Skeleton grid.
|
||||
|
||||
|
||||
+4
-1
@@ -4,7 +4,9 @@ module.exports = {
|
||||
"./blog.html",
|
||||
"./components/**/*.html",
|
||||
"./views/**/*.html",
|
||||
"./js/**/*.js"
|
||||
"./js/**/*.js",
|
||||
"./torrent/**/*.html",
|
||||
"./torrent/**/*.js"
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
@@ -43,6 +45,7 @@ module.exports = {
|
||||
translucent: "var(--color-border-translucent)",
|
||||
"translucent-strong": "var(--color-border-translucent-strong)",
|
||||
"translucent-bright": "var(--color-border-translucent-bright)",
|
||||
"translucent-medium": "var(--color-border-translucent-medium)",
|
||||
"translucent-stronger": "var(--color-border-translucent-stronger)",
|
||||
"translucent-strongest": "var(--color-border-translucent-strongest)",
|
||||
"translucent-glow": "var(--color-border-translucent-glow)",
|
||||
|
||||
+42
-4
@@ -12,6 +12,34 @@ const trackers = [
|
||||
const torrentOpts = { announce: trackers };
|
||||
const trackerOpts = { announce: trackers };
|
||||
|
||||
const applyDynamicStylesPromise = import("../js/ui/styleSystem.js")
|
||||
.then((module) => module.applyDynamicStyles)
|
||||
.catch((error) => {
|
||||
console.warn("Failed to load style system utilities", error);
|
||||
return null;
|
||||
});
|
||||
|
||||
const dynamicStyleFallbackClasses = {
|
||||
hiddenDownload: "torrent-download-anchor",
|
||||
clipboard: "torrent-clipboard-textarea",
|
||||
};
|
||||
|
||||
function applyElementStyles(element, styleObject, slotKey) {
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (slotKey && dynamicStyleFallbackClasses[slotKey]) {
|
||||
element.classList.add(dynamicStyleFallbackClasses[slotKey]);
|
||||
}
|
||||
|
||||
applyDynamicStylesPromise.then((applyStyles) => {
|
||||
if (typeof applyStyles === "function") {
|
||||
applyStyles(element, styleObject, { slot: slotKey });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Simple debug logger.
|
||||
function dbg(msg) {
|
||||
console.log("[DEBUG]", msg);
|
||||
@@ -193,7 +221,7 @@ app.controller("BTorrentCtrl", [
|
||||
// Create an anchor to trigger the download.
|
||||
const blobUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.style.display = "none";
|
||||
applyElementStyles(a, { display: "none" }, "hiddenDownload");
|
||||
a.href = blobUrl;
|
||||
a.download = file.name;
|
||||
// Append, click, remove, revoke.
|
||||
@@ -225,8 +253,18 @@ app.controller("BTorrentCtrl", [
|
||||
try {
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = magnetURI;
|
||||
textarea.style.position = "fixed";
|
||||
textarea.style.left = "-9999px";
|
||||
applyElementStyles(
|
||||
textarea,
|
||||
{
|
||||
position: "fixed",
|
||||
top: "0",
|
||||
left: "-9999px",
|
||||
width: "0",
|
||||
height: "0",
|
||||
opacity: "0",
|
||||
},
|
||||
"clipboard",
|
||||
);
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand("copy");
|
||||
@@ -247,7 +285,7 @@ app.controller("BTorrentCtrl", [
|
||||
const fileName = torrent.fileName || `${torrent.name}.torrent`;
|
||||
// Create a hidden <a> to force download of the .torrent file.
|
||||
const a = document.createElement("a");
|
||||
a.style.display = "none";
|
||||
applyElementStyles(a, { display: "none" }, "hiddenDownload");
|
||||
a.href = torrent.torrentFileBlobURL;
|
||||
a.download = fileName;
|
||||
document.body.appendChild(a);
|
||||
|
||||
+11
-17
@@ -23,30 +23,21 @@
|
||||
|
||||
<!-- Local styles -->
|
||||
<link rel="stylesheet" href="../css/tailwind.generated.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/matowens/ng-notify/dist/ng-notify.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/angular.ui-grid/3/ui-grid.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body class="bg-surface font-sans text-text" ng-controller="BTorrentCtrl" ng-cloak="">
|
||||
<!-- Header with container -->
|
||||
<header class="header-torrent">
|
||||
<div class="header-torrent__inner">
|
||||
<header class="border-b border-border-translucent-medium bg-surface">
|
||||
<div class="mx-auto flex max-w-5xl items-center px-4 py-6 sm:px-6 lg:px-8">
|
||||
<a
|
||||
class="header-torrent__logo focus-ring"
|
||||
class="focus-ring inline-flex items-center gap-3 rounded-full px-2 py-1.5 text-text transition-colors duration-fast ease-out hover:bg-panel-hover hover:text-text"
|
||||
href="../index.html"
|
||||
aria-label="Return to the bitvid home page"
|
||||
>
|
||||
<img
|
||||
src="../assets/svg/bitvid-logo-light-mode.svg"
|
||||
alt="bitvid logo"
|
||||
class="header-torrent__logo-image"
|
||||
class="h-14 w-auto"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
@@ -57,15 +48,18 @@
|
||||
<div id="view" ng-view></div>
|
||||
|
||||
<!-- Processing Spinner -->
|
||||
<div class="spinner-overlay" ng-show="client.processing">
|
||||
<div
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center bg-overlay-muted/70 backdrop-blur-md"
|
||||
ng-show="client.processing"
|
||||
>
|
||||
<svg
|
||||
class="spinner-overlay__icon"
|
||||
class="h-12 w-12 animate-spin text-info-strong"
|
||||
viewBox="0 0 24 24"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle
|
||||
class="spinner-overlay__track"
|
||||
class="stroke-border-translucent opacity-40"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="9"
|
||||
@@ -73,7 +67,7 @@
|
||||
stroke-width="2"
|
||||
></circle>
|
||||
<path
|
||||
class="spinner-overlay__indicator"
|
||||
class="stroke-current"
|
||||
d="M21 12a9 9 0 0 0-9-9"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
|
||||
@@ -1,133 +0,0 @@
|
||||
@import "../css/tokens.css";
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: var(--font-family-sans, system-ui, -apple-system, sans-serif);
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
line-height: var(--line-height-base, 1.5);
|
||||
}
|
||||
|
||||
.header-torrent {
|
||||
background-color: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-border-translucent-medium);
|
||||
}
|
||||
|
||||
.header-torrent__inner {
|
||||
margin: 0 auto;
|
||||
max-width: 72rem;
|
||||
padding: var(--space-lg) var(--space-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-torrent__logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-xs);
|
||||
border-radius: var(--radius-full);
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
transition: color var(--motion-duration-fast, 120ms)
|
||||
var(--motion-ease-out, ease-out),
|
||||
background-color var(--motion-duration-fast, 120ms)
|
||||
var(--motion-ease-out, ease-out);
|
||||
}
|
||||
|
||||
.header-torrent__logo:hover,
|
||||
.header-torrent__logo:focus-visible {
|
||||
background-color: var(--color-panel-hover);
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.header-torrent__logo-image {
|
||||
height: 3.5rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.spinner-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 60;
|
||||
background-color: var(--color-overlay-muted, rgba(15, 23, 42, 0.35));
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.spinner-overlay__icon {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
stroke: var(--color-info-strong);
|
||||
animation: spinner-rotate
|
||||
calc(var(--motion-duration-base, 160ms) * 6)
|
||||
linear
|
||||
infinite;
|
||||
}
|
||||
|
||||
.spinner-overlay__track {
|
||||
stroke: var(--color-border-translucent);
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
.spinner-overlay__indicator {
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
/* UI Grid overrides migrated from inline strings */
|
||||
.ui-grid-measure {
|
||||
font-size: 14px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: -1000px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.ui-grid-pinned-placeholder {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.ui-grid-expandable-spacing {
|
||||
float: left;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
@keyframes spinner-rotate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
[ng\:cloak],
|
||||
[ng-cloak],
|
||||
[data-ng-cloak],
|
||||
[x-ng-cloak],
|
||||
.ng-cloak,
|
||||
.x-ng-cloak,
|
||||
.ng-hide:not(.ng-hide-animate) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
ng\:form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ng-animate-shim {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ng-anchor {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -261,15 +261,18 @@
|
||||
</div>
|
||||
|
||||
<!-- Processing Spinner -->
|
||||
<div class="spinner-overlay" ng-show="client.processing">
|
||||
<div
|
||||
class="fixed inset-0 z-[60] flex items-center justify-center bg-overlay-muted/70 backdrop-blur-md"
|
||||
ng-show="client.processing"
|
||||
>
|
||||
<svg
|
||||
class="spinner-overlay__icon"
|
||||
class="h-12 w-12 animate-spin text-info-strong"
|
||||
viewBox="0 0 24 24"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<circle
|
||||
class="spinner-overlay__track"
|
||||
class="stroke-border-translucent opacity-40"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="9"
|
||||
@@ -277,7 +280,7 @@
|
||||
stroke-width="2"
|
||||
></circle>
|
||||
<path
|
||||
class="spinner-overlay__indicator"
|
||||
class="stroke-current"
|
||||
d="M21 12a9 9 0 0 0-9-9"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
|
||||
Reference in new issue
Block a user