@jacshuo/onyx 2.2.0 → 2.4.0

package/dist/styles/DataDisplay/VirtualList.css

@@ -0,0 +1,35 @@
+/* VirtualList — component-scoped styles */
+
+/* Smooth momentum scrolling on iOS / macOS trackpads */
+[data-virtual-list] {
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: auto; /* programmatic smooth scroll is handled per-call */
+  outline: none;
+}
+
+/* Prevent sub-pixel layout jitter on high-DPI screens */
+.onyx-vlist-item {
+  will-change: transform;
+  contain: layout style;
+}
+
+/* Horizontal-list drag affordance */
+[data-virtual-list][data-direction="horizontal"] {
+  cursor: grab;
+}
+
+/* Default scroll-bar thinning on Webkit */
+[data-virtual-list]::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+[data-virtual-list]::-webkit-scrollbar-track {
+  background: transparent;
+}
+[data-virtual-list]::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background-color: color-mix(in srgb, currentColor 25%, transparent);
+}
+[data-virtual-list]::-webkit-scrollbar-thumb:hover {
+  background-color: color-mix(in srgb, currentColor 40%, transparent);
+}

package/dist/styles/Extras/CinePlayer.css

@@ -1 +1,63 @@
-@import "../../../styles/components/CinePlayer.css";
+/* ── CinePlayer animations & design tokens ──────────── */
+
+@keyframes cp-controls-up {
+  from { transform: translateY(100%); opacity: 0; }
+  to   { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes cp-curtain-open {
+  from { clip-path: inset(0 50% 0 50%); opacity: 0; }
+  to   { clip-path: inset(0 0 0 0); opacity: 1; }
+}
+
+@keyframes cp-curtain-close {
+  from { clip-path: inset(0 0 0 0); opacity: 1; }
+  to   { clip-path: inset(0 50% 0 50%); opacity: 0; }
+}
+
+@keyframes cp-cinema-in {
+  from { background: rgba(0,0,0,0); }
+  to   { background: rgba(0,0,0,0.92); }
+}
+
+@keyframes cp-cinema-out {
+  from { background: rgba(0,0,0,0.92); }
+  to   { background: rgba(0,0,0,0); }
+}
+
+@keyframes cp-playlist-in {
+  from { transform: translateX(100%); opacity: 0; }
+  to   { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes cp-playlist-out {
+  from { transform: translateX(0); opacity: 1; }
+  to   { transform: translateX(100%); opacity: 0; }
+}
+
+@keyframes cp-track-transition {
+  0%   { filter: brightness(0); transform: scale(1.05); }
+  50%  { filter: brightness(0); }
+  100% { filter: brightness(1); transform: scale(1); }
+}
+
+@keyframes cp-volume-wave {
+  0%   { transform: scaleX(0); opacity: 1; }
+  100% { transform: scaleX(1); opacity: 0; }
+}
+
+/* ── CinePlayer design tokens ───────────── */
+
+:root {
+  --cp-bg:             #000000;
+  --cp-panel-bg:       rgba(0,0,0,0.85);
+  --cp-text:           rgba(255,255,255,0.75);
+  --cp-text-muted:     rgba(255,255,255,0.50);
+  --cp-text-strong:    #ffffff;
+  --cp-border:         rgba(255,255,255,0.10);
+  --cp-surface:        rgba(255,255,255,0.05);
+  --cp-surface-hover:  rgba(255,255,255,0.10);
+  --cp-overlay:        rgba(0,0,0,0.30);
+  --cp-seek-track:     rgba(255,255,255,0.20);
+  --cp-seek-buffer:    rgba(255,255,255,0.15);
+}

package/dist/styles/Extras/FileExplorer.css

@@ -1 +1,39 @@
-@import "../../../styles/components/FileExplorer.css";
+/* ── FileExplorer design tokens ──────────── */
+
+:root {
+  --fe-bg:             linear-gradient(145deg, rgba(255,255,255,0.99), rgba(248,248,252,0.98));
+  --fe-shadow:         0 4px 30px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
+  --fe-text:           var(--color-primary-600);
+  --fe-text-strong:    var(--color-primary-900);
+  --fe-text-muted:     var(--color-primary-400);
+  --fe-border:         rgba(0,0,0,0.06);
+  --fe-surface:        rgba(0,0,0,0.015);
+  --fe-surface-hover:  rgba(0,0,0,0.04);
+  --fe-input-bg:       var(--color-primary-50);
+  --fe-input-border:   var(--color-primary-200);
+  --fe-btn-color:      rgba(0,0,0,0.45);
+  --fe-btn-hover:      rgba(0,0,0,0.80);
+  --fe-btn-hover-bg:   rgba(0,0,0,0.06);
+  --fe-badge-bg:       var(--color-primary-100);
+  --fe-dock-bg:        linear-gradient(135deg, color-mix(in srgb, var(--fe-accent, #8b5cf6) 12%, white), rgba(255,255,255,0.95));
+  --fe-dock-shadow:    0 0 15px color-mix(in srgb, var(--fe-accent, #8b5cf6) 15%, transparent);
+}
+
+.dark {
+  --fe-bg:             linear-gradient(145deg, rgba(10,10,18,0.97), rgba(15,12,28,0.98));
+  --fe-shadow:         0 4px 60px rgba(0,0,0,0.50), 0 0 1px var(--fe-accent, #8b5cf6), inset 0 1px 0 rgba(255,255,255,0.05);
+  --fe-text:           rgba(255,255,255,0.70);
+  --fe-text-strong:    #ffffff;
+  --fe-text-muted:     rgba(255,255,255,0.30);
+  --fe-border:         rgba(255,255,255,0.06);
+  --fe-surface:        rgba(255,255,255,0.02);
+  --fe-surface-hover:  rgba(255,255,255,0.06);
+  --fe-input-bg:       rgba(255,255,255,0.05);
+  --fe-input-border:   rgba(255,255,255,0.08);
+  --fe-btn-color:      rgba(255,255,255,0.50);
+  --fe-btn-hover:      rgba(255,255,255,0.90);
+  --fe-btn-hover-bg:   rgba(255,255,255,0.08);
+  --fe-badge-bg:       rgba(255,255,255,0.05);
+  --fe-dock-bg:        linear-gradient(135deg, color-mix(in srgb, var(--fe-accent, #8b5cf6) 20%, black), rgba(0,0,0,0.85));
+  --fe-dock-shadow:    0 0 20px color-mix(in srgb, var(--fe-accent, #8b5cf6) 30%, transparent);
+}

package/dist/styles/Extras/FilmReel.css

@@ -1 +1,24 @@
-@import "../../../styles/components/FilmReel.css";
+/* ── FilmReel: cinematic gallery animations ─────────── */
+
+@keyframes film-grain-shift {
+  0%, 100% { transform: translate(0, 0); }
+  20% { transform: translate(-2%, 3%); }
+  40% { transform: translate(3%, -2%); }
+  60% { transform: translate(-1%, -3%); }
+  80% { transform: translate(2%, 2%); }
+}
+
+@keyframes lightbox-backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes lightbox-photo-in {
+  from { opacity: 0; transform: scale(0.88); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes reveal-up {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}

package/dist/styles/Extras/LoginPanel.css

@@ -0,0 +1,16 @@
+/* LoginPanel component styles */
+
+.login-panel-slide-enter {
+  animation: login-slide-in 0.22s ease-out forwards;
+}
+
+@keyframes login-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/styles/Extras/MiniPlayer.css

@@ -1 +1,84 @@
-@import "../../../styles/components/MiniPlayer.css";
+/* ── MiniPlayer animations & design tokens ──────────── */
+
+@keyframes mp-enter-bottom {
+  from { opacity: 0; transform: translateY(100%) scale(0.92); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes mp-exit-bottom {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(100%) scale(0.92); }
+}
+
+@keyframes mp-enter-top {
+  from { opacity: 0; transform: translateY(-100%) scale(0.92); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes mp-exit-top {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(-100%) scale(0.92); }
+}
+
+@keyframes mp-enter-left {
+  from { opacity: 0; transform: translateX(-100%) scale(0.92); }
+  to   { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+@keyframes mp-exit-left {
+  from { opacity: 1; transform: translateX(0) scale(1); }
+  to   { opacity: 0; transform: translateX(-100%) scale(0.92); }
+}
+
+@keyframes mp-enter-right {
+  from { opacity: 0; transform: translateX(100%) scale(0.92); }
+  to   { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+@keyframes mp-exit-right {
+  from { opacity: 1; transform: translateX(0) scale(1); }
+  to   { opacity: 0; transform: translateX(100%) scale(0.92); }
+}
+
+@keyframes mp-vinyl-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+@keyframes mp-pulse-ring {
+  0%   { transform: scale(1); opacity: 0.5; }
+  70%  { transform: scale(1.25); opacity: 0; }
+  100% { transform: scale(1.25); opacity: 0; }
+}
+
+@keyframes mp-progress-glow {
+  0%, 100% { filter: brightness(1); }
+  50%      { filter: brightness(1.4); }
+}
+
+@keyframes mp-eq-bar {
+  0%   { transform: scaleY(0.3); }
+  100% { transform: scaleY(1); }
+}
+
+/* ── MiniPlayer design tokens ───────────── */
+
+:root {
+  --mp-bg:             rgba(255,255,255,0.90);
+  --mp-text:           var(--color-primary-900);
+  --mp-text-muted:     var(--color-primary-500);
+  --mp-border:         rgba(148,163,184,0.60);
+  --mp-surface:        rgba(148,163,184,0.50);
+  --mp-surface-hover:  rgba(241,245,249,0.60);
+  --mp-dock-strip:     rgba(148,163,184,0.40);
+}
+
+.dark {
+  --mp-bg:             rgba(26,22,37,0.95);
+  --mp-text:           #ffffff;
+  --mp-text-muted:     rgba(255,255,255,0.50);
+  --mp-border:         rgba(255,255,255,0.10);
+  --mp-surface:        rgba(255,255,255,0.10);
+  --mp-surface-hover:  rgba(255,255,255,0.05);
+  --mp-dock-strip:     rgba(255,255,255,0.20);
+}