/* ---------- shadcn-inspired tokens (light + dark) ---------- */ /* * jUpload — two themes: * 1. Default "Teal": primary = oklch(0.596 0.145 163.225) ≈ hsl(163 64% 36%) * 2. "Mono": primary = oklch(0.205 0 0) ≈ hsl(0 0% 11%) * * HSL approximations are used so that `hsl(var(--primary) / opacity)` * still works for translucent variants throughout the app. * * Apply for dark variant. * Apply for the Mono palette. * Combine: for Mono dark. */ /* === Theme: Teal · Light (default) === */ :root { --background: 0 0% 100%; --foreground: 165 30% 8%; --card: 0 0% 100%; --card-foreground: 165 30% 8%; --popover: 0 0% 100%; --popover-foreground: 165 30% 8%; --primary: 163 64% 36%; /* ≈ oklch(0.596 0.145 163.225) */ --primary-foreground: 0 0% 100%; --secondary: 165 18% 95%; --secondary-foreground: 165 25% 12%; --muted: 165 18% 95%; --muted-foreground: 165 10% 42%; --accent: 163 60% 94%; --accent-foreground: 163 64% 24%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; --border: 165 16% 88%; --input: 165 16% 88%; --ring: 163 64% 36%; --radius: 0.65rem; --success: 142 71% 38%; --warning: 38 92% 50%; } html.dark { --background: 168 25% 5%; --foreground: 165 10% 96%; --card: 168 22% 8%; --card-foreground: 165 10% 96%; --popover: 168 22% 8%; --popover-foreground: 165 10% 96%; --primary: 163 56% 48%; --primary-foreground: 168 30% 6%; --secondary: 168 15% 14%; --secondary-foreground: 165 10% 96%; --muted: 168 15% 14%; --muted-foreground: 165 8% 62%; --accent: 163 40% 18%; --accent-foreground: 163 60% 88%; --destructive: 0 63% 45%; --destructive-foreground: 0 0% 98%; --border: 168 14% 18%; --input: 168 14% 18%; --ring: 163 56% 48%; } /* === Theme: Mono · Light === */ html.theme-mono { --background: 0 0% 100%; --foreground: 0 0% 9%; --card: 0 0% 100%; --card-foreground: 0 0% 9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 9%; --primary: 0 0% 11%; /* ≈ oklch(0.205 0 0) */ --primary-foreground: 0 0% 98%; --secondary: 0 0% 96%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96%; --muted-foreground: 0 0% 45%; --accent: 0 0% 95%; --accent-foreground: 0 0% 9%; --destructive: 0 72% 51%; --destructive-foreground: 0 0% 100%; --border: 0 0% 90%; --input: 0 0% 90%; --ring: 0 0% 30%; --success: 142 71% 38%; --warning: 38 92% 50%; } /* === Theme: Mono · Dark === */ html.theme-mono.dark { --background: 0 0% 7%; --foreground: 0 0% 96%; --card: 0 0% 9%; --card-foreground: 0 0% 96%; --popover: 0 0% 9%; --popover-foreground: 0 0% 96%; --primary: 0 0% 96%; /* invert in dark so primary buttons stay visible */ --primary-foreground: 0 0% 11%; --secondary: 0 0% 14%; --secondary-foreground: 0 0% 96%; --muted: 0 0% 14%; --muted-foreground: 0 0% 64%; --accent: 0 0% 18%; --accent-foreground: 0 0% 96%; --destructive: 0 63% 45%; --destructive-foreground: 0 0% 98%; --border: 0 0% 18%; --input: 0 0% 18%; --ring: 0 0% 70%; } * { box-sizing: border-box; } html, body { height: 100%; } body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; background: hsl(var(--background)); color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; } /* ---------- Component classes ---------- */ .card { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1), border-color .2s; } .card:hover { border-color: hsl(var(--primary) / .35); box-shadow: 0 10px 30px -12px hsl(var(--primary) / .25); } .card-lift:hover { transform: translateY(-2px); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.25rem; padding: 0 1rem; border-radius: calc(var(--radius) - 2px); font-weight: 500; font-size: .875rem; border: 1px solid transparent; cursor: pointer; user-select: none; position: relative; overflow: hidden; transition: transform .15s, background-color .2s, box-shadow .2s, color .2s; } .btn:active { transform: scale(.97); } .btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; } .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 1px 0 hsl(0 0% 100% / .2) inset, 0 1px 2px hsl(var(--primary) / .4); } .btn-primary:hover { background: hsl(var(--primary) / .92); box-shadow: 0 4px 16px -4px hsl(var(--primary) / .55); } .btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); border-color: hsl(var(--border)); } .btn-secondary:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .btn-ghost { background: transparent; color: hsl(var(--foreground)); } .btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); } .btn-destructive:hover { background: hsl(var(--destructive) / .9); } .input { display: block; width: 100%; height: 2.25rem; padding: 0 .75rem; background: hsl(var(--background)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--input)); border-radius: calc(var(--radius) - 2px); font-size: .875rem; transition: border-color .2s, box-shadow .2s; } .input:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .2); } .badge { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; font-size: .75rem; font-weight: 500; border-radius: 9999px; border: 1px solid hsl(var(--border)); background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); transition: transform .15s, background-color .2s; } .badge:hover { transform: translateY(-1px); } .badge-primary { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); border-color: hsl(var(--primary) / .25); } .badge-success { background: hsl(var(--success) / .12); color: hsl(var(--success)); border-color: hsl(var(--success) / .25); } .badge-warning { background: hsl(var(--warning) / .12); color: hsl(var(--warning)); border-color: hsl(var(--warning) / .25); } .badge-destructive { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .25); } .kbd { font-family: ui-monospace, monospace; font-size: .7rem; padding: .1rem .4rem; border: 1px solid hsl(var(--border)); border-bottom-width: 2px; border-radius: .35rem; background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); } /* ---------- Sidebar / Topbar ---------- */ .sidebar { background: hsl(var(--card)); border-right: 1px solid hsl(var(--border)); } .nav-item { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: calc(var(--radius) - 2px); color: hsl(var(--muted-foreground)); font-size: .875rem; font-weight: 500; transition: background-color .2s, color .2s, transform .15s; position: relative; } .nav-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .nav-item.active { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .nav-item.active::before { content: ''; position: absolute; left: -.5rem; top: 20%; bottom: 20%; width: 3px; background: hsl(var(--primary)); border-radius: 2px; animation: slide-in .35s cubic-bezier(.2,.8,.2,1); } .topbar { background: hsl(var(--background) / .8); backdrop-filter: blur(10px); border-bottom: 1px solid hsl(var(--border)); } /* ---------- Animations ---------- */ @keyframes slide-in { from { transform: translateY(-50%) scaleY(0); opacity: 0; } to { transform: translateY(0) scaleY(1); opacity: 1; } } @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fade-up .45s cubic-bezier(.2,.8,.2,1) both; } .stagger > * { animation: fade-up .5s cubic-bezier(.2,.8,.2,1) both; } .stagger > *:nth-child(1) { animation-delay: .04s; } .stagger > *:nth-child(2) { animation-delay: .08s; } .stagger > *:nth-child(3) { animation-delay: .12s; } .stagger > *:nth-child(4) { animation-delay: .16s; } .stagger > *:nth-child(5) { animation-delay: .20s; } .stagger > *:nth-child(6) { animation-delay: .24s; } .stagger > *:nth-child(7) { animation-delay: .28s; } .stagger > *:nth-child(8) { animation-delay: .32s; } .stagger > *:nth-child(9) { animation-delay: .36s; } .stagger > *:nth-child(10) { animation-delay: .40s; } .stagger > *:nth-child(11) { animation-delay: .44s; } .stagger > *:nth-child(12) { animation-delay: .48s; } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 hsl(var(--success) / .6); } 50% { box-shadow: 0 0 0 6px hsl(var(--success) / 0); } } .pulse-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: hsl(var(--success)); animation: pulse-dot 1.8s infinite; } .pulse-dot.warn { background: hsl(var(--warning)); animation-name: pulse-dot-warn; } @keyframes pulse-dot-warn { 0%,100% { box-shadow: 0 0 0 0 hsl(var(--warning) / .6); } 50% { box-shadow: 0 0 0 6px hsl(var(--warning) / 0); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shimmer { background: linear-gradient(90deg, hsl(var(--primary) / .25) 0%, hsl(var(--primary) / .85) 50%, hsl(var(--primary) / .25) 100%); background-size: 200% 100%; animation: shimmer 2s linear infinite; } /* progress bar with shimmer */ .progress { height: .5rem; width: 100%; background: hsl(var(--muted)); border-radius: 9999px; overflow: hidden; } .progress > .bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, hsl(var(--primary) / .9), hsl(var(--primary))); position: relative; transition: width .4s cubic-bezier(.2,.8,.2,1); } .progress > .bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, hsl(0 0% 100% / .35) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; } /* counter pop */ @keyframes pop { 0% { transform: scale(.8); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } } .pop { animation: pop .45s cubic-bezier(.2,.8,.2,1) both; } /* dropzone */ .dropzone { border: 2px dashed hsl(var(--border)); border-radius: calc(var(--radius) + 4px); background: hsl(var(--card)); transition: border-color .25s, background-color .25s, transform .25s; } .dropzone:hover, .dropzone.is-dragover { border-color: hsl(var(--primary)); background: hsl(var(--accent)); transform: scale(1.005); } .dropzone .icon-wrap { transition: transform .35s cubic-bezier(.2,.8,.2,1); } .dropzone:hover .icon-wrap { transform: translateY(-3px) rotate(-3deg); } /* Toggle */ .switch { position: relative; width: 2.4rem; height: 1.35rem; background: hsl(var(--muted)); border-radius: 9999px; border: 1px solid hsl(var(--border)); transition: background-color .25s; cursor: pointer; flex-shrink: 0; } .switch::after { content: ''; position: absolute; top: 1px; left: 1px; width: 1.15rem; height: 1.15rem; background: white; border-radius: 9999px; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.2,.8,.2,1); } .switch.on { background: hsl(var(--primary)); border-color: hsl(var(--primary)); } .switch.on::after { transform: translateX(1.05rem); } /* tag pop-in */ @keyframes tag-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } } .tag-pop { animation: tag-pop .25s cubic-bezier(.2,.8,.2,1) both; } /* table row */ .row { transition: background-color .15s; } .row:hover { background: hsl(var(--accent) / .5); } /* skeleton */ .skeleton { background: linear-gradient(90deg, hsl(var(--muted)) 0%, hsl(var(--secondary)) 50%, hsl(var(--muted)) 100%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; border-radius: .5rem; } /* ring orbit (spinner) */ .spinner { width: 1rem; height: 1rem; border-radius: 9999px; border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--primary)); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* avatar */ .avatar { width: 2rem; height: 2rem; border-radius: 9999px; background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; flex-shrink: 0; border: 1px solid hsl(var(--border)); } /* Video card thumbnail hover */ .thumb { position: relative; aspect-ratio: 16/9; border-radius: calc(var(--radius) - 2px); overflow: hidden; background: hsl(var(--muted)); transition: transform .35s cubic-bezier(.2,.8,.2,1); } .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); } .video-card:hover .thumb img { transform: scale(1.06); } .video-card:hover .play-overlay { opacity: 1; } .play-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.6) 100%); opacity: 0; transition: opacity .25s; } .play-circle { width: 3rem; height: 3rem; border-radius: 9999px; background: hsl(var(--primary)); color: white; display: grid; place-items: center; box-shadow: 0 10px 30px -8px hsl(var(--primary)); transform: scale(.85); transition: transform .25s; } .video-card:hover .play-circle { transform: scale(1); } /* tooltip */ [data-tooltip] { position: relative; } [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: hsl(var(--foreground)); color: hsl(var(--background)); font-size: .7rem; padding: .25rem .5rem; border-radius: .35rem; white-space: nowrap; pointer-events: none; animation: fade-up .2s ease both; } /* Section divider gradient */ .divider-grad { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, hsl(var(--border)) 30%, hsl(var(--border)) 70%, transparent); } /* Brand mark */ .brand-mark { width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: linear-gradient(135deg, hsl(var(--primary)), hsl(180 60% 45%)); display: grid; place-items: center; color: white; box-shadow: 0 6px 20px -6px hsl(var(--primary) / .6); transition: transform .3s, background .3s, color .3s; } .brand-mark:hover { transform: rotate(-6deg) scale(1.05); } /* In Mono theme the wordmark-on-gradient looks washed out — flatten it */ html.theme-mono .brand-mark { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); } html.theme-mono.dark .brand-mark { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 6px 20px -8px hsl(0 0% 0% / .6); } /* "jU" wordmark used inside brand-mark */ .brand-mark .brand-letter { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1rem; line-height: 1; letter-spacing: -.04em; font-feature-settings: 'cv11'; } /* Scrollbar polish */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .5); } /* subtle grid background */ .bg-grid { background-image: radial-gradient(hsl(var(--border)) 1px, transparent 1px); background-size: 24px 24px; background-position: -10px -10px; }