mirror of
https://github.com/webadderallorg/Recordly.git
synced 2026-10-03 19:17:54 +00:00
webadderall
9a5ff5c0a2
- Replace all lucide-react imports with @phosphor-icons/react across every component (LaunchWindow, AnnotationSettingsPanel, ExtensionManager, ExtensionIcon, VideoPlayback, AnnotationOverlay, CropControl, TutorialHelp, PlaybackControls, all shadcn ui/ primitives, etc.) - ExtensionIcon: new Phosphor-based resolver with Lucide name alias map for backwards-compatible extension manifests - LaunchWindow / SourceSelector: full redesign — new icon rail layout, updated backgrounds, improved source selection UX, audio/video controls, countdown overlay - VideoPlayback: overhaul playback controls and preview panel layout - Timeline items: border-radius 16px→8px, cyan→blue unification, pill height 85% for breathing room, resize handle vertical centering - shadcn ui/: refresh accordion, dialog, dropdown, select, slider, switch, tabs, toggle, popover, button, card, input, label, sonner, content-clamp, audio-level-meter - App.tsx / index.css / App.css / tailwind.config: global style updates - types.ts, captionLayout.ts, captionStyle.ts, webcamOverlay.ts: data model updates to support new timeline and export features - package.json: add @phosphor-icons/react, bump dependencies - scripts/, .eslintrc, biome, tsconfig, vite.config: tooling alignment - extension-sources: update built-in extension bundles
75 lines
1.6 KiB
CSS
75 lines
1.6 KiB
CSS
.glassContainer {
|
|
background: linear-gradient(135deg, rgba(28, 28, 34, 0.92) 0%, rgba(18, 18, 22, 0.88) 100%);
|
|
backdrop-filter: blur(20px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
|
border-radius: 14px;
|
|
box-shadow:
|
|
0 4px 16px 0 rgba(0, 0, 0, 0.32),
|
|
0 1px 3px 0 rgba(0, 0, 0, 0.18) inset;
|
|
border: 1px solid rgba(60, 60, 80, 0.18);
|
|
}
|
|
|
|
.sourceCard {
|
|
border-radius: 10px;
|
|
background: linear-gradient(120deg, rgba(38, 38, 48, 0.98) 0%, rgba(24, 24, 32, 0.96) 100%);
|
|
border: 1px solid rgba(60, 60, 80, 0.22);
|
|
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
|
|
transition:
|
|
box-shadow 0.2s,
|
|
border 0.2s,
|
|
background 0.2s;
|
|
}
|
|
|
|
.selected {
|
|
border: 2px solid #2563eb;
|
|
background: linear-gradient(120deg, rgba(91, 33, 182, 0.18) 0%, rgba(38, 38, 48, 0.98) 100%);
|
|
box-shadow: 0 0 0 2px #2563eb33;
|
|
}
|
|
|
|
.icon {
|
|
width: 13px;
|
|
height: 13px;
|
|
color: #c7d2fe;
|
|
}
|
|
|
|
.name {
|
|
font-size: 0.85rem;
|
|
color: #f3f4f6;
|
|
font-weight: 500;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.cardText {
|
|
color: #a1a1aa;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* scrollbar */
|
|
.sourceGridScroll {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(37, 99, 235, 0.5) rgba(40, 40, 50, 0.6);
|
|
}
|
|
|
|
.sourceGridScroll::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.sourceGridScroll::-webkit-scrollbar-track {
|
|
background: rgba(30, 30, 38, 0.5);
|
|
border-radius: 4px;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.sourceGridScroll::-webkit-scrollbar-thumb {
|
|
background: rgba(80, 80, 100, 0.6);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.sourceGridScroll::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(37, 99, 235, 0.6);
|
|
}
|
|
|
|
.sourceGridScroll::-webkit-scrollbar-thumb:active {
|
|
background: rgba(37, 99, 235, 0.8);
|
|
}
|