huanld/openscreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

ui changes

Browse Source
This commit is contained in:
Siddharth
2025-11-16 01:43:24 -07:00
parent c080168fb5
commit 921ecebb1a
10 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/launch/SourceSelector.module.css
+2 -2
View File
@@ -17,9 +17,9 @@
}
.selected {
border: 2px solid #8b5cf6;
border: 2px solid #34B27B;
background: linear-gradient(120deg, rgba(91,33,182,0.18) 0%, rgba(38,38,48,0.98) 100%);
box-shadow: 0 0 0 2px #8b5cf633;
box-shadow: 0 0 0 2px #34B27B33;
}
.icon {
src/components/launch/SourceSelector.tsx
+4 -4
View File
@@ -72,8 +72,8 @@ export function SourceSelector() {
<div className="flex-1 flex flex-col w-full max-w-xl" style={{ padding: 0 }}>
<Tabs defaultValue="screens">
<TabsList className="grid grid-cols-2 mb-3 bg-zinc-900/40 rounded-full">
<TabsTrigger value="screens" className="data-[state=active]:bg-violet-700 data-[state=active]:text-white text-zinc-200 rounded-full text-xs py-1">Screens</TabsTrigger>
<TabsTrigger value="windows" className="data-[state=active]:bg-violet-700 data-[state=active]:text-white text-zinc-200 rounded-full text-xs py-1">Windows</TabsTrigger>
<TabsTrigger value="screens" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-zinc-200 rounded-full text-xs py-1">Screens</TabsTrigger>
<TabsTrigger value="windows" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-zinc-200 rounded-full text-xs py-1">Windows</TabsTrigger>
</TabsList>
<div className="h-60 flex flex-col justify-stretch">
<TabsContent value="screens" className="h-full">
@@ -94,7 +94,7 @@ export function SourceSelector() {
/>
{selectedSource?.id === source.id && (
<div className="absolute -top-1 -right-1">
<div className="w-4 h-4 bg-blue-600 rounded-full flex items-center justify-center shadow-md">
<div className="w-4 h-4 bg-[#34B27B] rounded-full flex items-center justify-center shadow-md">
<MdCheck className={styles.icon} />
</div>
</div>
@@ -153,7 +153,7 @@ export function SourceSelector() {
<div className="border-t border-zinc-800 p-2 w-full max-w-xl">
<div className="flex justify-center gap-2">
<Button variant="outline" onClick={() => window.close()} className="px-4 py-1 text-xs bg-zinc-800 border-zinc-700 text-zinc-200 hover:bg-zinc-700">Cancel</Button>
<Button onClick={handleShare} disabled={!selectedSource} className="px-4 py-1 text-xs bg-violet-700 text-white hover:bg-violet-800 disabled:opacity-50 disabled:bg-zinc-700">Share</Button>
<Button onClick={handleShare} disabled={!selectedSource} className="px-4 py-1 text-xs bg-[#34B27B] text-white hover:bg-[#34B27B]/80 disabled:opacity-50 disabled:bg-zinc-700">Share</Button>
</div>
</div>
</div>
src/components/ui/switch.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ const Switch = React.forwardRef<
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
"data-[state=checked]:bg-[#7c3aed] data-[state=unchecked]:bg-[#23232a]",
"data-[state=checked]:bg-[#34B27B] data-[state=unchecked]:bg-[#23232a]",
className
)}
{...props}
src/components/video-editor/PlaybackControls.tsx
+1 -1
View File
@@ -53,7 +53,7 @@ export default function PlaybackControls({
step="0.01"
className="flex-1 h-2 rounded-full transition-all duration-[33ms] custom-playback-range"
style={{
background: `linear-gradient(to right, #7c3aed 0%, #7c3aed ${(currentTime / duration) * 100}%, #23232a ${(currentTime / duration) * 100}%, #23232a 100%)`,
background: `linear-gradient(to right, #34B27B 0%, #34B27B ${(currentTime / duration) * 100}%, #23232a ${(currentTime / duration) * 100}%, #23232a 100%)`,
}}
/>
<span className="text-xs text-slate-400 font-mono">
src/components/video-editor/SettingsPanel.tsx
+10 -10
View File
@@ -88,8 +88,8 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
"duration-150 ease-in-out",
zoomEnabled ? "opacity-100" : "opacity-60",
isActive
? "border-[#7c3aed] bg-white text-black shadow-[#7c3aed]/20 scale-105"
: "border-[#23232a] bg-[#23232a] text-slate-200 hover:border-[#7c3aed] hover:scale-105"
? "border-[#34B27B] bg-white text-black shadow-[#34B27B]/20 scale-105"
: "border-[#23232a] bg-[#23232a] text-slate-200 hover:border-[#34B27B] hover:scale-105"
)}
style={isActive ? { background: '#fff', color: '#111' } : undefined}
>
@@ -106,7 +106,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
onClick={handleDeleteClick}
variant="destructive"
size="sm"
className="mt-3 w-full gap-2 bg-[#7c3aed] text-white border-none hover:bg-[#a78bfa]"
className="mt-3 w-full gap-2 bg-[#34B27B] text-white border-none hover:bg-[#34B27B]/80"
>
<Trash2 className="w-4 h-4" />
Delete Zoom
@@ -135,7 +135,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
<Button
onClick={() => setShowCropDropdown(!showCropDropdown)}
variant="outline"
className="w-full gap-2 bg-[#23232a] text-slate-200 border-none"
className="w-full gap-2 bg-[#23232a] text-slate-200 border-none hover:border-[#34B27B]"
>
<Crop className="w-4 h-4" />
Crop Video
@@ -148,7 +148,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
className="fixed inset-0 bg-black/80 backdrop-blur-sm z-40 animate-in fade-in duration-200"
onClick={() => setShowCropDropdown(false)}
/>
<div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 bg-[#23232a] rounded-2xl shadow-2xl border border-[#312e81] p-8 w-[90vw] max-w-5xl animate-in zoom-in-95 duration-200">
<div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 bg-[#23232a] rounded-2xl shadow-2xl border border-[#34B27B] p-8 w-[90vw] max-w-5xl animate-in zoom-in-95 duration-200">
<div className="flex items-center justify-between mb-6">
<div>
<span className="text-xl font-bold text-slate-200">Crop Video</span>
@@ -158,7 +158,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
variant="ghost"
size="icon"
onClick={() => setShowCropDropdown(false)}
className="hover:bg-[#312e81] text-slate-200"
className="hover:bg-[#34B27B]/20 text-slate-200"
>
<X className="w-5 h-5" />
</Button>
@@ -194,8 +194,8 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
className={cn(
"aspect-square rounded-lg border-2 overflow-hidden cursor-pointer transition-all w-16 h-16",
selected === path
? "border-[#7c3aed] ring-1 ring-[#7c3aed] scale-105"
: "border-[#23232a] hover:border-[#7c3aed] hover:scale-105"
? "border-[#34B27B] ring-1 ring-[#34B27B] scale-105"
: "border-[#23232a] hover:border-[#34B27B] hover:scale-105"
)}
style={{ backgroundImage: `url(${path})`, backgroundSize: "cover", backgroundPosition: "center" }}
aria-label={`Wallpaper ${idx + 1}`}
@@ -226,7 +226,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
key={g}
className={cn(
"aspect-square rounded-lg border-2 overflow-hidden cursor-pointer transition-all w-16 h-16",
gradient === g ? "border-[#7c3aed] ring-1 ring-[#7c3aed] scale-105" : "border-[#23232a] hover:border-[#7c3aed] hover:scale-105"
gradient === g ? "border-[#34B27B] ring-1 ring-[#34B27B] scale-105" : "border-[#23232a] hover:border-[#34B27B] hover:scale-105"
)}
style={{ background: g }}
aria-label={`Gradient ${idx + 1}`}
@@ -241,7 +241,7 @@ export function SettingsPanel({ selected, onWallpaperChange, selectedZoomDepth,
<Button
type="button"
size="lg"
className="w-full py-5 text-lg flex items-center justify-center gap-3 bg-[#7c3aed] text-white rounded-xl shadow-lg hover:bg-[#a78bfa] transition-all"
className="w-full py-5 text-lg flex items-center justify-center gap-3 bg-[#34B27B] text-white rounded-xl shadow-lg hover:bg-[#34B27B]/80 transition-all"
>
<Download className="w-6 h-6" />
<span className="text-lg">Export Video</span>
src/components/video-editor/timeline/Item.module.css
+1 -1
View File
@@ -1,6 +1,6 @@
.itemDark {
background: #23232a;
border: 1px solid #312e81;
border: 1px solid #34B27B;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
color: #e5e7eb;
src/components/video-editor/timeline/Item.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export default function Item({ id, span, rowId, isSelected = false, onSelect }:
"w-full overflow-hidden flex items-center justify-center transition-all duration-150 cursor-grab active:cursor-grabbing group relative",
glassStyles.glassPurple
)}
style={{ height: 60 }}
style={{ height: 48 }}
onClick={(event) => {
event.stopPropagation();
onSelect?.();
src/components/video-editor/timeline/ItemGlass.module.css
+3 -3
View File
@@ -2,9 +2,9 @@
position: relative;
border-radius: 12px;
-corner-smoothing: antialiased;
background: #7c3aed;
background: #34B27B;
border: none;
box-shadow: 0 2px 12px 0 rgba(88,36,204,0.14) inset, 0 2px 8px 0 rgba(0,0,0,0.10), 0 1px 6px 0 rgba(124,58,237,0.08);
box-shadow: 0 2px 12px 0 rgba(52,178,123,0.14) inset, 0 2px 8px 0 rgba(0,0,0,0.10), 0 1px 6px 0 rgba(52,178,123,0.08);
margin: 0 4px;
backdrop-filter: blur(2px) saturate(120%);
-webkit-backdrop-filter: blur(2px) saturate(120%);
@@ -13,7 +13,7 @@
.zoomEndCap {
position: absolute;
top: 0;
background: #361e5a;
background: #315d4a;
width: 18px;
height: 100%;
src/components/video-editor/timeline/TimelineEditor.tsx
+6 -6
View File
@@ -267,8 +267,8 @@ function TimelineAxis({
width: '5px',
height: '5px',
borderRadius: '50%',
backgroundColor: marker.time === currentTimeMs ? '#7c3aed' : '#94a3b8',
boxShadow: marker.time === currentTimeMs ? '0 0 4px #7c3aed55' : 'none',
backgroundColor: marker.time === currentTimeMs ? '#34B27B' : '#94a3b8',
boxShadow: marker.time === currentTimeMs ? '0 0 4px #34B27B55' : 'none',
marginRight: '5px',
marginTop: '2px',
transition: 'background 0.2s, box-shadow 0.2s',
@@ -277,10 +277,10 @@ function TimelineAxis({
<span
style={{
fontWeight: marker.time === currentTimeMs ? 700 : 500,
color: marker.time === currentTimeMs ? '#7c3aed' : '#94a3b8',
color: marker.time === currentTimeMs ? '#34B27B' : '#94a3b8',
fontSize: '11px',
letterSpacing: '-0.5px',
textShadow: marker.time === currentTimeMs ? '0 1px 6px #7c3aed33' : 'none',
textShadow: marker.time === currentTimeMs ? '0 1px 6px #34B27B33' : 'none',
marginTop: '2px',
}}
className="select-none"
@@ -486,12 +486,12 @@ export default function TimelineEditor({
<div className="flex-1" />
<div className="flex items-center gap-3 text-[10px] text-slate-400 font-medium">
<span className="flex items-center gap-1">
<kbd className="px-1.5 py-0.5 bg-[#23232a] border border-[#312e81] rounded text-slate-300">Command + Shift + Scroll</kbd>
<kbd className="px-1.5 py-0.5 bg-[#23232a] rounded text-slate-300">Command + Shift + Scroll</kbd>
<span>Pan</span>
</span>
<span className="text-slate-600">•</span>
<span className="flex items-center gap-1">
<kbd className="px-1.5 py-0.5 bg-[#23232a] border border-[#312e81] rounded text-slate-300">Command + Scroll</kbd>
<kbd className="px-1.5 py-0.5 bg-[#23232a] rounded text-slate-300">Command + Scroll</kbd>
<span>Zoom</span>
</span>
</div>
src/index.css
+2 -2
View File
@@ -98,7 +98,7 @@
background: #fff;
transform: scale(1.15);
box-shadow: 0 3px 10px rgba(255,255,255,0.5);
border-color: #7c3aed;
border-color: #34B27B;
}
input[type="range"]::-webkit-slider-thumb:active {
@@ -120,7 +120,7 @@
background: #fff;
transform: scale(1.15);
box-shadow: 0 3px 10px rgba(255,255,255,0.5);
border-color: #7c3aed;
border-color: #34B27B;
}
input[type="range"]::-moz-range-thumb:active {